1 / 49

Angelo Scipione Staff Software Engineer, Sybase Angelo.Scipione@sybase.com August 15-19, 2004

Angelo Scipione Staff Software Engineer, Sybase Angelo.Scipione@sybase.com August 15-19, 2004. The Enterprise. Unwired. The Enterprise. Unwired. Industry and Cross Platform Solutions. Manage Information. Unwire Information. Unwire People. Adaptive Server Enterprise

randilyn
Download Presentation

Angelo Scipione Staff Software Engineer, Sybase Angelo.Scipione@sybase.com August 15-19, 2004

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. Angelo Scipione Staff Software Engineer, Sybase Angelo.Scipione@sybase.com August 15-19, 2004

  2. The Enterprise. Unwired.

  3. The Enterprise. Unwired. Industry and Cross Platform Solutions Manage Information Unwire Information Unwire People • Adaptive Server Enterprise • Adaptive Server Anywhere • Sybase IQ • Dynamic Archive • Dynamic ODS • Replication Server • OpenSwitch • Mirror Activator • PowerDesigner • Connectivity Options • EAServer • Industry Warehouse Studio • Unwired Accelerator • Unwired Orchestrator • Unwired Toolkit • Enterprise Portal • Real Time Data Services • SQL Anywhere Studio • M-Business Anywhere • Pylon Family (Mobile Email) • Mobile Sales • XcelleNet Frontline Solutions • PocketBuilder • PowerBuilder Family • AvantGo Sybase Workspace

  4. Agenda • Recent history of HTML Web DataWindow • HTMLGenerator80, HTMLGenerator90 components • Room for improvement: • Separating DataWindow presentation markup from content • Saving bandwidth • Improving processing • Reducing server processing by offloading work to client • Allowing easy customization of DataWindow generation • TreeView-based editing?… • The XML Web DataWindow! • Designed using more efficient XML-based & Web technologies • DOM  XHTML  CSS • XML  XSLT

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

  6. 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 • Server processing/scalability unnecessarily strained • Bandwidth misspent on unnecessary downloads • Generator is string-buffer-based, limiting extensibility • Customization of generated HTML or CSS not supported • Nested and composite DataWindows not supported

  7. What components are duplicated? • HTML structural layout of DataWindow rendering • CSS style of DataWindow elements as displayed in browser • Almost all client-side JavaScript functionality & control object …basically ALL of the presentation markup, or everything except the DataWindow data content and JavaScript row element objects.

  8. PB 8.0 HTML Web DataWindow HTMLGenerator80 Some related enhancements were introduced, influenced by TeamSybase and customer feedback: • Some bandwidth saved by separating out/caching: • Static client-side JavaScript--including common, date, number, and string functions • Some customization allowed by introducing: • ‘AppendedHTML’ property on text, column, & compute controls

  9. Current (PB 9.0) HTML Web DataWindow HTMLGenerator90 Still regenerating: • Data content • Page layout/design • Presentation/styling (e.g. fonts, colors, borders, etc.) • Some CSS rules in <style> element inside document • Element-specific rules, e.g. absolute positioning, in style attributes of elements • Client-side control in JavaScript inside document …All in single static HTML page, on every round-trip to server

  10. Next Generation Web DataWindow PowerBuilder 10.0 Release Customer feedback for improvement: • Save bandwidth on round-trips to server • Ideally to just DataWindow data • Markup that remains static for the life of the session should only be downloaded once • Reduce server processing and perform more work on the client for improved scalability • Allow more control and convenient way to customize generation

  11. The XML Web DataWindow Solution Utilize latest web technologies: • XHTML • Client-side XML • Client-side XSLT • Standalone CSS stylesheet (with cascaded absolute positioning)

  12. XML Web DataWindow Browsers targeted:

  13. 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 1.0 comprises three document types: • Strict • Transitional • Frameset • XHTML 1.1 introduces superseding document type

  14. Why Use XHTML? Benefits: • Separation of presentation markup from content • Most fundamental principle in web development • Use of XML-specific technologies in architecture • DOM-based generation and parsing • Use of XML-specific tools for customizing • TreeView-based editing

  15. Separating Presentation from Content Within DataWindow: • Content = data values of column, compute, and text controls • Presentation = visual and functional properties of DW controls Benefits of Separating: • Accessibility • Targeted presentation using stylesheets • Improved processing by browser

  16. XHTML Benefits Accessibility United States, Section 508 of the Usability Act • XHTML’s separation of visual elements from actual content make page much more accessible to people with disabilities • XHTML more easily understood by people with visual impairments using screen readers and voice browsers

  17. XHTML Benefits Targeted Presentation • Presentation can now be stored in separate stylesheet documents (CSS and XSL) for XHTML page • Different stylesheets more easily generated for different browsers

  18. XHTML Benefits Improved Processing • Browsers process XHTML documents quicker due to valid, well-formedness rules of XHTML/XML • Copious browser functionality to handle malformed HTML unnecessary • XHTML DTDs prohibit browser-proprietary extensions leading to incompatible browsers

  19. XHTML Benefits Use of XML-specific technologies • W3C Document Object Model (DOM) can be used to implement more robust generation • DOM provides API access to XML “tree” model of objects • Document can be re-traversed during generation • More extensible, e.g. support for nested and composite • User customizations incorporated more easily • DOM-based implementations in XML Web DataWindow: • DataWindow XHTML generator • DataWindow CSS generator • DataWindow XSLT generator Algorithm to separate XHTML presentation from content • DataWindow XML generator

  20. XHTML Benefits Use of XML-specific tools DOM-based TreeView editor can be used to customize XML Web DataWindow at design-time • XHTML Template View introduced in DataWindow Painter • Built on foundation of XML Template View introduced in PowerBuilder 9.0 DOM-based API can be used to customize XML Web DataWindow at runtime • PBDOM in PowerScript

  21. CSS Cascading Style Sheets • 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 stylesheet 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

  22. CSS in XML Web DataWindow emp_lname_0, birth_date_0, ss_number_0 {background-color:#fffbf0; width:100%;color:#000000;font:8pt "MS Sans Serif", sans-serif;font-style:normal; font-weight:normal;text-decoration:none; text-align:left;border-style:inset;} emp_lname_0 {position:absolute; left:1.349in; top:0.023in; width:1.000in}

  23. Why Use 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

  24. Client-Side XML XML Content Determines structural layout XSLT Determines style of elements as displayed in browser XHTML CSS

  25. Client-Side XML • 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

  26. XSLT Extensible Stylesheet 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

  27. Why Use Client-Side 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

  28. XML Web DataWindow Design Server-Side Client-Side XML DataStore User request page XSLT XHTML XML Web DW component XHTML Page Client-Side Step 4 Client-side JavaScript uses XSLT to transform XML into XHTML and displays this in the <div> in the browser 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 Step 5 User interacts with DataWindow, but next request only requires download of XML and JS rows JS rows JSP Page

  29. XML Web DataWindow Generator Server-Side 1.) Invoked in the DataWindow engine from server-side code 2.) Generates an XHTML rendering of the DW in a DOM tree 3.) Concurrently generates a CSS stylesheet using a DOM tree with all styling information of the DW’s elements, including absolute positions in cascade 4.) Also generates separate client-side JavaScript files for instantiating the control object and array of row elements • Static client-side set of JavaScript files deployed as usual 5.) Reverse-transforms the XHTML DOM tree to XML and XSLT DOM trees for web publishing • XML = DataWindow data content for the page • XSLT = DataWindow structural layout 6.) Ultimately generates small amount of script to perform explicit transformation on client-side

  30. XML Web DataWindow Client - Demo Client-Side 1.) Downloads source XML file (containing DataWindow content for the page) and XSLT stylesheet, which is cached locally 2.) Performs transformation using XSLT processor 3.) Outputs XHTML result into a <div> section on the page 4.) Downloads, caches, and applies CSS stylesheet for display in the browser 5.) Downloads and caches JavaScript files 6.) Subsequent HTTP Get/HTTP Response only requires regenerating and downloading XML file (and JavaScript row objects file) for updated DataWindow page

  31. XML Web DataWindow Properties For XHTML and XML Web Generation • XHTMLGen.Browser - browser in HTTP header from client • CSSGen.ResourceBase - <link> href attribute value • CSSGen.PublishPath - physical path to publish CSS stylesheet • CSSGen.SessionSpecific - force session-specific CSS, XSLT, JS • JSGen.ResourceBase - <script> src attribute value • JSGen.PublishPath - physical path to publish JavaScript • Data.XHTML - invoke generation and return XHTML • Other properties shared with existing HTML Generation (HTMLGen) properties

  32. XML Web DataWindow Properties For XML Web Generation (additionally) • XSLTGen.ResourceBase - URL referenced by transformation script • XSLTGen.PublishPath - physical path to publish XSLT stylesheet • XMLGen.ResourceBase - URL referenced by transformation script • XMLGen.PublishPath - physical path to publish XML • Data.XMLWeb - invoke generation and return XSLT transform script

  33. DataWindow Painter Properties View - Demo Web Generation tab

  34. DataWindow Painter Properties View - Demo Web Generation tab

  35. DataWindow Painter Properties View - Demo JavaScript Generation tab

  36. HTMLGenerator100 Integration Interface extension • string Generate() - same as before returning HTML • string GenerateXHTML() - invoke generation and return XHTML • string GenerateXMLWeb() - invoke generation and return XSLT transform script

  37. JSP Target Integration DTC Properties dialog

  38. JSP Target Integration DTC Properties Recommendation

  39. When to Use XHTML vs. XML? Or does bandwidth savings compensate for XSLT processing cost? XHTML: • DataWindow rows comprise 1 page • DataWindow rows span multiple pages, but layout inconsistent page-to-page XML (& XSLT): • DataWindow rows span multiple pages, and layout consistent page-to-page Over HTML, both offer: • Accessibility • Resulting markup parsed faster by browser • Ability to customize…

  40. Customizing the Generation At Design-time XHTML Template: • Built upon the DataWindow XML Template framework introduced in PowerBuilder 9.0 • Represents a single-instance document of the resulting DataWindow XHTML <form> element • Only stores the structural layout and any customizations the developer has defined • Applied to the default generation at runtime by setting the Export.XHTML.UseTemplate DataWindow property

  41. XHTML Template Customizations allowed • 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

  42. Export Template - XHTML View in DW Painter Demo

  43. Element Context Menus TreeView items offer a context-sensitive pop-up menu for customizing the XHTML Template or element. Presentational and functional specifications: • Style Declarations • Element Attributes • JavaScript Event Handlers

  44. Customizing Style Declarations - Demo Style Declarations Dialog

  45. Customizing Element Attributes Element Attributes Dialog

  46. Customizing JavaScript Event Handlers JavaScript Event Handlers Dialog

  47. DataWindow Painter Properties View - Demo Data Export tab

  48. Unicode/Internationalization • Unicode DBMS-related EAServer patch per CR342484 • Specify UTF-8 encoding for the servlet's response output stream, by including this page directive at the top of the JSP: <%@ page contentType="text/html; charset=UTF-8" %> • Specify UTF-8 encoding for the servlet's request input stream, by calling the following method on the request interface in the JSP, before any calls to request.getParameter(): • request.setCharacterEncoding("UTF8");

  49. And now... ??

More Related