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.
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:
<div class=“rounded-corner”>&nsbp;</div>
can be removed.<a class=“normal”> …
).<strong>
tag and italic using the <em>
tag.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:
C:\GX\plugins\
for example..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 |
/static/helloworldDesign template
folder for storing the various types of static files (img, css, js, and so forth)./static/helloworldDesign template
subfolder.Create several subdirectories in the /jsp/
folder for storing the various types of design templates (page, element, forms, pageparts, and so forth).
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: |
Copy the received HTML file from the design into the ../jsp/page/
folder, and rename it to (for example) content.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.
page.jsp
and content.jsp
with an IDE such as Eclipse.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" %> |
content.jsp
file above the first line in the original HTML codeCreate 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> |
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.mvn clean package -s C:\GX\XperienCentral\settings.xml
helloworldDesign template-1.0.0.jar
.C:\GX\XperienCentral\work\deploy
folder manually.If you don’t see your design template in the panel something might have gone wrong.
Static files (javascript, CSS, etc.) should be requested from the web server (for instance http://localhost:8080/web/static/project/images/myimage.jpg
) when viewing the page. All the paths to static files have to be modified in the JSPs. The method below takes care of most structural problems. The JSP code functions in the local development environment as well as in the production environment, where the host settings can be entirely different and, therefore, requesting a file should be completely different.
Go to XperienCentral and assign the new design template to a new page. Perform the following steps:
Modify the following line in the mysite.jsp
in your plugin.
<c:set var="staticFilesUrl" value="${Design templatecontext.website.staticFilesUrl}/static/helloworldDesign template" /> |
By default |
Replace the existing paths to the style sheets with dynamic paths based on the staticFilesUrl
. For example:
<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/JBoss) and not by the application server (XperienCentral).
Check whether there are references to pictures in the CSS files. If so, update their paths too.
Deploy and upload the plugin.
Check in the browser to see what the page now looks like. It should be an exact replica of the original.
The web page saved in step 1 is now used as the design for a page (design template) in XperienCentral. At this time, however, only the static content from the original HTML code is shown. This should, of course, be replaced with paragraphs and other XperienCentral content elements on the page.
In this step, the content of the page is removed from the JSP and replaced with a request to XperienCentral that generates the content of the page and prints it in the JSP.
C:\GX\XperienCentral\webmanager-webapps\webmanager-backend-webapp\target\webmanager-backend-webapp-1.0-SNAPSHOT\WEB-INF\project.
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
In content.jsp
, locate the content (text + images) of the page saved in step 1 and replace it with:
<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.
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).
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> |
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.
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" /> |