Advanced Zen

Advanced ZenGlobal Summit 2011

Mark Massias, Lori Fassman and Chris Carmichael

Agenda

• Academy 101

• Zen – the basics

• Building a secure application

• Adding a component to a Zen page at run-time

• New Widgets

• Review

• Q & A

Academy 101

• Academies are mostly Hands On

• There is a “Code Snippets” file to „Cut & Paste‟ from (in the Studio, under the CSP section of the Workspace window.)

• There are XML files that represent the state of the project as it should be after each exercise, to help you recover if you get stuck

• There are helpers in the room

– Raise your hand if you are having a problem

• All academy materials will be available to download from the InterSystems website after the conference is over

Academy 101

• Assumptions:

– A working knowledge of Caché

• Studio, System Management Portal (SMP), how to compile classes, etc.

– A basic understanding of Web Technologies

• HTML, CSS

– A basic understanding of Zen (component-based web development)

Agenda

• Academy 101




• New Widgets

• Review

• Q & A

Zen

• Our definition:

– The Zen application framework provides a simple way to rapidly create complex, data-rich Web applicationsby assembling pre-built object components.

– Zen is a rich library of pre-built object components and development tools based on InterSystems‟ CSP and object technology.

How Zen Works

Benefits of Zen

• Dynamic interaction between user and database that does not require page reloads (“AJAX”)

• Rapid object-based development

• Separation of content and display

• Consistent user interfaces (templates, object inheritence)

• Easy localization

• Automatic support for SVG (Scalar Vector Graphics) to embed charts and graphs in your web pages

• Zen Reports

Agenda

• Academy 101




• New Widgets

• Review

• Q & A

Login page

• The login form must contain form fields named:

– “CacheUserName”

– “CachePassword”

Once an Application is secured and a custom login page is

specified for a Zen/CSP application (in the SMP),

requesting any page in that application will cause the CSP

infrastructure to log into Caché security.

Hands On #1

For our first hands-on exercise, we will add security to an existing Zen application to force the user to log in.

Exercise 1 starts on page 7 of the handout.

Hands On #1

• View “Home Page”

– In Studio, open the class “ZENStork.UI.HomePage”

– From the Studio menu View ► Web Pageor

Hands On #1

• You should see this page in the browser:

– Note that you did NOT have to log in to see this page.

Hands On #1

• Secure your application by forcing user to log in

– From the System Management Portal:

System Admin -> Security -> Applications -> Web Applications -> Go

Hands On #1

• Secure your application (/csp/zenadvanced) by forcing user to log in

• Enable “Password”, Disable “Unauthenticated”

• Save your changes and CLOSE THE BROWSER (to prevent problems with caching.)

• Try to view the home page again (View Web Page from Studio)

• Log in as user “_system” with password “SYS”

This is the

default Zen

login page in

2011.1

Hands On #1

• Now let’s incorporate our own custom login page

(A login page has already been built for you: ZENStork.UI.Login.cls)

Reconfigure the CSP application from the System Management Portal:

System Admin -> Security -> Applications -> Web Applications -> Go

( edit the /csp/zenadvanced application again)

• Set “Login Page” = ZENStork.UI.Login.cls

• Save your changes

Hands On #1

• From the Studio, view “Home Page” again

– This time you’re forced to log in.

– Log in with username “_system” and password “SYS”

This time

you see our

own custom

login page

Agenda

• Academy 101




• New Widgets

• Review

• Q & A

Dynamic components

• Components can be added to a page dynamically as the page is being loaded (%OnAfterCreatePage) or after the page is loaded in a browser.

• All Zen components can be modified using either server-side or client-side code:

Cache ObjectScript:

Set txt=..%GetComponentById(“txtbox”)

Set txt.value=“here‟s a new text string.”

JavaScript:

var txt=zenPage.getComponentById(„txtbox‟);

txt.setValue(„here‟s a new text string.‟);

Hands On #2

For our second hands-on exercise, we will add a component to a Zen page dynamically. You will have to click on a button after the page has been loaded in the browser to add the component to the page.


Hands On #2 – Step 1

In the Studio, create a new Zen page:• Package name: ZENStork.UI

• Class Name AND Page Name: Dynamic

• Application ZENStork.Application

Click

“Finish”

to create

new Zen

page


Add a <group> between the <page> tags, and place

one button inside the group:

•Give the group an id=“myGroup”

•Give the button a caption and an onclick attribute which

calls a method zenPage.AddTablePane();


Copy the AddTablePane method to the bottom of the page(Put it just before the final closing bracket in the page)

Save and

Compile


• View this page in the browser

– From the Studio menu View ► Web Page

– Log in as _system, SYS

– Click the Add TablePane button

Hands On #2 – Review

• Review:

Let‟s take a moment to look over what we just did.

Agenda

• Academy 101




• New Widgets

• Review

• Q & A

New Widgets

• JSON <jsonProvider>

• Finder Widget

• Google Map Viewer

• $$$Text in Javascript for client-side localization

JSON

• Zen‟s <jsonProvider> component provides a way to transport object data between a server and client, or between client and server

• JSON refers to a JavaScript programming technique that allows you to define a set of one or more objects using object literal syntax, e.g.:

var obj = {name:'Bill', home:'New York'};

• Stands for JavaScript Object Notation (JSON) format

• Great for working with hierarchical data

JSON: Pros and Cons

• Advantages

– Allows the transport of data without having to create or modify server classes

• Disadvantages

– Objects must form a graph from a parent object down through levels of children. You cannot have child objects refer to parents, siblings or other objects outside of the graph.

– This approach uses late binding, so it is not as efficient as the code generated approach used by Zen components.

– Cannot ship streams or binary values. Only references to child objects are transported.

JSON: Client to Server

• A <jsonProvider> component may contain zero or more <parameter> components

• The returned object can be an instance of a specific class or classes, or it can use the Zen proxy object class, %ZEN.proxyObject.

• The <jsonProvider> component has a client-side method, getContentObject(), which returns the client-side version of the target object.

Finder widget

• Allows navigations of hierarchical content

• Simple to use (just sets an array

• One pane for each level of the array

• Ability to specify handlers for handling elements of the array

Hands On #3

• We will extend the application by adding a new menu item

– Modify ZenStork.UI.HomePage.cls

• We will build a new page to display the Org Chart

– ZENStork.UI.OrgChartPage.cls

• Use jsonProvider to move server side data to the client

• Use finderPane widget to display that data


Hands On #3 Step 1

• Open ZenStork.UI.HomePage.cls

• Extend the

application

by adding a

new menu

item

• Save and

Compile

Hands On #3 Step 2

• Open ZENStork.UI.OrgChartPage.cls

• Add the

JSON

provider

Hands On #3 Step 3

• Add the GetFinderArray Method

Hands On #3 Step 4

• Add the finderPane

Hands On #3 Step 5

• Add Methods to control presentation of elements in the finder

Hands On #3 Step 6

• Add in the XData Style block for the Finder

• Save & Compile

Hands On #3

• View “Home Page”

– Login: _system

– Password: SYS

• Select:

– Admin (near

bottom of menu)

• Org Chart

• Try navigating through this menu

Hands On #3 – Review

• Review:

Let‟s take a moment to look over what we just did.

$$$Text in Javascript

• $$$Text macro (for localization) can now be called on the client as well as the server

• The syntax for localization in JavaScript is similar to the $$$Text macro in ObjectScript:

var str = $$$Text('This is a localized string.');

• You must set ZENLOCALIZE = 1 to enable localization and must set the DOMAIN parameter

• Seed the page with $$$Text and CSP will automatically create Message Dictionary entries for the default language.

Hands On #4

• We‟ll handle localization (translating to different languages) using $$$Text on either the server or the client (in Javascript)



• Take a look at the existing ^CacheMsg global in the ZENADVANCED namespace.

System Explorer -> Globals -> ZENADVANCED

Click the View link next to CacheMsg:

You can type

(“ZENStork”,

After the global

name in the

search box to

narrow down the

view to a relevant

sample.

Hands On 4 – Step 2

In the ZENStork application (in the browser),

navigate into the Admin / Configuration page.

Note all the captions are in English.


• In the Studio, open the Zen page ZENStork.UI.ConfigurationPage.cls

• Set two parameters on the page:

Parameter DOMAIN = “ZENStork”;

Parameter LOCALIZE=1;

Note that the DOMAIN parameter is already in this page, just

not set to any specific value; you’ll have to add a new

parameter entry for LOCALIZE.


• Just before the closing brace in this Zen page, add this

%OnAfterCreatePage method:

As long as the $$$Text macro is present, CSP will

automatically generate the default language entries in the

Message Dictionary for all components on this page.


• Right after the %OnAfterCreatePage method, add a new

Javascript method called translate. (Make sure it’s still

inside the closing curly-brace for the page.)


• Add a new button right after the Save button on this

page (inside the <hgroup> tags)

Note that the new button calls the Javascript method

you added to the page.

Save and compile.


• View the page in a browser – be sure to click the

Translate/Traduire button.

The four labels in the middle did NOT get translated because they

were generated as part of a dynaForm.

Google Map Widget

• %DeepSee.Component.mapView

• Delivered as part of 2011.1 and recent DSII kits

• Incorporate maps into your application with very little effort

• Zen component is also used for DeepSee

• Can be driven by a controller

• Very rich API for modifying look and feel and setting markers

Hands On #5

• We will extend the application by adding a new menu item

– Modify ZenStork.UI.HomePage.cls

• We will modify and existing page to display the Google Map

– ZENStork.UI.MapPage.cls


Hands On #5 Step 1

• Open ZenStork.UI.HomePage.cls

• Extend the

application

by adding a

new menu

item

• Save and Compile

Hands On #5 Step 2

• Add a Google Map Component (mapView) to ZENStork.UI.MapPage

Hands On #5 step 3

• Add an onSelectRow Action to the table to call a JS method displayOnMap() which we will be writing

Hands On #5 step 4

• Let’s write the javascript method to control the map

• Save, compile and view page.

Completed Map Page

Try clicking on different

rows in the table

Agenda

• Academy 101




• New Widgets

• Review

• Q & A

Review

• Securing a Zen Application

• Adding a component to a page dynamically

• New Components

– <jsonProvider>

– “Finder” widget

– $$$Text (in Javascript)

– Google Map Viewer

Agenda

• Academy 101




• New Widgets

• Review

• Q & A

Q&A

Any Questions?

Be sure to use these resources while you’re learning

Zen:

- Zen Google community:

http://groups.google.com/group/intersystems-zen

- InterSystems e-Learning sessions

- Zen Demo which ships with Cache/Ensemble (search

docs for “Zen demo”)

We‟d love your feedback

If you have a minute, we‟d love your feedback on the academy you just attended.

Go to…

intersystems.com/survey

Select the day and time of the academy you attended

and complete our short evaluation form.

Thank you

http://www.intersystems.com/survey

Advanced ZenGlobal Summit 2011

Mark Massias, Lori Fassman and Chris Carmichael

Advanced Zen

Technology

Transcript of Advanced Zen