Cogitech IncMiscellaneous | About us | Training | Tabular Topic Maps | Cogitative Topic Map Websites | Semantic Web Glasses | XWATL
Cogitative Technologies>XWATL

Secure SSL Certificates.

Data Maintenance on the Web Made Easy with XML Templates

Building web applications with XML Web Template Library

by , Cogitech, Inc.
nogievet@cogx.com
©Cogitech, Inc.
XML Web Template Library makes it possible to split web site development into four independent layers:
  • Object description and business logic (XML).
  • Site map (XLink).
  • Database API (XSLT).
  • Presentation and formatting (XSLT).



Live Applications

  • Maintenance of lookup tables used for various Federal and Head-office reporting systems.
  • Management of a proprietary general ledger system.
  • Support of a proprietary job control utility
  • Maintenance of risk management parameters such as risk weights.
  • Customer information maintenance.



HTML, CSS, Server side and Client side scripts are serialized in XSLT transformations




XML Web Template Library

XML document keeps all parameters needed to run update and select queries and provide content for the web.
XSLT stylesheets keep implementation details: Database API and presentation formatting.
XSLT stylesheets are shared between all maintenance web sites.
  • Change to API stylesheet will propagate to server side scripts in all web sites.
  • Change to Presentation stylesheet will affect client side rendering (HTML, DHTML and CSS) in all web sites.
  • Change to the central XML document or XLink will affect all screens within one web site.



XML fragment for a fictitious general ledger table:

<FORM> {...}
<FROM>gl</FROM>
<WHERE/>
<FIELDS>
<TEXTfield="gl_num"descr="general ledger number"default=""size="7"pk="true"qw="true"mask="\d{7}"/>
<SELECTfield="curr_code"descr="currency code"default="CND"pk="true"qw="true"mask="\w{3}">
<OPTIONvalue="AUD"text="Australian Dollar"/>
<OPTIONvalue="CND"text="Canadian Dollar"/>
<OPTIONvalue="USD"text="US Dollar"/>
<OPTIONvalue="RBL"text="Russian Ruble"/>
<OPTIONvalue="GBP"text="British Pound"/>
<OPTIONvalue="ILR"text="Italian Lira"/>
</SELECT>
<TEXTfield="ww_num"descr="world wide number"default=""size="5"mask="\d{3,}"/>
<TEXTfield="description"descr="gl description"default=""size="20"qw="true"/>
<SELECTfield="area"descr="financial area"default="1"mask=".+">
<OPTIONvalue="1"text="Asset & Liability"/>
<OPTIONvalue="2"text="Profit & Loss"/>
<OPTIONvalue="3"text="Off Balance Sheet"/>
</SELECT>
<SYSTEMfield="user_name"descr="user_id"type="user_id"qw="true"/>
<SYSTEMfield="entry_date"descr="entry date"type="entry_date"qw="true"/>
</FIELDS>
</FORM>
  • TEXT - a generic field.
  • SELECT - a field with set of key/values pares stored in OPTION elements.
  • SYSTEM - a field with system generated value such as entry date or user_id.
Attributes:
  • field - an SQL table field name.
  • descr - a friendly description to display.
  • pk - a primary key field. Used to build WHERE clauses, disable/enable entry fields.
  • qw - shows whether we should put field content in quotes when building queries.
  • default - default value to be used when inserting a new record.
  • mask - a regular expression used for field validation.



Sample XLink sitemap:

<xitemapxml:link="extended">
<locatorrole="search"href="search.cgi"restype="cgi"title="Search Results"/>
<locatorrole="entry"href="entry.htm"restype="html"title="Search Entry"/>
<locatorrole="add"href="add.htm"restype="html"title="Add New Screen"/>
<locatorrole="edit"href="edit.cgi"restype="cgi"title="Edit Screen"/>
<locatorrole="update"href="update.cgi"restype="cgi"title="Update Commit"/>
<locatorrole="insert"href="insert.cgi"restype="cgi"title="Insert Commit"/>
<arcfrom="entry"to="search"default="true"/>
<arcfrom="entry"to="add"/>
<arcfrom="search"to="entry"/>
<arcfrom="search"to="edit"/>
<arcfrom="search"to="add"/>
<arcfrom="edit"to="entry"/>
<arcfrom="edit"to="update"default="true"/>
<arcfrom="update"to="entry"default="true"/>
<arcfrom="add"to="insert"/>
<arcfrom="insert"to="entry"/>
</xitemap>
Attributes added to XLink elements:
  • Attribute restype of xlink:locator element represents type of the transformed document. Possible values are: (html | cgi); cgi type determined in API stylesheet.
  • Attribute userdefault of xlink:arc element is used to specify default link. (Link that will be traversed on pressing Enter key.)



Create new web site in four easy steps.

  • Generate XML automatically from a table object or UML diagram
  • Edit business rules manually or using simple GUI.
  • Select presentation and API XSLT templates from pre-built stylesheets.
  • Sitemap as XLink. Connect Action screens with xlink:arc using provided GUI.



MSXML and dynamic ASP scripts

All action screens are implemented with a single Server-side ASP JavaScript wrapper:
  • As link is traversed, action id is sent in a query string.
  • current role attribute on the root element of the XML file is set to action id.
  • Retrieves locator with xlink:id=current role.
  • Sets html:title based on xlink:title.
  • Determines stylesheet from xlink:href attribute and transforms XML.
  • Depending on resultType attribute:
    • If html: sends result directly to the browser.
    • If js: executes result via javascript:eval() method.
Presented at GCA Metastructures 99. Slides at http://www.cogx.com/xwtl/presAll.asp.



MSXML with ASP wrapper




XT and static server side scripts: House of templates.

HTML and server side scripts are pre-generated by running XT wrapped in a Python script. No runtime XSLT transformations.
Advantage: faster runtime execution.
Disadvantage: changes in XML will be reflected in web pages only after XSLT transformations are re-processed.
With adoption of the new XSLT WD, we introduce new features:
  • Store named xslt:templates in a reusable xslt:templates collections.
  • Split XSLT templates into two layers: presentation and API.
  • Build screens from calls to presentation and API xslt:templates as from construction blocks.



XT with Python wrapper




Two API implementations

Not only different database API - different scripting languages!!!
  • ASP: JavaScript and ADO.
  • <xsl:stylesheet>
    <xsl:outputmethod="html"/>
    <!-- JavaScript ASP with ADO -->
    <xsl:importhref="jsasp.xsl"/>
    <!-- presentation layer and input/output -->
    <xsl:importhref="impall.xsl"/>
    {...} </xsl:stylesheet>
  • CGI: Python and DBI.
  • <xsl:stylesheet>
    <xsl:outputmethod="html"/>
    <!-- python with dbi odbc api-->
    <xsl:importhref="pydbi.xsl"/>
    <!-- presentation layer and input/output -->
    <xsl:importhref="impall.xsl"/>
    {...} </xsl:stylesheet>



Live scenario

Each screen is built from construction blocks (xslt:template-call elements).
Each entry screen has an input form with input fields and links to other screens.
Inputs can be:
  • blank,
  • populated with default values,
  • populated with values from the current record.
Web screens are constructed by calling appropriate XSLT templates.



Search Entry Screen

  • All fields enabled and initiated with blanks.
  • Hyperlinks / buttons to start the search or add a new record.



Add New Screen

<arcfrom="entry"to="add"/>
  • All fields enabled, initiated with defaults values.
  • Links to Execute Insert and back to Search Entry.

Search Results Screen

<arcfrom="entry"to="search"/>
  • Fetches records that match search criteria and display them in html table.
  • When a record is selected for update, pk fields (unique identifier) are sent to the next screen.



Update Entry Screen

<arcfrom="search"to="edit"default="true"/>
  • Finds the record by pk fields (unique identifier).
  • Displays values of the current record in the entry form, leaving pk fields disabled. Other fields are editable.
  • From this screen user can either go back to Search Entry or Commit Update.



Commit Update & Confirmation

<arcfrom="edit"to="update"default="true"/>
  • Validates entry fields against business logic ( i.e. mask )
  • Executes update query
  • Selects updated record
  • Displays updated record in the form with all fields disabled (confirmation).



FORM template parameters:

enabled - with possible values:
  • true - all fields are enabled and editable (search, add).
  • false - all fields are disabled (confirmation).
  • non-pk - all but pk fields are enabled and editable; pk fields are disabled (edit).
value-set - with possible values:
  • blank - fields are initiated with blanks (search).
  • default - fields are initiated with defaults (add).
  • query - fields are initiated with the values of the current SQL record (edit).

<!ELEMENT FORMEMPTY>
<!ATTLIST FORM
enabled(true | false | non-pk)#REQUIRED
value-set(blank | default | query)#REQUIRED
>



XSLT Transformations

  • Main - screen repository.
  • Formatting and presentation - client side.
  • Database API - server side.
Two input XML documents:
  • Object description and Business rules.
  • XLink sitemap.
XLink sitemap utilization:
  • Generates only screens referred by xlink:locator..
  • Generates Hyperlinks (buttons) between screens according to xlink:arc elements.



XML City (xity poem)

...
xlink is a map used to build website - city
...
from screens - houses
...
constructed from xslt:template - bricks
...
and connected by xlink:arc - streets
...



Xity map




Links as buttons

This xslt:template is from the presentation layer (API independent).
Renders client side (D)HTML.



Document output xslt:template

Adds all the necessary HTML tags and writes HTML and CGI or ASP pages.
Independent of the server side script or DB API.
API layer xslt:templates that match @restype in start and end modes are used for script initializations and opening DB connections.



XSLT Builder game

Building new Clone screen from existing xslt:templates

Cloning mechanism makes sense in case of highly denormalised data structures.
User can clone a record selected on a search screen, or clone just inserted or updated record.
  • Finds original record by its primary key
  • Displays current values for all fields in the clone entry form, all fields including pk are enabled and editable.
  • From clone screen user can either go back to Search Entry or Commit Insert.



Differences from update screen:

  • All fields are enabled (in edit screen - pk disabled).
  • Data should be inserted (in edit screen - updated).
Clone Addition to original xity map. Arcs-Streets.
<xitemapxml:link="extended">
<locatorrole="clone"href="clone.cgi"restype="cgi"title="Clone Screen"/>
<arcfrom="search"to="clone"/>
<arcfrom="update"to="clone"/>
<arcfrom="insert"to="clone"/>
<arcfrom="clone"to="insert"default="true"/>
</xitemap>



Xity map with Clone Entry added




Entry / Display Form xslt:template.




Interface for XSLT Stylesheets.

Form xslt:template calls two API xslt:templates:
  • rs-value - used to populate text input elements.
  • rs-selected - used to set selected attribute on select/option elements
Presentation stylesheet expects that API stylesheet exposes rs-value and rs-selected xslt:templates.
We are back to defining interfaces!!!



rs-value and rs-selected xslt:templates.

JS ASP ADO.
PY CGI and DBI.
rsQry is ado.resultset in JS ASP and dbi.cursor in PY CGI. Their initialization happens in the start xslt:template.
rs-selected : set dummy attribute chosen to {''} or {' " selected="selected'}. After transformation and de-escaping they become {chosen=""} or {chosen="" selected="selected"}. We resort to tricks because selected is a boolean attribute (known only at runtime).



Update xslt:template from API Stylesheet

Creates and executes update statement.
JS ASP
PY CGI



Internal API stylesheet xslt:templates (methods).

  • _where-pk
    • builds where clause by pk fields.
    • calls _last-coma to put and between conditions.
  • _qfvalue
    • Calls _fvalue to get value from request query string or system field.
    • Add quotes for character fields.
  • _last-coma puts a coma separator everywhere but after the last node.
Look the same in JS ASP and PY CGI. Differences are hidden behind getUser() and getDate() function calls.



Interface for API Stylesheet

XML Web Template Library requires that API stylesheets adopt the following interface:
To help debugging, API and presentation stylesheets can be validated against interface schema.



Conclusions

  • Using XSLT Web Template Library with Xity Builder allows separation of development process into four layers:
    • Data structure and business rules in XML object description.
    • Site map implemented as extended XLink. Facilitated site map maintenance. Add/remove/modify XLink arcs and locators to administrate site map.
    • Database API serialized in XSLT templates in API stylesheet. Has to conform to a certain interface.
    • Presentation and formatting is serialized in Presentation stylesheet. Calls API xslt:templates according to API interface.
  • High level of modularization .
  • Object structure described in XML. No need to hardcode table information in server side scripts or retrieve them dynamically in runtime from the database. This simplifies code maintenance and reduces number of database calls.
  • XML based and hence extensible and integratable with other systems.
  • Client requirements: any HTML4 aware browser. Simplified user training and client installation.



This presentation

Updated version will be posted at http://www.cogx.com after 12/15/1999.

References

  • HTML Forms with XSLT @ Metastructures 99 http://www.cogx.com/xwtl/presAll.asp
  • XT Version 19990822 http://www.jclark.com/xml/xt.html
  • Python Language Website http://www.python.org
  • AElfred java xml parser http://www.microstar.com/aelfred.html
  • St. Laurent Open-source XLink library http://www.simonstl.com/projects/xlinkfilter/index.html
  • XSL Transformations (XSLT) Working Draft 9 July 1999 http://www.w3.org/1999/07/WD-xslt-19990709
  • XML Path Language (XPath) Working Draft 9 July 1999 http://www.w3.org/1999/07/WD-xpath-19990709
  • W3C XML Linking Language Working Draft http://www.w3.org/1999/07/WD-xlink-19990726
  • XML XLink Requirements http://www.w3.org/TR/1999/NOTE-xlink-req-19990224
  • XML Linking Language (XLink) Design Principles http://www.w3.org/TR/1998/NOTE-xlink-principles-19980303
  • The SGML/XML Web Page by Robin Cover http://www.oasis-open.org/cover/
  • XML at Microsoft http://msdn.microsoft.com/xml/c-frame.htm#/xml/default.asp
  • XSL-List Archive http://www.mulberrytech.com/xsl/xsl-list/archive/
  • XML-DEV Archive http://www.lists.ic.ac.uk/hypermail/xml-dev/





Budget Web Hosting and Cheap Domain Name Registration

Cogitech Inc. Made with Bexcelor & Tabular Topic Maps