How to model a Periodical Page Refresh

From Wiki

• Create a new Web Project and name it "Periodical Page Refresh Example"
• Add a Site View to the Web Project and name it "Public"
• Add a Page to the "Public" Site View and name it "Home"
• Add an Entry Unit to the "Home" page
• Click on the Project tab
• In the Outline View right click on the Service/Data Provider element and choose the add Web Service Provider command. Write "QUOTES" for the Web Service Provider name and "http://www.webservicex.com/stockquote.asmx?WSDL" for the WSDL URL. To better understand the purpose of a Web Service Provider please refer to this article.
• Add a Request Response Unit outside the page and name it "Get Stocke Quote". In the Properties View choose the "QUOTE" for the Web Service Provider property. Then click on the Select Operation button and choose the StockeQuoteSoap -> GetQuote operation. Write "http://www.webserviceX.NET/GetQuote" in the SOAP Action URI property and "http://www.webserviceX.NET/" for the Method Namespace URI property.
• Right click on the Request Response Unit and choose the Add Request Parameter command. Write "symbol" for the Name and "http://www.webserviceX.NET/" for the Namespace URI.
• Connect the Entry Unit and the Request Response Unit with a normal link. Write "Get Quote" for the link name and open the Coupling dialog. Remove the flag on the Enable Default Coupling property and make a constant coupling writing "GOOG" in the correspondence of the "symbol" input parameter of the Request Response Unit. In the Properties View, choose the AJAX tab and flag the Enable AJAX property.
• In the WebRatio Explorer, choose the Web Project and create a new File named "TransformOutput.template" in the WebContent/WEB-INF/descr directory. Open the file and copy the following code, which allow to parse the Web Service response in order to be used by an XML In Unit.

#?delimiters [%, %], [%=, %]
[%
import org.dom4j.Document
import org.dom4j.Element
import org.dom4j.DocumentHelper
import java.util.Arrays
import org.apache.commons.lang.math.NumberUtils
import java.io.StringWriter
import org.apache.commons.lang.StringEscapeUtils
import org.dom4j.io.OutputFormat
import org.dom4j.io.XMLWriter
import org.dom4j.DocumentFactory
import org.apache.commons.lang.StringUtils

Map namespaceURIs = DocumentFactory.getInstance().getXPathNamespaceURIs()
if (namespaceURIs == null) {
		  namespaceURIs = new HashMap();
}
namespaceURIs.put("ns1", "http://www.webserviceX.NET/")
DocumentFactory.getInstance().setXPathNamespaceURIs(namespaceURIs)
%]
<Root>
	<Quote>
		<Instance>
		  <oid>1</oid>
		  [% 
		     def result = document.valueOf("//ns1:GetQuoteResult")
		     result = StringUtils.replace(result, "<StockQuotes><Stock>", "")
		     result = StringUtils.replace(result, "</Stock></StockQuotes>", "")
		     result = StringUtils.lowerCase(result)
		     printRaw(result)
		     
		  %]
		</Instance>
	</Quote>
</Root>

• 
  Select the Data Model tab and create a Volatile Entity to store the stocke quote just like the figure on the right.
• Select the Request Response Unit and choose the "TransformOutput.template" file for the Output Transformation property
• Add a Delete Unit outside the page and name it "Empty Quote", choose the "Quote" entity and add an Attribute Condition to the unit with the IsNotNull predicate on the "oid" attribute.
• Connect the Request Response Unit and the Delete Unit with an OK link.
• Add an XML In Unit outside the page and name it "Store Quote".
• Right click on the XML In Unit and choose the Add XML In Entity command. Choose "Quote" for the Entity property and flag the Use Names property.
• Connect the Delete Unit and the XML In Unit with an OK link
• Connect the XML In Unit and the Page with an OK link
• Connect the Request Response Unit and the XML In Unit with a transport link.
• Add a Data Unit on the "Quote" entity, name it "Google Quote" and choose to display all attributes. In the Outline View, right click on the Selector node of the Data Unit and choose the Delete command.
• Add a Script Unit in the page in order to tell the user what is the refresh interval.

return "Refreshing data each 30 seconds.<br/>Last Update:" + (new Date())

• From the main menu choose New -> Layout Template. Choose "Unit" for the template type and select the Entry Unit. Then name the template "PeriodicalUpdater". The purpose of this template is to assign to a link of the Entry Unit (in this case the only one modeled) a timeout javascript which automatically clicks the link every X milliseconds. The interval can be a Layout Parameter of the template. This is an example code

#?delimiters [%, %], [%=, %]
<wr:LayoutParameter name="timeout" label="TimeOut" type="string" default="30000"/>
[%setHTMLOutput()
  def timeout = params["timeout"]
  def link = unit.selectSingleNode("layout:Link")
%]
<div style="display:none">
    <input onclick="<wr:AjaxURL context="link" type="button"/>" type="submit" 
    id="button#<wr:Id context="link"/>" name="button#<wr:Id context="link"/>"/>
</div>
<script>
	setTimeout(function() {$('button#<wr:Id context="link"/>').click()}, [%= timeout %])
</script>

• Select the Entry Unit from the Grid and set the "PeriodicalUpdater" on the Unit Layout property.
• Generate the Web project.

You can see an example of the final result in the following images.