PB10 KT XML Web DataWindow

1
Angelo Scipione Staff Software Engineer,
Sybase Angelo.Scipione_at_sybase.com August 15-19,
2004
2
The Enterprise. Unwired.
3
The Enterprise. Unwired.
Industry and Cross Platform Solutions
Unwire People
Unwire Information
Manage Information

• 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 ltstylegt 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
• XHTMLs 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-colorfffbf0 width100color00000
  0font8pt "MS Sans Serif", sans-seriffont-style
  normal font-weightnormaltext-decorationno
  ne text-alignleftborder-styleinset
• emp_lname_0 positionabsolute left1.349in
  top0.023in width1.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
CSS
XHTML
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 browsers 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 ltdivgt 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
  DWs 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 ltdivgt 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 - ltlinkgt href attribute value
• CSSGen.PublishPath - physical path to publish CSS
  stylesheet
• CSSGen.SessionSpecific - force session-specific
  CSS, XSLT, JS
• JSGen.ResourceBase - ltscriptgt 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 ltformgt 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 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

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
• lt_at_ page contentType"text/html charsetUTF-8"
  gt
• 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...
??