/
Design in 6 Steps

Design in 6 Steps

Jul 04, 2022

In This Topic

 

 

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

Every project based on XperienCentral requires an HTML version of the website before the design of the site can be implemented. This step uses this HTML version in such a way that it can be the starting point for a new design template of a page in XperienCentral. The static HTML website HTML is usually provided by the designer who has already applied the GX Software plugin guidelines.

It is a good practice to check the design to ensure that it meets the following reqluirements:

  • 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\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.36 -DgroupId=com.gxwebmanager.helloworld -DartifactId=helloworldDesign template
    -Dclassprefix=HelloWorld -s C:\GX\XperienCentral\settings.xml



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

    /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).



  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

JSP files contain not just the the website’s HTML code but also functions for using data from XperienCentral dynamically on the page. This makes it possible to, for example, place a code in the JSP to print a paragraph or an image’s URL. These functions originate in the XperienCentral API. This API can be used in the JSPs via a taglib. This taglib has to be imported at the beginning of the JSP.

Each XperienCentral JSP file has an associated descriptor file. This descriptor file is an XML file that contains more information about the JSP file. It contains, for example, the name, a description, and possible additional dynamic parameters such as design template properties.

  1. Open both the page.jsp and content.jsp with an IDE such as Eclipse.

    Additional instructions about XperienCentral plugins and Eclipse can be found in Using Eclipse.

  2. From the page.jsp file, copy the first lines that include the taglibs:


    <%@ page language="java" session="false" buffer="none" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%@ taglib uri="http://www.gx.nl/taglib/wm" prefix="wm" %> <%@ taglib uri="http://www.gx.nl/taglib/functions" prefix="wmfn" %>



  3. Paste the copied JSP code in the content.jsp file above the first line in the original HTML code

  4. Create a new mydesign.xml file and place it in the same folder as mydesign.jsp. This XML-descriptor (explained in detail in Example Design Layout) should contain the following:


    <design template> <name>helloworldDesign template mydesign</name> <display-name>HWP MyDesign</display-name> <scope>Page</scope> </design template>



  5. Adjust the name and display name in the XML descriptor file. The name-value will be used by XperienCentral to identify the design template, and should be unique. The value of the name attribute in the descriptor of a JSP should also be prefixed by the plugin ID as required by the development guideline G139. The display name will be visible for editors when selecting the page design template for a page.

  6. Now it is time for the deployment of the design template plugin to XperienCentral. In a Command prompt, run the following command in the helloworldDesign template folder:

    mvn clean package -s C:\GX\XperienCentral\settings.xml

  7. This command will create a target folder that contains the plugin: helloworldDesign template-1.0.0.jar.

  8. You can either upload this plugin using the Plugin Management Console in XperienCentral or copy the file to the C:\GX\XperienCentral\work\deploy folder manually.

  9. It takes a few seconds for XperienCentral to extract the plugin, read the contents and the XML descriptor files and then make the design template available. It is possible to check whether the new design template is available by logging in to the edit environment and opening the Configuration > Design templates panel. Set the scope to "page" and you should see your new design template.