13 D Using XML Generated from Plex Apps

  • Slides: 23
Download presentation
13 D Using XML Generated from Plex Apps to Create Dynamic Web Pages Jeremy

13 D Using XML Generated from Plex Apps to Create Dynamic Web Pages Jeremy Yearron, Desynit September 21, 2007 3 rd Annual Plex/2 E Worldwide Users Conference

Bio Slide > Jeremy Yearron > Desynit Ltd, Consultant > Plex using most generators

Bio Slide > Jeremy Yearron > Desynit Ltd, Consultant > Plex using most generators since 1995, Java > UK, jeremy. yearron@desynit. com > Other facts 2 § I live on a boat travelling around the UK § I rebuild canals § I created Builders Mate 9/9/2021 *

Overview > XML & transformations > Retrieving XML out of Plex apps > Displaying

Overview > XML & transformations > Retrieving XML out of Plex apps > Displaying data § Examples & demos § Embedding output > Controlling forms § Examples & demos 3 9/9/2021 *

XML > The de facto standard for data exchange. 4 9/9/2021 *

XML > The de facto standard for data exchange. 4 9/9/2021 *

Transforming & Formatting > e. Xtensible Stylesheet Language (XSL) § XML to describe the

Transforming & Formatting > e. Xtensible Stylesheet Language (XSL) § XML to describe the change/format § Split into subprojects XSLT 5 9/9/2021 * XSL-FO

Formatting > XSL-Formatting Objects > Describes content of document > Precise formatting of page

Formatting > XSL-Formatting Objects > Describes content of document > Precise formatting of page layout > Initially for printing, but now also PDFs <fo: table-layout="fixed" text-align="start" border-spacing="10 pt"> <fo: table-column-width="3 cm" padding-after="0. 2 cm"/> <fo: table-body>. . . </fo: table-body> </fo: table> 6 9/9/2021 *

Transformation > XSLT > Identifies elements to process § Uses XPath to navigate through

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="16 pt"> <xsl: apply-templates select="*"/> </fo: table-row> </xsl: template> 7 9/9/2021 *

Demo Setup > Java § Tomcat application server § Servlet for web requests §

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 8 9/9/2021 *

Demo Setup Browser 9 9/9/2021 * Tomcat JVM Servlet Listener XSL Processor Fnc Fnc

Demo Setup Browser 9 9/9/2021 * Tomcat JVM Servlet Listener XSL Processor Fnc Fnc

XML From Plex > Pattern to wrap Block. Fetch, Single. Fetch and update functions

XML From Plex > Pattern to wrap Block. Fetch, Single. Fetch and update functions > Outputs generic XML document 10 9/9/2021 *

Simple Transformation > Apply single transformation XML XSL 11 9/9/2021 * XSL Processor XML

Simple Transformation > Apply single transformation XML XSL 11 9/9/2021 * XSL Processor XML HTML XSL-FO TEXT

Better Scenario > Create standard Document describing content > Convert to presentation format XSL

Better Scenario > Create standard Document describing content > Convert to presentation format XSL Processor XML XSL Document content 12 9/9/2021 * XSL Processor Presentation XML HTML XSL-FO TEXT

Examples > Customers & Orders § Html, PDF 13 9/9/2021 *

Examples > Customers & Orders § Html, PDF 13 9/9/2021 *

Merging Documents > Controller XSL processes XML and template together > Template determines output

Merging Documents > Controller XSL processes XML and template together > Template determines output format XSL Processor XML XSL Processor XSL XML Document content Controller 14 9/9/2021 * Template XML HTML XSL-FO TEXT

Examples > Invoices § Creates page for each ‘Row’ in document § Conditional elements

Examples > Invoices § Creates page for each ‘Row’ in document § Conditional elements 15 9/9/2021 *

Embedding Output > Can embed output within another page § i. Frame § Server

Embedding Output > Can embed output within another page § i. Frame § Server side scripting, e. g. ASP or JSP – Use wrapper class <tr> <td> <% Xsl. Test. Plex. Data. Access pda = new Xsl. Test. Plex. Data. Access("Get. Customer. SFXml", "Embed. Cust"); pda. add. Param("Customer. No", "1"); %> <%= pda. get. Data() %> </td> </tr> 16 9/9/2021 *

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

Tag Libraries > Define <. . . > tags to represent Java code > Removes code from web page design <%@ taglib prefix="plex" uri="WEB-INF/plex. Tags. tld"%> <tr> <td><plex: embed. Xsl function="Get. Customer. SFXml" stylesheet="Embed. Cust"> <plex: param name="Customer. No" value="1"/> </plex: embed. Xsl></td> </tr> 17 9/9/2021 *

AJAX > Asynchronous Java. Script And XML > Uses http request object in browser

AJAX > Asynchronous Java. Script And XML > Uses http request object in browser > Server returns XML > Java. Script processes XML > Can respond to user actions > E. g. Google Maps 18 9/9/2021 *

Communication > XMLHttp. Request object > Browser specific implementation if (window. XMLHttp. Request) req

Communication > XMLHttp. Request object > Browser specific implementation if (window. XMLHttp. Request) req = new XMLHttp. Request(); else if (window. Active. XObject) req = new Active. XObject("Microsoft. XMLHTTP"); > Define function to handle returned XML req. onreadystatechange = xml. Handler; > Send data to a URL req. open("POST", “/get. Data/Customer”, true); req. send(“Customer. No=" + key. Value); 19 9/9/2021 *

Java. Script > Original intention of developers > Navigate through Object Model of XML

Java. Script > Original intention of developers > Navigate through Object Model of XML document var xmldoc = req. response. XML. document. Element; var value = xmldoc. child. Nodes[1]. text; var nodes = xmldoc. get. Elements. By. Tag. Name(child. Name); > Use DHTML to display content var html = “<td>” + value + “</td>”; document. get. Element. By. Id(“my. Field”). inner. HTML = html; 20 9/9/2021 *

Uses > Enhancing basic web app § Load list according to user selection §

Uses > Enhancing basic web app § Load list according to user selection § Fly-over text > Full UI § Grids § Edit forms 21 9/9/2021 *

Examples > Order Detail Edit. Suite 22 9/9/2021 *

Examples > Order Detail Edit. Suite 22 9/9/2021 *

Questions ? 23 9/9/2021 *

Questions ? 23 9/9/2021 *