Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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