Page History

...

...

This topic explains in a few steps how any design/website can be placed in XperienCentral and how it can be made dynamic. This is primarily intended to ensure that XperienCentral’s page content is shown in the new design. This chapter will show in a few simple steps the power of the XperienCentral SDK. You may not completely understand all the details immediately after taking these steps. The details are explained in detail in XperienCentral JSPs. 

Step 1: Collect and Check the HTML, CSS and Javascript

...

• Does the HTML validate against its declared doctype? (http://validator.w3.org)
• Does the CSS validate against the latest CSS version?  (http://jigsaw.w3.org/css-validator/)
• If it is a government website, does it conform to the government's guidelines? See http://www.cynthiasays.com/  and http://www.webrichtlijnen.nl/.
• If JavaScript frameworks (such as jQuery) are used, are they the latest versions? Is inline editing supported?
• Has the design has been checked by a SEO (Search Engine Optimization) professional?
• Are editors able to exactly r-create the examples by adding content into the elements? For example, an image inside a table element will be difficult to create with the default elements.
• If possible, check whether the HTML that has no content (for example a  <div class=“rounded-corner”>&nsbp;</div> can be removed.
• If long texts or titles (navigation) are used, does the design still look good (cross-browser)?
• Links that are added by an editor will by default always have a CSS class assigned (<a class=“normal”> … ).
• Bold text should be formatted using the <strong> tag and italic using the <em> tag.
• Can all page sections be moved around?
• Are all non-static images rendered by an image element?
• Are page headers and footers re-usable so that only one main page design template is needed?

...

Back to Top 

...

Step 2: Create a Design Template Plugin

...

1. Open a Command prompt in a folder outside your XperienCentral installation folder where you would like to create your design template plugin, C:\GX\plugins\ for example..
2. Run the following Maven command and replace "version" with your version of XperienCentral, the "artifact ID" with a name of your choice and be sure to add the correct path to your installation's settings.xml file.. The command is one string.
   
   

   mvn archetype:generate -DinteractiveMode=false -DarchetypeGroupId=nl.gx.webmanager.archetypes -DarchetypeArtifactId=webmanager-presentation-archetype -DarchetypeVersion=10.11.1 -DgroupId=com.gxwebmanager.helloworld -DartifactId=helloworldDesign template
-Dclassprefix=HelloWorld -s C:\GX\XperienCentral\settings.xml

   
   

   Note
   You have to fill in the XperienCentral version that you are using with the property ‘DarchetypeVersion’. In the above example it’s version 10.11.1. In this example the plugin will be named "helloworldDesign template" and all examples in this topic will use that name.

   
   You should see a ‘Build successful’ message from the Maven command and the helloworldDesign template folder should be created. The created folder structure is:
   
   

   Code Block
   theme Eclipse
   /src/main/.. /java/nl/gx/product/Activator.java /resources/Design templatetype/.. /jsp/ /static/helloworldDesign

   
   
   

3. Create several subdirectories in the /static/helloworldDesign template folder for storing the various types of static files (img, css, js, and so forth).
4. Copy your static files from the design to the /static/helloworldDesign template subfolder.

5. Create several subdirectories in the /jsp/ folder for storing the various types of design templates (page, element, forms, pageparts, and so forth).
   
   

   Note
   If a Design template plugin depends on design template JSPs that are part of the original XperienCentral platform, these JSPs should be copied to the design template plugin in the directory: /src/main/resources/Design templatetype/jsp/wm.

   
   
   

6. Copy the received HTML file from the design into the ../jsp/page/ folder, and rename it to (for example) content.jsp.

Back to Top

...

Step 3: Convert the HTML to JSP

...

If you don’t see your design template in the panel something might have gone wrong. 

Back to Top

...

Step 4: Change the Paths to Dynamic Paths

...

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.

Back to Top 

...

Step 5: Change the Content to Dynamic Content

...

1. Use the one distributed with the installed version of XperienCentral that has already been extracted at C:\GX\XperienCentral\webmanager-webapps\webmanager-backend-webapp\target\webmanager-backend-webapp-1.0-SNAPSHOT\WEB-INF\project.

2. Copy the following files into your plugin under /src/main/resources/Design templatetype/jsp/wm:
   
   

   • pagepart/content.jspf / xml
     • pagepart/contentTextVersion.jspf
     • XML/contentPDF.jspf
   • pagepart/databaseEntity.jspf / xml
     • XML/databaseEntityPDF.jspf
   • pagepart/mediaItemContent.jspf / xmlpagepart/sitemap.jspf / xml
     • pagepart/mediaItemContentTextVersion.jspf
     • XML/mediaItemContentPDF.jspf
   • pagepart/searchResults.jspf / xml
    

   
   

3. In content.jsp, locate the content (text + images) of the page saved in step 1 and replace it with:
   
   

   Code Block
   theme Eclipse
   <wm:pagePart label="WM content" /> <wm:pagePart label="WM databasepage"/> <wm:pagePart label="WM mediaItemContent"/> <wm:pagePart label="WM sitemap" /> <wm:pagePart label="WM searchresults"/>

   
   

The default design templates for rendering dynamic content have now been copied and are in use by your page design template. The page should now display the content that has been added by editors. 

Back to Top 

...

Step 6: Apply Other "Quick Wins"

...

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:

<wm:pagePart label="WM path" />

...

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:

<fmt:setLocale value="${Design templatecontext.pageVersion.language.metaTagValue}"/>  
<fmt:formatDate value="${Design templatecontext.pageVersion.publicationDate}" pattern="d MMMM yyyy" />

...