IBM Lotus Quickr is Web 2.0-based team collaboration software that helps you share content, collaborate, and work faster online with your teams. It includes a content repository, content management, and team collaboration capabilities.

People work together in Lotus Quickr team places. You can easily customize Lotus Quickr with standard components, such as libraries, team calendars, discussion forums, blogs, wikis, and other collaboration tools for managing projects. You can also create totally new components for Lotus Quickr.

Introduction

Lotus Quickr content libraries are a feature of Lotus Quickr that helps you easily organize and share documents for your projects and teams. You can easily manage all kinds of documents using Lotus Quickr library, which has such capabilities as versioning, workflow, and customized document types. Lotus Quickr content services make it possible to create, manage, update, search, query, and delete Lotus Quickr content. These services enable developers to access and manipulate content in Lotus Quickr, using REST and SOAP-based protocols.

Lotus Quickr uses Lotus Web Content Management to store and present online content. Wiki pages, blog posts, announcements, project tasks, and contacts are each stored as Web content. Each is authored using a Lotus Web Content Management authoring template, presented using a Web content management presentation template, and stored in a Web content management site area. The Web content management APIs are used to extend functions of Web content management, which gives you the ability to manage Web content programmatically.

The sample Photo Book is a portlet that utilizes a document library to store photos and to accommodate team-based photo editing. Web content management authoring templates and presentation templates provide customized display of the contents of the document library. The Lotus Quickr content services and the Web content management Javaâ„¢ API are used to communicate between the document and the Web content components, creating links in the Photo Book Web content library when new content is added to the document library through any channel, including the Lotus Quickr connectors.

Back to top

Prerequisites

You need to have knowledge of the following:

• Lotus Quickr concepts such as places, document libraries, and components
• Lotus Web Content Management concepts

Some sections of the article also require a knowledge of the following:

• Lotus Quickr content REST service API
• Lotus Web content management Java API
• HTML, JavaScriptâ„¢, or another scripting language

Back to top

Lotus Quickr library and document services

Lotus Quickr document services help you easily organize and share documents for your projects, your teams, and yourself. You can quickly set up libraries for all your documents and rich media files so that your teams can easily share and collaborate with check-in and check-out, version control, and other tools to manage content.

Lotus Quickr REST services enable developers to access and manipulate content in Lotus Quickr document libraries. Lotus Quickr REST services are based on the Atom Syndication Format as described in RFC 4287 for accessing content and on the emerging Atom Publishing Protocol (APP) for publishing content to Lotus Quickr.

In the spirit of APP, document libraries are treated as APP collections, and documents are treated as APP resources. URLs are defined for each collection and resource. Clients can invoke the appropriate HTTP methods, such as GET, POST, PUT, and DELETE, on those URLs as defined by APP. In addition, URLs follow a predictable pattern, enabling clients to compose the URLs without asking the server to provide them.

Back to top

Custom Lotus Web Content Management-based components in Lotus Quickr

The Photo Book component uses Lotus Web Content Management as a presentation tier. A recently published developerWorks® article, "Customizing components in IBM Lotus Quickr services for IBM WebSphere Portal 8.0," discusses the basic principles involved in customizing an existing Lotus Web Content Management-based component. This article adds a new Lotus Quickr component, and it describes how you can create custom Lotus Quickr components.

Components in Lotus Quickr services for WebSphere Portal

Through a standard portlet, the portlet is notified only after the portlet is rendered, when users take an action inside the portlet, or when an action is sent to the portlet through interportlet communication. A component is a set of life-cycle methods (createInstance, removeInstance), membership methods (memberAdded, memberRemoved), and other methods added to a portlet. The component interfaces allow the portlet to be notified when actions, such as creation, membership changes, export, and import are taken on a Lotus Quickr place. A Lotus Quickr place is an assembly of these components. For those who are familiar with WebSphere Portal, note that a Lotus Quickr place is an implementation of a WebSphere Portal composite application.

The component interfaces are most interesting if the portlet owns the content in the portlet. In other words, the portlet is the primary mechanism for editing the content, and each instantiation of the portlet edits different sets of content. The component interfaces allow Lotus Quickr to cascade actions taken on the place, such as creating a component or adding a member to the place, down to the individual components in that place, and therefore down to the content owned by the portlet.

You can, in theory, turn any portlet into a component by implementing the component interfaces, but only some portlets make sense as components. A portlet displaying weather information might not need to know anything about membership, and it does not own any content. For example, a weather portlet might not make an interesting component. It is unclear what a weather portlet could do upon being notified that a new member was added to a place or upon being notified that the portlet was being created.

Lotus Web Content Management components in Lotus Quickr services for WebSphere Portal

Included with Lotus Quickr are a set of ready-to-use as-is components that make use of Lotus Web Content Management: announcements, contacts, blog, discussion forum, project tasks, wiki, and team calendar. The announcements, contacts, and project tasks components are collectively referred to as lists and all use the same component implementation classes. We refer to this shared component implementation as the Lotus Web Content Management teamspace component. The most significant differences between these components are achieved through configuration in the portlet associated with the component and changes to the presentation markup. There is minimal code difference between a contacts list and a project task list. See figure 2.

The Lotus Web Content Management place portlet works closely with the Lotus Web Content Management place component. The portlet automatically scopes itself to the content that it owns, which is primed by the component. The Lotus Web Content Management component understands how to translate actions passed into the component into actions taken on the Lotus Web Content Management site areas rendered by the portlet. See figure 3.

Adding a member to a place cascades the memberAdded call to the Lotus Web Content Management component. The implementation of the Lotus Web Content Management component in turn adds members to the appropriate site areas. The create action on a component is translated by the component into the creation of a Web content library followed by a copy of a template site area into that library. By changing the pointer to the template site area, you can change the default content of the component, its presentation, authoring tools, and almost everything about the component.

For standard Lotus Web Content Management components that fit into the mold of a list, you most likely do not need to write any Java code. The built-in Lotus Web Content Management component implementation can be configured to point to your own site area as a template. That site area, in turn, points to a default piece of content. The site area also contains mappings of presentation templates to authoring templates and the presentation can include New, Edit, and Delete buttons through authoring tools components, just as in any Web site created with Lotus Web Content Management.

Portlets are still interesting in themselves. Portlets that are not components can still be added to the Lotus Quickr customization shelf using the techniques we present in this article. The feed reader is an example of a portlet that is added to the shelf and that is not a component. A lot of customization can be done in Lotus Quickr with normal portlets. In this section, you see how to present information in various formats. Pick the appropriate format for the type of information that you need to present.

Back to top

e-Album architecture

The e-Album is a sample application to manage and view photos in Lotus Quickr services for WebSphere Portal. The e-Album builds on the Lotus Web Content Management component architecture already discussed and a new Photo Book component.

The e-Album provides the following:

• Integration with the Lotus Quickr connectors to upload photos individually or in a batch from Lotus Quickr integration with Microsoft® Windows® Explorer, Microsoft Office, IBM Lotus Notes®, IBM Lotus Symphonyâ„¢, and other desktop applications.
• Management in a flat list or in a tree, simply by creating folders.
• Team editing with versioning, drafts, and custom metadata through property sheets.
• Web-based gallery and slide show views of the photos in the Photo Book component.

Figure 4 is a high-level architecture of the e-Album. The e-Album contains the following parts:

• A document library as a place for photo storage and team-based editing.
• Customized Lotus Web Content Management content for users to view photos from the Web, which contains two parts:
  
  • Photo display frame is based on the Lotus Web Content Management presentation template.
  • Photo display contents is based on the Lotus Web Content Management authoring template. Photo Display Contents contains links to the media and a snapshot of a photo stored in a library.
• A syndication program to link the document library to the Web content library. The syndication program is built on public APIs, including the Lotus Web Content Management Java API and the Lotus Quickr services API. The syndication program functions on demand; it is triggered by a user viewing the contents of the Photo Book component.

Back to top

Inside the Lotus Web Content Management Photo Book component

In the Photo Book component, links to the photos are stored in a Web content library, and the site areas in the Lotus Web Content Management site keep a tree structure of the photo library, including folders and photos in each folder. Each folder in the document library maps to a site area in Lotus Web Content Management, and each photo in the document library maps to a piece of content in Lotus Web Content Management. The structure of the pieces of content is based on customized authoring templates. The authoring templates used in Photo Book are these:

• album_folder_at
  This authoring template is used to create content that represents a site area. It has a link element as shown in figure 5, which stores the link to the default content of the site area.
  
  
  Figure 5. Link element
  
  
  
• folder_navigator_at
  This authoring template is used to create the default content of a site area for each folder. It has no elements.
• list_album_item_at
  This authoring template is used to create content to store information for each photo. It has two text elements to store URLs to the photo and the thumbnail. It also has a rich text element for the photo description. Figure 6 shows the elements of this authoring template.
  
  
  Figure 6. Elements of list_album_item_at
  
  
  
• Photo Book – Slideshow
  This authoring template is used to create content to render a slide show. It has a rich text element for welcome text.

Lotus Web Content Management uses a presentation template for rendering each piece of content. Photo Book uses several presentation templates to render the contents, including one for the folder view, one for the photo view, and one for the slide show view. Each authoring template is associated with or mapped to a presentation template on a site area. When rendering a piece of content, Lotus Web Content Management looks at the authoring template for that content and determines which presentation template to use, based on the mapping between authoring templates and presentation templates on the site area containing the content. For this reason, although the slide show, welcome page, or photos list page might just be aggregations of content to the user, they need unique authoring templates to drive the use of different presentations in the site. The following are the presentation templates used in Photo Book:

• Photo Book – entry
  This presentation template renders a detail page for each photo item. It is shown in figure 7.
  
  
  Figure 7. Sample view of a photo item entry
  
  
  
• Photo Book – main
  This presentation template, used to render the default content of a site area, references two menus:
  
  • A folder menu to list the subfolders
  • The Photo_entry_view menu to list photos in the folder

  Figure 8 shows the main presentation template rendered with sample photos.

  
  
  Figure 8. Sample view of main page
  
  
  
• Photo Book - slide show
  

  This presentation template renders the slide show view. The presentation leverages Dojo to implement the slide show effect. It references the menu photo_slideshow_view to list the URLs of the photos.

  The site and site areas are the same as the structure of the document library that stores the photo files. For example, if the structure of the library is like the one shown in figure 9, then the site structure of Lotus Web Content Management content is like the one shown in figure 10.

  
  
  Figure 9. The structure of the library
  
  
  
  
  Figure 10. The structure of the site
  
  
  

In this sample, the piece of content named Photo Book (shown in figure 10, in the bottom layer of the tree structure) is the default content of the root folder of the library. This piece of content represents the welcome page and is present to trigger a presentation template that displays all the photos from that site area in the gallery that you see in figure 8. Content Fold4 is the content to represent site area Fold4. This piece of content drives the same presentation template, displaying the gallery view of all the photos, but this time it displays only the photos in the Fold4 site area.

Back to top

The e-Album syndication program

In the e-Album, a Lotus Quickr document library is used to store photos. Lotus Web Content Management is used to present these photos for the team to view in a gallery or slide show. The syndication program is a background program that uses the Lotus Quickr REST services and the Lotus Web Content Management Java API to communicate between the Lotus Quickr document library and the Web content library.

The Lotus Quickr REST services get folders and photo documents in the Lotus Quickr document library, and then they use the Lotus Web Content Management Java API to create new Web content for newly added folders or photo documents, and to delete existing Web content for folders or photo documents that are deleted from the document library.

The syndication program runs the following tasks:

1. Gets a list of child folders and documents of image type from the Lotus Quickr document library
2. Retrieves and composes the corresponding value from the Atom entry for the folder and the document; stores them in lists
3. Synchronizes the folder list and document list of the image type with Web content in Lotus Web Content Management
4. Creates new pieces of Web content as links to the newly added folders and documents in the Lotus Quickr document library
5. Deletes the corresponding Web content if the folders or documents do not exist in the Lotus Quickr content library anymore

The solution is novel in that it does not copy content between the document and the Web content libraries. Links, which are relatively fast to create and consume minimal storage capacity, are created in the Web content library, and the content is maintained in the document library.

The workflow of the syndication program is depicted in figure 11.

The following sections provide sample code that show how ListRetriever and ContentUpdater work.

Retrieve the list of folders and image documents

ListRetriever is used to get the list of folders and photo documents from Lotus Quickr Content Library using Lotus Quickr REST services. To do this task, an HTTP GET operation is done on the following URL to retrieve a list of all subfolders and photo documents under a specific folder in the Lotus Quickr content library:

http://<quickr_server_url>/dm/atom/library/<library_uuid>/folder/<folder_uuid>feed

The feed contains an Atom entry for each folder and document under the specific folder. The <category> element tells you whether the entry corresponds to a folder or to a document. Folders are displayed as expandable nodes in Lotus Web Content Management because they can contain child folders and documents. Documents are displayed as their binary content in Lotus Web Content Management for people to view.

For folder entries, we store the uuid of that folder to later compose the feed URL for that folder to retrieve its content.

For document entries, we are interested in documents of image type. The type attribute of the <content> element can tell whether the document entry corresponds to image type. We retrieve the edit-media link of the document of image type and compose the complete download URL to retrieve the contents of the document. Refer to the “Atom Publishing Protocol specifications” for a description of the link meanings.

Listing 1 shows a code snippet that processes the Atom entries into lists. FolderContent is used to store the uuid and title of the folder for further creation of Web content for the folder. ImageContent is used to store the uuid, title, download URL, and thumbnail URL of the photo document for further creation of Web content for the document.

ClientResponse response = httpClient.get(url);
  if (response.getStatus() == 200) {
Feed feed = (Feed) response.getDocument().getRoot();
  Iterator entries = feed.getEntries().iterator();
    while (entries.hasNext()) {
    boolean isFolder = false;
    Entry entry = (Entry) entries.next();
    try {
      Iterator categories = entry.getCategories(
        "tag:ibm.com,2006:td/type").iterator();
      while (categories.hasNext()) {
         Category cat = (Category) categories.next();
      if (cat.getTerm().equals("folder")) {
      sFolder = true;
      break;
       }
       }
          } catch (IRISyntaxException e) {
          e.printStackTrace();
		}
        if (isFolder) {
          int index = entry.getId().toString(),lastIndexOf(“:”);
uuid = entry.getId().toString().substring(index+1);
title = entry.getTitle();
FolderContent folderContent = new FolderContent();			  
folderContent.setTitle(title);
folderContent.setUUID(uuid);
folderList.add(folderContent);
		} else {
          if(entry.getContentMimeType().toString().startsWith("image")||
          entry.getContentMimeType().toString().indexOf("bmp")!=-1)
          {
            StringBuffer sb = new StringBuffer();
				  
            imageUrl = sb.append(serverUrl).append(entry.getBaseUri().getPath()).
            append(entry.getEditMediaLink().getAttributeValue("href")).toString();
            thumbUrl = imageUrl.replaceFirst("document", "thumbnail");
            title = entry.getTitle();
            int index = entry.getId().toString().lastIndexOf(":");
            uuid = entry.getId().toString().substring(index+1);
            ImageContent imageContent = new ImageContent();
            imageContent.setImageUrl(imageUrl);
            imageContent.setThumbUrl(thumbUrl);
            imageContent.setTitle(title);
            imageContent.setUUID(uuid);
            imageList.add(imageContent);
            }
		}
	}
	

Create content in Lotus Web Content Management

To present photos in Lotus Web Content Management, you first need to create a piece of Web content for the newly added photo document in Lotus Quickr content library using the Photo Book - entry authoring template. Then, you render the Web content using the Photo Book - main presentation template. ContentUpdater is used to update Web content in Lotus Web Content Management according to the folder and photo document lists retrieved from ListRetriever. The Lotus Web Content Management Java API is used to create, search, or delete Web content.

In the Web content in Lotus Web Content Management, the photo document’s download URL and thumbnail URL are stored, but not the photo document itself. The Photo Book – entry presentation template is used to present the photo’s original image rendered from the download URL; the Photo Book – main presentation template is used to present the photo thumbnails rendered from the thumbnail URL.

Listing 2 shows the code snippet that creates a new piece of Web content for a newly added photo document in the Lotus Quickr content library. It includes four steps:

1. Create new content with the list_album_item_at authoring template, and add the newly created content to the end of the site area.
2. Add a Text Component image_url (the photo document’s download URL) to this content,
3. Add a Text Component thumbnail_url (the photo document’s thumbnail URL) to this content.
4. Save the new content.

try {
// create new content with specified authoring template ID, 
add the newly created content at the end of the site area
content = workspace.createContent(workspace.createDocumentId
(authoringTemplate),siteArea.getId(),null,ChildPosition.END));  
   content.setName(docUUID);
   content.setTitle(docTitle);
// add an Text component “image_url”to this content
  if (content.hasComponent("image_url")){
imageComponent = (TextComponent) content.getComponent("image_url");
   imageComponent.setText(imageUrl);
  } else{
    output.append("TextComponent image_url not found");
  }
// add an Text component “thumbnail_url”to this content
  if (content.hasComponent("thumbnail_url")){
thumbComponent = (TextComponent) content.getComponent("thumbnail_url");
  thumbComponent.setText(thumbnailUrl);
  } else{
    output.append("TextComponent thumbnail_url not found");
  }
// save the content
  String[] saveErrors = workspace.save(content);
  output.append("<br><br>Content save attempted<br>");
  if (saveErrors.length > 0) {
    output.append("The following errors occurred on content save<br>");
    for (int i=0; i < saveErrors.length; i++) {
       output.append(saveErrors[i]+"<br>");
    }
  } else {
    output.append("No errors reported on content save<br>");
  } 
  output.append("Test complete in runPost");
  } catch (Exception e) {
   output.append(HTML.getStackTrace(e) + " in runPost");
}

You can upload a batch of photos to the Lotus Quickr document library as shown in figure 12.

Once updated, these photos are available in your Photo Book as shown in figure 13.

Back to top

Installing the Photo Book

Perform the following steps to install the Photo Book component.

Import the Lotus Web Content Management templates

Lotus Web Content Management presentation and authoring templates, menus, site areas, and default content together are used to represent a custom component based on Lotus Web Content Management. These artifacts for the Photo Book must be imported into your Lotus Quickr server. The Photo Book Lotus Web Content Management artifacts are stored in a library called Photo Book Resources. This step imports that library.

Update the <Portal Server>/jcr/migration/conf/wcm60_conf.xml file to match your environment. Set the following properties:

• ImportDir. The Import Nodes directory is extracted from the photoLibraryResources.zip file.
• ImportUserId. This property should be a valid administrator user id on your Lotus Quickr system. This user is used to create the content templates and template site areas in Lotus Quickr.
• ImportUserPassword. This property sets the password for the user specified above.

From the <Portal Server>/config directory, run the following command:

WPSconfig.bat import-wcm-data

If you create other custom components, you can use the export-wcm-data command to export your custom component after specifying the export parameters in the wcm60_conf.xml file. You can then distribute your custom components, or you can move them from test to production. Using a separate library for the basic artifacts used for each component allows you to export and import them individually.

Because the Photo Book Resources library contains all the Lotus Web Content Management artifacts for the Photo Book component, it provides a good starting point for any custom component that you create.

Add required JAR files to shared libraries

Create a folder photobook/lib in <WPS_HOME>, and then copy all the JAR files to it.

Go to the WebSphere Application Server administrative console, create a new shared library named PhotoBook, and set the classpath as shown in listing 3.

${WPS_HOME}/photobook/lib/ealbum.jar
${WPS_HOME}/photobook/lib/abdera.client.0.2.2-incubating.retro.jar
${WPS_HOME}/photobook/lib/abdera.core.0.2.2-incubating.retro.jar
${WPS_HOME}/photobook/lib/abdera.extensions.0.2.2-incubating.retro.jar
${WPS_HOME}/photobook/lib/abdera.parser.0.2.2-incubating.retro.jar
${WPS_HOME}/photobook/lib/abdera.protocol.0.2.2-incubating.retro.jar
${WPS_HOME}/photobook/lib/axiom-api-1.2.1.jar
${WPS_HOME}/photobook/lib/axiom-impl-1.2.1.jar
${WPS_HOME}/photobook/lib/commons-codec-1.3.jar
${WPS_HOME}/photobook/lib/commons-httpclient-3.1-rc1.jar
${WPS_HOME}/photobook/lib/commons-logging-1.0.4.jar
${WPS_HOME}/photobook/lib/geronimo-activation_1.0.2_spec-1.1.jar
${WPS_HOME}/photobook/lib/ilwwcm-api.jar
${WPS_HOME}/photobook/lib/ilwwcm-authoringportlet.jar
${WPS_HOME}/photobook/lib/ilwwcm-teamspace-portlet.jar
${WPS_HOME}/photobook/lib/retroweaver-rt-1.2.3.jar
${WPS_HOME}/photobook/lib/stax-api-1.0.jar
${WPS_HOME}/photobook/lib/wp.wcl.common.jar
${WPS_HOME}/photobook/lib/xlxpScanner.jar
${WPS_HOME}/photobook/lib/xlxpScannerUtils.jar
${WPS_HOME}/photobook/lib/xlxpWASParsers.jar

Add PhotoBook to the iwwcm-teamspace-portlet.war file’s library.

Add authoring template image to the file system

The Lotus Quickr system currently looks for the icon for each component at a specific location on the file system. Add the photo_book_list.gif image from the Files directory of the PhotoBook.zip to <Portal Server>/installedApps/WCM_Teamspace_Portlet_*.ear/*.war/images/teamspace. Create <WPS_HOME>/installedApps\WCM_Teamspace_Portlet_*.ear\*.war\teamspace\jspext\html, and copy refresh.jsp to the folder.

You might need to repeat this step after applying any fix pack installations that update the WCM_Teamspace_Portlet.Ear file.

Install the Dojo toolkit

Some of the pages use Dojo widgets to add graphical effects such as mouse-overs and slide shows. The Dojo toolkit is not generally required for Lotus Quickr components, but this particular component does make use of Dojo in the presentation. The presentation templates expect to find the dojo.js file at:

<wp_profile>/installedApps/<nodename>/wps.ear/wps.war/dojo-0.4.3-ajax/dojo.js

Download Dojo 0.4.3 from the Dojo site and extract so that the dojo.js file is at <wps.war>/dojo-0.4.3-ajax/dojo.js.

If you have Dojo installed elsewhere, you can modify the component photo_book_dojo_include using the Manage Content page in Lotus Quickr and change the path used to load the dojo.js file.

You might need to repeat this step after adding any fix pack installations that modify the wps.war file.

Add or install the Photo Book portlet instance

Each component relies on a portlet to render its contents. A portlet for each component type is shipped with Lotus Quickr. A new portlet must be created to represent the new Photo Book component. The easiest way to create this portlet is to copy an existing portlet. Because you are using Lotus Web Content Management, the only difference is in the configuration that tells Lotus Quickr which pieces of Web content to render in the portlet. The same Java implementation of the portlet is reused for your custom component, making it easy to define new components without any Java code.

You can also create completely customized components from scratch in Java without using Lotus Web Content Management. The documents portlet included with Lotus Quickr is an example of a component that does not use Lotus Web Content Management.

To create the Photo Book portlet, go to Site Administration - Advanced Administration - Portlet Management - Portlets.

Search for "contacts." Click the Copy portlet button next to the Contacts portlet. Enter Photo Book Application for the application name, and enter Photo Book for the portlet name. Click OK to copy the portlet.

Search for "photo" to find the portlet that you just created. Click the Configure portlet button next to the Photo Book portlet.

Set the following parameters as shown in table 1.

The templateSite parameter points to the Photo LibraryResources library. This library is the one that you imported using the wcm-import-data command earlier. Whenever a new instance of the Photo Book component is created, the Lotus Quickr server automatically copies this site area into a library representing the component instance. The library name must be lowercase here if you are using an imported library.

If you customize this component, or if you create other custom components, the site area containing the actual content of the component must be called items. The link windows in wikis and blogs look specifically for this site area name. If you do not have an items site area, the link windows in wikis, blogs, and elsewhere might not function properly. You must also have only a single site area called items in your component. While items must be the name of the site area in the Lotus Web Content Management system, the display title of the site area can be anything that you choose.

NOTE: The componentType must end in list.

The AUTHORINGTEMPLATE_OVERRIDE parameter is used by the authoring tools component referenced by the Lotus Web Content Management presentation to determine which authoring template is used to add content. Lotus Quickr displays the content referenced by the WCM_CONTENT_CONTEXT when the portlet for the component is first displayed. This content is the home page of the component. Users can navigate within the component to other content. For the Photo Book, the /PhotoBook/PhotoBook/items context displays the contents menu page of the Photo Book. In this sample, the authoring template is hardcoded in the authoring tools, so it is not needed.

Go to Portlet Settings - Custom Unique Names - Portlets. Search for "photo."

Change the unique name of the Photo Book portlet to wps.p.web.photobook. The unqiue name for the portlet is a handle that you can use to reference it later.

Go to Site Administration - Advanced Administration - Portal Content - Web Content Libraries. Click set permissions icon of Photo Library Resources, click edit role of users, click Add, check All Authenticated Portal Users, and click OK, click Resources, and click Done.

Go to Site Administration - Advanced Administration - Portlet Management - Portlets, and search for Photo Book. Click assign access to portlet icon of Photo Book, click edit role of users, click Add, check All Authenticated Portal Users, and click OK, click Photo Book, and click Done. This sequence enables non-administrative users to use the portlet.

Add Photo Book to the customization shelf in the theme

You now have the Photo Book component defined. You must now add a link to the user interface (UI) so that users can add the component to a place. Modify the theme file <wp_profile>/installedApps/<nodename>/wps.ear/wps.war/themes/html/QPG/pageHeaderContent.jsp by doing the following:

Under <div id="customizePage2" style="display: none;">, add the following code shown in listing 4 to the unordered list.

<li><a href="#" onClick="javascript:showTeamSpaceAddComponentForm
("<%=MarkupUtil.htmlAttributeEscape(MarkupUtil.jsEscape
("Photo Book"))%>", "<%=MarkupUtil.htmlAttributeEscape
(MarkupUtil.jsEscape("New Photo Book"))%>", "<%= applicationID %>
", "wps.p.web.photobook", true, nodesOnLevel, true, 'photobook')" 
class="picture">Photo Book</a></li>

You might need to repeat this step after any fix pack installation that modifies the wps.war file.

Add translatable properties

The Photo Book title and description can be translated. The Lotus Web Content Management places portlet looks in the portlet configuration for the componentType. The portlet automatically generates the keys into a properties file to find the title and description to use for templates created with that component. Create a properties file called photo_book_list.properties and place it somewhere in the server’s classpath. For instance, you can place this properties file in:

<Portal Server>/shared/app/contentLib

The properties file can include following properties:

• photo_book_list_TITLE=Photo Book.
• photo_book_list_DESCRIPTION=A Photo Book can be used to share photos or images with your team.
• photo_book_list_NEW_BUTTON_TEXT=New Photo.

You change the keys and properties file name when you create another custom portlet with a different componentType in the portlet configuration.

Now when you create a new template from the Photo Book component, the default names of the new components are translated.

Congratulations, the Photo Book is installed

You can add the Photo Book component to an empty Lotus Quickr place, and then you can create a template from that place so that it is easy to create new Photo Book places.

For a further exercise, you can edit the authoring template for the Photo Book, changing the link component to an image component, and allowing direct upload of images into the Photo Book, not just images linked from elsewhere.

For a further exercise, you can edit the authoring template for the Photo Book, changing the link component to an image component, and allowing direct upload of images into the Photo Book, not just images linked from elsewhere.

Back to top

Configure library for e-Album

Click the Library Setting button, and enter the server URL, libraryID, username, and password. Click OK; then you can navigate to photos stored in a Lotus Quickr document library.

Back to top

Conclusion

This article shows a sample application to manage photos with Lotus Quickr for WebSphere Portal. This application is built on both the document library and Lotus Web Content Management components and a syndication program built on public APIs is used as a communication channel between the two components. With this example, you could build up your application for Lotus Quickr with customized view functions for contents in a document library.

Back to top

Download

Information about download methods

Resources

• Participate in the discussion forum.
  
  
• Read the developerWorks article, "Introducing IBM Lotus Quickr REST services."
  
  
• Read the developerWorks article, "Customizing components in IBM Lotus Quickr services for IBM WebSphere Portal 8.0."
  
  
• Read the developerWorks article, "Getting to know the Atom Publishing Protocol, Part 3: Introducing the Apache Abdera project."
  
  
• Read the developerWorks article, "Introducing the IBM Lotus Web Content Management API."
  
  
• Read the Lotus Quickr Content Services wiki.
  
  
• Refer to the Lotus Quickr product documentation.
  
  
• Learn more about Apache Abdera.
  
  

About the authors

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Introduction
• Prerequisites
• Lotus Quickr library and document services
• Custom Lotus Web Content Management-based components in Lotus Quickr
• e-Album architecture
• Inside the Lotus Web Content Management Photo Book component
• The e-Album syndication program
• Installing the Photo Book
• Configure library for e-Album
• Conclusion
• Download
• Resources
• About the authors
• Comments

Next steps from IBM

• Try: Lotus Quickr
• Demo: Lotus Quickr
• Briefing: Smarter collaboration with IBM Lotus solutions
• Buy: Lotus Quickr

My developerWorks community

Dig deeper into Lotus on developerWorks

DB2 pureScale

See how true transparent scaling architecture can be achieved on distributed platforms

Special offers