Date: Thu, 28 Mar 2024 20:47:29 +0100 (CET) Message-ID: <179053927.259.1711655249865@yoda.gx.local> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_258_289269762.1711655249862" ------=_Part_258_289269762.1711655249862 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
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 intende= d to ensure that XperienCentral=E2=80=99s page content is shown in the new = design. This chapter will show in a few simple steps the power of the Xperi= enCentral SDK. You may not completely understand all the details immed= iately after taking these steps. The details are explained in detail in XperienCentral JSPs.
Every project based on XperienCentral requires an HTML version of the we= bsite 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 des= ign template of a page in XperienCentral. The static HTML website HTML is u= sually 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=3D=E2=80=9Crounded-corner=E2=80=9D>&nsbp;&=
lt;/div>
can be removed.<a class=3D=E2=80=9Cnormal=E2=80=9D> =E2=80=A6 ).
<strong>
tag=
and italic using the <em>
tag.In order to deploy your custom design template to an XperienCentral inst= allation, you have to use a design template plugin (XperienCentral componen= t 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 cor= rect directories in the XperienCentral installation. Follow these steps:
mvn archetype:generate =
-DinteractiveMode=3Dfalse
-DarchetypeGroupId=3Dnl.gx.webmanage=
r.archetypes
-DarchetypeArtifactId=3Dwebmanager-presentation-a=
rchetype
-DarchetypeVersion=3D10.36
-DgroupI=
d=3Dcom.gxwebmanager.helloworld
-DartifactId=3DhelloworldDesig=
n template
-Dclassprefix=3DHelloWorld
-s C:\=
GX\XperienCentral\settings.xml
You should see a =E2=80=98Build successful=E2=80=99 message from the Maven=
command and the helloworldDesign template folder should be created. The cr=
eated folder structure is:
/src/main/.. =09/java/nl/gx/product/Activator.java =09/resources/Design templatetype/.. =09=09/jsp/ =09=09/static/helloworldDesign
/static/helloworldDesign tem=
plate
folder for storing the various types of static files (img, css=
, js, and so forth)./static/helloworldD=
esign template
subfolder.Create several subdirectories in the /jsp/
folder for s=
toring the various types of design templates (page, element, forms, pagepar=
ts, and so forth).
If a Design template plugin depends on design template JSPs that are par=
t of the original XperienCentral platform, these JSPs should be copied to t=
he design template plugin in the directory: /src/main/resources/Desig=
n templatetype/jsp/wm
.
Copy the received HTML file from the design into the ../jsp/pa=
ge/
folder, and rename it to (for example) content.jsp
.=
JSP files contain not just the the website=E2=80=99s 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 parag= raph or an image=E2=80=99s URL. These functions originate in the XperienCen= tral 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 des= criptor file is an XML file that contains more information about the JSP fi= le. It contains, for example, the name, a description, and possible additio= nal dynamic parameters such as design template properties.
page.jsp
and content.jsp
with a=
n IDE such as Eclipse.From the page.jsp
file, copy the first lines that inclu=
de the taglibs:
<%@ page l= anguage=3D"java" session=3D"false" buffer=3D"none" %> <%@ taglib uri=3D"http://java.sun.com/jsp/jstl/core" prefix=3D"c" %> <%@ taglib uri=3D"http://java.sun.com/jsp/jstl/functions" prefix=3D"fn"%= > <%@ taglib uri=3D"http://java.sun.com/jsp/jstl/fmt" prefix=3D"fmt" %> <%@ taglib uri=3D"http://www.gx.nl/taglib/wm" prefix=3D"wm" %> <%@ taglib uri=3D"http://www.gx.nl/taglib/functions" prefix=3D"wmfn" %&g= t;
content.jsp
file above th=
e 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 det=
ail in Example Design La=
yout) should contain the following:
<design te= mplate> =09<name>helloworldDesign template mydesign</name> =09<display-name>HWP MyDesign</display-name> =09<scope>Page</scope> </design template>
name
attribute in the descrip=
tor of a JSP should also be prefixed by the plugin ID as required by the de=
velopment guideline G139. The display name will be visible for edit=
ors when selecting the page design template for a page.mvn clean package -s C:\GX\XperienCen=
tral\settings.xml
C:\GX\XperienCentral\work\de=
ploy
folder manually.If you don=E2=80=99t see your design template in the panel something mig= ht have gone wrong.
Static files (javascript, CSS, etc.) should be requested from the web se=
rver (for instance http://localhost:8080/web/static/project/images/my=
image.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 w=
ell as in the production environment, where the host settings can be entire=
ly different and, therefore, requesting a file should be completely differe=
nt.
Go to XperienCentral and assign the new design template to a new page. P= erform the following steps:
Modify the following line in the mysite.jsp
in your plu=
gin.
<c:set var= =3D"staticFilesUrl" value=3D"${Design templatecontext.website.staticFilesUr= l}/static/helloworldDesign template" />
By default ${Design templatecontext.website.staticFilesUrl}
=
is empty, but don=E2=80=99t forget to add it because a production server m=
ight 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 pr=
oduction environments.
Replace the existing paths to the style sheets with d=
ynamic paths based on the staticFilesUrl
. For example:
=
<link href= =3D"${staticFilesUrl}/css/style.css" rel=3D"stylesheet" type=3D"text/css"&g= t;
Repeat this step for external JavaScript paths, images, etc. The added pat=
h starts with a =E2=80=98/=E2=80=99. If ${staticFilesUrl}
is e=
mpty, then that means the file you are requesting is served by the web serv=
er (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 (desig= n template) in XperienCentral. At this time, however, only the static conte= nt from the original HTML code is shown. This should, of course, be replace= d with paragraphs and other XperienCentral content elements on the page.
In this step, the content of the page is removed from the JSP and replac= ed with a request to XperienCentral that generates the content of the page = and prints it in the JSP.
C:\GX\XperienCentral\webmanager-weba=
pps\webmanager-backend-webapp\target\webmanager-backend-webapp-1.0-SNAPSHOT=
\WEB-INF\project.
Copy the following files into your plugin under /src/main/reso=
urces/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=
code>
pagepart/mediaItemContentTextVersion.jspf
XML/mediaItemContentPDF.jspf
pagepart/searchResults.jspf / xml
In content.jsp
, locate the content (text + images) of t=
he page saved in step 1 and replace it with:
<wm:pagePa= rt label=3D"WM content" /> <wm:pagePart label=3D"WM databasepage"/> <wm:pagePart label=3D"WM mediaItemContent"/> <wm:pagePart label=3D"WM sitemap" /> <wm:pagePart label=3D"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 di= splay 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 im= pact 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 fro= m the HTML design that should be dynamic, dynamic (for example, navigations= and page sections).
In content.jsp
, locate the title of the page (=3D the part =
between <title>
and </title>
) and rep=
lace it with:
<tit= le>${fn:escapeXml(website.title)} - ${fn:escapeXml(title)}</title>=
In content.jsp
, add the following code just above the conte=
nt page part:
<wm:pagePa= rt label=3D"WM path" />
And copy the pagepart/path.jsp
and xml
. The st=
yle of the page has now changed. This is necessary because certain tags tha=
t are defined in this style sheet will be used.
To print the page=E2=80=99s publication date, use the following code:
<fmt:setLo= cale value=3D"${Design templatecontext.pageVersion.language.metaTagValue}"/= > =20 <fmt:formatDate value=3D"${Design templatecontext.pageVersion.publicatio= nDate}" pattern=3D"d MMMM yyyy" />