Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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

In order to deploy your custom design template to an XperienCentral installation, you have to use a design template plugin (XperienCentral component bundle). The plugin is a JAR file that contains all your JSPs and static files. Once it is deployed, the JSPs and static files are copied to the correct directories in the XperienCentral installation. Follow these steps:

  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\WCBsplugins\ 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.6.0.
    • In this example the WCB plugin will be named ‘helloworldDesign "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
    themeEclipse
    /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.

...

  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 WCBplugin.

    Code Block
    themeEclipse
    <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 Configuration] 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
    themeEclipse
    <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 webserver (Apache/IIS), 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.

...

  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 WCB 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
    themeEclipse
    <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"/>
    

...