Now let's look at the web script changes for this. In this example, we will see how we can fetch the details of an individual news item.
The description document, getNewsItem.get.desc.xml, will be the same as used in the previous example.
We use the same Java Bean class, GetNewsItem, which extends the DeclarativeWebScript class, but we will modify this class as follows:
- Render the intermediate template model
(getNewsItem.get.html.model.ftl)with therenderTemplatemethod of template service as:renderTemplate(templatePath, map, out);
where
templatePathis the path for the filegetNewsItem.get.html.model.ftl, mapis the model map of the news item, andoutis used to store the intermediate result of this rendering. - Create a tag model map by processing the
TagMapping.xmlfile. - Then process this tag model over the result of that intermediate template rendering with the
processTaggingmethod of template service as:result = templateService.processTemplateString( "freemarker", template, modelMap);
where freemarker indicates the use of
FreeMarkeras the template processor,templateis the intermediate result generated by rendering of the template in the previous step,modelMapis the model map created by processing the tag mapping file, andresultwill hold the final result after replacing all of the tags with actual values.Here we are using the template service to render and process the FreeMarker template.
- Now in the Spring Bean configuration file,
web-script-custom-context.xml, in thetomcat/webapps/alfresco/WEB-INF/classes/alfresco/extensionfolder, we need to add template service as a property for that Bean as we are using this new service for our example as:<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE beans PUBLIC '-//SPRING//DTD BEAN//EN' 'http://www.springframework.org/dtd/spring-beans.dtd'> <beans> <!-- Web Script Storage --> <bean id="webscript.org.cignex.news.getNewsItem.get" class="com.cignex.web.scripts.bean.news.GetNewsItem" parent="webscript"> <property name="contentService" ref="ContentService" /> <property name="avmService" ref="AVMService" /> <property name="templateService" ref="TemplateService" /> </bean> </beans>
The intermediate rendering template for the HTML response, the getNewsItem.get.html.model.ftl file is as follows:
<#ftl ns_prefixes={"D", "http://www.alfrescobook.com/news"}>
<#if m_news?exists>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<#assign newsItem = m_news>
<td>
<h2>${newsItem.contentHeader}</h2>
<#if newsItem.newsDate != "">
<strong>News Date:</strong>
${newsItem.newsDate}
</#if>
<#if newsItem.contentSubHeader != "" >
<h4>${newsItem.contentSubHeader}</h4>
</#if>
<table width="50%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td>
<tr>
<h4> ${newsItem.imageTitle}</h4>
<#if newsItem.contentGraphic != "" >
<td>
<img src="${newsItem.contentGraphic}" border=0/>
</td>
</#if>
</tr>
</td>
<td>
<strong> ${newsItem.imageCaption}</strong>
</td>
</tr>
<tr>
<td>
${newsItem.contentText}
</td>
</tr>
</table>
</td>
</tr>
</table>
</#if>
</html>
And finally, the rendering template, the getNewsItem.get.html.ftl file, is:
<html>
${finalXML}
</html>
There is no change in the description document, but upload the new template file getNewsItem.get.html.model.ftl in the Company Home | Data Dictionary | Web Scripts Extensions | org | cignex | news folder. Also, modify the getNewsItem.get.html.ftl file that already exists there accordingly.
Navigate to http://localhost:8080/alfresco/service/index and click on the Refresh Web Scripts button to view the changes.
In this case study, we will refer to the same web script we used in the first case study (Integrating Alfresco WCM and Liferay with a news portlet). For integrating this with a Surf-based web application, we need to create a JSON response format for the same web script.
Refer to the Integrating Alfresco WCM and Liferay with a news portlet section for more details on the web script for getting a news headline.
The rendering template for the JSON response, the getNewsItem.get.json.ftl file, is as follows:
<#escape x as jsonUtils.encodeJSONString(x)>
{
"newsItems": [
<#if m_newsNodes?exists>
<#list m_newsNodes as newsNode>
<#assign newsItemDom = newsNode.xmlNodeModel/>
<#if newsItemDom?exists>
<#assign newsItem = newsItemDom.news>
<#if newsItem?exists>
{
"Headline":"${newsItem.contentHeader}"
}
</#if>
</#if>
<#if newsNode_has_next>,</#if>
</#list>
</#if>
]
}
</#escape>
In the Communication with Web Content Management section of Chapter 9, we have already explained the configuration required at Surf side to call web scripts from Alfresco, along with a UI web script that will be responsible for rendering the page. And the web script we mentioned earlier in this section is a data web script, which will be responsible for fetching content from the repository.
In Surf, we have already created a header web script to display the main page. We have also created a web script to display the news header in Surf. Now we will call the news web script in the same (header) web script to integrate news headline on the same page.
The following screenshot shows the main page from the Surf application where we have integrated the WCM web script. Content is fetched from the repository:
