Skip to content

Building your first social enabled jsp

Jump to bottom Edit New page
Lorenzo Boccaccia edited this page Apr 10, 2014 · 4 revisions

Pre-requisites

  1. Eclipse IDE for Java EE Developers (Kepler)

  2. The Eclipse Maven connector

Install it from the Help -> Install New Software... menu Install New Software menu page

  1. Apache Tomcat (7.0.50)

  2. Please set Java → Compiler → JDK Compliance Level: 1.6

Create a new Web Project

Launch Eclipse and open the "File->New->Project..." wizard

Select Maven Project

Maven Project wizard selection

In the "New Maven Project" wizard, select the archetype maven-archetype-webapp

Maven webapp archetype selection

insert a group and a name for your project, in this sample we used sbt:test

Entering the project properties

add the dependency to com.ibm.sbt.core in the pom.xml file from the pom editor

The pom.xml editor's dependency tab

Go to the pom.xml tab and in the source add this under the dependencies node:

    <dependency>
    	<groupId>com.ibm.sbt</groupId>
    	<artifactId>com.ibm.sbt.core</artifactId>
    	<version>1.0.1</version>
    </dependency>

Replace the WEB-INF/web.xml with this one, containing the required servlet configuration to handle authentication and context initialization:

<web-app id="WebApp_ID" version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  <display-name>Test Web Application</display-name>
  	<servlet>
		<description>The service servlet handles requests from the toolkit to access external resources.</description>
		<display-name>Social Business Toolkit Service Servlet</display-name>
		<servlet-name>ServiceServlet</servlet-name>
		<servlet-class>com.ibm.sbt.service.core.servlet.ServiceServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>ServiceServlet</servlet-name>
		<url-pattern>/service/*</url-pattern>
	</servlet-mapping>
	
	<servlet>
		<description>This servlet initializes the specified JavaScript library for use by the Social Business Toolkit.</description>
		<display-name>Social Business Toolkit Library Servlet</display-name>
		<servlet-name>LibraryServlet</servlet-name>
		<servlet-class>com.ibm.sbt.jslibrary.servlet.LibraryServlet</servlet-class>
		<init-param>
			<param-name>toolkitExtUrl</param-name>
			<param-value>%local_server%/sbtx</param-value>
		</init-param>
		<init-param>
			<param-name>jsLibraryUrl</param-name>
			<param-value>%local_server%/sbt/js/libs</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>LibraryServlet</servlet-name>
		<url-pattern>/library/*</url-pattern>
	</servlet-mapping>
		
	<filter>
		<description>This filter is responsible for creating the toolkit application and context objects for every servlet within this web application.</description>
		<display-name>Social Business Toolkit Filter</display-name>
		<filter-name>SBTFilter</filter-name>
		<filter-class>com.ibm.sbt.util.SBTFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>SBTFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
</web-app>

Configure the Social Business Toolkit

Create a managed-beans.xml file under WEB-INF

this files holds the definitions for the REST endpoints available to the toolkit

<?xml version="1.0"?>
<faces-config>
	<!-- Credential store physical implementation -->
	<managed-bean>
		<managed-bean-name>CredStore</managed-bean-name>
		<managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
		<managed-bean-scope>application</managed-bean-scope>
	</managed-bean>
	
	<!--  
		Password store based on DBCredentialStore
	-->
	<managed-bean>
		<managed-bean-name>CredStoreDB</managed-bean-name>
		<managed-bean-class>com.ibm.sbt.security.credential.store.DBCredentialStore</managed-bean-class>
		<!--  
			Managed Property jdbcDriverClass is required to provide the driver class name, when jndi is not being used.
			The Property can be provided in a way, mentioned below.
		-->
		<!-- <managed-property> 
			<property-name>jdbcDriverClass</property-name> 
			<value>org.apache.derby.jdbc.EmbeddedDriver</value> 
		</managed-property> -->
		<managed-property> 
			<property-name>jndiName</property-name> 
			<value>jdbc/ibmsbt-dbtokenstore</value> 
		</managed-property>
		<managed-property> 
			<property-name>tableName</property-name> 
			<value>SBTKREP</value> 
		</managed-property>
		<managed-bean-scope>application</managed-bean-scope>
		<!-- Fixed OAuth Application parameters -->
	</managed-bean>
	
	<!-- Default Environment -->
	<managed-bean>
		<managed-bean-name>defaultEnvironment</managed-bean-name>
		<managed-bean-class>com.ibm.sbt.jslibrary.SBTEnvironment</managed-bean-class>
		<managed-bean-scope>application</managed-bean-scope>
		<managed-property>
			<property-name>endpoints</property-name>
			<value>connections</value>
		</managed-property>
		<managed-property>
			<property-name>properties</property-name>
			<value>sample.email1,sample.email2</value>
		</managed-property>
		<managed-property>
		    <property-name>runtimes</property-name>
		    <value>connections</value>
		</managed-property>
	</managed-bean>

	<!-- Connections Basic -->
	<managed-bean>
		<managed-bean-name>connections</managed-bean-name>
		<managed-bean-class>com.ibm.sbt.services.endpoints.ConnectionsBasicEndpoint</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
		<managed-property>
			<property-name>url</property-name>
			<value>%{connections.url}</value>
		</managed-property>
		<managed-property>
			<property-name>apiVersion</property-name>
			<value>%{connections.apiVersion}</value>
		</managed-property>
		<managed-property>
			<property-name>credentialStore</property-name>
			<value>CredStore</value>
		</managed-property>
		<managed-property>
			<property-name>authenticationPage</property-name>
			<value>/test/loginForm.html?endpoint=connections</value>
		</managed-property>
		<managed-property>
			<property-name>authenticationService</property-name>
			<value>communities/service/atom/communities/my</value>
		</managed-property>
		<!-- Trust the connection -->
		<managed-property>
			<property-name>forceTrustSSLCertificate</property-name>
			<value>true</value>
		</managed-property>
		<managed-property>
			<property-name>forceDisableExpectedContinue</property-name>
			<value>true</value>
		</managed-property>
	</managed-bean>

  
</faces-config>

create a sbt.properties file in WEB-INF, add the property defined in the managed beans configured to suite your environment:

# IBM Social Business Toolkit Configuration

# Library Servlet Configuration
#clientProperties=
environments=Default:defaultEnvironment

# Connections Basic Endpoint Parameters
connections.url=https://qs.renovations.com:444
connections.authenticationPage=/test/loginForm.html?endpoint=connections
connections.authenticationService=communities/service/atom/communities/my
connections.apiVersion=4.0
connections.loginUrl=/test/loginForm.html?endpoint=connections

Add this authentication page to your project instead of creating one from scratch: It should match the page in the connections.loginUrl property, so name it loginForm.tml and place it beside the index.jsp page under webapp:

<html>
<head>
<title>Enter credentials to authenticate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function getArgsMap(){
		try{
			var qString = location.search.substring(1);//getting query string args
			var qStringParams=qString.split("&");//getting array of all query string arg key value pairs
			var agrsMap = {};
			for(i=0;i<qStringParams.length;i++){
					var argArray = qStringParams[i].split("=");
					agrsMap[argArray[0]] = argArray[1];
			}
			return agrsMap;
		}catch(err){
			console.log("Error making agrs map in login.js "+err);
		}
	}
</script>
</head>
<script language="javascript">
		function setProxyPath(){
				var argsMap = getArgsMap();//get map of query string arguments
				// decode the url parameters
				var redirectURL = unescape(argsMap.redirectURL);
				var proxyPath = unescape(argsMap.proxyPath);
				document.getElementById("redirectURL").value = redirectURL;
				document.getElementById("ibmsbt.loginActionForm").action = proxyPath;
		}
		function cancelOnClick() {
			var argsMap = getArgsMap();//get map of query string arguments
			// decode the url parameters
			var redirectURL = unescape(argsMap.redirectURL);
			var homeUrl = redirectURL.substring(0,redirectURL.indexOf("javaSamples.jsp"));
			window.location.href=homeUrl;

		}
	</script>
<body>
	<form name="loginForm" id="ibmsbt.loginActionForm" method="post">
		<table>
			<tr>
				<td colspan=2><label id="wrongCredsMessage"
					style="color: red; display: none;"> Your user name and/or password does not match any existing accounts. Please try again. </label></td>
			</tr>
			<tr>
				<td width="40">Username: </td>
				<td><input type="text" name="username" size="20"></td>
			</tr>
			<tr>
				<td width="40">Password: </td>
				<td><input type="password" name="password" size="20"></td>
			</tr>
			<tr>
				<td><input type="hidden" name="redirectURL" id="redirectURL"
					size="20"></td>
			</tr>
			<tr>
				<td colspan=2>
					<input type="submit" value="OK" name="submitBtn" onclick="javascript:setProxyPath()">
					<input type='button' onClick='cancelOnClick()' value='Cancel'/>
				</td>
			</tr>
		</table>
	</form>
	<script language="javascript">
		function showMsg() {
			var argsMap = getArgsMap();//get map of query string arguments
			// decode the url parameters
			var redirectURL = unescape(argsMap.redirectURL);
			var msg = redirectURL.substring(redirectURL
					.indexOf("showWrongCredsMessage=")
					+ "showWrongCredsMessage=".length);

			if (msg == "true") {
				document.getElementById("wrongCredsMessage").style.display = "block";
			}

		}
		showMsg();
	</script>
</body>
</html>

Share Connections content from a jsp

Now everything is in place to start using the Social Business Toolkit. Edit your jsp 'index.jsp' and start adding Social features:

<%@page import="java.io.PrintWriter"%>
<%@page import="com.ibm.commons.runtime.Application"%>
<%@page import="com.ibm.commons.runtime.Context"%>
<%@page import="com.ibm.sbt.services.client.connections.communities.CommunityService"%>
<%@page import="com.ibm.sbt.services.client.connections.communities.Community"%>
<%@page import="com.ibm.sbt.services.client.connections.communities.CommunityList"%>
<%@page import="java.util.*"%>
<html>
<body>
<h2>My Communities!</h2>


	<div id="content">
	<%
		try {
			CommunityService svc = new CommunityService();
			Map<String, String> parameters = new HashMap<String, String>();
			parameters.put("ps", "5");
			CommunityList communities = svc.getMyCommunities(parameters);
			out.println("<br>Listing my communities , Total communities found : "+communities.getTotalResults());
			out.println("<br>");
			for (Community community : communities) {
					out.println("<b>Name : </b> " + community.getTitle());
					out.println("<br>");
			}
		} catch (Throwable e) {
			out.println("<pre>");
			out.println("Problem Occurred while fetching my communities: " + e.getMessage());
			out.println("</pre>");
		}
	%>
	</div>
</body>
</html>

Deploy the application to Tomcat

  1. Switch to the "Java EE" perspective

  2. Open the Servers view

  3. Click the link to create a new server

  4. Create an Tomcat v7.0 Server using your locally install Apache Tomcat

  5. Open the newly create server in the Project Explorer view

  6. Right click on Server and use Add and Remove to add the 'test' projects to Tomcat server

  7. Start Tomcat

  8. Open browser and navigate to: http://localhost:8080/test/

  9. You will be prompted to log on using your Connections credentials

Add a custom footer
Add a custom sidebar
Clone this wiki locally