Building a UI with Zen

Pat McGibbon –Sales Engineer

Agenda

• Background and IntroductionBackground and Introduction

• Architectural Overview and Run-time Architectural Overview and Run-time BehaviourBehaviour

• DemoDemo

• Zen ComponentsZen Components

• Document Object ModelDocument Object Model

• Model View ControllerModel View Controller

• SVG ComponentsSVG Components

• Zen ReportsZen Reports

What is Zen?

• Application Framework to develop web-based user Application Framework to develop web-based user interfacesinterfaces

• Library of pre-built object componentsLibrary of pre-built object components

• Components generate standard HTML and JavaScriptComponents generate standard HTML and JavaScript

• Model driven architectureModel driven architecture

• Object database integrationObject database integration

• Integrated use of SVGIntegrated use of SVG

Zen Architecture

Zen entities consist of a set of classes:Zen entities consist of a set of classes:

• Zen Application made up of Zen PagesZen Application made up of Zen Pages

• Zen Pages:Zen Pages:– Page objectPage object– Component objects defined in XML formatComponent objects defined in XML format– Browser and Server methodsBrowser and Server methods

• Zen componentsZen components– Pre-built Pre-built – CustomCustom

Zen Run-time Behaviour

• A page request instantiates page object and all of its A page request instantiates page object and all of its component objects on the server.component objects on the server.

• The tree then renders CSS, JavaScript, and HTML needed The tree then renders CSS, JavaScript, and HTML needed to render the page on the client browser.to render the page on the client browser.

• The same object tree is then recreated as a set of The same object tree is then recreated as a set of JavaScript objects within the client browser.JavaScript objects within the client browser.

• Object properties, methods, and inheritance are therefore Object properties, methods, and inheritance are therefore available on the client side.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 The Zen framework is built using CSP. It sits on top of CSP’s class based development approach.based development approach.

• Zen does not replace CSP in any way. It is a toolkit sitting on top of Zen does not replace CSP in any way. It is a toolkit sitting on top of CSP.CSP.

• Ease of development using the basic features provided by CSP:Ease of development using the basic features provided by CSP:– PerformancePerformance– Data accessData access– SecuritySecurity– LocalizationLocalization– ConfigurationConfiguration– Session ManagementSession Management– Hyper-event mechanismHyper-event mechanism

Getting Started – Zen Application

• Studio provides templates for creating Zen Applications, Studio provides templates for creating Zen Applications, Zen Pages, Zen Components, and Zen MethodsZen Pages, Zen Components, and Zen Methods

• New Zen Application contains:New Zen Application contains:– APPLICATIONNAME ParameterAPPLICATIONNAME Parameter– HOMEPAGE ParameterHOMEPAGE Parameter– DOMAIN ParameterDOMAIN Parameter– XData Style blockXData Style block

• Zen Applications extend the %ZEN.application classZen Applications extend the %ZEN.application class

Getting Started – Zen Page

• New Zen Page contains:New Zen Page contains:– APPLICATION ParameterAPPLICATION Parameter– PAGENAME ParameterPAGENAME Parameter– DOMAIN ParameterDOMAIN Parameter– XData Style blockXData Style block– XData Contents blockXData Contents block

• Zen Pages extend the %ZEN.Component.page classZen Pages extend the %ZEN.Component.page class

• The Contents block initially only contains a single The Contents block initially only contains a single component, the page itself.component, the page itself.

Zen Components

• Derived from %ZEN.Component.componentDerived from %ZEN.Component.component

• Vary in complexity from simple wrappers for native HTML Vary in complexity from simple wrappers for native HTML controls to full-featured calendar and grid controlscontrols 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. Controls – display data and allow for user input (e.g.

text or button controls)text or button controls)– Groups – contain a set of other components (e.g. Groups – contain a set of other components (e.g.

groups, menus, and forms)groups, menus, and forms)– Panes – display rich information (e.g. a tablePane)Panes – display rich information (e.g. a tablePane)

Definition of Zen Components

Zen Components consist of two parts:Zen Components consist of two parts:

• AppearanceAppearance– Standard CSS Style SheetStandard CSS Style Sheet

• BehaviourBehaviour– Definition of how its initial HTML is drawnDefinition of how its initial HTML is drawn– Set of properties and methodsSet of properties and methods

Adding Components to a Page

Controls and Components can be added to a Zen page in two Controls and Components can be added to a Zen page in two ways:ways:

• Adding the XML tag with all the attributes manually by Adding the XML tag with all the attributes manually by directly editing the Contents block of the page.directly editing the Contents block of the page.

• Choosing from the available templates in Studio. These Choosing from the available templates in Studio. These include templates for HTML elements, SQL Statements, include templates for HTML elements, SQL Statements, Zen methods, and Zen XML elementsZen methods, and Zen XML elements

Zen Methods

• Zen Methods can either be Instance or Class Methods Zen Methods can either be Instance or Class Methods (“Scope” of the method)(“Scope” of the method)

• Zen Methods can be client-side, server-side, or server-only Zen Methods can be client-side, server-side, or server-only methods (“Location” of the method):methods (“Location” of the method):

– Client-side methods are written in JavaScript Client-side methods are written in JavaScript [ Language = JavaScript ][ Language = JavaScript ]

– Server-side methods use the “ZenMethod” keywordServer-side methods use the “ZenMethod” keyword– Methods that can only run on the server start with %Methods that can only run on the server start with %

Document Object Model

• We create an instance of a DOM at page generation time We create an instance of a DOM at page generation time which can be accessed and modified programmatically.which can be accessed and modified programmatically.

• Each component is automatically wrapped in an HTML div Each component is automatically wrapped in an HTML div element. Use the enclosing div to access and edit element. Use the enclosing div to access and edit individual components on a page.individual components on a page.

• The browser DOM is accessible on both the client *and* the The browser DOM is accessible on both the client *and* the server. It can be updated in a server side call and the server. It can be updated in a server side call and the update will take effect on return from the call.update will take effect on return from the call.

Zen Component Library

Here is just a few examples of pre-built components Zen Here is just a few examples of pre-built components Zen provides:provides:

• Forms (automatic and manual)Forms (automatic and manual)

• PanesPanes

• CalendarCalendar

• Dynamic treeDynamic tree

• GridGrid

Let’s take a look at one of these in particular …Let’s take a look at one of these in particular …

tablePane Component

• Display data and search results within an easy-to-use Display data and search results within an easy-to-use tabular formattabular format

• Values based on the contents of a query. Query sources Values based on the contents of a query. Query sources can be:can be:

– SQL StatementSQL Statement– Pre-existing class queryPre-existing class query– Callback method generating dynamic SQLCallback method generating dynamic SQL– SQL statement automatically created based on a set of SQL statement automatically created based on a set of

column definitions and user choicescolumn definitions and user choices

tablePane Features

• Visual indication of selected rowsVisual indication of selected rows

• onselectRow Event HandleronselectRow Event Handler

• Users can set “filters” for columns: choice of new search Users can set “filters” for columns: choice of new search criteria re-executes the query and refreshes the contents of criteria re-executes the query and refreshes the contents of the table without repainting the entire page.the table without repainting the entire page.

• Users can control the style of a row or individual cell using Users can control the style of a row or individual cell using “row conditions”.“row conditions”.

• Users can sort data by clicking on the column they wish to Users can sort data by clicking on the column they wish to sort by.sort by.

• ““Snapshot” vs. “direct” modeSnapshot” vs. “direct” mode

“Snapshot” mode

• The query results are copied to a temporary location on the The query results are copied to a temporary location on the server and retrieved from there for subsequent refreshes.server and retrieved from there for subsequent refreshes.

• Snapshot mode provides “Paging” mechanism: Results can Snapshot mode provides “Paging” mechanism: Results can be displayed using multiple pages within the tablePane. be displayed using multiple pages within the tablePane. Users can move among the pages without having to re-Users can move among the pages without having to re-execute the query.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. Easy way to tie visual components to data on the server. These can beThese can be

– simple elements like data types simple elements like data types – complex objectscomplex objects

• Usage specifically tailored for forms, charts, or metersUsage specifically tailored for forms, charts, or meters

• Data flow can be controlled by developer in as much detail Data flow can be controlled by developer in as much detail as needed or completely dynamicas needed or completely dynamic

MVC Architecture

• Data ModelData Model– Class containing a collection of properties that represent some Class containing a collection of properties that represent some

server side dataserver side data

• Data ControllerData Controller– Invisible component on a Zen page that is bound to a data modelInvisible component on a Zen page that is bound to a data model– Intermediary between that data model and one or more data Intermediary between that data model and one or more data

views defined on the Zen pageviews defined on the Zen page

• Data ViewData View- Visual representation of the data on a Zen pageVisual representation of the data on a Zen page- Gets and sets the properties of the data model by pointing to the Gets and sets the properties of the data model by pointing to the

appropriate Data Controllerappropriate Data Controller

The MVC Adapter

• Another way to use MVC is by adding the MVC Adapter to a Another way to use MVC is by adding the MVC Adapter to a persistent class. This will auto generate a page for persistent class. This will auto generate a page for modifying that object when bound to a data controller. 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 …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 pageAdd graphical components to a page

• Pre-built set of charts and meters or build your ownPre-built set of charts and meters or build your own

SVG Components

What is SVG?

• Two-dimensional vector graphics defined in XML formatTwo-dimensional vector graphics defined in XML format

• Browser independentBrowser independent– Firefox natively supports SVGFirefox natively supports SVG– Internet Explorer needs an Adobe plug-inInternet Explorer needs an Adobe plug-in

• Graphics can be static or dynamically change appearance Graphics can be static or dynamically change appearance in response to data values.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 You can define custom SVG Components by extending the %ZEN.SVGComponent.svgComponent base class.%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 <iframe> or Static SVG files should be placed inside an <iframe> or

<image> tag.<image> tag.– Any dynamic SVG component must be placed within a Any dynamic SVG component must be placed within a

Zen SVG Frame component <svgFrame>.Zen SVG Frame component <svgFrame>.

SVG Components

Types of SVG Components

• Meters – Graphical representation of a single numeric valueMeters – Graphical representation of a single numeric value– <fuelGauge><fuelGauge>– <indicatorLamp><indicatorLamp>– <smiley><smiley>– <speedometer><speedometer>

• Charts – Represent a series of data itemsCharts – Represent a series of data items– <lineChart><lineChart>– <barChart><barChart>– <pieChart><pieChart>

SVG Components

Meters

• Add the meter component to your page and set its attributes Add the meter component to your page and set its attributes to define label, range, initial value, etc.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 meterProgrammatically modify the value of your meter– Bind your meter to a class using the Model View Bind your meter to a class using the Model View

Controller approachController approach

SVG Components

Charts

• Add the chart component to your page and set its attributes Add the chart component to your page and set its attributes to define height, width, margins, and legend.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 Programmatically by using the chart’s ongetData

attribute to invoke a javascript methodattribute to invoke a javascript method– Bind the chart to a class using the Model View Bind the chart to a class using the Model View

Controller approachController approach

Zen Reports

Overview

• XHTML or PDF formatted documentsXHTML or PDF formatted documents

• Specify data contents and display layoutSpecify 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 The same report class can be displayed as xml, html, or pdf.pdf.

• The default output format can be set inside the class. At The default output format can be set inside the class. At runtime the format can be changed by modifying a runtime the format can be changed by modifying a parameter in the URL.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 contentsReportDefinition to describe the data contents– ReportDisplay to define the visual representation of the ReportDisplay to define the visual representation of the

datadata

• Data is described as an XML formatted result set.Data is described as an XML formatted result set.– Specify an SQL querySpecify an SQL query– Specify a set of XML tags to define which fields to include Specify a set of XML tags to define which fields to include

in the displayin the display

• The display definition will be automatically converted into a The display definition will be automatically converted into a stylesheet that is being applied to the data output.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-Third-party tool will be invoked to transform the XML into XSL-FO and finally to PDFFO and finally to PDF

• XSL-FO to PDF tool options:XSL-FO to PDF tool options:– http://xmlgraphics.apache.org/fophttp://xmlgraphics.apache.org/fop – http://www.renderx.com/tools/xep.htmlhttp://www.renderx.com/tools/xep.html

• Global setting points to the third-party tool to be usedGlobal setting points to the third-party tool to be used– ^%SYS("zenreport","transformerpath")^%SYS("zenreport","transformerpath")

Building a UI with Zen

Pat McGibbon – Sales Engineer