Page Comparison

...

1. Log into XperienCentral.
2. Create a new page.
3. Set the status of this page to "Published".
4. Enter some text on the page and an image element.
5. Open the properties of the page.
6. Check the "Define other settings for this page" check box and click [Apply].
7. Next to "Design Template", select the design template you created, click [Apply] and after that [Close].
8. Preview the page: Open a new browser window and navigate to the newly created page with the new design.

9. Modify the following line in the mysite.jsp in your plugin.
   
   

   Code Block
   theme Eclipse
   <c:set var="staticFilesUrl" value="${Design templatecontext.website.staticFilesUrl}/static/helloworldDesign template" />

   
   
   

   Note
   By default ${Design templatecontext.website.staticFilesUrl} is empty, but don’t forget to add it because a production server might use it. The value of the variable static_files_url can be defined in the XperienCentral Setup Tool (/web/setup) on the General (R30 and older) tab. In most situations the default setting will work fine for local development and production environments.

   
   
   

10. Replace the existing paths to the style sheets with dynamic paths based on the staticFilesUrl. For example:
    
    

    Code Block
    theme Eclipse
    <link href="${staticFilesUrl}/css/style.css" rel="stylesheet" type="text/css">

    
    Repeat this step for external JavaScript paths, images, etc. The added path starts with a ‘/’. If ${staticFilesUrl} is empty, then that means the file you are requesting is served by the web server (Apache/IIS/JBoss) and not by the application server (XperienCentral).
    
    

11. Check whether there are references to pictures in the CSS files. If so, update their paths too.

12. Deploy and upload the plugin.

13. Check in the browser to see what the page now looks like. It should be an exact replica of the original.

...

At this point, the content page part in the design template is dynamic: The content shown is generated by XperienCentral. To make an even bigger impact on visitors, other parts of the page can also be easily made dynamic. The task of an engineer working with the SDK is simply making all items from the HTML design that should be dynamic, dynamic (for example, navigations and page sections).

Examples of "Quick Wins"

Printing the Title of a Page in the

...

Title Bar of the Browser

In content.jsp, locate the title of the page (= the part between <title> and </title>) and replace it with:

...

 <title>${fn:escapeXml(website.title)} - ${fn:escapeXml(title)}</title>

...

Rendering a Breadcrumbs Navigation Path

In content.jsp, add the following code just above the content page part:

...

And copy the pagepart/path.jsp and xml. The style of the page has now changed. This is necessary because certain tags that are defined in this style sheet will be used.

...

Rendering the Publication Date of a Page

To print the page’s publication date, use the following code:

...