XML to HTML using WCM, XSL translation and AJAX
This example shows how to use a custom field on your authoring template to generate html from xml using an xslt stylesheet which is stored as a resource in wcm. The html is updated on the content page using AJAX.
1. Copy the JSP pages to your Authoring Portlet.
Copy the JSPs, TransformButton_EditMode.jsp, TransformButton_ReadMode.jsp and HTMLContent_RichText.jsp to the authoring directory:
WPS_ROOT/ installedApps/node-name/ PA_WCM_Authoring_UI.ear /ilwwcm-authoring.war/jsp/html
Copy transformxmltohtml.jsp to WPS_ROOT/ installedApps/node-name/wcm.ear/ilwwcm.war/jsp/html
Copy GeneralUtils.jsp to both.
2. Create an authoring template
Create an authoring template called ‘Developer Works Feed' for example, to use for the xml documents. It will need to contain the following elements:
|
Element name |
Type |
Custom Properties |
|
XML-Content |
HTML |
Identify as required field - on |
|
XSL-Ref |
Component Reference |
Identify as required field - on |
|
HTML-Content |
Rich Text |
CustomJSP: /jsp/html/HTMLContent_RichText.jsp |
|
Transform Button |
Text |
Custom JSP: readMode=/jsp/html/TransformButton_ReadMode.jsp,
editMode=/jsp/html/TransformButton_EditMode.jsp |
Note: The XSL could also be stored on the site area instead of each piece of content and be retrieved from the current site area rather than the content in the jsp, transformxmltohtml.jsp
3. Create the xsl component
Create a html component called ‘XSL - Developer Works’ and upload the developerWorksFeed.xsl file into the HTML field and save.
4. Create a presentation template
Create a presentation template that displays the generated HTML by including the tag,
5. Map the authoring and presentation templates
On the top level site, create a template mapping for the authoring template created in step 2 and the presentation template created in step 4.
4. Create the content
Create a piece of content using the authoring template created in Step 2.
Import the developerWorksFeed.xml file into the XML-Content field.
Select the 'XSL - Developer Works’ html component for the XSL-Ref.
Save the document.
Click the transform XML to HTML button and the html should appear in the HTML-Content field.
Save the document
You may now preview the document and the html generated from the xml will be displayed.