PWB528: XML DataWindow

1
PWB528 XML DataWindow
Dean Jones CEO, PowerObjects dean.jones_at_powerobjec
ts.com August 15-19, 2004
2
Agenda

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

3
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

4
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator component
HTML Page Client-Side
JSP Page
5
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator component
HTML Page Client-Side
Step 1 HTTP get
JSP Page
6
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator component
HTML Page Client-Side
Step 1 HTTP get
Step 2 Entire DataWindow generation embedded in
HTML document sent to client
JSP Page
7
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator component
HTML Page Client-Side
Step 1 HTTP get
Step 2 Entire DataWindow generation embedded in
HTML document sent to client
Step 3 HTTP response
JSP Page
8
Review HTML DataWindow Design
Server-Side
Client-Side
DataStore
User request page
HTMLGenerator component
HTML Page Client-Side
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
JSP Page
9
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

10
Next Generation Web DataWindow
11
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

12
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

13
XML Web DataWindow
XML Content
XSLT
Determinesstructural layout
Determines style of elements as displayed in
browser
XHTML
CSS
The DataWindow engine generates each of these
components at runtime.
14
XML Web DataWindow
DataWindow content is generated in XML
XML Content
XSLT
Determinesstructural layout
Determines style of elements as displayed in
browser
XHTML
CSS
The DataWindow engine generates each of these
components at runtime.
15
XML Web DataWindow
XML Content
XSLT
Determinesstructural layout
Determines style of elements as displayed in
browser
XHTML
CSS
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.
16
XML Web DataWindow
An XSLT transformation is performed to render in
the browser a fully-functional DataWindow in
XHTML.
XML Content
XSLT
Determinesstructural layout
Determines style of elements as displayed in
browser
XHTML
CSS
The DataWindow engine generates each of these
components at runtime.
17
XML Web DataWindow
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.
XML Content
XSLT
Determinesstructural layout
Determines style of elements as displayed in
browser
XHTML
CSS
The DataWindow engine generates each of these
components at runtime.
18
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

19
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

20
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 browsers memory used as
  client-side data cache

21
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

22
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

23
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

24
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT? XHTML
XML Web DW component
XHTML Page Client-Side
CSS
Client-side JavaScript
JS control
JS rows
JSP Page
25
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT? XHTML
XML Web DW component
XHTML Page Client-Side
CSS
Step 1 HTTP get
Client-side JavaScript
JS control
JS rows
JSP Page
26
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT? XHTML
XML Web DW component
XHTML Page Client-Side
CSS
Step 1 HTTP get
Client-side JavaScript
Step 2 DataWindow generated in separate XML,
XSLT CSS, JS, with transform script sent to client
JS control
JS rows
JSP Page
27
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT? XHTML
XML Web DW component
XHTML Page Client-Side
CSS
Step 1 HTTP get
Client-side JavaScript
Step 2 DataWindow generated in separate XML,
XSLT CSS, JS, with transform script sent to client
JS control
Step 3 HTTP response
JS rows
JSP Page
28
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT? XHTML
XML Web DW component
XHTML Page Client-Side
CSS
Step 4 Client-side JavaScript uses XSLT to
transform XML into XHTML and displays this in the
ltdivgt in the browser
Step 1 HTTP get
Client-side JavaScript
Step 2 DataWindow generated in separate XML,
XSLT CSS, JS, with transform script sent to client
JS control
Step 3 HTTP response
JS rows
JSP Page
29
XML Web DataWindow Design
Server-Side
Client-Side
XML
DataStore
User request page
XSLT? XHTML
XML Web DW component
XHTML Page Client-Side
CSS
Step 1 HTTP get
Step 4 Client-side JavaScript uses XSLT to
transform XML into XHTML and displays this in the
ltdivgt in the browser
Client-side JavaScript
Step 2 DataWindow generated in separate XML,
XSLT CSS, JS, with transform script sent to client
JS control
Step 5 User interacts with DataWindow, but next
request only requires download of XML and JS rows
Step 3 HTTP response
JS rows
JSP Page
30
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.

31
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 ltdivgt section on
  the page.
• Downloads, caches, and applies the CSS style
  sheet for display in the browser.
• Downloads and caches the JavaScript files.

32
XML Web DataWindow Properties

• CSSGen.ResourceBase - URL of the generated CSS
  style sheet to be referenced in a link element in
  the XHTML page (ltlinkgt 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 ltlinkgt element.

33
XML Web DataWindow Properties

• JSGen.ResourceBase - URL of the generated
  JavaScript for performing client-side XSLT
  transformation and instantiation of client-side
  data. (ltscriptgt 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 ltscriptgt element.

34
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.

35
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'

36
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 ltformgt
  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.

37
Supported and unsupported features
38
Supported and unsupported features
39
Supported and unsupported features
40
Browser requirements forXML Web DataWindow

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

41
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

42
XHTML Template View in DataWindow Painter
43
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 ltformgt
• Style rules of input field elements of the ltformgt
• 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

44
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

45
Element Context Menus

• Presentational and functional specifications
• Style Declarations

46
Element Context Menus

• Presentational and functional specifications
• Element Attributes

47
Element Context Menus

• Presentational and functional specifications
• JavaScript Event Handlers

48
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

49
Demo

• Lets look at more code.

50
Summary

• HTML DataWindow
• What worked and what didnt
• XML DataWindow
• How its changed
• Moving forward

51
Questions
52
Contact PowerObjects

• Send E-mail and Questions
• sales_at_powerobjects.com
• Visit our Web-site
• www.powerobjects.com
• Call Us
• Office [phone]