3rd annual plex/2e worldwide users conference page based on title slide from slide layout palette....

3rd Annual Plex/2E Worldwide Users Conference

13D Using XML Generated from Plex Apps to Create Dynamic Web Pages

Jeremy Yearron, Desynit

September 21, 2007

2 April 10, 2023 Using XML Generated from Plex Apps to Create Dynamic Web Pages Copyright © 2007 Desynit Ltd

Bio Slide

> Jeremy Yearron

> Desynit Ltd, Consultant

> Plex using most generators since 1995, Java

> UK, [email protected]

> Other facts

I live on a boat travelling around the UK

I rebuild canals

I created Builders Mate


Overview

> XML & transformations

> Retrieving XML out of Plex apps

> Displaying data Examples & demos

Embedding output

> Controlling forms Examples & demos


XML

> The de facto standard for data exchange.


Transforming & Formatting

> eXtensible Stylesheet Language (XSL) XML to describe the change/format

Split into subprojects

XSL

XSLT XSL-FO


Formatting

> XSL-Formatting Objects

> Describes content of document

> Precise formatting of page layout

> Initially for printing, but now also PDFs

<fo:table table-layout="fixed"text-align="start"border-spacing="10pt"><fo:table-column column-width="3cm" padding-after="0.2cm"/><fo:table-body>...</fo:table-body>

</fo:table>


Transformation

> XSLT

> Identifies elements to process Uses XPath to navigate through document

> Defines data to be output Can be XML, HTML, XSL-FO, Text, etc

<xsl:template match="Field”><fo:table-row height="16pt">

<xsl:apply-templates select="*"/></fo:table-row>

</xsl:template>


Demo Setup

> Java Tomcat application server

Servlet for web requests

Xerces, Xalan & FOP for XML/XSL

Listener for handling Plex function calls

> Plex functions Accept data, output XML

> Stylesheets


Demo Setup

Browser Servlet

Tomcat

XSL Processor

Listener

Fnc

JVM

FncFnc

Fnc

10

April 10, 2023 Using XML Generated from Plex Apps to Create Dynamic Web Pages Copyright © 2007 Desynit Ltd

XML From Plex

> Pattern to wrap BlockFetch, SingleFetch and update functions

> Outputs generic XML document

11


Simple Transformation

> Apply single transformation

XSL Processor

XMLXMLHTMLXSL-FOTEXT

XSL

12


Better Scenario

> Create standard Document describing content

> Convert to presentation format

XSL Processor


XSL

XSL Processor

XSL

Document content

Presentation

13


Examples

> Customers & Orders Html, PDF

14


Merging Documents

> Controller XSL processes XML and template together

> Template determines output format

XSL Processor


XSL

XSL Processor

XSL

Document content

Controller

XML

Template

15


Examples

> Invoices Creates page for each ‘Row’ in document

Conditional elements

16


Embedding Output

> Can embed output within another page iFrame

Server side scripting, e.g. ASP or JSP

– Use wrapper class

<tr> <td> <% XslTest.PlexDataAccess pda = new XslTest.PlexDataAccess("GetCustomerSFXml", "EmbedCust");

pda.addParam("CustomerNo", "1");%> <%= pda.getData() %> </td></tr>

17


Tag Libraries

> Define <...> tags to represent Java code

> Removes code from web page design

<%@ taglib prefix="plex" uri="WEB-INF/plexTags.tld"%>

<tr> <td><plex:embedXsl function="GetCustomerSFXml"

stylesheet="EmbedCust"><plex:param name="CustomerNo" value="1"/>

</plex:embedXsl></td></tr>

18


AJAX

> Asynchronous JavaScript And XML

> Uses http request object in browser

> Server returns XML

> JavaScript processes XML

> Can respond to user actions

> E.g. Google Maps

19


Communication

> XMLHttpRequest object

> Browser specific implementationif (window.XMLHttpRequest)

req = new XMLHttpRequest();else if (window.ActiveXObject)

req = new ActiveXObject("Microsoft.XMLHTTP");

> Define function to handle returned XMLreq.onreadystatechange = xmlHandler;

> Send data to a URLreq.open("POST", “/getData/Customer”, true);req.send(“CustomerNo=" + keyValue);

20


JavaScript

> Original intention of developers

> Navigate through Object Model of XML documentvar xmldoc = req.responseXML.documentElement;var value = xmldoc.childNodes[1].text;var nodes = xmldoc.getElementsByTagName(childName);

> Use DHTML to display contentvar html = “<td>” + value + “</td>”;document.getElementById(“myField”).innerHTML = html;

21


Uses

> Enhancing basic web app Load list according to user selection

Fly-over text

> Full UI Grids

Edit forms

22


Examples

> Order Detail EditSuite

23


Questions

?

3rd annual plex/2e worldwide users conference page based on title slide from slide layout palette....

Documents

plex apps

dynamic web pages copyright

xml javascript processes

returned xml req

output xml stylesheets

overview xml transformations

consultant plex

plex pattern