88
Content Template Catalog 3.0/3.1 Rapid Site Development Suite User Guide This guide covers: CTC 3.0 for WebSphere Portal 7.0, and CTC 3.1 for WebSphere Portal 8.0 Copyright IBM Corporation 2012 1

ContentTemplateCatalogV3-31-UserGuide

Embed Size (px)

Citation preview

  • Content Template Catalog 3.0/3.1 Rapid Site Development Suite

    User Guide

    This guide covers:CTC 3.0 for WebSphere Portal 7.0, andCTC 3.1 for WebSphere Portal 8.0

    Copyright IBM Corporation 2012 1

  • Table of ContentsAbout Content Template Catalog v3.0/3.1.............................................................................4About this Document..............................................................................................................7Getting Started.......................................................................................................................8Understanding CTC.............................................................................................................30Using CTC............................................................................................................................62Customizing CTC.................................................................................................................70Deploying CTC.....................................................................................................................80Reference.............................................................................................................................86

    Copyright IBM Corporation 2012 2

  • Copyright IBM Corporation 2012 3

  • About Content Template Catalog v3.0/3.1

    What it isThe Content Template Catalog (CTC) is a set of templates that are used to accelerate the process of building a website. The included templates cover many basic content types and design elements. Using these templates you can build a basic site very quickly with little or no customization. For more complex sites, CTC allows you to rapidly move past the initial build phase and proceed to delivering real value to your customer.

    CTC version 3.0 is for IBM WebSphere Portal version 7.0, and CTC version 3.1 is for IBM WebSphere Portal version 8.0. The 3.1 version has a new theme created from the improved portal theme that was shipped with 8.0.

    What it is notWhile the CTC contains a demonstration site, it is not simply a demo or showcase. Rather than building another demonstration of capability, we wanted to create a suite of templates that you can actually use. The templates do utilize many of the features of IBM WebSphere Portal and IBM Web Content Manager, but they do so only where and when they make sense to be used for most common applications. Over time the suite will expand to cover more types of content, more use cases, and more of the capability of the product suite will be exploited in future templates.

    What can you do with CTCYou can use CTC to quickly mockup sites, or build the skeleton of a site as a basis for further development. By using the templating patterns that CTC is built on, you can supply a customized templating system for you user's that lets them build their own sites.

    What's in the Box?CTC is delivered as a Portal Application Archive, which is a package of IBM WebSphere Portal and IBM Web Content Manager assets and code, that is installed using the Portal Solution Installer. After installing this package you have a full templating system for building content-oriented IBM WebSphere Portal sites.

    Page Templates and Pre-configured PortletsThe core assets are a set of page templates that allow rapidly assembly of a site structure,with built-in tooling for contribution and management, and a set of portlets for dropping additional content onto the pages.

    Copyright IBM Corporation 2012 4

  • ThemeCTC also installs a theme with layouts that are content-oriented and easily re-styled to suit your site's graphic design.

    IBM Web Content Manager Assets and Micro-sitesUnderpinning the page templates is a flexible set of authoring and presentation templates and components, plus a set micro site templates which are associated with the CTC page templates.

    New Product FeaturesOn version 7.0, installing CTC 3.0 enables a set of features in IBM Web Content Manager and IBM WebSphere Portal that are used by the CTC templates. This includes a template instantiation feature which automatically copies all of the necessary artifacts for you when you create a page using one of the CTC page templates.On version 8.0, these features are rolled into the core code and are no longer installed as part of the CTC 3.1 install package.

    Fixes

    CTC 3.1Fixes, in version 8.0 install:1. Fixed problem with keyboard navigation to editing controls in Internet Explorer2. Fixed other styling issues with keyboard navigation focus3. Fixed problem with escaping of single quotes in carousel content titles and

    descriptions

    CTC 3.0.0.1Fixes:1. Fixed display of categories for Job Openings and Courses2. Fixed filtering of job openings index3. Fixed inconsistency in naming in the CTC Demo site 4. Fixed inconsistency in naming of Event Index template5. Fixed issue where portlets dropped from the CTC palette used paths instead of IDs,

    which meant re-naming content could break the portlet settings

    About Content Template Catalog v2Content Template Catalog version 3/3.1 is a completely new offering and not an upgrade. You can install it on the same server you have already installed the 2.0 version and they will co-exist.Version 3/3.1 may share the same goals as the obsolete 2.0 version, but there is no

    Copyright IBM Corporation 2012 5

  • common codebase. The decision was made to start afresh and implement new patterns that would support a templated instantiation process, and could scale to support an expanded set of templates.If you are a user of Content Template Catalog v2 you may want to use the new version when starting new projects, or potentially just take pieces from CTC3/3.1 to use in your own sites.

    Copyright IBM Corporation 2012 6

  • About this DocumentThis document is a guide to installing, using, understanding, and customizing CTC. There is also a section on how to use the Multilocale Solution with CTC.It is recommended you first install CTC on a development server and have a play with using the templates, and try out some of the customization techniques. The result of this will be a good working knowledge of how you can use CTC in your own site development, and perhaps a prototype that you can use to drive the design process or as a starting point for development.Please note throughout the document, particularly important points will be highlight by placing them in a box.

    Getting StartedCTC is packaged as a Portal Solution Archive, a single file that contains everything you need to build a CTC site, and a demonstration site that is an optional install.

    UnderstandingBefore getting too far into creating a site with CTC it is important to understand how a CTC site is structured, understand the patterns that have been used, and all of the templates you get.

    UsingThe best way to learn how to use CTC is to have a play with it, so be prepared to get your hands dirty and don't worry if you make a few mistakes.

    CustomizingCTC was built with customization in mind. The philosophy was to build the templates in such a way that your own templates, components, workflows, and other item tyes can slot into the framework easily and be used in conjunction with out of the box CTC assets.

    DeployingCTC will help you build a site much faster than building your own templates, components, and pages. The resulting site though will not be ready for production until it is integrated with the overall business process, which will necessitate setting up workflow and access control. It will also need to be tested, tuned and deployed into a production environment.

    Copyright IBM Corporation 2012 7

  • Getting Started

    Components Installed for CTCThere are number of components installed for CTC, including content libraries, an application (containing the plugins, textproviders, context processors and JSPs), a set of portal assets (page templates, pre-configured portlets, and the CTC theme and layouts).An additional Java application archive is added to the shared application directory for IBM Web Content Manager; this contains the enhancements that allow content to be copied during portlet and page template instantiation.Lastly, there are set of configuration parameters that are added during the install.

    Important Notes

    Compatibility with Content Template Catalog v2Content Template Catalog version 2 and 3/3.1 can be used along side each other, however the installation files for Content Template Catalog version 2 must be removed prior to installing CTC version 3/3.1. To remove the Content Template Catalog 2 installation files:

    1. Navigate to the PAA offering directory that was configured when setting up the Portal Solution Installer (defaults to /paa)

    2. Remove the folder named wp.ctc

    Installing in a Multi-server EnvironmentAll servers that will be used to develop, demonstrate, manage or deliver a CTC based site must have CTC installed on them. The CTC theme and CTC application are required on every server, and the configuration changes the CTC install scripts make are required to enable the enhancements. On a 7.0 environment, the CTC templating enhancements must also be installed on each server (this enhancement was moved into the core codebase in 8.0).

    If you attempt to use a CTC based site on a server where CTC has not been installed, you will not be able to instantiate CTC templates or portlets, and the rendering of many

    Copyright IBM Corporation 2012 8

  • components throughout the templates will fail dur to missing plugins.

    Deployment of CTC SitesAfter installing CTC on all servers where your CTC based site will be deployed, from then on the content and pages you develop, and modifications you make to the assets should be deployed in accordance with the standard recommended deployment practices for portal and content assets, as described in the product documentation.

    CTC Maintenance InstallationsMaintenance installs for CTC assets should be performed in a development environment, tested, and then deployed using standard portal and content deployment practices and standard application deployment practices for the CTC application.

    CTC 3.0 Install for 7.0If you are installing on 8.0, click here to skip down to the 8.0 installation guide.Please read the following installation instructions carefully before proceeding with the install.

    Prerequisites Portal Solution Installer version 1.2.0.4+ must be configured and installed before

    running any of the installation scripts. The Solutions Installer can be obtained from the the IBM Lotus and WebSphere Portal Business Solution Catalog (https://greenhouse.lotus.com/catalog/)

    IBM WebSphere Portal 7.0.0.1 plus Combined Cumulative Fix 008 or higher must be installed, and can be obtained through the WebSphere Portal Recommended Updates Page (https://www-304.ibm.com/support/docview.wss?uid=swg24027857)

    Please note that Combined Cumulative Fix 008 MUST be installed before installing CTC or the templating enhancements will not work. If you do install them in the wrong order by mistake, CTC must be un-insta

    Virtual PortalsThe install contains assets that are not scoped to a virtual portal, and assets that are. If you are not using virtual portals, you may simply install of CTC into the base portal. If you are using virtual portals, some of the assets will need to be installed for each virtual portal you intend to use them in.The scoped assets are the CTC Demo pages and the CTC page templates; the CTC application, content libraries, and portlet configurations are not scoped.

    Copyright IBM Corporation 2012 9

  • CTC Install OptionsThe default install configuration for CTC is to install all components, including a sample site called CTC Demo.The CTC Demo would typically not be installed on production environments. The CTC templates may be repeatedly installed on multiple virtual portals.These installation options are configured through the ctc.properties file, where they may be set to true or false to enable or disable respectively which components are installed:

    CTC_THEME: install the CTC Theme CTC_DESIGN: install the CTC Process library, CTC Design library, and the CTC

    enterprise application.

    CTC_BASE: installs the CTC Content library, and enables templating functions in IBM Web Content Manager and IBM WebSphere Portal Requires CTC_DESIGN install, both the CTC Process and CTC Design libraries are required by the CTC Content library

    CTC_TEMPLATES: installs the CTC Page TemplatesRequires CTC_THEME, CTC_DESIGN and CTC_BASE install, all of which are required for the templates to function

    CTC_DEMO: installs the CTC Demo library and CTC Demo pagesRequires all of the other installs.

    Note that all servers which will for be used developing or delivering CTC sites must have the CTC_DESIGN, CTC_BASE, CTC_THEME and CTC_TEMPLATES installed i.e. every option besides CTC_DEMO.

    Installation Procedure1. Extract CTCInstall.zip to a directory on the server where you want to install CTC2. Edit the ctc.properties file to match the configuration of your environment and the

    type of installation you want to do (see CTC Install Options)

    If you do not want to install the CTC Demo site on your base portal, set CTC_DEMO to false

    3. Run the installation scripts:

    Windows: run ctc-install.bat from the command line AIX/Linux: run ctc-install.sh from the command line

    4. When the script finishes successfully, CTC will be installed on your server. The server must now be restarted to enable features used by CTC.

    5. Once the server has restarted, check that the CTC has installed successfully by opening a web browser and navigating to Portal. If you have chosen to install the demo content, you will notice a new set of pages have been created at the page root.

    Copyright IBM Corporation 2012 10

  • Installing the CTC Page Templates on a Virtual PortalIf you are using virtual portals and wish users to be able to create CTC based sites in these virtual portals, you must install the CTC templates in each one.

    A full install, with or without the CTC Demo site, must be performed first on the base portal.

    After performing the main install on the base portal:1. Change the installation configuration in the components.properties file, located in

    the wp.ctc folder in the solutions installer offering directory. This is generally configured to be /paa/wp.ctc, but can be located elsewhere depending on the environments Solutions Installer configuration

    Disable installation of these components by setting the following properties to false: components/wp.ctc

    components/wp.ctc.themecomponents/wp.ctc.designcomponents/wp.ctc.demo

    Enable installation of the templates component by setting the followingproperty to true:

    components/wp.ctc.templates2. Go to the ConfigEngine directory.

    Windows: C:/IBM/WebSphere/wp_profile/ConfigEngine Linux: /opt/IBM/WebSphere/wp_profile/ConfigEngine AIX: /usr/IBM/WebSphere/wp_profile/ConfigEngine

    3. From ConfigEngine run update-paa-components to register the updated install tasks

    E.g.

    Windows: ConfigEngine.bat update-paa-components -DappName=wp.ctc

    AIX/Linux: ./ConfigEngine.sh update-paa-components -DappName=wp.ctc

    5. From ConfigEngine run deploy-paa to deploy the templates on each virtual portal

    VirtualPortalHostName The host name of the virtual portal

    VirtualPortalContext The context path for the virtual portal

    E.g.

    Windows: ConfigEngine.bat deploy-paa -DappName=wp.ctc -DVirtualPortalHostName=myhost.example.com -DVirtualPortalContext=myVirtualPortal

    Copyright IBM Corporation 2012 11

  • AIX/Linux: ./ConfigEngine.sh deploy-paa -DappName=wp.ctc -DVirtualPortalHostName=myhost.example.com -DVirtualPortalContext=myVirtualPortal

    Note that each instance of the templates will share the same content. The reason for installing the templates in a virtual portal is to provide access to use the templates in that virtual portal, it will not create completely isolated copies.

    Installing CTC Demo on a Virtual PortalYou may want to install the CTC Demo site in a virtual portal to isolate it from the base portal. If you wish to do this, then perform the initial base install with the CTC_DEMO option set to false.

    A full install of CTC must be performed first on the base portal.

    After performing the main install on the base portal:1. Change the installation configuration in the components.properties file, located in

    the wp.ctc folder in the solutions installer offering directory. This is generally configured to be /paa/wp.ctc, but can be located elsewhere depending on the environments Solutions Installer configuration

    Disable installation of these components by setting the following properties to false:

    components/wp.ctccomponents/wp.ctc.themecomponents/wp.ctc.designcomponents/wp.ctc.templates

    Enable installation of the demo component by setting the following property to true:

    components/wp.ctc.demo2. Go to the ConfigEngine directory.

    Windows: C:/IBM/WebSphere/wp_profile/ConfigEngine Linux: /opt/IBM/WebSphere/wp_profile/ConfigEngine AIX: /usr/IBM/WebSphere/wp_profile/ConfigEngine

    3. From ConfigEngine run update-paa-components to register the updated install tasks

    E.g.

    Windows: ConfigEngine.bat update-paa-components -DappName=wp.ctc

    AIX/Linux: ./ConfigEngine.sh update-paa-components

    Copyright IBM Corporation 2012 12

  • -DappName=wp.ctc5. From ConfigEngine run deploy-paa to deploy the templates on each virtual portal

    VirtualPortalHostName The host name of the virtual portal

    VirtualPortalContext The context path for the virtual portal

    E.g.

    Windows: ConfigEngine.bat deploy-paa -DappName=wp.ctc -DVirtualPortalHostName=myhost.example.com -DVirtualPortalContext=myVirtualPortal

    AIX/Linux/Solaris: ./ConfigEngine.sh deploy-paa -DappName=wp.ctc -DVirtualPortalHostName=myhost.example.com -DVirtualPortalContext=myVirtualPortal

    Note that you can install CTC Demo site on multiple virtual portals, however each instance will share the same content. This may be confusing and is not recommended. It will be possible to modify the page layout and portlets of each CTC Demo instance independently, but modifications to the content will affect all instances.

    Running the Member Fixer task after installThe sample content and demo site included with CTC contains the users that was used in the environment they were created in. These will not resolve on most environments, resulting in unresolved names appearing on the templates. To remedy this, the Member Fixer task must be run against the CTC Libraries.The member fixer can be run from the ConfigEngine using the following steps:

    1. Change to the ConfigEngine directory.

    Windows: C:/IBM/WebSphere/wp_profile/ConfigEngine Linux: /opt/IBM/WebSphere/wp_profile/ConfigEngine AIX: /usr/IBM/WebSphere/wp_profile/ConfigEngine

    2. Run the member fixer task run-wcm-admin-task-member-fixer with the arguments:

    fix=true/false Run the task in fix mode (modify the content) library=MyLibraryName Specify the library to run the task on invalidDn=update Update users with invalid usernames to the admin user altDn=update Update users with an alternate username available E.g.

    Windows: ConfigEngine.bat run-wcm-admin-task-member-fixer -Dfix=true -Dlibrary="CTC Content" -DinvalidDn=update -DaltDn=update

    Copyright IBM Corporation 2012 13

  • AIX/Linux: ./ConfigEngine.sh run-wcm-admin-task-member-fixer -Dfix=true -Dlibrary="CTC Content" -DinvalidDn=update -DaltDn=update

    3. Run the task again, changing the library argument to CTC Demo, CTC Design, and then CTC Process.

    UpgradingIf you have already installed CTC and wish to install a new version of CTC in the same environment, you will need to take care not to lose any customizations you have made to CTC.

    CTC Design and CTC Content libraries customizations directly to these libraries are not recommended, and the install process will either overwrite your changes, or potentially the install will fail.

    CTC Process library modifications to the process library are unavoidable, and will require re-applying of changes after a maintenance install. Items you have added to the library will be untouched, but updated items will be overridden and you must re-apply your changes, although typically this will only be re-selection of workflow stages.

    CTC Demo library the demo has been modified slightly, so you may choose to re-install the demo, assuming you have not already changed it.

    CTC Theme modifications to the CTC theme are also expected. To apply updates to theme provided in CTC releases, you may want to compare the modifications with your own customized version, and decide which of these to apply to your own theme

    Installing 3.0.0.1The changed components in 3.0.0.1 are:

    CTC Design library some components were added to fix problems with the display of selected categories in indexes, the old components were marked as obsolete in their titles.

    CTC Demo library some item's titles were modified to display more appropriate content in window titles and navigation

    CTC Theme the stylesheet content.css was updated to fix some styling issuesHow you run the install of 3.0.0.1 will depend on what type of modifications you have made already to your environment.

    No customizationIf you have not done any customization to CTC at all, including the demo site, then simply follow the install instructions and install 3.0.0.1 over the top of your existing CTC deployment.

    Copyright IBM Corporation 2012 14

  • Customization of the demo or process libraryIf you have modified items in the CTC Demo or the CTC Process libraries:1. Note any changes that have been made to items in the CTC Process library2. Install with the CTC_DESIGN and CTC_BASE options only following the install

    instructions in the previous section3. Re-apply your changes to the items in the CTC Process library4. Optionally re-install the CTC Demo library using the CTC_DEMO option

    Customization of the themeIf you have modified files in the CTC theme:

    Run a comparison between your version of the content.css file and the updated one in the CTC install package (you will need to extract it from the paa zip file)

    If the changed classes have not been modified in your version, you can simply copy the classes into your stylesheet as is

    If they have been modified, you will need to analyze the changes and decide if and how to apply them to your customized stylesheet

    UninstallTo perform a complete un-install of CTC will require consideration of what components you have installed, including the demonstration site and page templates, and where they have been installed, if they have been installed on virtual portals.

    Remove CTC Demo and Templates from Virtual PortalsIf you have not installed the demo or page templates on any virtual portals, you can skip this section. Otherwise follow these instructions to remove the CTC Demo pages and CTC Page templates from your virtual portals:

    1. Change the installation configuration in the components.properties file, located in the wp.ctc folder in the solutions installer offering directory. This is generally configured to be /paa/wp.ctc, but can be located elsewhere depending on the environments Solutions Installer configuration

    Disable un-install of the base components by setting the following properties to false:components/wp.ctccomponents/wp.ctc.themecomponents/wp.ctc.design

    Enable un-install of the demo and page templates by setting the following properties to true:components/wp.ctc.democomponents/wp.ctc.templates

    2. Go to the ConfigEngine directory.

    Copyright IBM Corporation 2012 15

  • Windows: C:/IBM/WebSphere/wp_profile/ConfigEngine Linux: /opt/IBM/WebSphere/wp_profile/ConfigEngine AIX: /usr/IBM/WebSphere/wp_profile/ConfigEngine

    3. From ConfigEngine run remove-paa to remove the demo and templates from each virtual portal. This needs be run once for each virtual potral where the demo or templates were installed:

    VirtualPortalHostName The host name of the virtual portal

    VirtualPortalContext The context path for the virtual portal

    E.g.

    Windows: ConfigEngine.bat remove-paa -DappName=wp.ctc -DVirtualPortalHostName=myhost.example.com -DVirtualPortalContext=myVirtualPortal

    AIX/Linux: ./ConfigEngine.sh remove-paa -DappName=wp.ctc -DVirtualPortalHostName=myhost.example.com -DVirtualPortalContext=myVirtualPortal

    Removing the CTC core components and assemblyTo remove CTC from the base portal and uninstall the CTC application archive:

    1. Change the installation configuration in the components.properties file, located in the wp.ctc folder in the solutions installer offering directory. This is generally configured to be /paa/wp.ctc, but can be located elsewhere depending on the environments Solutions Installer configuration

    Enable un-install of all components by setting the following properties to true:components/wp.ctccomponents/wp.ctc.themecomponents/wp.ctc.designcomponents/wp.ctc.templatescomponents/wp.ctc.demo

    2. Open a command prompt and go to the ConfigEngine directory. For example,

    Windows: C:/IBM/WebSphere/wp_profile/ConfigEngine Linux: /opt/IBM/WebSphere/wp_profile/ConfigEngine AIX: /usr/IBM/WebSphere/wp_profile/ConfigEngine

    3. Type and run the following command to remove the CTC assembly:

    Windows: ConfigEngine.bat remove-paa DappName=wp.ctc AIX/Linux: ./ConfigEngine.sh remove-paa DappName=wp.ctc

    4. Type and run the following command to un-install CTC:

    Windows: ConfigEngine.bat uninstall-paa -DappName=wp.ctc

    Copyright IBM Corporation 2012 16

  • Or ConfigEngine.bat uninstall-paa -DappName=wp.ctc -DforceUninstall=true

    AIX/Linux: ./ConfigEngine.sh uninstall-paa -DappName=wp.ctcOr ./ConfigEngine.sh uninstall-paa -DappName=wp.ctc -DforceUninstall=true

    Deleting the CTC LibrariesThe uninstall tasks do not delete the CTC libraries as the delete will fail if other libraries have been created with CTC content. The CTC Libraries must be deleted in the following order:

    1. CTC Demo Library and any Libraries with content created with the CTC Templates2. CTC Content Library.3. CTC Design Library.4. CTC Process Library.

    Deleting CTC Pages and templatesThe uninstall process will delete the templates, portlets, and demo pages added by CTC. Any pages created using the CTC Templates will need to be deleted manually along with any additional templates that have been developed after CTC was installed.

    Copyright IBM Corporation 2012 17

  • CTC 3.1 Install for 8.0Please read the following installation instructions carefully before proceeding with the install.

    Prerequisites IBM WebSphere Portal 8.0.0.0, cumulative fix 001 or higher

    iFix: 8.0.0.0-WP-IFPM69289

    Note that on IBM WebSphere Portal 8.0 the Portal Solution Installer is included in the based product offering, and no longer needs to be installed separately.

    Virtual PortalsThe install contains assets that are not scoped to a virtual portal, and assets that are. If you are not using virtual portals, you may simply install of CTC into the base portal. If you are using virtual portals, some of the assets will need to be installed for each virtual portal you intend to use them in.Scoping of content assets to virtual portals in Websphere Portal 8.0 depends on whether the new Managed Pages feature is being used.

    If it is, then all content libraries are scoped to virtual portals, and will need to be installed on each one they are required in.

    If it is not being used, then the legacy structure is used, where content libraries are global assets, not scoped to any particular virtual portal.

    Pages and page templates are always scoped; the CTC application and WebSphere Portal configuration are not scoped.

    CTC Install OptionsThe default install configuration for CTC is to install all components, including a sample site called CTC Demo.The CTC Demo would typically not be installed on production environments. The CTC templates may be repeatedly installed on multiple virtual portals.These installation options are configured through the ctc.properties file, where they may be set to true or false to enable or disable respectively which components are installed:

    CTC_DESIGN: install the CTC Process library, CTC Design library, and the CTC enterprise application.

    CTC_BASE: Installs the CTC Web Application and Theme. CTC_TEMPLATES: installs the CTC Page Templates and CTC Content library

    Requires CTC_DESIGN and CTC_BASE install, all of which are required for the templates to function

    Copyright IBM Corporation 2012 18

  • CTC_DEMO: installs the CTC Demo library and CTC Demo pagesRequires all of the other installs.

    Additional Installation options:

    FORCE_UPDATE: This will force the update of CTC install files. Setting this property to false can decrease the install time when deploying to multiple Virtual Portals

    VP_CONTEXT: The context path extension for your Virtual Portal VP_HOSTNAME: The hostname for your Virtual Portal

    Note that all servers which will for be used developing or delivering CTC sites must have the CTC_DESIGN, CTC_BASE, and CTC_TEMPLATES installed i.e. every option besides CTC_DEMO.

    Installation Procedure1. Extract CTCInstall.zip to a directory on the server where you want to install CTC2. Edit the ctc.properties file to match the configuration of your environment and the

    type of installation you want to do (see CTC Install Options)

    If you do not want to install the CTC Demo site on your base portal, set CTC_DEMO to false

    3. Run the installation scripts:

    Windows: run ctc-install.bat from the command line AIX/Linux/Solaris/: run ctc-install.sh from the command line

    4. When the script finishes successfully, CTC will be installed on your server. The server must now be restarted to enable features used by CTC.

    5. Once the server has restarted, check that the CTC has installed successfully by opening a web browser and navigating to Portal. If you have chosen to install the demo content, you will notice a new set of pages have been created at the page root. Otherwise, you can navigate to the Portal Administration page and verify that the CTC Libraries have been deployed through the Web Content Libraries section.

    Installing the CTC Page Templates on a Virtual PortalIf you are using virtual portals and wish users to be able to create CTC based sites, you must install the CTC templates and Web Content Libraries in each virtual portal.

    To install CTC on your virtual portal:1. Change the CTC install configuration file, ctc.properties located in your install

    directory

    VP_CONTEXT: Set this value to the context path extension of your Virtual Portal, e.g. if your virtual portal is accessed through

    Copyright IBM Corporation 2012 19

  • /wps/portal/myVirtualPortal then VP_CONTEXT should be set to myVirtualPortal

    VP_HOSTNAME: Set this to the host name of your virtual portal if you have one configured. The hostname value takes precedence over VP_CONTEXT, so If only a context path is used in your virtual portal, then this setting should be left blank

    CTC_BASE: This install component is shared between the base and all virtual portals, and should be set to false when installing on a virtual portal after the first deployment to the base has completed successfully.

    CTC_DEMO: This install component should be set to false to disable deployment of the CTC Demo site.

    2. Run the installation scripts:

    Windows: run ctc-install.bat from the command line AIX/Linux/Solaris: run ctc-install.sh from the command line

    3. When the script finishes successfully, CTC will be installed on your server. If you are not completing a CTC_BASE install, then you can access the virtual portal and start using CTC immediately.

    Installing CTC Demo on a Virtual PortalYou may want to install the CTC Demo site in a virtual portal to isolate it from the base portal. If you wish to do this, then perform the initial base install with the CTC_DEMO option set to false.

    A full install of CTC must be performed first on the base portal.

    After performing the main install on the base portal, to install the CTC Demo on your virtual portal:

    1. Change the CTC install configuration file, ctc.properties located in your install directory

    VP_CONTEXT: Set this value to the context path extension of your Virtual Portal, e.g. if your virtual portal is accessed through /wps/portal/myVirtualPortal then VP_CONTEXT should be set to myVirtualPortal

    VP_HOSTNAME: Set this to the host name of your virtual portal if you have one configured. The hostname value takes precedence over VP_CONTEXT, so If only a context path is used in your virtual portal, then this setting should be left blank

    CTC_BASE: This install component is shared between the base and all virtual portals, and should be set to false when installing on a virtual portal after the first deployment to the base has completed successfully.

    CTC_DEMO: This install component should be set to true to enable deployment of the CTC Demo site.

    Copyright IBM Corporation 2012 20

  • 2. Run the installation scripts:

    Windows: run ctc-install.bat from the command line AIX/Linux/Solaris: run ctc-install.sh from the command line

    3. When the script finishes successfully, the CTC Demo will be installed on your server. If you are not completing a CTC_BASE install, then you can access the virtual portal and start using CTC immediately.

    Running the Member Fixer task after installThe sample content and demo site included with CTC contains the users that was used in the environment they were created in. These will not resolve on most environments, resulting in unresolved names appearing on the templates. To remedy this, the Member Fixer task must be run against the CTC Libraries.The member fixer can be run from the ConfigEngine using the following steps:

    1. Change to the ConfigEngine directory.

    Windows: C:/IBM/WebSphere/wp_profile/ConfigEngine Linux/Solaris: /opt/IBM/WebSphere/wp_profile/ConfigEngine AIX: /usr/IBM/WebSphere/wp_profile/ConfigEngine

    2. Run the member fixer task run-wcm-admin-task-member-fixer with the arguments:

    fix=true/false Run the task in fix mode (modify the content) library=MyLibraryName Specify the library to run the task on invalidDn=update Update users with invalid usernames to the admin user altDn=update Update users with an alternate username available E.g.

    Windows: ConfigEngine.bat run-wcm-admin-task-member-fixer -Dfix=true -Dlibrary="CTC Content" -DinvalidDn=update -DaltDn=update

    AIX/Linux/Solaris: ./ConfigEngine.sh run-wcm-admin-task-member-fixer -Dfix=true -Dlibrary="CTC Content" -DinvalidDn=update -DaltDn=update

    3. Run the task again, changing the library argument to CTC Demo, CTC Design, and then CTC Process.

    Migration from WebSphere Portal 7.0 to 8.0For those migrating a 7.0 CTC install to 8.0, there are a few post migration steps that need to be followed in order to achieve the same look and feel after migration. All content and pages created with CTC can be migrated to 8.0 without issue, however the CTC Theme will need to be migrated manually.

    Copyright IBM Corporation 2012 21

  • Theme MigrationAs CTC3 on 7.0 is based on the PageBuilder2 theme, it requires some additional modules to be installed to function on 8.0.

    Installing the Mashup Integration Ear

    Windows: ConfigEngine.bat action-create-ear-wp.mmi.deploy AIX/Linux/Solaris: ./ConfigEngine.sh action-create-ear-

    wp.mmi.deploy Manually migrating the CTC3 theme

    On the 7.0 source server, access the following WebDAV URL to download a zip file of the 7.0 Theme:

    http://:/wps/mycontenthandler/dav/themelist/ctc_theme?mime-type=application/zip

    On the 8.0 Server, open your WebDAV client and connect to the themelist folder:

    http://:/wps/mycontenthandler/dav/themelist/

    Copy the contents of the exported zip to a folder called ctc_theme on the 8.0 server

    Apply the migrated theme to your migrated pages through Administration > Manage Pages and press the PageProperties button of your CTC pages, then select CTC Theme from the list of theme options and save the changes.

    After following these steps, the CTC site should appear identical to the 7.0 version.Optional Steps Installing the CTC3.1 for 8.0 Theme for use with 7.0 content:

    If you have existing CTC content, and want to take advantage of the new 8.0 theme enhancements, you can choose to install just the CTC Theme and CTC Application by setting the CTC_BASE install option to true, and disabling all other options. This will import the CTC3.1 for 8.0 theme, which can then be applied to your migrated pages. Any styles and changes will need to be manually merged into the newly installed theme.

    Enabling Managed Pages:

    To take advantage of the managed pages features after migration, follow the steps outlined in the Portal 8.0 wiki here:http://www-10.lotus.com/ldd/portalwiki.nsf/dx/Enabling_managed_pages_after_migration_wp8

    UninstallTo perform a complete un-install of CTC will require consideration of what components you have installed, including the demonstration site and page templates, and where they have been installed, if they have been installed on virtual portals.

    Copyright IBM Corporation 2012 22

  • Configuration for which components are un-installed is the same configuration used for installs: in the components.properties file.

    Remove CTC Demo and Templates from Virtual PortalsIf you have not installed the demo or page templates on any virtual portals, you can step this step. Otherwise follow these instructions:

    1. Change the installation configuration in the components.properties file, located in the wp.ctc folder in the solutions installer offering directory. This is generally configured to be /paa/wp.ctc, but can be located elsewhere depending on the environments Solutions Installer configuration

    Disable un-install of the base components by setting the following properties to false:components/wp.ctccomponents/wp.ctc.themecomponents/wp.ctc.design

    Enable un-install of the demo and page templates by setting the following properties to true:components/wp.ctc.democomponents/wp.ctc.templates

    2. Go to the ConfigEngine directory.

    Windows: C:/IBM/WebSphere/wp_profile/ConfigEngine Linux/Solaris: /opt/IBM/WebSphere/wp_profile/ConfigEngine AIX: /usr/IBM/WebSphere/wp_profile/ConfigEngine

    3. From ConfigEngine run remove-paa to remove the demo and templates from each virtual portal. This needs be run once for each virtual potral where the demo or templates were installed:

    VirtualPortalHostName The host name of the virtual portal

    VirtualPortalContext The context path for the virtual portal

    E.g.

    Windows: ConfigEngine.bat remove-paa -DappName=wp.ctc -DVirtualPortalHostName=myhost.example.com -DVirtualPortalContext=myVirtualPortal

    AIX/Linux/Solaris: ./ConfigEngine.sh remove-paa -DappName=wp.ctc -DVirtualPortalHostName=myhost.example.com -DVirtualPortalContext=myVirtualPortal

    Removing the CTC AssemblyTo uninstall CTC from the based portal, and its of the CTC components:

    1. Change the installation configuration in the components.properties file, located in the wp.ctc folder in the solutions installer offering directory.

    Copyright IBM Corporation 2012 23

  • This is generally configured to be /paa/wp.ctc, but can be located elsewhere depending on the environments Solutions Installer configuration

    Enable un-install of all components by setting the following properties to true:components/wp.ctccomponents/wp.ctc.themecomponents/wp.ctc.designcomponents/wp.ctc.templatescomponents/wp.ctc.demo

    2. Open a command prompt and go to the ConfigEngine directory. For example,

    Windows: C:/IBM/WebSphere/wp_profile/ConfigEngine Linux/Solaris: /opt/IBM/WebSphere/wp_profile/ConfigEngine AIX: /usr/IBM/WebSphere/wp_profile/ConfigEngine

    3. Type and run the following command to remove the CTC assembly:

    Windows: ConfigEngine.bat remove-paa DappName=wp.ctc AIX/Linux/Solaris: ./ConfigEngine.sh remove-paa

    DappName=wp.ctc4. Type and run the following command to un-install CTC:

    Windows: ConfigEngine.bat uninstall-paa -DappName=wp.ctcOr ConfigEngine.bat uninstall-paa -DappName=wp.ctc -DforceUninstall=true

    AIX/Linux/Solaris: ./ConfigEngine.sh uninstall-paa -DappName=wp.ctcOr ./ConfigEngine.sh uninstall-paa -DappName=wp.ctc -DforceUninstall=true

    Deleting the CTC LibrariesThe uninstall tasks do not delete the CTC libraries as the delete will fail if other libraries have been created with CTC content. The CTC Libraries must be deleted in the following order:

    1. CTC Demo Library and any Libraries with content created with the CTC Templates2. CTC Content Library.3. CTC Design Library.4. CTC Process Library.

    Deleting CTC Pages and templatesThe uninstall process will delete the templates, portlets, and demo pages added by CTC.

    Copyright IBM Corporation 2012 24

  • Any pages created using the CTC Templates will need to be deleted manually along with any additional templates that have been developed after CTC was installed.

    Quick StartIf you want to just jump in and have a play after you install CTC, here is a quick guide to getting started. If you wold rather follow a more structured approach to learning how to use CTC, skip forward to the Using CTC section, which has more detailed explanations of how to build each of the page types.

    1. Set up a new site:A few set-up steps are required before using the CTC templates. At the end of this process you have a home page, ready to create the rest of your site under.First create a content library and root site area, and a temporary root page:

    1. In the Portal Administration, Web Content Libraries section, create a new web content library for your site

    2. Navigate to the Web Content Management user interface and add this new library3. Create a top-level site area, this will be your site4. Navigate to the Portal Administration, Managed Pages section, and create a top-

    level page under Content Root called "temp". You must enter a friendly URL name for this page (temp is fine) and also select the CTC theme

    5. Edit the Page Properties of the temp page to add a Web Content mapping to the top level site area you created earlier

    Next create your home page using the Landing Page' template:1. Navigate to your temp page it will appear in the top navigation2. Click the Actions menu in the site toolbar3. Select New Child page in the drop down4. Enter the name of your page, and friendly URL. Note the friendly URL is used as

    the name of the site area that will be created, so you may want to change this later by editing the site area

    5. Click the select template link and select the Landing template6. Click Create Page

    Lastly, move the new home page to the root, and remove the temporary page:1. Navigate to the Portal Administration, Manage Pages section, and click down to

    the your new home landing page under temp2. Mark the home page to be moved, navigate up one level, and click Move - it will

    now be a top level page and appear in the top level navigation3. Delete the temp page

    At this point you have an empty site, and you can start using CTC page templates.

    Copyright IBM Corporation 2012 25

  • 2. Create landing pagesLanding pages are used to group areas of content together to make the navigational structure usable.For example you might want to group all of your communications types of content like News, Executive Communications, Press Releases, etc. together. So you could create a page called Communications using the Landing Page template supplied with CTC.

    1. Navigate to your home page, or the parent Landing page where you want to create a new landing page

    2. Click the Actions menu in the site toolbar3. Select New Child page in the drop down4. Enter the name of your page5. Click the select template link and select the Landing template6. Click Create Page

    A new page will be created for you, with a corresponding structure in your IBM Web Content Manager library

    3. Create Index and Detail pagesMost content types require a pair of pages to be created an Index Page to provide content navigation, and a Detail Page to display individual content items.

    1. Navigate to the landing page where you want to place an Index/Detail page pair.2. Click the Actions menu in the site toolbar3. Select New Child page in the drop down4. Enter the name of your page5. Click the select template link and select the appropriate Index page template for the

    type of content you want to create6. Click Create Page

    A new page will be created for you, with a corresponding structure in your IBM Web Content Manager libraryAfter the page is created, which may take up to a minute, you will see a list of sample content items.You now need to create a detail page, so:

    1. Click the Actions menu in the site toolbar2. Select New Child page in the drop down3. Enter the name of your page4. Click the select template link and select the matching Detail page template for the

    type of content you are creating5. Click Create Page

    A new page will be created for you, this will be faster this time, as it will not copy any IBM Web Content Manager artifacts, it will simply link the detail page to the Content area in

    Copyright IBM Corporation 2012 26

  • this area of your site

    You now have a working pair of pages with sample content.You can edit or remove the sample content and add your own content.

    4. Add lists to your landing pageNow that you have content in a sub area under your landing page, you will usually want to display the latest and featured content on the landing page.

    1. Navigate back to your landing page2. Click the Actions menu in the site toolbar3. Select Edit Page in the drop down4. Click Customize in the page builder shelf to open the page builder palette5. Select the CTC List Portlets tab6. Drag and drop portlets onto the page7. Click Save & Exit in the page builder shelf

    You can drag and drop any of the pre-defined list portlets onto your page. For some content types these will already be defined, or you can drop a generic portlet on and configure it after you drop it onto the page. Note that there is typically two versions of each list in the pallete one has been formatted for the main column, and the other for the sidebar column.The portlets that are fully pre-configured will show content immediately; the generic portlets will need to be configured. To configure a generic portlet you need to tell the portlet what type of content to retrieve.

    1. Click the Actions menu in the site toolbar2. Select Edit Page in the drop down3. Hover over the list, and you will see a gear icon to edit the list configuration click

    on the icon4. A pop-up dialog will open with the list configuration form scroll down to the List

    Templates and enter the name of template in the format Library Name/Template Name

    5. Click Save & CloseThe generic portlet should now be able to retrieve content beneath this landing page that was created with the specified template. Note that the library and template name must be an exact match for this to work.At this point you have a landing page which pulls content from the areas underneath.

    5. Scope the lists on your landing pageWhile the list portlets will work as is on a landing page, they are pulling content from all areas under the landing page, which may not be desirable. Also their titles are not linked to any site area as the component does not know exactly which area the content is coming from.

    Copyright IBM Corporation 2012 27

  • So in many cases you will want to limit the list to a specific sub area, and you would also like the list title to act as a shortcut to that area. To do this you simply edit the configuration for that list to scope it to a specific area. This will restrict the retrieval of content, and also cause the title to become linked.

    1. Click the Actions menu in the site toolbar2. Select Edit Page in the drop down3. Hover over the list, and you will see a gear icon to edit the list configuration click

    on the icon4. A pop-up dialog will open with the list configuration form scroll down to the

    Context Override field and select a site area to scope the list to5. Click Save & Close

    When the page refreshes, the list is now scoped to the specific site area you selected, and the title of the list will now be linked to that site area.

    6. Repeat steps 2. to 5.For each landing page and content type you can repeat the process above to flesh out your site.Note there are two templates in CTC that do not require a pair of Index and Detail pages: the Standalone Topic template is a standalone detail page template for static pages, and the FAQ Index/Detail template combines the index and detail functions in one page.

    7. Add cross-linked lists to other pagesOnce you have a number of areas in your site, you may see places where you would like to link across pages that are at the same level, or in completely separate areas. For example to show News on an Executive Communications page, or show Alerts on the News page.While this is a slightly different case than landing pages, the set up process is basically the same. The difference is in supplying a scope, which was an optional step on landing pages, but is required step for cross-linked lists.

    1. Navigate to the page you want to add the list to2. Click the Actions menu in the site toolbar3. Select Edit Page in the drop down4. Click Customize in the page builder shelf to open the page builder palette5. Select the CTC List Portlets tab6. Drag and drop list portlets onto the page7. Click Save & Exit in the page builder shelf

    The list portlet will appear, but will not show any content. Now you need to tell the list where to get the content from.

    1. Click the Actions menu in the site toolbar2. Select Edit Page in the drop down

    Copyright IBM Corporation 2012 28

  • 3. Hover over the list, and you will see a gear icon to edit the list configuration click on the icon

    4. A pop-up dialog will open with the list configuration form scroll down to the Context Override field and select a site area to scope the list to

    5. Click Save & Exit in the page builder shelfWhen the page refreshes, the list is now scoped to the specific site area you selected, and the title of the list will now be linked to that site area

    8. Customize your Home PageThe home page is unique in the site, and will typically be the most customised page:

    Add a body portlet to show the content item for the home page, this can be used to display introductory text on your site

    Utilise the CTC List portlets to display information from various areas around the site

    Create a Promotions area under your Home area, and use the promotions pattern from the other templates to implement a promotional slideshow for your home page

    Copyright IBM Corporation 2012 29

  • Understanding CTC

    CTC LibrariesThe IBM Web Content Manager assets for CTC are split into three libraries CTC Content, CTC Process, and CTC Design. Also if you install the demonstration site there is a fourth library called CTC Demo.The assets were split to allow you to override the sample content, categories, and workflows associated with the templates, and still receive updates to the CTC design. The installer has an option to only update the design library, which you can use when installing a maintenance release of CTC.

    CTC ContentThis library contains the micro-sites associated with the page templates, and the content that is used in all of the pre-configured portlets. If you intend to use CTC as a tool to build a site rather than an site management tool, it is unlikely you will want or need to update this content.However if you intend to use the CTC templates as a platform for ongoing rapid site development, then you will probably want to replace the sample content in here with something more tailored to your application, and potentially add additional micro-sites for your own specific page templates.

    Copyright IBM Corporation 2012 30

  • CTC ProcessThis library contains categories and workflows. It is likely that you will need to modify and add categories, and modify and add workflows to match your profiling and change management strategies.

    CTC DesignThis library contains all the design assets of CTC authoring templates, presentation templates, and components. This library should not be modified.

    If you require changes to the authoring templates, they should be copied to a new library rather than modified, so that you can receive updated authoring templates when new features are added to CTC. The new features may result in additional elements, which you can add to your own templates.

    If you want to change a presentation template, then copy it into your own design library. You can then either put a mapping to this presentation templates into your sites to override the mappings on the authoring templates, or you may want or need to also copy the authoring template and then modify the mapping directly.

    If you want to change or add components headers, footers, result designs, etc. - these should be created in your own design library, and then referenced from your micro-sites and your actual websites.

    Templated Site StructureThe main goal with CTC 3/3.1 was allow a complete site to be built from page templates. Each template instantiates a micro-site of content artifacts along with the page, and the portlets on the page are automatically linked to this content.This required the creation of a pattern for how a site is structured. This pattern consists of three types of page templates and a repeated structure for each site area in the content repository. It is important that this pattern is followed when you build a CTC based site. The expectation that the templates will be used this way is built into the design of the templates.

    Page TemplatesThe three types of page templates in CTC: Landing Pages, Index Pages, and Detail Pages. The overall site structure created using Landing Pages; nested to create a hierarchical navigation structure. A combination of Index/Detail pairings, standalone Detail pages, and combined Index/Detail pages then add content areas to your site.This pattern must be adhered to for the templates to work as intended:

    Top levels are Landing Pages. They are used to build up the navigational structure of your site. Landing pages can be nested arbitrarily, but typically more than 3 levels becomes difficult to navigate for users

    The leaves of the navigational structure are Index Pages. These provide access to content items and are the focal point for inline editing activities. You cannot nest index pages underneath each other and only the matching detail page template

    Copyright IBM Corporation 2012 31

  • should be to create a child page under an index.

    Finally there is hidden (from the navigation) level of Detail Pages. These are used to display individual content items when a link is clicked on. You cannot nest other pages under detail pages.

    This diagram shows a fragment from an information architecture and how this can be mapped over to the 3 page types:

    Copyright IBM Corporation 2012 32

  • Note that there are some variations on the Index/Detail pattern for specific content types:

    Standalone Topic for static pages

    Sections supporting arbitrarily hierarchical content

    FAQs with all-in-one index/detail layoutsThe Standalone Topic can be used anywhere you need a single item of content on a page.The Sections template can be used whenever you have the need for a book-like structure in your site. For example a policies and procedures manual.

    Micro-site TemplatesWhen a CTC page template is instantiated, a micro-site is copied into your site at the same time. These micro-sites are in the CTC Content library, and serve a number of purposes:

    They instantiate a structure for content, components, etc.

    They provide sample content so the area does not start out empty

    They provide sample component configurations for lists, navigation, etc.The structure of each micro-site provided with CTC is very similar. They have site areas for storing all the artifacts for an area: promotional material, component configurations (lists, slideshows, etc.), feeds, and of course the actual content items.

    Copyright IBM Corporation 2012 33

  • Linking the Pages and Site AreasThe two structures the page structure and the site structure link together with each Landing and Index page linking to a micro-site root area, and the Detail pages linking to the Content areas in the IBM Web Content Manager site.As you instantiates pages from CTC page templates, you are also at the same time building a IBM Web Content Manager site from the top down, with all of the appropriate structures, component configurations, sample content, etc. you need to get a working site.This site you are building can then accommodate the addition of content and more components using the CTC portlet palette, or creating them manually.

    Content TypesWithin the framework of index and detail page templates, there are quite a few types of content provided with CTC. These content types were selected to cover most of the common content types used on both intranet and internet sites. The roughly fall intro four groups, based on the type of lifecycle they undergo:

    Post: like News and Alerts, that are posted up at a point in time on the site and typically fall off' the site as they age.

    Scheduling: like Events and Courses, that represent something that is happening in the future, and will be kept on the site until that event occurs

    Publications: like general Topics and FAQs, etc. where information is published and then maintained over the long term

    Profiles: like Biographies, that are about people or things; the life-cycle of these depends on the movement of people, the purchasing/release of plant, etc.

    You will see common patterns repeated across the templates wherever the same data is required. For exmaple many of the types have a section of Contact fields where you can either select a contact from your address book, or enter contact details directly. In these cases where there is repeated fields, typically the same rendering code will be associated with those fields for consistency across the site.

    Common FieldsTo provide consistency of authoring experience, and to get the most re-use out of the rendering components, there are repeated patterns of elements across many of the templates. The most common ones are described here.

    Names, Titles, Description

    Names appear in URLs

    Title is used in lists and also appears on detail pages

    Description is for an internal description of an item it will only appear in the site if no Summary is entered

    Copyright IBM Corporation 2012 34

  • Index Image and Summary

    Index Image and Library Index Image provide a way to associate an image with an item for use in lists. The image field called Index Image provides image upload, or an existing image can be selected using the Library Index Image element

    Summary is a rich text element that appears in lists, and in some templates as a blurb after the title and before the body. If no summary is entered, display will fallback to show the description field

    Body

    All of the templates have a rich text Body element for text, images, links, tables, etc.

    Attachment/s and Link/s

    Attachment element/s appear on many of the templates, and provide a way to upload additional file based content. For types without these fields, the author can always link to a Download item

    Link element/s appear on many templates as well. This was done on content types where it was likely that a prominently displayed link is desirable, but links can always be entered in the Body of an item

    Feature Option and Feature ImageSome of the templates provide a feature option which marks the item to be displayed in featured lists and 'special' feature lists.

    Feature Option is a selection field that defaults to Not featured, but can be set to Featured or Special Feature. These are categories that then drive selection of these items in feature lists

    Feature Image allows upload of an alternative image for use in feature lists. This image is larger than the Index Image

    Library Feature Image allows selection of existing feature image

    Attribution Option and Attribute ToFor content types where it is common to attribute the content in the site to an author, two fields were provided to allow flexibility of the attribution:

    Attribution Option is a selection field that defaults to using the Authors field, but can be set to Enter Name or No Attribution

    Attribute To allows you to enter a name for the Enter Name attribution option

    NewsNews is a general purpose content type for posting current information to your site. They are listed from newest to oldest, and generally fall out of view as time passes. The use of a filter form on the index allows users to search back through past news.You could create a set of specific news areas for different types of news and then group

    Copyright IBM Corporation 2012 35

  • them together under a landing page. Or perhaps if the site was arranged around some other grouping, such as organizational unit, each of those groups could have their own news area.News is unique among the content types in having a field for uploading video. It is also one of three types that have the featured option, allowing a news item to be marked to appear in feature lists, and special feature lists.

    Note on playing video. CTC does not container a complete solution for storing and playing videos. The implementation is very basic, and is simply a field for uploading a video and default rendering using a tag. If you are going to use the video field, you will need to use a cross-browser solution for the video play (e.g. a flash video player) and you may also need to use a transcoding service to support iphones or slow connections.The other option for video is to use a video hosting service, and use the hosting services embedded video player in your content.

    Press ReleaseThis template is used to post press releases onto your site. While similar in behavior to news, there are some extra fields on the template to provide a place to put contact information for the viewer wanting further information, and to record the original release date. It is less likely that you would create multiple press releases areas in a site, except perhaps in site that represents multiple organizations or companies.The press release template has both the Attribution and Contact fields. There is also a release date field that is optional, but can be used to display the original date the press release was made public.

    AlertMore typically used on intranets, this is a template for posting important information that you want you readers to take note of, and potentially take action on.While the data is once again very similar to news and has the same contact fields as a press releases, it is the use case and life-cycle that is different. It is expected that alerts will only be maintained on the site for as long as they are actively important, and will be expired or deleted when they are no longer valid.As we don't expect this type of content to be 'archived' on the site long term, the alert index does not include a date filter.

    CommunicationAnother template typically used in intranets. This template is used for internal communications executive communications, postings from a particular organizational unit, etc. There could be a shared communications area that is used by a number of executives or units, or more typically, there would be a communications area created for each.

    Copyright IBM Corporation 2012 36

  • The communication template has an additional image field to allow an image to be placed in the header of the content. This might be a photograph of the author to give the presentation an editorial feel, or it could be a topical image. The communication template has the Contact fields, which may be a different person than the attributed author.

    Job OpeningThis templates is aimed at a simple job posting function, rather than attempting to duplicate purpose built job posting systems. The template contains profiling fields typical of jobs, including a Type field indicates whether this is a full-time/part-time/casual/contract, a Categories fields allow the job to be categorized, and a location field. There is also a set of contact information fields. The template also has two fields to indicate the status of the job: a selection field with open/closed options, and a text field to enter a status message.Note that the Job Openings Index will only show Open and Closed jobs. Jobs marked as Filled or Withdrawn will not appear in the list. Some workflow should be associated with jobs to ensure a job will not stay in the list indefinitely i.e. job openings should eventually be either moved to a Filled or Withdrawn state.

    EventThis template is for posting articles about upcoming events. You supply the dates the event is running from and to, and the index page will by default only show upcoming events, and a short list of recent featured events. The user can browse past events by changing the date range in the filter. Archiving (using expiry) of events can be used to remove them from the list completely so that users cannot find them after they have occurred.Events have the standard set of contact fields, and also fields for uploading an attachment and entering a link. The attachment would typically used for a take-away item like a brochure, while the link can be used to link off an event site for example, in the case of larger eventsLike News, this template has the featured option fields, allowing a event to be marked to appear in feature lists, and special feature lists.

    CourseSimilar to the Job Opening template, this is meant to provide a simple course announcement facility, and is not meant to duplicate a purpose built course management system. Fields are included for start and end date for the course, an optional attachment, location and contact details, and a status field to indicate if the course is still open for enrollment.

    MeetingThis template is for meeting announcements, and for recording attendance and minutes. While much of this type of activity would normally be done in a calendaring system, there are cases where meetings need to be announced and tabled publically, which is the intended usage of this template.

    Copyright IBM Corporation 2012 37

  • Meetings have fields for start and end dates (times), location, contact details, and fields for recording attendance and minutes.

    TopicThe Topic template is the most general of the templates and is intended for traditional static content publishing. This type of content is generally long lived, undergoing revisions over time and re-published repeatedly.The template has additional fields for entering links and attachments (3 of each), provides the featured option fields, and has the authoring attribution options too.This template is unique in being used in multiple page templates

    Standalone topic template a single topic you can place directly in the site navigation

    Topics index template for posting a list of topics

    Sections index template which is actually for creating hierarchical topics structures, using Sections to group related topics

    SectionThis template is to used to provide structure over a group of topics. Using the section and topic templates together is intended to cover generic structured content that is often used to record information that used to reside in documents. For example polices and procedures, and technical documentation.

    FAQA simple template for entering a question and an answer. The question is text, and the answer is rich text. This page template for this content type is unique in embedding the body of the content (the answer) directly into the list of FAQs. This means there is no FAQ detail page, only an FAQ Index template.

    DownloadTo be used for publishing important downloadable material. It uses a rich text body field to describe the download, and a file upload field to attach the download.

    LinkFor publishing important links to internal or external sites. It uses a rich text body field to describe the link, and a link field.

    BiographyThis template is for posting information about a person. It is not intended as a replacement for an address book product, but as a simple way to post personnel information on a site. It could also be used to publish information about companies, for example partners or customers.

    Copyright IBM Corporation 2012 38

  • FacilityThis template is for posting information about a facility of some kind. For example a building, location, or an asset. Once again, it is not intended as a replacement for an address book product, but as a simple way to post information on a site about company facilities.

    FeedsCTC implements a feed solution based on using IBM Web Content Manager querying components like menu components and personalization components, etc. The feeds are served up as a content item through the IBM Web Content Manager servlet, and so have a well defined URL that you can control the name of, and will remain static over time.Each feed is represented by a content item with the authoring template Content Feed. This template lets you fill in all of the metadata for a feed, such as title, sub title, icon, email addres, etc. and you also select the component that will retrieve the list of content for the feed.You can create mulitple Content Feeds in a single area, for example to represent categorized views on a data set. You can also aggregate all feeds under a landing page into a single list, or across the entire site. This is done by retrieving all Content Feed items across an area of the site, and then presenting this as a list of feeds.

    Presentation Templates & ComponentsOne of the more difficult aspects of building a templated solution was to allow the rendering to be flexible enough to deal with an unknown site. To solve this we used patterns to support heavy re-use of components and to allow custom developed components to be used along-side out-of-the-box components.Common fragments were extracted and re-used as much as possible, and a set of plugins were written which introduced some simple but powerful logic tests into the rendering, which also allowed for more re-use.The end result is that the design has been kept quite compact, with a lot of re-use of

    Copyright IBM Corporation 2012 39

  • assets, while still being very flexible.The components are grouped into folders like this:

    Content Items The presentation of content types like News, Events, Communications, etc. is very simple and consists of styled containers wrapped around the content fields. There is a template for each content type, mapped directly onto each authoring template. The templates re-use a lot of formatting code by using a set of components in the Field Designs folder. Each field design is a HTML fragment responsible for rendering a particular field or group of related fields.The markup structure of each presentation template has a overall container which contains three sub-containers header, body and footer. The header typically contains the titles, subtitles and bylines, the body a summary and body, and the footer has tags.

    Component Configuration ItemsThe four component templates in CTC are Block, List, Slideshow and Carousel; they are all designed to allow the configuration of a component for a portlet. This is a key concept in CTC and allows for much re-use of components by mixing and matching them in different ways throughout the site. Re-use is not only good for reducing maintenance, but it also ensures common designs and better for site usability.Each of the component configuration authoring templates has a matching presentation template that renders a component. This is a HTML component typically in the case of a Block, and a Menu, Rule, or Navigator for the other types. This component is rendered via a special JSP that renders the component in the appropriate contextSelected header and footer components are rendered before and after the main component, and the whole thing is wrapped in a tag that can be styled using a CSS class. For Lists, Slideshows and Carousels, a result design component is also selected. This allows the same queries to be re-used throughout the site, but with different fields being displayed with different formatting.

    How does it work?The key code that enables this pattern is a JSP that setups a context for the execution of the main component. This includes setting paths, categories, and templates into the request, and then executing the component in either a selected context, or using the current page context.The following diagram shows the process involved; it is a little complex, but it is what enables the CTC site to re-use components so heavily, by allowing them to be customized for each area of the site.

    Copyright IBM Corporation 2012 40

  • Copyright IBM Corporation 2012 41

  • Headers, result designs and footers are pulled in by using the new portletContext option in element and property tags.Note that the Block template works in exactly the same way, there is simply no result design being used as the component that is selected is not expected to be a list.

    The Importance of the Context Override field

    Setting a context override is the key to getting many of the components to select content appropriately throughout the site, and to allow re-use of these components (i.e. by avoiding the hard coding of site areas into menus, rules, etc.)

    The components you select in a component configuration require a context to execute it in. While this can sometimes be the current page context, in many cases you must set a different context:

    When displaying content from up/down the site hierarchy

    When cross-referencing to other sites area

    Or to scope a list to a specific area if it is retrieving content to broadfly.

    Copyright IBM Corporation 2012 42

  • An Important Note on Headers and Footers

    The main component referenced in a Block, List, Slideshow or Carousel configuration is responsible for rendering the header and footer.

    This is an important point to note when creating new components: the main component must render the header and footer, as it is not hard-coded into the presentation template. This was necessary for two reasons:

    To support the use of paging information tags in the headers and footers, the header and footer had to be rendered inside the component that ran the query

    To allow conditional hiding of the entire block or list of information the code inside the list or block can decide to render nothing at all

    When creating new components you may forget this step, and the header and footer will not render. To add header and footer rendering into custom components, there are fragments you can used called Design Template Header and Design Template Footer. These are located in the Fragments folder in CTC Design.

    Using this Pattern for Other ComponentsThe component configuration types in CTC are just a starting point: this is a method for integrating functionality with your content, and giving non-technical users control over the functionality. They also represent a design strategy that will encourages designers to build in a re-usable way that can be applied throughout your site.The types in CTC are purposely quite generic, but this also means they are not as simple as they could be. Building more specific configuration types suited exactly for you use cases will allow you to create a simpler interface for authors to use.

    Block TemplateThis template is for displaying blocks of content in a portlet. It's basically just a generic template for putting three components together a header, content, and footer. But it also includes the context override option and title that the more complex types like List or Slideshow have.The Block template has been used in CTC wherever a block of content needs to be displayed in its own portlet for example the social media tools portlet, or the details portlet used on many of the detail pages.Note that a block can be completely removed from the output by testing for the empty data before rendering headers and footers. This is used in a number of places in CTC to render optional data.Some examples of Blocks:

    Copyright IBM Corporation 2012 43

  • 1. Single item navigation block 2. Tools and information block 3. Current item details block

    List TemplateThe List template is used extensively in CTC to configure lists of content. The pattern is very general and could be used most types of list you might want to display in a site.A List Component is selected which does the work of querying for content. The list then pulls in the formatting the header, result design and footer from the List configuration item that triggered it . This separation of the query from the presentation allows the same list component to be used many times and formatted differently in each case.This pattern also allows you to mix-in your own custom list querying component (i.e. menus, personalization rules, searches or navigator components) and your own header, footer and result design components. So you can use you custom queries and formatting with the CTC ones in the same List configuration items.For lists that require parameterization, there are three fields that are set up in the contextual rendering code:

    Context Override will override the current page context and set a selected context for rendering, this can be access in the list components. For use in personalization rules, this context has also been set to a request attribute.

    List Templates a list of template names that can be used in Menus

    List Categories a list of categories that can be used in MenusSome examples of Lists:

    Copyright IBM Corporation 2012 44

  • 1. Short list of upcoming items on a landing page 2. Index list on an index page

    Slideshow TemplateA slideshow is a great way to show multiple items in a small space, and typically uses strong imagery to attract attention. Navigation controls allow the user to navigate thr

    ough the slides, and the slideshow may set up to run automatically,once only, or only manually by the user.The Slideshow template is actually very similar to the List template, it has most of the same fields, but adds additional fields for configuring the behavior of the slideshow widget. The configuration includes the type of transition, duration, automatic vs. manual, when to pause, and what controls to display.The widget used to render the slideshow is a dojo widget called dojox.widget.AutoRotator, which simply rotates through the elements in a list, with a transition. In CTC the examples are only a linked image, but the list could actually contain any type of content.The configuration information that is entered into a Slideshow configuration item is translated into parameters for the widget using a javascript method in content.js. This code is also responsible for instantiating the dojo widget.The styling of the slideshows is somewhat complex as they have a separate caption container that is populated as it rotates through slideshow. The caption is stored in a hidden div with each slide, and is then copied into the visible container through event handlers attached to the widget.\An examples of Carousel:

    1. Promotional slideshow, with overload captions, and title controls 2. Content slideshow with number controls and formatted caption

    Carousel TemplateA Carousel another method for showing more content in a small space, but this time a page of items is show at a time, and navigation controls allow you to move back and forward through the pages.In the same pattern as the Slideshow template, this is essentially the List template with extra fields for configuring the carousel. And similarly there is javascript functions for reading the parameters and instantiating the carousel widget.One important point to note for the carousel is that widget being used required the data to be passed in via a JSON object. This makes it much easier to break a carousel by

    Copyright IBM Corporation 2012 45

  • accidentally breaking the creation of this object, the most common being the ntroduction of line breaks into a carousel result design, which is going to break the javascript strings being generated.An examples of Carousel:

    1. Carousel showing featured items

    Rendering PluginsIncluded in the CTC package is a set of general purpose rendering plugins that provide some conditional rendering capabilities, and also access to some environmental data like the request and current date.You can use these plugins in your own components that you develop, and use them as inspirations for building your own.A tip when using these is to format the HTML fragment you are using them quite verbosely at first whitespace and linebreaks until you have them working as desired. Then you may want to remove the whitespace and line breaks to compact the rendered HTML down to a more readable format in the output.

    If Empty and If Not Empty PluginsTesting for an empty or non-existent element, or an empty property, is extremely useful conditional rendering capability, and allows the optional rendering of blocks of markup based on what data is available. By using them in pairs and even nesting them, you can implement fallback rendering of data from different fields, or provide alternative fallback text.The plugins simple check if the value retrieved is empty and renders the tag body if the conditions are satisfied where the ifEmpty plugin renders the tag body if a passed in value is empty, while the ifNotEmpty plugin renders the tag body if the value is not empty.The values passed in can be rendered using IBM Web Content Manager tags like [property], [element] and [component] tags.

    Parameters

    value: The value to check whether it is empty

    Copyright IBM Corporation 2012 46

  • Usage[plugin:ifEmpty value=]...render if value is empty...[/plugin:ifEmpty]

    [plugin:ifNotEmpty value=]...render if value is not empty... [/plugin:ifNotEmpty]

    If Equal and Not Equal PluginsThese two plugins compare two values, rendering the body of the tag only if the values match or don't match respectively for ifEqual and ifNotEqual.You can use these plugins to do more sophisticated conditional rendering, like only displaying a field if another field has a certain selection value set, or in the case of the date ranges in the CTC template it used to test if to dates where on the same day, or in the same month.The values that are passed in can be a combination of static strings tags.

    Parameters:

    value1: First value to compare value2: Second value to compare

    Usage:[plugin:ifEqual value1= value2=]...render if values are equal...[/plugin:ifEqual]

    [plugin:ifINotEqual value1= value2=]...render if values are not equal... [/plugin:ifNotEqual]

    If-In-Range PluginThis plugin can render results selectively based the specified range within a list of items i.e. items 1 through 3 might render an image, while the rest of the list may not. This plugin should be used in menus or navigators where different styling and markup is required for certain results.In CTC this tag is often used to conditionally render data for the first item, and so open lists, markup the first item with a different style, etc. Using the [pageinfo] tag in the range number can also allow you to test if this is the the last item and render it differently as well.

    Copyright IBM Corporation 2012 47

  • The when odd/even option can be used to implement alternating row styling, or to float items into a 2 column layout.

    Parameters

    from (Integer): Specify the start of the range to (Integer or *): Specify the end of the range. Specifying '*' indicates that the

    range should continue until the end of the result set.

    when odd/even: Render the body when the result is in the range and is Odd/Even

    Usage[plugin:ifInRange from= to=|* when=odd|even]...render if condition is satisfied...[/plugin:ifInRange]

    Get Date PluginRetrieve the current date on the server in the specified format.

    Parameters

    format: The format to render the date in Java DateFormat notation

    Usage[plugin:getDate format= /]

    Render attribute pluginThis plugin can be used to render a specific attribute from the session or request. This is useful when forms are being used as a simple way to display the previously submitted form value; assuming that the form processing code has placed the values into the request.

    Parameters:

    scope: request or session to retrieve attributes from the request or session respectively

    key: The name of the attribute to retrieve from the request or session

    Usage:[plugin:attribute scope=request|session key=/]

    Render parameter pluginThis plugin can be used to render a specific parameter from the request on the page.

    Copyright IBM Corporation 2012 48

  • Parameters:

    key: The name of the attribute to retrieve from the request or session

    Usage:[plugin:parameter key=/]

    ThemeCTC uses a single theme that is a copy of the Page Builder theme: the 7.0 version was based off the original page builder theme, and the 8.0 version is based on the new 8.0 theme.To implement the CTC graphic design, the theme HTML was modified and additional CSS, JS and images files were added. None of the standard page builder dynamic content spots were modified they are being used as is from the page builder application.A dynamic content spot was added to the CTC theme to provide a link on the logo that goes to the current home page, i.e. the top level page on the current page, which is typically the home page.And for the 8.0 version, a content spot was developed to replace the navigation with a mega menu style of pop-up navigation.The theme will need to be edited to replace the logo, insert footer text, modify the main site navigation, or any other changes that are required outside the main area of the page.

    LayoutsThree layouts were created to work with the CTC theme. These layouts are based on a 6 and a 4 column grid.

    4 Row the first is a simple full width design that has not actually been used in the any of the page templates in CTC, but would be suitable if you wanted to utilize the full page width in the main content area of the page.

    4 Row, with split main column the second, and most commonly used, layout is a 4/2 split based on a 6 column grid. The larger column being used for the main content of the page, and the smaller column for auxiliary information.

    4 Row with navigation the third layout, which is used exclusively in the Sections templates, is a 1/2/1 split based on a 4 column grid. The first column is for additional navigation required in the nested content structure provided by the Section template, the large column is for content, and the last column is the auxiliary information column.

    Additional layouts based on different divisions of the grids can be added easily by copying these layouts and adding the additional styles to the theme stylesheet.

    Copyright IBM Corporation 2012 49

  • Here are the thee layouts in CTC, with