Download XML Web DataWindow

PWB528: XML DataWindow
Dean Jones
CEO, PowerObjects
[email protected]
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
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator
component
HTML Page
Client-Side
JSP Page
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator
component
Step 1
HTTP get
JSP Page
HTML Page
Client-Side
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator
component
Step 2
Entire DataWindow
generation embedded
in HTML document
sent to client
JSP Page
Step 1
HTTP get
HTML Page
Client-Side
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator
component
Step 2
Entire DataWindow
generation embedded
in HTML document
sent to client
JSP Page
Step 1
HTTP get
Step 3
HTTP response
HTML Page
Client-Side
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator
component
Step 2
Entire DataWindow
generation embedded
in HTML document
sent to client
JSP Page
Step 1
HTTP get
Step 3
HTTP response
HTML Page
Client-Side
Step 4
User 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 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
XML Web DataWindow
XML
Content
XSLT
Determines
structural
layout
Determines style of
elements as displayed
in browser
XHTML
The DataWindow engine generates
each of these components at runtime.
CSS
XML Web DataWindow
XML
Content
XSLT
Determines
structural
layout
DataWindow
content is
generated in XML
Determines style of
elements as displayed
in browser
XHTML
The DataWindow engine generates
each of these components at runtime.
CSS
XML Web DataWindow
XML
Content
XSLT
DataWindow layout is
generated in XSLT.
XSLT also creates the
structural layout of
the page, saving
bandwidth.
Determines
structural
layout
Determines style of
elements as displayed
in browser
XHTML
The DataWindow engine generates
each of these components at runtime.
CSS
XML Web DataWindow
XML
Content
XSLT
Determines
structural
layout
XHTML
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.
CSS
XML Web DataWindow
XML
Content
XSLT
Determines
structural
layout
XHTML
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
The DataWindow engine generates
each of these components at runtime.
CSS
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


More responsibility for processing page passed to client



No longer have to download a complete HTML page on each request
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
Server-Side
Client-Side
XML
DataStore
User request page
XSLT XHTML
XML Web DW
component
CSS
Client-side
JavaScript
JS control
JS rows
JSP Page
XHTML Page
Client-Side
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT XHTML
XML Web DW
component
CSS
Client-side
JavaScript
JS control
JS rows
JSP Page
Step 1
HTTP get
XHTML Page
Client-Side
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT XHTML
XML Web DW
component
Step 2
DataWindow generated
in separate XML, XSLT
CSS, JS, with transform
script sent to client
CSS
Client-side
JavaScript
JS control
JS rows
JSP Page
Step 1
HTTP get
XHTML Page
Client-Side
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT XHTML
XML Web DW
component
Step 2
DataWindow generated
in separate XML, XSLT
CSS, JS, with transform
script sent to client
CSS
Client-side
JavaScript
JS control
JS rows
JSP Page
Step 1
HTTP get
Step 3
HTTP response
XHTML Page
Client-Side
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT XHTML
XML Web DW
component
Step 2
DataWindow generated
in separate XML, XSLT
CSS, JS, with transform
script sent to client
CSS
Client-side
JavaScript
Step 1
HTTP get
JS control
JS rows
JSP Page
XHTML Page
Client-Side
Step 3
HTTP response
Step 4
Client-side
JavaScript uses
XSLT to transform
XML into XHTML
and displays this in
the <div> in the
browser
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT XHTML
XML Web DW
component
Step 2
DataWindow generated
in separate XML, XSLT
CSS, JS, with transform
script sent to client
CSS
Client-side
JavaScript
Step 1
HTTP get
JS control
JS rows
JSP Page
XHTML Page
Client-Side
Step 3
HTTP response
Step 4
Client-side JavaScript
uses XSLT to transform
XML into XHTML and
displays this in the <div>
in the browser
Step 5
User interacts with
DataWindow, but
next request only
requires download
of XML and JS
rows
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.
XML Web DataWindow Properties

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.
XML Web DataWindow Properties

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.
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 = &
'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'
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
<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.
Supported and unsupported features
Category
What 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
Category
What 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.
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


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



Adding or removing basic XHTML document elements in the <form>
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


XML DataWindow


What worked and what didn’t
How its changed
Moving forward
Questions
Contact PowerObjects

Send E-mail and Questions:


Visit our Web-site:


[email protected]
www.powerobjects.com
Call Us:

Office (612) 339-3355