You are on page 1of 102

Customizing the InfoCenter UI

InQuira, Inc. Confidential

version 8.1.2.3

DDMMMYY

Do Not Distribute

Page 1

12/16/2009

Introductions
Name Company Job Responsibilities Industry Experience InQuira Experience Goals and Expectations

Do Not Distribute

Page 2

12/16/2009

Objectives
Review JSP technology Provide an overview of InfoCenter web application Review sitemap pages and templating with tag library Discuss components and how content is accessed Discuss form handling and the use of custom JSP pages Apply techniques during workshop session

Do Not Distribute

Page 3

12/16/2009

Agenda
Day 1

JSP Technology Overview of InfoCenter Development Page Layout Page Components Custom Pages Custom Forms

Day 2

Workshop

Do Not Distribute

Page 4

12/16/2009

Unit 1
JSP Technology

InQuira, Inc. Confidential

version 8.1.2.3

DDMMMYY

Do Not Distribute

Page 5

12/16/2009

InfoCenter Described

Information Center (InfoCenter) is a web application implemented with JavaServer Page technology that comes OOB with Information Manager. Once deployed, InfoCenter can act as a user interface to the documents created with Information Manager. InfoCenter can also be integrated with InQuira's Intelligent Search, creating a single point of contact for both content delivery and enterprise search.

Do Not Distribute

Page 6

12/16/2009

Overview of JSP Technology


Enables rapid development of Web-based applications Separates user interface from content generation Uses XML-like tags that encapsulate the logic that

generates page content


Is an extension of the Java Servlet technology

JavaServer Pages (JSP) technology enables developers to build and maintain dynamic web pages. JSP technology enables rapid development of Web-based applications that are platform independent. JSP technology separates the user interface from content generation, enabling designers to change the overall page layout without altering the underlying dynamic content.

JSP technology uses XML-like tags that encapsulate the logic generating the content for the page. Any and all formatting (HTML or XML) tags are passed directly back to the response page. JSP separates the page logic from its design and display and supports a reusable component-based design.

JavaServer Pages technology is an extension of the Java Servlet technology. Servlets are

Do Not Distribute

Page 7

12/16/2009

platform-independent, server-side modules that are used to extend the capabilities of a Web server. Unlike other scripting languages, servlets involve no platform-specific consideration or modifications; they are application components that are downloaded, on demand, to the part of the system that needs them. JSP technology and servlets provide platform independence, enhanced performance, separation of logic from display, ease of administration, and most importantly, ease of use.

Do Not Distribute

Page 8

12/16/2009

JSP Life-cycle

Source: http://www.onjava.com/pub/a/onjava/excerpt/jsp2_3/index2.html

A JSP page is first converted into a Servlet and then that Servlet gets compiled and executed. The translation of a JSP page into the corresponding Servlet is done by the JSP Engine of the underlying Web Container.

The entire life cycle of a typical JSP page can be summarized as the following phases:-

Translation - In the Translation phase, the JSP page is translated into the corresponding Servlet. This translated Servlet is different from a normal Servlet only in the sense that it implements the interface javax.servlet.jsp.HttpJspPage. This HttpJspPage is just a wrapper of the Servlet interface as HttpJspPage interface extends the JspPage interafce and the JspPage interface extends the javax.servlet.Servlet interface. Tthe translated Servlet also internally implements the javax.servlet.Servlet interface (otherwise we would

Do Not Distribute

Page 9

12/16/2009

not have called it a servlet). In addition it implements few more interfaces to support the JSP technology.

Compilation - Once the JSP page has been translated into the corresponding Servlet, the next obvious step is to compile that Servlet.

Loading & Instantiation - As with any compiled class (.class file), the servlet class also needs to be loaded into memory before being used. The default classloader of the Web Conatiner will loads this class. Once the class is loaded, an instance of this class gets created. The JspPage interaface contains the jspInit() method, which is used by the JSP Engine to initialize the newly created instance. This jspInit() method is just like the init() method of the Servlet and it's called only once during the entire life cycle of a JSP/Servlet.

Servicing Requests - _jspService() is the method which is called every time the JSP is requested to serve a request. This method normally executes in a separate thread of execution (provided we have selected Single Thread Model for the JSP) and the main JSP thread keeps waiting for other incoming requests. Every time a request arrives, the main JSP thread spawns a new thread and passes the request (incoming request) and response (new) objects to the _jspService() method which gets executed in the newly spawned thread.

Unloading - jspDestroy() method is called (almost always by the Web Container) before the Web Container unloads the JSP instance. We normally keep code responsible for resource-reclaimation or clean-up activities in this method. After the execution of the jspDestroy() method, the JSP instance is marked for the garbage collection and the occupied memory is eventually reclaimed.

Do Not Distribute

Page 10

12/16/2009

Custom Tag Libraries in JSP


Java programmer writes code providing data access and other services JSP author doesn't have to understand underlying logic to use action Tag library is a collection of custom actions presented as tags.

Custom tags can be customized via attributes passed from the calling page, either staticly or determined at runtime; have access to all the objects available to JSP pages including request, response, in and out; modify the response generated by the calling page; communicate with each other; you can create and initialize a JavaBeans component, create a variable that refers to that bean in one tag, and then use the bean in another tag; be nested within one another, allowing for complex interactions within a JSP page; and

Do Not Distribute

Page 11

12/16/2009

encapsulate both simple and complex behaviors in an easy to use syntax and greatly simplify the readability of JSP pages.

Do Not Distribute

Page 12

12/16/2009

JSP Elements
Directive
<%@ directive { attr=value }* %>

Scripting
<%! String msg=Hello World ; %> <% int I = 42; %> <%= msg %>

Action
<jsp: > <IM: />

Directive elements The directive elements specify information about the page itself that remains the same between requests--for example, if session tracking is required or not, buffering requirements, and the name of a page that should be used to report errors, if any.
Element <%@ page ... %> Description Defines page-dependent attributes, such as session tracking, error page, and buffering requirements <%@ include ... %> <%@ taglib ... %> Includes a file during the translation phase Declares a tag library, containing custom actions, that is used in the page

Scripting Elements Scripting elements allow you to add small pieces of code (typically Java code) in a JSP page, such as an if statement to generate different HTML depending on a certain condition. Like actions, they are also executed when the page is requested. You should Do Not Distribute Page 13 12/16/2009

use scripting elements with extreme care: if you embed too much code in your JSP pages, you will end up with the same kind of maintenance problems as with servlets embedding HTML.
Element <% ... %> <%= ... %> Description Scriptlet, used to embed scripting code. Expression, used to embed scripting code expressions when the result shall be added to the response. Also used as request-time action attribute values. <%! ... %> Declaration, used to declare instance variables and methods in the JSP page implementation class.

Action elements Action elements typically perform some action based on information that is required at the exact time the JSP page is requested by a browser. An action can, for instance, access parameters sent with the request to do a database lookup. It can also dynamically generate HTML, such as a table filled with information retrieved from an external system. In addition to the standard actions, the JSP specification includes a Java API a programmer can use to develop custom actions to extend the JSP language. The JSP Standard Tag Library (JSTL) is such an extension, with the special status of being defined by a formal specification from Sun and typically bundled with the JSP container. JSTL contains action elements for processes needed in most JSP applications, such as conditional processing, database access, internationalization, and more.

Do Not Distribute

Page 14

12/16/2009

Sample JSP Page


<%@ taglib uri="/myCustomTags.tld" prefix="sample" %> <html> <head> <title>Your Standard Hello World Demo</title> </head> <body bgcolor="#ffffff"> <hr /> <sample:hello name="Sue"/> <hr /> </body> </html>

Do Not Distribute

Page 15

12/16/2009

JSP Development with Eclipse IDE


Integrated Development Environment for Java language* Provides JSP coding and runtime environment for

dynamic web projects


Automated publication of JSP pages Code completion for custom actions

Open source software with large developer community!

Do Not Distribute

Page 16

12/16/2009

Activity
Setup InfoCenter dynamic web project

in Eclipse

Do Not Distribute

Page 17

12/16/2009

Setting up a development environment with Eclipse IDE


Stop InQuira IM service 1. Go to the indexers ICE prompt and at the console type in the following: inquiraim stop Launch Eclipse and open the Workbench 2. Open Eclipse IDE at Start//eclipse. 3. Use the default workspace at C:\Documents and Settings\training\workspace and click OK. After Eclipse launches, click on the icon on the middle-right of the Welcome screen. It looks like a curled arrow, pointing downwards. This will launch the Workbench.

4.

Create a new Dynamic Web Project 5. Right click in the Project Explorer tab on the left hand side of the screen and select NewDynamic Web Project a. For the Project name, enter InfoCenter. b. For the Project content directory, leave the check box next to Use default selected. The default directory should be C:\Documents and Settings\training\workspace\InfoCenter. c. For the Target Runtime, click the New button. d. For New Server Runtime Environment, choose Apache Tomcat v5.5, check the box to create a new local server, and then click Next. e. For the Tomcat Server, the Tomcat installation directory, browse to C:\InQuira_8.1.2.5\instances\InQuiraBank\appserverim. i. For the JRE, click on the Installed JREs button. ii. Click the Add button and choose Standard VM from the list, then click Next. iii. For the JRE Definition window, the JRE Home, click on the Directory button and browse to C:\InQuira_8.1.2.5\jre, then click Finish. iv. Back at the Installed JREs window, check the JRE you just added to the list and click OK.

Do Not Distribute

Page 18

12/16/2009

f. Back at the Tomcat Server window, select InQuira_8.1.2.5 from the JRE dropdown list, then click Finish. 6. 7. Back at the Dynamic Web Project window, click Next. For the Context Root, leave the default. It should be InfoCenter. Click Finish.

Copy the content of your InfoCenter webapp into the WebContent directory of your Eclipse project 8. Open Windows Explorer and go to the following directory: C:\InQuira_8.1.2.5\instances\InQuiraBank\appserverim \webapps\InQuiraBank a. Select the contents of this directory and drag it into the WebContent directory within the Project Explorer of Eclipse. b. When prompted, click Yes to overwrite the WEB-INF directory. Add external libraries to the Java Build Path 9. Right click on the InfoCenter project in Project Explorer and select Properties. 10. From the Properties window, select Java Build Path on the left hand side. a. Select the Libraries tab. i. Click on the Add Library button. 1. From the list, select User Library and click Next. 2. Click on the User Libraries button and then click on the New button. 3. For the name of the library, enter TLD Library, then click OK. ii. Select the library use just added, and click on the Add JARs button. 1. Navigate to the following directory: C:\InQuira_8.1.2.5\instances\InQuiraBank\appserverim \webapps\InQuiraBank\WEB-INF\tlds 2. In the File name text field, enter *.* and hit Enter. Two tlds should display. 3. Select both tld files and click Open.

Do Not Distribute

Page 19

12/16/2009

iii. Back at the User Library window, click OK, then Finish. iv. Back at the Java Build Path window, click on Add External JARs. 1. Navigate to the following directory: C:\InQuira_8.1.2.5\inquira\lib. 2. You will see 3 folders in this directory. For each folder here, you want to add all the jar files you find within those folders. You will not be able to add the folders themselves, so you will need to click on the Add External JARs button several times and add all the jar files manually. Some of these folders have sub folders. Youll need to add the jar files you find there as well. b. Back at the Java Build Path, click OK. Set JVM arguments for the Tomcat server 11. Double click on the server name in the Server tab. The Server tab is located in the lower portion of the Workbench window. a. In the General Information area, expand the Timeouts section and change the startup to 120 seconds. b. Select the link called Open launch configuration. c. Click on the Arguments tab. i. In the VM arguments text area, go to the end of the text and append the following text to the end (lines breaks are not necessary):
-DJAVA_HOME=C:\InQuira_8.1.2.5\jre -DIM_HOME=C:\InQuira_8.1.2.5\InfoManager -Xmx1024M

ii. After youve added the arguments, click Apply, then OK. d. Close the Server configuration tabbed window (it reads Tomcat v5.5 Server at localhost) by clicking on the X and when prompted save the configuration.

Do Not Distribute

Page 20

12/16/2009

Add the InfoCenter project to the Tomcat server 12. Go to the Project Explorer, grab the InfoCenter project, and drag it onto the server within the Servers tab, which is in the lower portion of the Workbench. Run the InfoCenter project with the Tomcat server 13. In the Server view, right click the Tomcat server and select Start. 14. Once the Tomcat server is started, you will see the Status column in the Servers tab report Started. Open a browser and go to the following url: http://localhost:8226/InfoCenter. If everything is working, you should see the default InfoCenter page.

15. 16.

Turn on line numbering 17. On the menu bar, select Window then Preferences. 18. 19. Expand General, then expand Editors, and then select Text Editors. Check the Show line numbers box and then click OK.

Do Not Distribute

Page 21

12/16/2009

Add log4j debugging


1. 2. Open Windows Explorer and go to the following directory: a. C:\InQuira_8.1.2.5\InfoManager\config\INQUIRABANK Create the following text file in this directory (make sure to remove the .txt file extension): a. log4j.properties Open log4j.properties in TextPad and add the following single line of text: a. log4j.logger.com.inquira=DEBUG,EVENTLOGGER Save log4j.properties

3. 4.

Do Not Distribute

Page 22

12/16/2009

Unit 2
Overview of InfoCenter Web Application

InQuira, Inc. Confidential

version 8.1.2.3

DDMMMYY

Do Not Distribute

Page 23

12/16/2009

Objectives
Application structure Original JSP pages Sitemap /custom directory Configuration.get_var_ForKey() get.localized.text custom.css

Do Not Distribute

Page 24

12/16/2009

InfoCenter

Do Not Distribute

Page 25

12/16/2009

Application Structure
Original JSP pages

/apps/infocenter/system/*

Custom JSP pages


/apps/infocenter/custom/*

Resources

/apps/infocenter/resources/*

Properties and localization


/WEB-INF/*

Do Not Distribute

Page 26

12/16/2009

Original JSP Pages


/components/*

Page components c_XXX.jsp Page interfaces i_XXX.jsp Scriptlets m_XXX.jsp

/methods/* /pages/*

Sitemap pages p_XXX.jsp Page templates t_XXX.jsp

/templates/*

Do Not Distribute

Page 27

12/16/2009

Sitemap

The Sitemap displays where the page being requested is located in the application. Pages are added to the sitemap list through a tag library call: <IM:sitemap pagename=[page_name]"/>

Do Not Distribute

Page 28

12/16/2009

/custom/* directory
Same top-level directory structure as /system/ Customized JSP pages copied to this location Update /WEB-INF/infocenter.properties to refer to path

Do Not Distribute

Page 29

12/16/2009

Configuration.get_var_ForKey() infocenter.properties
<%@ page import="com.inquira.client.configuration.Configuration" %><%@ taglib uri="/IMTaglib" prefix="IM" %><IM:sitemap pagename="home" default="y" /><% String strBody = Configuration.getStringForKey("homeBody"); // if this is being viewed within a CRM, switch to CCA template String strTemplate = Configuration.getStringForKey("masterTemplate"); } %><%@ include file="/apps/infocenter/system/components/content/c_views.jsp"%> <IM:template.definition template="<%= strTemplate %>"> <IM:template.put name="title" content="<%=Configuration.getStringForKey("companyName")%>" direct="true"/> <IM:template.put name="header" content="<%=Configuration.getStringForKey("defaultHeaderClass")%>" /> <IM:template.put name="advertisement" content="<%=Configuration.getStringForKey("defaultAdvertisementClass")%>" /> <IM:template.put name="topNav" content="<%=Configuration.getStringForKey("topNavigationClass")%>" /> <IM:template.put name="centercolumn" content="<%=strBody%>" /> <IM:template.put name="rightcolumn" content="<%=Configuration.getStringForKey("homeRightColumn")%>" /> <IM:template.put name="footer" content="<%=Configuration.getStringForKey("defaultFooterClass")%>" /> <IM:template.put name="bottomNav" content="<%=Configuration.getStringForKey("bottomNavigationClass")%>" /> </IM:template.definition>

[ACTIVITY] Open infocenter.properties in /WEB-INF. Use Ctrl + F and find the string homeBody. To what path is the variable pointing?

Do Not Distribute

Page 30

12/16/2009

get.localized.text ApplicationResources.properties
function toggleLocaleSelect(){ var localeSelDiv = document.getElementById('locale_selection_div'); if (localeSelDiv.style.display == 'none') { localeSelDiv.style.display = 'block'; } else { localeSelDiv.style.display = 'none'; } } </script> <div class="node"> <h1><IM:get.localized.text key="Userbox.welcome"/></h1> <%@ include file="/apps/infocenter/system/components/i_actions.jsp" %><% if(showAlerts){ int numMaxAlerts = Configuration.getIntForKey("numberOfAlertsToShow"); int numMaxDisp = numMaxAlerts; boolean binMoreAlerts = false; boolean binMorePresent = false; try { binMoreAlerts = Configuration.getBooleanForKey("alertsLinkDisplay"); } catch (Exception E) {} if(binMoreAlerts) { numMaxAlerts=0; }

[ACTIVITY] Open ApplicationResources.properties in /WEB-INF/classes. Use Ctrl + F and find the string Userbox.welcome. What is the text that this variable resolves to?

Do Not Distribute

Page 31

12/16/2009

custom.css
Language that defines layout of HTML documents Overrides selectors in default CSS files

infocenter.css

Map cssCustom variable to path in infocenter.properties

Do Not Distribute

Page 32

12/16/2009

Activity
Change logo Change alternating row colors for lists

Do Not Distribute

Page 33

12/16/2009

Change header logo on InfoCenter home page


1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Get a logo image from a website and save it to your Desktop. Add the image to the following directory in the Project Explorer: a. InfoCenter>WebContent>apps>infocenter>resources>images Open infocenter.css from the following directory in the Project Explorer: a. InfoCenter>WebContent>apps>infocenter>resources>css Create a custom.css file in the same directory. In infocenter.css, find (Ctrl and F) the .header class. Copy the entire class and paste it into custom.css Edit the background attribute of the .header class to read the following: a. #527DBD url(../images/[image_file]) no-repeat top left; Save custom.css (Ctrl and S). Go to InfoCenter>WebContent>WEB-INF in the Project Explorer and open infocenter.properties. Find the cssCustom variable and enter the following after the equals (=) sign: a. apps/infocenter/resources/css/custom.css Save infocenter.properties. Start the Tomcat server in Eclipse if it is not already started. Open a browser and go to the following url: a. http://localhost:8226/InfoCenter

Do Not Distribute

Page 34

12/16/2009

Change alternating row colors for .im-table CSS class


1. 2. 3. 4. 5. 6. 7. 8. Open forums.css. Find the class .im-table .im-odd. Copy the class. Open custom.css. Paste the class. Change the background-color attribute to #feedfe. Save custom.css Open a browser and go to the following url: a. http://localhost:8226/InfoCenter

Do Not Distribute

Page 35

12/16/2009

Unit 3
Sitemap Pages and Templates

InQuira, Inc. Confidential

version 8.1.2.3

DDMMMYY

Do Not Distribute

Page 36

12/16/2009

Objectives
<IM:sitemap /> Sitemap Pages How Templates Work template.get template.definition template.put

Do Not Distribute

Page 37

12/16/2009

<IM:sitemap />
Creates sitemap entry used to specify security and login

requirements for a page


Provides:

mechanism to protect underlying structure of site concise URL for bookmarking

Required only for JSP pages that are not components of

other pages

Do Not Distribute

Page 38

12/16/2009

Sitemap Pages

/content/* /contribute/* /dataforms/* /forums/* /home/* /linkcase/* /mailpage/* /recommend/* /rss/* /searchresults/* /user/*

Do Not Distribute

Page 39

12/16/2009

How Templates Work


1 2 <IM:template.get name=centercolumn />

<IM:template.definition />

p_XXX.jsp

t_XXX.jsp

c_XXX.jsp

<IM:template.put name=centercolumn content= />

[ACTIVITY] Open p_home.jsp Using infocenter.properties, identify the file that masterTemplate resolves to.

Do Not Distribute

Page 40

12/16/2009

template.get
Gets a template definition entry for content Format

<IM:template.get name="string ></IM:template.get >

(Required) Name of template entry

Do Not Distribute

Page 41

12/16/2009

template.definition
Creates a template definition Format

<IM:template.defintion (Required) Sitemap name for template to use template = string ></IM:template.definition >

Do Not Distribute

Page 42

12/16/2009

template.put

Gets a template definition entry for content Format


<IM:template.put name="string" direct="string" content="string" ></IM:template.put >

(Required) Sitemap name that template will use.

Specifies whether to include code as JSP or as part of template.

(Required) JSP file include or HTML to use for template.

Do Not Distribute

Page 43

12/16/2009

Activity
Add Popular Article list to c_home.jsp Create a 3 column layout template

Do Not Distribute

Page 44

12/16/2009

Add Popular Articles to c_home.jsp


1. Copy c_home.jsp in system>pages>home directory and paste into custom>pages>home (you may need to create the home directory in the Project Explorer). Open c_home.jsp in custom>pages>home. Copy lines 170 and 171, create a new blank line on 172(preserve the existing tag), and paste the copied lines onto line 172. The code should look like the picture below:

2. 3. 4.

5. 6. 7. 8. 9. 10. 11.

12.

For lines 169, 171 and 173, change the width attribute to 33%. Save c_home.jsp. Go to infocenter.properties. Find the homeBody key. Change the value to point to c_home.jsp in the custom>pages>home directory. Save inforcenter.properties. Restart the Tomcat server by going to the Console tab and clicking on the red box icon (stop) and then going to the Servers tab, selecting the Tomcat server, and clicking on the green arrow icon (start). Open a browser and go to the following url: a. http://localhost:8226/InfoCenter

Do Not Distribute

Page 45

12/16/2009

Change masterTemplate to 3 column layout


1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Copy t_sample2col.jsp from system>templates and paste it into custom>templates. Rename the file you just pasted to t_sample3col.jsp. On line 120 of that jsp, copy everything from the beginning of the opening <td> to the closing </td> tags. Near the end of line 120, put your text cursor in front of the <%}%> tag, and hit Enter to create a new line in front of this tag. On line 121, paste what you copied from line 120 (make sure you paste it in front of the <%}%> tag). Back on line 120, find the following tag library call: a. <IM:template.get name=rightcolumn/> Change rightcolumn to rightcolumn2. On line 123, change colspan to 3. On line 126, change colspan to 3. The code should look like the picture below:

11. 12. 13. 14.

15. 16. 17. 18. 19. 20. 21.

Save t_sample3col.jsp. Copy p_home.jsp from system>pages>home and paste it into custom>pages>home. On line 19 of that jsp, place your text cursor at the end of the line and hit Enter to create a new line. On line 20, enter the following (the whole thing should go on 1 line): a. <IM:template.put name=rightcolumn2 content=<%=Configuration.getStringForKey(homeRightColumn)%> /> Save p_home.jsp. Open infocenter.properties. Find the key masterTemplate. Change the value of the key to the following: a. /apps/infocenter/custom/templates/t_sample3col.jsp Save infocenter.properties. Restart the Tomcat server. Open a browser and go to the following url: a. http://localhost:8226/InfoCenter

Do Not Distribute

Page 46

12/16/2009

Unit 4
Components and Accessing Content

InQuira, Inc. Confidential

version 8.1.2.3

DDMMMYY

Do Not Distribute

Page 47

12/16/2009

Objectives
Components Content Access and Iteration get.content.data iterate.dataset get.content.record

Do Not Distribute

Page 48

12/16/2009

Components

/categories/ /content/ /contribution/ /dataforms/ /discussions/ /forums/ /ratings/ /recommend/ /search/ /security/ /subcriptions/ /user/

[ACTIVITY] Identify the jsp page that renders the Recent Articles list on the InfoCenter home page

Do Not Distribute

Page 49

12/16/2009

Content Access and Iteration


<IM:get.content.data dataset="rsData" /> <IM:iterate.dataset dataset="rsData" id="itData"> <IM:get.content.record id="crData" > </IM:get.content.record> </IM:iterate.dataset>

Do Not Distribute

Page 50

12/16/2009

get.content.data
Retrieves a list of content records using a JDBC

Connection pool
Format

<IM:get.content.data dataset=string channel=string />


(Required) Unique identifier for the data set

(Required) Content channel where desired content records are located

Do Not Distribute

Page 51

12/16/2009

iterate.dataset
Iterates over a list of records returned in the specified

data set
Format

<IM:iterate.dataset
dataset="string id=string ></IM:iterate.dataset >
(Required) specifies data set containing record

Specifies prefix for scripting variables created by tag. Each ID must be unique. No default ID

Do Not Distribute

Page 52

12/16/2009

get.content.record

Retrieves a content record from an iteration Several scripting variables Requires parent tag: iterate.dataset Format

<IM:get.content.record id="string

Specifies prefix to use for scripting vars created by tag. Each id must be unique. There is no default id.

></IM:get.content.record >

Do Not Distribute

Page 53

12/16/2009

Activity
Add Popular Articles list to homerightcolumn2 Add Branch Info list to c_rightcolumn2.jsp

Do Not Distribute

Page 54

12/16/2009

Add Popular Articles to homerightcolumn2


1. 2. 3. 4. 5. Copy c_rightcolumn.jsp from system>pages>home and paste it into custom>pages>home. Rename the jsp to c_rightcolumn2.jsp. Open c_rightcolumn2.jsp. Highlight everything after line 1 and delete. Enter the following on line 2 (keep it all on one line): a. <jsp:include page="/apps/infocenter/system/components/content/c_pop.jsp" flush="false" /> Save c_rightcolumn2.jsp. Go to infocenter.properties. Add the key homeRightColumn2 and set the value to the following: a. /apps/infocenter/custom/pages/home/c_rightcolumn2.jsp Open p_home.jsp, go to line 20, and change the content attribute to the following: a. content="<%=Configuration.getStringForKey("homeRightColumn2")%>" Restart the Tomcat server (Stop in Console, Start in Servers). Open a browser and go to http://localhost:8226/InfoCenter.

6. 7. 8. 9.

10. 11.

Do Not Distribute

Page 55

12/16/2009

Add Branch Info list to c_rightcolumn2.jsp


1. Open infocenter.properties and add the following at the bottom of the file on a new line: a. channelForBranch_Info=BRANCH_INFO Open c_rightcolumn2.jsp in custom>home>pages. Go to line 4, and add the following line of code: a. <IM:get.content.data dataset=rsData channel= <%=Configuration.getStringForKey(channelForBranch_Info)%> sortby= INDEXMASTERIDENTIFIERS direction= desc /> Open c_pop.jsp in system>components>content. Copy everything from the beginning of the opening <table> tag on line 21 to the end of the closing </table> tag on line 61. Go back to c_rightcolumn2.jsp and paste the code you just copied on line 5. Delete everything from line 9s opening <THEAD> tag to the closing </THEAD> tag on line 15. On line 6, find the following tag: a. <IM:get.localized.text key="Pop.popularArt"/> Delete the tag and replace it with the following string: a. Branch Information Delete lines 17 through 28. For the remaining <TD> tag on line 17, remove the width attribute and value. On line 18, remove the following string from the <a href> tag: a. &actp=LIST_POPULAR Your code should look like the following:

2. 3.

4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

14.

Restart the Tomcat server.

Do Not Distribute

Page 56

12/16/2009

15.

Go to the http://localhost:8226/InfoCenter.

Do Not Distribute

Page 57

12/16/2009

Unit 5
Form Handling and Custom Pages

InQuira, Inc. Confidential

version 8.1.2.3

DDMMMYY

Do Not Distribute

Page 58

12/16/2009

Objectives
Automatic Dataform Rendering p_form.jsp c_genericForm.jsp Defining Custom Pages

Do Not Distribute

Page 59

12/16/2009

Automatic Dataform Rendering


Set of JSP pages displays any IM dataform in InfoCenter Access dataform through specific URL

p_form.jsp

c_genericForm.jsp

i_takeform.jsp

http://... /index?page=forms&form=[IM_DATAFORM_NAME]

[ACTITIVY] Start the Tomcat server and type in the following URL:

http://localhost:8226/InfoCenter/index?page=forms&form=SURVEY

Do Not Distribute

Page 60

12/16/2009

p_form.jsp
<%@ page import="com.inquira.client.configuration.Configuration" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" language="java" errorPage="index?page=error" %><%@ taglib uri="/IMTaglib" prefix="IM" %><%@ include file="/apps/infocenter/custom/i_global.jsp" %><IM:sitemap pagename="forms" /><% // if this is being viewed within a CRM, switch to CCA template String strTemplate = Configuration.getStringForKey("masterTemplate"); if ((String)session.getAttribute("isCCA")!=null && Configuration.getStringForKey("masterCCATemplate")!=null) { strTemplate = Configuration.getStringForKey("masterCCATemplate"); } %><IM:template.definition template="<%=strTemplate %>"> <IM:template.put name="title" content="<%=Configuration.getStringForKey("companyName")%>" direct="true"/> <IM:template.put name="header content="<%=Configuration.getStringForKey("defaultHeaderClass")%>" /> <IM:template.put name="advertisement content="<%=Configuration.getStringForKey("defaultAdvertisementClass")%> /> <IM:template.put name="topNav" content="<%=Configuration.getStringForKey("topNavigationClass")%>" /> <IM:template.put name="centercolumn" content="/apps/infocenter/system/components/dataforms/c_genericForm.jsp" /> <IM:template.put name="rightcolumn" content="/apps/infocenter/system/pages/dataforms/c_rightcolumn.jsp" /> <IM:template.put name="footer" content="<%=Configuration.getStringForKey("defaultFooterClass")%>" /> <IM:template.put name="bottomNav" content="<%=Configuration.getStringForKey("bottomNavigationClass")%>" /> </IM:template.definition>

Do Not Distribute

Page 61

12/16/2009

c_genericForm.jsp
<%@ page import="com.inquira.client.configuration.Configuration"%><%@ taglib uri="/IMTaglib" prefix="IM" %><% String strPage = request.getParameter("page"); String newGuid = request.getParameter("newguid"); String strRP = request.getParameter("rp"); String strQS = new String(request.getQueryString().getBytes("ISO8859-1"), "UTF-8"); strQS = strQS.replaceAll("page=",""); strRP=strRP+"&cp="+strQS; String strSuccess = strRP; int counter = 1; String dataForm = request.getParameter("form"); if (dataForm!=null && !dataForm.equals("")) { %><div class="node"> <div id="breadcrumb"> <span><%=(Configuration.getStringForKey("homePrefix")==null ? "":Configuration.getStringForKey("homePrefix") )%> </span><span><a href="<%=Configuration.getStringForKey("homePageURL")%>"><%=(Configuration.getStringForKey("homeAlias")!= null&&!"".equals(Configuration.getStringForKey("homeAlias").trim()) ? Configuration.getStringForKey("homeAlias"):com.inquira.client.resources.MessageResources.get("Home")) %></a> &gt; </span> </div> <%@ include file="/apps/infocenter/custom/components/dataforms/i_takeform.jsp" %><% } %>

Do Not Distribute

Page 62

12/16/2009

Defining Custom Pages


Save new JSP in the custom directory Use the tag library and create distinct sitemap pagename

CAUTION: You might override a system JSP

Localize text with <IM:get.localized.text /> Use get_Var_ForKey to refer to the correct JSP pages Reuse existing component JSPs

May need to create copy in custom and change @include path

Test with specific URL


http:// /index?page=[SITEMAP_PAGENAME]

Do Not Distribute

Page 63

12/16/2009

Activity
Create a custom form page Add hyperlink to User Support portlet

Do Not Distribute

Page 64

12/16/2009

Create a custom form page


1. 2. 3. 4. 5. 6. Copy p_feedback.jsp from system>pages>dataforms and paste it into custom>pages>dataforms. Rename the jsp you just pasted to p_custom_feedback.jsp. Open p_custom_feedback.jsp. Go to line 1 and find the following tag: a. <IM:sitemap pagename= feedback_form /> Change this tag to the following: a. <IM:sitemap pagename= custom_feedback_form /> Go to line 14 and find the following code: a. content= /apps/infocenter/system/components/dataforms/c_cust_survey.jsp Change the code to the following: a. content= /apps/infocenter/custom/components/dataforms/c_cust_survey2.jsp Go to line 10 and find the following code: a. com.inquira.client.resources.MessageResources.get(Custsupportreq.hearf romyou) Change the code to the following: a. com.inquira.client.resources.MessageResources.get(custfeedback.title) Save p_custom_feedback.jsp. Open ApplicationResources.properties in WEB-INF>classes. Go to the end of the file and put the following string on a new line: a. custfeedback.title=Please submit your feedback Save ApplicationResources.properties. Copy c_cust_survey.jsp from system>components>dataforms and paste it into custom>components>dataforms. Rename the jsp you just pasted to c_cust_survey2.jsp. Go to line 15 and find the following code: a. key= Custsupportreq.hearfromyou Change the code to the following: a. key= custfeedback.title Go to line 16 and comment out the entire line of code. Go to line 11 and change the value for the formName variable to the following: a. Custom Feedback Go to line 13 and change the value for the dataForm variable to the following: a. Configuration.getStringForKey(customFeedbackForm) Go to line 18 and find the following code: a. <%@ include file= i_takeform.jsp %> Change this line to the following: a. <%@ include file= /apps/infocenter/system/components/dataforms/i_takeform.jsp %> Save c_cust_survey2.jsp. Open infocenter.properties.

7.

8.

9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

20. 21. 22.

23. 24.

Do Not Distribute

Page 65

12/16/2009

25. 26. 27. 28.

Go to the end of the file and on a new line enter the following: a. customFeedbackForm=SURVEY Save infocenter.properties. Restart the Tomcat server (Stop in Console, Start in Servers). Go to the following url: a. http://localhost:8226/InfoCenter/index?page=custom_feedback_form

Do Not Distribute

Page 66

12/16/2009

Add hyperlink to user support box


1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. Open c_support_box.jsp from system>components>dataforms. Copy the if statement on lines 17 through the end of 19. Go to line 19, enter a new line, and paste the code on that new line. On line 20, change the key to customFeedbackForm. On line 21, change the href attribute to the following: a. index?page=custom_feedback_form&rp=<%= strQS %> Also on line 21, change the key to SupportBox.giveCustomFeedback. Save c_support_box.jsp. Open ApplicationResources.properties in WEB-INF>classes. Go to the end of the file and enter on a new line the following: a. SupportBox.giveCustomFeedback=Give us other feedback about the site Save ApplicationResources.properties. Restart the Tomcat server. Go to the InfoCenter homepage and click on the link you just added to the Additional Assistance box on the right-hand side of the window.

Do Not Distribute

Page 67

12/16/2009

Unit 6
Content Recommendation, Creation and Custom Forms

InQuira, Inc. Confidential

version 8.1.2.3

DDMMMYY

Do Not Distribute

Page 68

12/16/2009

Objectives
Content Recommendation Pagelet /components/recommend/c_recommend.jsp form.recommendation.contribution Content Contribution Pagelet /components/contribution/c_contrib.jsp Custom Forms

Do Not Distribute

Page 69

12/16/2009

Content Recommendation Pagelet


/apps/infocenter/system/components/recommend/c_recommend.jsp

Nothing specified

Channel specific

Content specific

[ACTIVITY] Go to the following URL: http://localhost:8226/InfoCenter/index?page=recommend Go to the following URL: http://localhost:8226/InfoCenter/index?page=recommend&channel=BRANCH_IN FO Go to the following URL: http://localhost:8226/InfoCenter/index?page=recommend&id=BRCH7

Do Not Distribute

Page 70

12/16/2009

/components/recommend/c_recommend.jsp
<IM:sitemap pagename=recommend_pagelet /> <div > <IM:form.recommendation.contribution ... > <IM:input.recommendation.contribution /> <button type=submit> </IM:form.recommendation.contribution> </div>

Recommendations are a special object in the IM repository. They have no workflow attached to them and are not considered content records within a channel. Privileges to view and work with recommendations are set within a users security role.

Do Not Distribute

Page 71

12/16/2009

form.recommendation.contribution
Attribute Name
success error channel priority localecode views docid contentid categories name onSubmit onreset

Description
Page user will be directed to if the content was successfully addded Page user will be directed to if creating the content failed The channel this contribution is for he priority this contribution will have The locale for this recommendation The views assigned to this contribution - delimited by '+' The docid for the content record The recordid for the content record The categories assigned to this contribution - delimited by '+' HTML form name onSubmit event code onreset event code

[ACTIVITY] Go to /WebContent/WEB-INF/tlds and open the inquira.tld file; What are the valid values for the attribute named attribute of the input.recommendation.contribution tag?

Do Not Distribute

Page 72

12/16/2009

Content Contribution Pagelet


Requires channel reference key as request param Submitted content is placed at beginning of IM workflow Case link fields stored in IM database

Do Not Distribute

Page 73

12/16/2009

/components/contribution/c_contrib.jsp
<IM:sitemap pagename=contribute_pagelet /> <div > <IM:form.channel.contribution ... > <IM:input.channel.contribution /> <button > </IM:form.channel.contribution> </div>

Do Not Distribute

Page 74

12/16/2009

Custom Forms

POST method exclusive to IM tag library generated forms Use GET method to query IM database Use hidden inputs

name = page

value = [SITEMAP_PAGENAME]

<form method=GET action=index> <input type=hidden name=page value=[SITEMAP_PAGENAME]> <input type=submit > </form>

Do Not Distribute

Page 75

12/16/2009

Activity
Create list of document IDs Create list of categories Create list of channels

Do Not Distribute

Page 76

12/16/2009

Create a list of document IDs 13. 14. 15. 16. 17. 18. 19. 20. Create a new folder named myPages in the custom directory of the Project Explorer In myPages, create a file named p_list.jsp Open system/pages/contribute/p_recommend.jsp and copy the first three lines of this file Open p_list.jsp, go to line 1, and paste in the copied code Remove the opening scriptlet tag at the end of line 3 Change the pagename attribute of the sitemap tag to myListPage Also, change the requireslogon attribute to false On line 5, get the content data with the following attributes: a. dataset=content b. channel=FAQ c. sortby= CREATEDATE On line 6, iterate the dataset with the following attributes: a. dataset=content b. id=itData On line 7, get the content record with the following attributes: a. id=recId On line 8, print out the docid scripting variable of recId e.g. <%=recId.docid %> On line9, place a line break On lines 10 and 11, close out the appropriate tags Save p_list.jsp Start the InfoCenter deployment in the Servers tab of Eclipse Go to InfoCenter and test the page

21.

22. 23. 24. 25. 26. 27. 28.

Do Not Distribute

Page 77

12/16/2009

Create a list of categories 1. 2. Open custom/myPages/p_list.jsp On line 15, get the category data with the following attributes: a. dataset=rsCats b. referencekey=INQUIRABANK_PRODUCTS c. sortby=name d. direction=ascending On line 16. iterate the dataset with the following attributes: a. dataset=rsCats b. id=itCats On line 17, get the category record with the following attributes: a. id=crCats On line 18, print out the scripting variable referencekey of crCats followed by a hyphen (-) and then get the category attribute and print out the attribute called name e.g. <%=crCats.referencekey%> - <IM:get.category.attribute attribute = name /> On line 19, create a line break On lines 20 and 21, close out the appropriate tags Start the InfoCenter deployment in the Servers tab of Eclipse Go to InfoCenter and test the page

3.

4. 5.

6. 7. 8. 9.

Do Not Distribute

Page 78

12/16/2009

Create a list of channels 1. 2. Open custom/myPages/p_list.jsp On line 25, get the metadata of the channels with the following attributes: a. dataset=channelMData b. registered=false On line 26, iterate the metadata records with the following attributes: a. dataset=channelMData On line 27, get the metadata record with the following attributes: b. id=recId On line 28, get the metadata attribute value with the following attributes: a. id=refKey b. attribute=referencekey On the same line, print out the scripting variable called value of refKey On lines 29 and 30, close out the appropriate tags Start the InfoCenter deployment in the Servers tab of Eclipse Go to InfoCenter and test the page

3. 4. 5.

6. 7. 8. 9.

Do Not Distribute

Page 79

12/16/2009

UI Requirements Document
myInfoCenter project

InQuira, Inc. Confidential

version 8.1.2.3

01APR09

Overview
Application of development techniques Unguided practice to reinforce skills Presentation of work

myInfoCenter
Create a new Dynamic Web Project in Eclipse Name it myInfoCenter Should be the same process as previous project Make sure Tomcat is running only one project at a time

Port conflict on 8226

Wireframes

InQuira, Inc. Confidential

version 8.1.2.3

01APR09

Column Layout
Add an additional column to the home page

Adding Portlets
Add an additional portlet to the home page

Adding Links
Add a link to a data form on the Additional Assistance portlet

Removing Links
Remove a link from the Welcome portlet

Changing Styles
Change the color of the header section for all portlets

Change Wording
Change the wording for the Submit a Case link on the Additional Assistance portlet

Remove Link
Remove the Recommend Change link from the content page

Add Document List


Create a list of FAQs and place it in the 3rd column of the home page

Mini Application
Create an FAQ document look-up tool Allows user to filter by category Displays question attribute of document

p_list.jsp

p_docList.jsp

p_docView.jsp

Exercise: Requirement:

Change home page layout Change the home page so that there are three columns beneath the search box.

Search box

Design Notes

Exercise: Requirement:

Change order of portlet appearance Change the order of the portlets appearance on the content page. From top to bottom, the order should be: Document Information, Welcome, Find Answers, Link Case, and Additional Assistance.

Design Notes

Exercise: Requirement:

Add portlet Add an additional portlet to the home page.

Design Notes

Exercise: Requirement:

Add link Add a link to a dataform on the Additional Assistance portlet.

Design Notes

Exercise: Requirement:

Remove link Remove a link from the Welcome portlet.

Design Notes

Exercise: Requirement:

Change style Change the color of the header section of all portlets.

Design Notes

Exercise: Requirement:

Change Wording Change the wording for the Submit a Case link on the Additional Assistance portlet.

Design Notes

Exercise: Requirement:

Remove link Remove the Recommend Change link from the content page.

Design Notes

Exercise: Requirement:

Add list Create a list of FAQs and place it in the 3rd column of the home page.

Design Notes

Exercise: Requirement:

FAQ Look up tool This application uses a dropdown list of INQUIRABANK_PRODUCT sub categories to find the question of a particular FAQ article. Once a category is selected, a list of matching FAQ articles will be presented. This list of FAQ articles will have a link to the question of the article. The XSLT path to the question attribute is //FAQ/QUESTION. You may want to use separate page for the form that has the dropdown list of categories, the page that lists all of the matching FAQs, and the page that presents the question of the selected FAQ.

Design Notes

You might also like