1 / 52

PWB528: XML DataWindow

Learn how to enhance DataWindow generation by leveraging XML technology, reducing bandwidth and improving performance. Explore the benefits of using XML, XHTML, and CSS to create fully-functional DataWindows in the browser.

bmckinney
Download Presentation

PWB528: XML DataWindow

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PWB528: XML DataWindow Dean Jones CEO, PowerObjects dean.jones@powerobjects.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 browser’s 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 XHTML Page Client-Side XML Web DW component CSS Step 4 Client-side JavaScript uses XSLT to transform XML into XHTML and displays this in the <div> 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 XHTML Page Client-Side XML Web DW component CSS Step 1 HTTP get Step 4 Client-side JavaScript uses XSLT to transform XML into XHTML and displays this in the <div> 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 <div> 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 (<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.

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

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

  37. Supported and unsupported features

  38. Supported and unsupported features

  39. Supported and unsupported features

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

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

  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 didn’t • XML DataWindow • How its changed • Moving forward

More Related