Think Out of the Quickr Methods to customize Lotus Quickr Sherwood Yao

1. Think Out of the Quickr Methods to customize Lotus Quickr Sherwood Yao WPLC Senior Portal Architect

2. Agenda • Introduction to J2EE Quickr customization • UI customization • Extend functionality • Case study: A Quickr Based Forum • Demo • Summary / Questions

3. Introduction of Quickr customization • Remember the fact: Quickr (J2EE) is based on WCM running WebSphere Portal • Most of the Quickr Application are List Application built on WCM • Quickr Apps UI html code are almost “open-source”, customization is more possible. • There are many levels of UI Change in WCM to give Quickr a facelift • You can add more functionality to Quickr by add function in JSP using WCM API

4. How much I can customize in Quickr?

5. What is Web Content Management Image Navigator/Site Framework Content Personalization Type Menu Search

6. Why WCM? • Provides Authoring, Assembly, Staging, Maintenance, and Delivery of all content to web sites • Template-based content creation • Easy for end users to author, review, and publish content • Separation of content, structure and design • Reuse of content • Sitemap • Site structure automatically becomes navigation component • Taxonomies • Categorize documents and reuse in multiple places • Personalize delivery • Security • Users only see and do what they have permission to do • Reusable Components • Point and Click components allow rapid development • Lifecycle • Workflows, ownership and dates bring control to your data

7. Customize Quickr UI: A first look • A decomposition of Quickr UI

8. Customize UI: A further look

9. Template for the previous example • Presentation template • <table class="ibm-portlet-section-body"> • <tr><td class="ibm-portlet-section-left"> • <div class="ibm-portlet-section-header-smallibm-portlet-section-header"> • <imgsrc="<Component name="shared resources/blog_icon" format="url"/>" /> • … • <div class="content-container"> • <Element context="current" type="site" key="blog_menu"/> • </td><td class=“ibm-portlet-section-right"> <div class=“sidebard”> • </tr> • </table> • Menu template: • Menu formats each search result like the following: • <tr><td> • <span class="content-title"> • <a href="<Placeholder tag="href"/>"><IDCmpnt context="autoFill" type="content" field="title"/></a></span> • <span class="content-title-info"></span> • </td></tr> • <tr><td class="content-body"> • <Element context="autoFill" type="content" key="body"/> • </td></tr> • <tr><td class="content-footer"> • <a class="folder-link"><Component name="shared resources/document_posts_count" compute="always"/></a> • </td></tr>

10. Customize UI: A further Look

11. Customize UI: overview • Four level of UI customization • At the high level, modify your portal theme/skin to achieve consistent branding/cross page look and feel • At the application level, modify your page presentation template to get the layout of the application • At the content level, modify your content authoring template to decide what fields to have and what types are they • At the list level, modify your menu template to control what fields to display in the front page, and how to format them. • Tools: • Portal theme and skin: no special tooling, any HTML editing tool will work • WCM templates: use Quickr app config mode or Web content authoring portlet

12. Customize UI: Examples • First, Add WCM authoring portlet to your place. Only Authoring portlet in the same place can view the templates for the applications. • Then select the template to modify

13. Advanced UI customization: create new application • Not satisfied with OOB App? Create your own! • A lot of business application are list applications • Combine all level of UI customization, you can modify existing application to create your own list app • Procedure: • Add one existing OOB App to your place • Modify authoring template for new content creation • Plan how many levels of pages you apps will have • Each level of content needs presentation template • Modify presentation template for each authoring template • Modify menu template for formatting the list

14. New App example • Auth template has four entries, thumbnail, title, desc, and actual flash movie • Pres template has only one item – Menu • Menu item use html <div> to display

15. Add Functionality: overview • When UI change is not enough.. • Add Javascript to improve client side user experience • Drag and drop • Animation, flyout, • AJAX • Add JSP to integrate back end services • Connect to other enterprise data services • Opt to persist your data in your own DB • Integrate with LDAP directory • Tooling: • HTML editing tools • XHTML packages (e.g. script.aculo.us) • J2EE programming tools (Eclipse, RAD etc) • WCM Public API

16. Add Functionality: overview • When UI change is not enough.. • Add Javascript to improve client side user experience • Drag and drop • Animation, flyout, • AJAX • Add JSP to integrate back end services • Interaction with other parts of portal or Quickr contents • Bulk editing/processing of content • Connect to other enterprise data services • Opt to persist your data in your own DB • Integrate with LDAP directory to store user profile • Tooling: • HTML editing tools • XHTML packages (e.g. script.aculo.us) • J2EE programming tools (Eclipse, RAD etc) • WCM Public API

17. Customize Quickr via JSP using WCM API • IBM Workplace Web Content Management Java Server Page (JSP) • Introduction to WCM JSP • JSP Tag Libs • JSP Component • Customizing elements using JSP • IBM Workplace Web Content Management Application Programming Interface (API) • Introduction to WCM API • Create Content

18. JSP Taglibs - Overview • This is used to easily access components and content from WCM • Can be used in JSP components and in standalone JSP pages • Examples • InitWorkspace Tag • <wcm:initworkspace username=" " password=" " > This is used to set the initial workspace • contentComponent Tag • <wcm:contentComponent type=" " key=" " > • Rendering a Component from the current Site, Site Area, or Content object • libraryComponent Tag • <wcm:libraryComponent name=" " > • Rendering a component from the Component Library • More references • In portal infocenter, search “WCM taglibs”

19. JSP Component - Overview • References an existing JSP page stored on the server • This JSP may contain references to WCM JSP or API, but does not have to do so • Is integrated in any presentation template as a component • Can be shown within other WCM content or stand-alone

20. WCM API • API is focused on processing content (create, update, move to worflow), not to allow the creation of other administration tools (yet) • Search iterators of item IDs: • Find item of given type by name or given type • Find library components by name • Find content by authoring template, category, path or workflow stage • Find content modified since date or between dates • Content search (similar to the Menu Component search criteria but using item parameters as ids) • Retrieve via item IDs • The ability to create, delete and save the following items: • The ability to approve or reject content items in a workflow stage. Other item-types do not support this function

21. Existing Quickr sample using JSP via WCM API • Blog code to count # of comments • </wcm:initworkspace><%! • private static HashMap m_threadSiteAreaNameToIdMap = new HashMap(); • private static DocumentId m_printTokenMenu = null; • %><% • int postCount = 0; • try{ • RenderingContext renderingContext = (RenderingContext)request.getAttribute("wcmRenderingContext"); • wcmWorkspace.setCurrentDocumentLibrary(renderingContext.getContent().getId().getContainingLibrary()); • String result = wcmWorkspace.render(renderingContext, menu); • renderingContext.setRequestParameters(oldParams); • postCount = result.trim().length(); • } • %> • <%= String.valueOf(postCount) %>

22. Another Quickr sample using JSP via WCM API • Forum application to add a sticky topic • A hack here is that we used a content’s description field to store whether a topic is a sticky topic or not (it either has value “isSticky” or “isNotSticky” • </wcm:initworkspace><%! • private static HashMap m_threadSiteAreaNameToIdMap = new HashMap(); • private static DocumentId m_printTokenMenu = null; • %> • Workspace workspace = WCM_API.getRepository().getSystemWorkspace(); • com.ibm.workplace.wcm.services.repository.WorkspaceManager.systemLogin(); • RenderingContext renderingContext = (RenderingContext)request.getAttribute("wcmRenderingContext"); • if (renderingContext != null) { • DocumentId contentId = renderingContext.getContent().getId(); • Content content = (Content)workspace.getById(contentId); • descFieldValue = content.getDescription(); • content.setDescription(descFieldValue);

23. Demo • Forum application customization

24. Summary and customization