Building a UI with Zen Pat McGibbon –Sales Engineer

Agenda Background and Introduction Background and Introduction Architectural Overview and Run-time Behaviour Architectural Overview and Run-time Behaviour Demo Demo Zen Components Zen Components Document Object Model Document Object Model Model View Controller Model View Controller SVG Components SVG Components Zen Reports Zen Reports

What is Zen? Application Framework to develop web-based user interfaces Application Framework to develop web-based user interfaces Library of pre-built object components Library of pre-built object components Components generate standard HTML and JavaScript Components generate standard HTML and JavaScript Model driven architecture Model driven architecture Object database integration Object database integration Integrated use of SVG Integrated use of SVG

Zen Architecture Zen entities consist of a set of classes: Zen Application made up of Zen Pages Zen Application made up of Zen Pages Zen Pages: Zen Pages: –Page object –Component objects defined in XML format –Browser and Server methods Zen components Zen components –Pre-built –Custom

Zen Run-time Behaviour A page request instantiates page object and all of its component objects on the server. A page request instantiates page object and all of its component objects on the server. The tree then renders CSS, JavaScript, and HTML needed to render the page on the client browser. The tree then renders CSS, JavaScript, and HTML needed to render the page on the client browser. The same object tree is then recreated as a set of JavaScript objects within the client browser. The same object tree is then recreated as a set of JavaScript objects within the client browser. Object properties, methods, and inheritance are therefore available on the client side. Object properties, methods, and inheritance are therefore available on the client side. Event handling invokes methods on client and/or server. Event handling invokes methods on client and/or server.

Zen and CSP The Zen framework is built using CSP. It sits on top of CSP’s class based development approach. The Zen framework is built using CSP. It sits on top of CSP’s class based development approach. Zen does not replace CSP in any way. It is a toolkit sitting on top of CSP. Zen does not replace CSP in any way. It is a toolkit sitting on top of CSP. Ease of development using the basic features provided by CSP: Ease of development using the basic features provided by CSP: –Performance –Data access –Security –Localization –Configuration –Session Management –Hyper-event mechanism

Getting Started – Zen Application Studio provides templates for creating Zen Applications, Zen Pages, Zen Components, and Zen Methods Studio provides templates for creating Zen Applications, Zen Pages, Zen Components, and Zen Methods New Zen Application contains: New Zen Application contains: –APPLICATIONNAME Parameter –HOMEPAGE Parameter –DOMAIN Parameter –XData Style block Zen Applications extend the %ZEN.application class Zen Applications extend the %ZEN.application class

Getting Started – Zen Page New Zen Page contains: New Zen Page contains: –APPLICATION Parameter –PAGENAME Parameter –DOMAIN Parameter –XData Style block –XData Contents block Zen Pages extend the %ZEN.Component.page class Zen Pages extend the %ZEN.Component.page class The Contents block initially only contains a single component, the page itself. The Contents block initially only contains a single component, the page itself.

Zen Components Derived from %ZEN.Component.component Derived from %ZEN.Component.component Vary in complexity from simple wrappers for native HTML controls to full-featured calendar and grid controls Vary in complexity from simple wrappers for native HTML controls to full-featured calendar and grid controls Several categories of components: Several categories of components: –Controls – display data and allow for user input (e.g. text or button controls) –Groups – contain a set of other components (e.g. groups, menus, and forms) –Panes – display rich information (e.g. a tablePane)

Definition of Zen Components Zen Components consist of two parts: Appearance Appearance –Standard CSS Style Sheet Behaviour Behaviour –Definition of how its initial HTML is drawn –Set of properties and methods

Adding Components to a Page Controls and Components can be added to a Zen page in two ways: Adding the XML tag with all the attributes manually by directly editing the Contents block of the page. Adding the XML tag with all the attributes manually by directly editing the Contents block of the page. Choosing from the available templates in Studio. These include templates for HTML elements, SQL Statements, Zen methods, and Zen XML elements Choosing from the available templates in Studio. These include templates for HTML elements, SQL Statements, Zen methods, and Zen XML elements

Zen Methods Zen Methods can either be Instance or Class Methods (“Scope” of the method) Zen Methods can either be Instance or Class Methods (“Scope” of the method) Zen Methods can be client-side, server-side, or server-only methods (“Location” of the method): Zen Methods can be client-side, server-side, or server-only methods (“Location” of the method): –Client-side methods are written in JavaScript [ Language = JavaScript ] –Server-side methods use the “ZenMethod” keyword –Methods that can only run on the server start with %

Document Object Model We create an instance of a DOM at page generation time which can be accessed and modified programmatically. We create an instance of a DOM at page generation time which can be accessed and modified programmatically. Each component is automatically wrapped in an HTML div element. Use the enclosing div to access and edit individual components on a page. Each component is automatically wrapped in an HTML div element. Use the enclosing div to access and edit individual components on a page. The browser DOM is accessible on both the client *and* the server. It can be updated in a server side call and the update will take effect on return from the call. The browser DOM is accessible on both the client *and* the server. It can be updated in a server side call and the update will take effect on return from the call.

Zen Component Library Here is just a few examples of pre-built components Zen provides: Forms (automatic and manual) Forms (automatic and manual) Panes Panes Calendar Calendar Dynamic tree Dynamic tree Grid Grid Let’s take a look at one of these in particular …

tablePane Component Display data and search results within an easy-to-use tabular format Display data and search results within an easy-to-use tabular format Values based on the contents of a query. Query sources can be: Values based on the contents of a query. Query sources can be: –SQL Statement –Pre-existing class query –Callback method generating dynamic SQL –SQL statement automatically created based on a set of column definitions and user choices

tablePane Features Visual indication of selected rows Visual indication of selected rows onselectRow Event Handler onselectRow Event Handler Users can set “filters” for columns: choice of new search criteria re-executes the query and refreshes the contents of the table without repainting the entire page. Users can set “filters” for columns: choice of new search criteria re-executes the query and refreshes the contents of the table without repainting the entire page. Users can control the style of a row or individual cell using “row conditions”. Users can control the style of a row or individual cell using “row conditions”. Users can sort data by clicking on the column they wish to sort by. Users can sort data by clicking on the column they wish to sort by. “Snapshot” vs. “direct” mode “Snapshot” vs. “direct” mode

“Snapshot” mode The query results are copied to a temporary location on the server and retrieved from there for subsequent refreshes. The query results are copied to a temporary location on the server and retrieved from there for subsequent refreshes. Snapshot mode provides “Paging” mechanism: Results can be displayed using multiple pages within the tablePane. Users can move among the pages without having to re- execute the query. Snapshot mode provides “Paging” mechanism: Results can be displayed using multiple pages within the tablePane. Users can move among the pages without having to re- execute the query. Users can sort results without re-executing the query. Users can sort results without re-executing the query.

Model View Controller Easy way to tie visual components to data on the server. These can be Easy way to tie visual components to data on the server. These can be –simple elements like data types –complex objects Usage specifically tailored for forms, charts, or meters Usage specifically tailored for forms, charts, or meters Data flow can be controlled by developer in as much detail as needed or completely dynamic Data flow can be controlled by developer in as much detail as needed or completely dynamic

MVC Architecture Data Model Data Model –Class containing a collection of properties that represent some server side data Data Controller Data Controller –Invisible component on a Zen page that is bound to a data model –Intermediary between that data model and one or more data views defined on the Zen page Data View Data View -Visual representation of the data on a Zen page -Gets and sets the properties of the data model by pointing to the appropriate Data Controller

The MVC Adapter Another way to use MVC is by adding the MVC Adapter to a persistent class. This will auto generate a page for modifying that object when bound to a data controller. Another way to use MVC is by adding the MVC Adapter to a persistent class. This will auto generate a page for modifying that object when bound to a data controller. %ZEN.DataModel.Adapter %ZEN.DataModel.Adapter

Demo Let’s take a look at what Zen looks like …

SVG Components Overview Integrated use of SVG (Scalable Vector Graphics) Integrated use of SVG (Scalable Vector Graphics) Add graphical components to a page Add graphical components to a page Pre-built set of charts and meters or build your own Pre-built set of charts and meters or build your own

SVG Components What is SVG? Two-dimensional vector graphics defined in XML format Two-dimensional vector graphics defined in XML format Browser independent Browser independent –Firefox natively supports SVG –Internet Explorer needs an Adobe plug-in Graphics can be static or dynamically change appearance in response to data values. Graphics can be static or dynamically change appearance in response to data values.

SVG Components SVG Support in Zen Zen provides a set of built-in SVG Components. Zen provides a set of built-in SVG Components. You can define custom SVG Components by extending the %ZEN.SVGComponent.svgComponent base class. You can define custom SVG Components by extending the %ZEN.SVGComponent.svgComponent base class. You can add static or dynamic SVG files to your Zen pages: You can add static or dynamic SVG files to your Zen pages: –Static SVG files should be placed inside an or tag. –Any dynamic SVG component must be placed within a Zen SVG Frame component.

SVG Components Types of SVG Components Meters – Graphical representation of a single numeric value Meters – Graphical representation of a single numeric value – – Charts – Represent a series of data items Charts – Represent a series of data items – –

SVG Components Meters Add the meter component to your page and set its attributes to define label, range, initial value, etc. Add the meter component to your page and set its attributes to define label, range, initial value, etc. There is two ways to provide the value for a meter: There is two ways to provide the value for a meter: –Programmatically modify the value of your meter –Bind your meter to a class using the Model View Controller approach

SVG Components Charts Add the chart component to your page and set its attributes to define height, width, margins, and legend. Add the chart component to your page and set its attributes to define height, width, margins, and legend. There is two ways of providing data for a chart: There is two ways of providing data for a chart: –Programmatically by using the chart’s ongetData attribute to invoke a javascript method –Bind the chart to a class using the Model View Controller approach

Zen Reports Overview XHTML or PDF formatted documents XHTML or PDF formatted documents Specify data contents and display layout Specify data contents and display layout

Zen Reports Defining a Zen Report Every Zen Report is a class. Every Zen Report is a class. The same report class can be displayed as xml, html, or pdf. The same report class can be displayed as xml, html, or pdf. The default output format can be set inside the class. At runtime the format can be changed by modifying a parameter in the URL. The default output format can be set inside the class. At runtime the format can be changed by modifying a parameter in the URL. Report class consists of parameters and XData blocks. Report class consists of parameters and XData blocks.

Zen Reports Building a Zen Report Every Report class contains two XData blocks: Every Report class contains two XData blocks: –ReportDefinition to describe the data contents –ReportDisplay to define the visual representation of the data Data is described as an XML formatted result set. Data is described as an XML formatted result set. –Specify an SQL query –Specify a set of XML tags to define which fields to include in the display The display definition will be automatically converted into a stylesheet that is being applied to the data output. The display definition will be automatically converted into a stylesheet that is being applied to the data output.

Zen Reports PDF Reports PDF Output requires a third-party rendering tool. PDF Output requires a third-party rendering tool. Third-party tool will be invoked to transform the XML into XSL-FO and finally to PDF Third-party tool will be invoked to transform the XML into XSL-FO and finally to PDF XSL-FO to PDF tool options: XSL-FO to PDF tool options: – – Global setting points to the third-party tool to be used Global setting points to the third-party tool to be used –^%SYS("zenreport","transformerpath")

Building a UI with Zen Pat McGibbon – Sales Engineer