PWB528: XML DataWindow Dean Jones CEO, PowerObjects August 15-19, 2004

Agenda  Who is PowerObjects  Overview of HTML DataWindow  Go into XML DataWindow  Build some XML DataWindows  Summary  Questions

Overview of PowerObjects?  Multi-Million dollar company  Custom Systems Developer  Complete Solution Provider  Distributed Development  Sybase Partner  iAnywhere Partner  Symbol Partner  On the Federal GSA Schedule  Certified Developers  Microsoft, Sybase and Java

Review HTML DataWindow Design JSP Page Server-Side Client-Side User request page HTMLGenerator component DataStore HTML Page Client-Side

Review HTML DataWindow Design JSP Page Server-Side Client-Side User request page HTMLGenerator component DataStore Step 1 HTTP get HTML Page Client-Side

Review HTML DataWindow Design JSP Page Server-Side Client-Side User request page HTMLGenerator component DataStore Step 1 HTTP get Step 2 Entire DataWindow generation embedded in HTML document sent to client HTML Page Client-Side

Review HTML DataWindow Design JSP Page Server-Side Client-Side User request page HTMLGenerator component DataStore Step 1 HTTP get Step 2 Entire DataWindow generation embedded in HTML document sent to client Step 3 HTTP response HTML Page Client-Side

Review HTML DataWindow Design JSP Page Server-Side Client-Side User request page HTMLGenerator component DataStore Step 1 HTTP get Step 2 Entire DataWindow generation embedded in HTML document sent to client Step 3 HTTP response Step 4 User interacts with DataWindow and entire process repeated HTML Page Client-Side

HTML Web DataWindow Limitations  DataWindow generated entirely in static HTML on page  Regeneration required on every round-trip to server  Most of this regeneration is duplicate work  HTML structural layout of DataWindow rendering  CSS style of DataWindow elements as displayed in browser  Almost all client-side JavaScript functionality & control object  Customization of generated HTML or CSS not supported  Nested and composite DataWindows not supported

Next Generation Web DataWindow

XML Web DataWindow  The XML Web DataWindow builds upon the existing HTML Web DataWindow plus:  XML-based architecture  latest client-side XML technologies including XHTML, XML, XSLT and CSS  Improved performance using less bandwidth on round trips to the server

XML Web DataWindow  The XML Web DataWindow generates DataWindow content(XML), layout(XSLT), and style(CSS) separately and renders in the browser a fully-functional DataWindow in XHTML.  Since the XSLT (the layout) and the CSS (the stylesheet) may be cached on the client, only the relatively small XML content (dynamic/displayed data) consumes bandwidth on subsequent downloads as the user ‘browses’ the data

The DataWindow engine generates each of these components at runtime. XML Web DataWindow XHTML XML Content XSLT CSS Determines style of elements as displayed in browser Determines structural layout

The DataWindow engine generates each of these components at runtime. XML Web DataWindow XHTML XML Content XSLT CSS Determines style of elements as displayed in browser Determines structural layout DataWindow content is generated in XML

The DataWindow engine generates each of these components at runtime. XML Web DataWindow XHTML XML Content XSLT CSS Determines style of elements as displayed in browser Determines structural layout DataWindow layout is generated in XSLT. XSLT also creates the structural layout of the page, saving bandwidth.

The DataWindow engine generates each of these components at runtime. XML Web DataWindow XHTML XML Content XSLT CSS Determines structural layout An XSLT transformation is performed to render in the browser a fully-functional DataWindow in XHTML. Determines style of elements as displayed in browser

The DataWindow engine generates each of these components at runtime. XML Web DataWindow XHTML XML Content XSLT CSS Determines structural layout DataWindow style is generated in CSS. Generating as many of the style rules in CSS as possible (including all absolute positions) increases page download speed because the style sheet is downloaded only once and cached. Determines style of elements as displayed in browser

XHTML  XHTML is an XML compliant version of HTML  Most popular web vocabulary, leveraging the power of XML  Supported by the vast majority of web browsers  XHTML 1.0 = HTML 4.01 in XML syntax

XHTML Benefits  Separation of presentation markup from content  DOM-based generation and parsing  Tree View-based editing  XHTML Web pages are processed and rendered more quickly in the browser than HTML pages due to valid,well-formedness rules of XHTML/XML

Client-Side XML Benefits  Reduces amount of data transferred back and forth between client and server  Increases speed of browsing  No longer have to download a complete HTML page on each request  More responsibility for processing page passed to client  Reduces server-side load; more scalable  XML data retrieved from server without having to regenerate and download entire DataWindow to browser  JavaScript used to take XML client-side and generate dynamic XHTML content  XML document stored in browser’s memory used as client-side data cache

XSLT  Extensible Style sheet Language Transformations  Provides a way of transforming XML documents into other document formats  For XHTML (which is fundamentally XML), XSLT can be used to transform an XML document into a styled XHTML web page for display in a browser  XSLT goes beyond CSS by allowing rules that change or infuse the content with layout and structure  XSLT also allows to define rules that not only alter the design, but also add, change, or remove elements of the content if appropriate

XSLT Benefits  Saves bandwidth  Clients only need to download and cache XSLT code once for DataWindow session  Server processing is reduced with more work being done on client

CSS  Allows style rules to be added to elements of a document, indicating how the content of those elements should be rendered  Helpful tool for separating the contents of an HTML, XHTML, or XML document from its visual presentation  Benefits include faster page download because the style sheet only needs to be downloaded once and cached  Ideally should contain all style rules (XHTML 1.0 Strict & 1.1+), maximizing separation and minimizing redundancy on every page

XML Web DataWindow Design JSP Page Server-SideClient-Side User request page XML Web DW component DataStore XML XSLT  XHTML JS rows Client-side JavaScript JS control CSS XHTML Page Client-Side

XML Web DataWindow Design JSP Page Server-SideClient-Side User request page XML Web DW component DataStore Step 1 HTTP get XML XSLT  XHTML JS rows Client-side JavaScript JS control CSS XHTML Page Client-Side

XML Web DataWindow Design JSP Page Server-SideClient-Side User request page XML Web DW component DataStore Step 1 HTTP get Step 2 DataWindow generated in separate XML, XSLT CSS, JS, with transform script sent to client XML XSLT  XHTML JS rows Client-side JavaScript JS control CSS XHTML Page Client-Side

XML Web DataWindow Design JSP Page Server-SideClient-Side User request page XML Web DW component DataStore Step 1 HTTP get Step 2 DataWindow generated in separate XML, XSLT CSS, JS, with transform script sent to client Step 3 HTTP response XML XSLT  XHTML JS rows Client-side JavaScript JS control CSS XHTML Page Client-Side

XML Web DataWindow Design JSP Page Server-SideClient-Side User request page XML Web DW component DataStore Step 1 HTTP get Step 2 DataWindow generated in separate XML, XSLT CSS, JS, with transform script sent to client Step 3 HTTP response XML XSLT  XHTML JS rows Client-side JavaScript JS control CSS Step 4 Client-side JavaScript uses XSLT to transform XML into XHTML and displays this in the in the browser XHTML Page Client-Side

XML Web DataWindow Design JSP Page Server-SideClient-Side User request page XML Web DW component DataStore Step 1 HTTP get Step 2 DataWindow generated in separate XML, XSLT CSS, JS, with transform script sent to client Step 3 HTTP response XML XSLT  XHTML JS rows Client-side JavaScript JS control CSS Step 5 User interacts with DataWindow, but next request only requires download of XML and JS rows Step 4 Client-side JavaScript uses XSLT to transform XML into XHTML and displays this in the in the browser XHTML Page Client-Side

Server-side Activity  The XML Web DataWindow generator is invoked in the DataWindow engine from server-side code.  An XHTML rendering of the DataWindow in a DOM tree.  A CSS style sheet, using a DOM tree, that includes all the styling information of the DataWindow object's elements, including absolute positions in the cascade.  Separate client-side JavaScript files for instantiating the control object and an array of row elements.  A set of static client-side JavaScript files.  A reverse transformation of the XHTML DOM tree into XML and XSLT DOM trees for Web publishing.  The XML tree contains the DataWindow data content for the page, and the XSLT tree contains the DataWindow object's structural layout.  A small amount of script to perform explicit transformation on the client side.

Client-side Activity  Downloads the XML source file that contains the DataWindow data content for the page and the XSLT style sheet, which is cached locally.  Performs a transformation using the XSLT processor.  Outputs the XHTML result into a section on the page.  Downloads, caches, and applies the CSS style sheet for display in the browser.  Downloads and caches the JavaScript files.

XML Web DataWindow Properties  CSSGen.ResourceBase - URL of the generated CSS style sheet to be referenced in a link element in the XHTML page ( href attribute value) dw_1.Object.DataWindow.CSSGen.ResourceBase= & '  CSSGen.PublishPath - Physical path of the Web site folder to which PowerBuilder publishes the generated CSS style sheet dw_1.Object.DataWindow.CSSGen.PublishPath = & 'C:\work\outputfiles\xmlsource‘  The PublishPath folder must correspond to the URL specified in the ResourceBase property. At runtime, after PowerBuilder generates the CSS style sheet to the PublishPath folder, it includes it in the final XHTML page by referencing it with the ResourceBase property in a element.

XML Web DataWindow Properties  JSGen.ResourceBase - URL of the generated JavaScript for performing client-side XSLT transformation and instantiation of client-side data. ( src attribute value) dw_1.Object.DataWindow.JSGen.ResourceBase = & '   JSGen.PublishPath - Physical path of the Web site folder to which PowerBuilder publishes the generated JavaScript. dw_1.Object.DataWindow.JSGen.PublishPath = & 'C:\work\outputfiles\xmlsource‘ …it includes it in the final XHTML page by referencing it with the value of the ResourceBase property in a element.

XML Web DataWindow Properties  XSLTGen.ResourceBase - URL referenced by transformation script. dw_1.Object.DataWindow.XSLTGen.ResourceBase = & '  XSLTGen.PublishPath - Physical path of the Web site folder to which PowerBuilder publishes the generated XSLT style sheet. dw_1.Object.DataWindow.XSLTGen.PublishPath = & 'C:\work\outputfiles\xmlsource‘  Client-side JavaScript in a generated page downloads it using a reference to the ResourceBase property. The JavaScript transforms the XML content to XHTML using the generated XSLT style sheet.

XML Web DataWindow Properties  XMLGen.ResourceBase - URL of the generated XML document that contains the XML Web DataWindow content. dw_1.Object.DataWindow.XMLGen.ResourceBase = & '  XMLGen.PublishPath - Physical path of the Web site folder to which PowerBuilder publishes the generated XML document that contains the XML Web DataWindow content. dw_1.Object.DataWindow.XMLGen.PublishPath = & 'C:\work\outputfiles\xmlsource'

XML Web DataWindow Properties  XHTMLGen.Browser - Browser in which XHTML generated within an XSLT style sheet is displayed.  Data.XMLWeb - A string containing browser-specific JavaScript that performs the XSLT transformation on the browser after the XML Web DataWindow generator generates all necessary components. The resulting XHTML contains a element.  The generated XHTML also includes:  XHTML input elements.  XHTML and JavaScript for navigation based on DataWindow button controls with scrolling actions.  State information about the modification status of data items.  Other properties shared with existing HTML Generation (HTMLGen) properties like ObjectName, SelfLink, RowsPerPage etc.

Supported and unsupported features CategoryWhat is supported Presentation styles All except Graph, RichText, OLE, Composite. Unsupported presentation styles retrieve data but display nothing. Nested reports Not supported Controls Supported controls: Column, Computed Field, Text, Picture, Button. These controls are ignored: Graph, OLE Object, OLE Database Blob, Report, Line,Rectangle,RoundRectangle,Oval,GroupBox. Retrieving data Up to 16 retrieval arguments. Filtering and sorting are supported by setting properties with the Modify method or calling methods on the server component. Sorting can also be specified via a client control method. User-specified queries using the QueryMode property are not supported. Updating data Same as PowerBuilder DataWindow control. The DataWindow object must contain editable columns.

Supported and unsupported features CategoryWhat is supported Edit styles All edit styles are supported except EditMask. If the DataWindow uses the EditMask edit style, the styles specified are treated as though they were specified as a display format.. DropDown DataWindows A drop-down DataWindow must be in the same PBL as the DataWindow in which it is used. Data for drop-down DataWindows is retrieved on the server and the values for the display column are converted to HTML Select list boxes. Display formats Supported, including the use of color. Validation rules The expression may be evaluated on the client or the server, depending on the expression. Property expressions Evaluated on the server.

Supported and unsupported features CategoryWhat is supported Layout Properties that specify autosizing of height and width or allow the user to resize or move controls are ignored. Properties The following properties are not supported: Sparse (Suppress Repeating Values) DataWindow object property· RightToLeft DataWindow control property Tab order Supported in HTML 4 browsers.

Browser requirements for XML Web DataWindow The XML Web DataWindow requires browsers that support the latest client-side technologies — XML, XSLT, XHTML, CSS and JavaScript. BrowserXML parser/XSLT processorXSLT version Internet Explorer 5, 5.5MSXML 2.0, 2.5 (update required)XSL-WD Internet Explorer 6.0MSXML 3.0XSLT 1.0 Netscape 6+TransforMiiXXSLT 1.0 Mozilla 1.0TransforMiiXXSLT 1.0

XML Web DataWindow Customization  XHTML that is generated at runtime by the XML Web DataWindow can be customized using an XHTML export template in the DataWindow painter's Export Template view for XHTML.  The user can reference:  DataWindow Column  Computed Field  Text controls  Independent DataWindow Expressions for each row in XHTML, wherever character data is allowed, to be replaced with text at runtime

XHTML Template View in DataWindow Painter

XHTML Template Customization  At design time, you can customize each of these XML Web DataWindow components:  Structural layout  Adding or removing basic XHTML document elements in the  Style rules of input field elements of the  Overriding default CSS stylesheet property values  Adding or removing CSS stylesheet declarations  Other XHTML element attributes  Overriding attribute values  Removing or adding attributes specific to these elements  JavaScript event handlers  Overriding/redirecting script handlers  Removing or adding event handlers, e.g. beyond the default PowerBuilder DataWindow emulation

Element Context Menus  Tree View items offer a context-sensitive pop-up menu for  customizing the XHTML Template or element.  Structural layout:  Edit  Add Child  Insert Before  Delete

Element Context Menus  Presentational and functional specifications:  Style Declarations

Element Context Menus  Presentational and functional specifications:  Element Attributes

Element Context Menus  Presentational and functional specifications:  JavaScript Event Handlers

XML Web DataWindow Customization  As with the XML DW template, multiple named versions of these XHTML Templates can be defined for each DataWindow object  The template to be used may be designated as a default at design time or by setting the Export.XHTML.UseTemplate DataWindow property at runtime

Demo  Lets look at more code….

Summary  HTML DataWindow  What worked and what didn’t  XML DataWindow  How its changed  Moving forward

Questions

Contact PowerObjects  Send and Questions:   Visit our Web-site:   Call Us:  Office (612)