pwb528: xml datawindow dean jones ceo, powerobjects [email protected] august 15-19, 2004

PWB528: XML DataWindow

Dean JonesCEO, PowerObjects

[email protected] 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

HTMLGeneratorcomponent

DataStore

HTML Page Client-Side


JSP Page


User request page


DataStore

Step 1HTTP get HTML Page

Client-Side


JSP Page


User request page


DataStore

Step 1HTTP getStep 2

Entire DataWindow generation embedded in HTML document sent to client



JSP Page


User request page


DataStore



Step 3HTTP response



JSP Page


User request page


DataStore



Step 3HTTP response

Step 4User interacts with DataWindow and entire process repeated


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 theexisting 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 ofelements as displayedin browser

Determinesstructural layout


XML Web DataWindow

XHTML

XML Content

XSLT

CSS



DataWindow content is generated in XML


XML Web DataWindow

XHTML

XML Content

XSLT

CSS



DataWindow layout is generated in XSLT.

XSLT also creates the structural layout of the page, saving bandwidth.


XML Web DataWindow

XHTML

XML Content

XSLT

CSS


An XSLT transformation is performed to render in the browser a fully-functional DataWindow in XHTML.



XML Web DataWindow

XHTML

XML Content

XSLT

CSS


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.


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


User request page

XML Web DWcomponent

DataStore

XML

XSLT XHTML

JS rows

Client-side JavaScript

JS control

CSS

XHTML PageClient-Side


JSP Page


User request page

XML Web DWcomponent

DataStore

Step 1HTTP get

XML

XSLT XHTML

JS rows


JS control

CSS



JSP Page


User request page

XML Web DWcomponent

DataStore

Step 1HTTP get

Step 2DataWindow generated in separate XML, XSLTCSS, JS, with transform script sent to client

XML

XSLT XHTML

JS rows


JS control

CSS



JSP Page


User request page

XML Web DWcomponent

DataStore

Step 1HTTP get


Step 3HTTP response

XML

XSLT XHTML

JS rows


JS control

CSS



JSP Page


User request page

XML Web DWcomponent

DataStore

Step 1HTTP get


Step 3HTTP response

XML

XSLT XHTML

JS rows


JS control

CSSStep 4

Client-side JavaScript uses XSLT to transform XML into XHTML and displays this in the <div> in the browser



JSP Page


User request page

XML Web DWcomponent

DataStore

Step 1HTTP get


Step 3HTTP response

XML

XSLT XHTML

JS rows


JS control

CSS

Step 5User interacts with DataWindow, but next request only requires download of XML and JS rows

Step 4Client-side JavaScript uses XSLT to transform XML into XHTML and displays this in the <div> in the browser


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 <div> 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 (<link> href attribute value)

dw_1.Object.DataWindow.CSSGen.ResourceBase= &'http://www.myserver.com/xmlsource‘

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 <link> element.


JSGen.ResourceBase - URL of the generated JavaScript for performing client-side XSLT transformation and instantiation of client-side data. (<script> src attribute value)

dw_1.Object.DataWindow.JSGen.ResourceBase = &'http://www.myserver.com/xmlsource'

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 <script> element.


XSLTGen.ResourceBase - URL referenced by transformation script.

dw_1.Object.DataWindow.XSLTGen.ResourceBase = &'http://www.myserver.com/xmlsource'

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.


XMLGen.ResourceBase - URL of the generated XML document that contains the XML Web DataWindow content.

dw_1.Object.DataWindow.XMLGen.ResourceBase = &

'http://www.myserver.com/xmlsource‘

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'


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 <form> 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

Category What 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.



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.



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 forXML Web DataWindow

The XML Web DataWindow requires browsers that support the latest client-side technologies — XML, XSLT, XHTML, CSS and JavaScript.

Browser XML parser/XSLT processor XSLT version

Internet Explorer 5, 5.5 MSXML 2.0, 2.5 (update required) XSL-WD

Internet Explorer 6.0 MSXML 3.0 XSLT 1.0

Netscape 6+ TransforMiiX XSLT 1.0

Mozilla 1.0 TransforMiiX XSLT 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 <form>

Style rules of input field elements of the <form> 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


Presentational and functional specifications: Style Declarations


Presentational and functional specifications: Element Attributes


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 E-mail and Questions: [email protected]

Visit our Web-site: www.powerobjects.com

Call Us: Office (612) 339-3355

pwb528: xml datawindow dean jones ceo, powerobjects [email protected] august 15-19, 2004

Documents