advancedzen-111018152531-phpapp01

8/3/2019 advancedzen-111018152531-phpapp01

1/63

Advanced ZenGlobal Summit 2011Mark Massias, Lori Fassman

and Chris Carmichael


2/63

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


3/63

Agenda

Academy 101

Zen the basics



New Widgets

Review Q &A


4/63

Academy 101

Academies are mostly Hands On There is a Code Snippetsfile 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 projectas it should be after each exercise, to help you recover ifyou 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 fromthe InterSystems website after the conference is over


5/63

Academy 101

Assumptions: A working knowledge of Cach

Studio, System Management Portal (SMP), how to compileclasses, etc.

A basicunderstanding of Web Technologies

HTML, CSS

A basicunderstanding of Zen (component-based web

development)


6/63

Agenda

Academy 101

Zen the basics



New Widgets

Review Q &A


7/63

Zen

Our definition:

The Zen application framework provides a simple wayto rapidly create complex, data-rich Web applications

by assembling pre-built object components. Zen is a rich library of pre-built object components and

development tools based on InterSystems CSP andobject technology.


8/63

How Zen Works


9/63

Benefits of Zen

Dynamic interaction between user and database that does notrequire 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 chartsand graphs in your web pages

Zen Reports


10/63

Agenda

Academy 101

Zen the basics



New Widgets

Review Q &A


11/63

Login page

The login form must contain form fields named:

CacheUserName

CachePassword

Once an Application is secured and a custom login page isspecified for a Zen/CSP application (in the SMP),requesting any page in that application will cause the CSP

infrastructure to log into Cach security.


12/63


13/63

Hands On #1

View Home Page In Studio, open the class ZENStork.UI.HomePage From the Studio menu View Web Pageor


14/63

Hands On #1

You should see this page in the browser: Note that you did NOT have to log in to see this page.


15/63

Hands On #1

Secure your application by forcing user to log in From the System Management Portal:

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


16/63

Hands On #1

Secure your application (/csp/zenadvanced) by forcinguser 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 thedefault Zenlogin page in2011.1


17/63

Hands On #1

Now lets 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 SystemManagement Portal:

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

( edit the /csp/zenadvanced application again)

Set Login Page = ZENStork.UI.Login.cls

Save your changes


18/63

Hands On #1

From the Studio, view Home Page again This time youre forced to log in.

Log in with username _system and passwordSYS

This timeyou see ourown customlogin page


19/63

Agenda

Academy 101

Zen the basics



New Widgets

Review Q &A


20/63

Dynamic components

Components can be added to a page dynamically as thepage is being loaded (%OnAfterCreatePage) or after thepage 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=heres a new text string.

JavaScript:var txt=zenPage.getComponentById(txtbox);

txt.setValue(heres a new text string.);


21/63

Hands On #2

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

Exercise 2 starts on page 11 of the handout.


22/63

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

ClickFinish

to createnew Zenpage


23/63

Hands On #2 Step 2

Add a between the tags, and placeone button inside the group:

Give the group an id=myGroup

Give the button a caption and an onclick attribute whichcalls a method zenPage.AddTablePane();


24/63

Hands On #2 Step 3

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

Save andCompile


25/63

Hands On #2 Step 4

View this page in the browser From the Studio menu View Web Page

Log in as_system, SYS

Click the AddTablePanebutton


26/63

Hands On #2 Review

Review:

Lets take a moment to look over what we just did.


27/63

Agenda

Academy 101

Zen the basics



New Widgets

Review Q &A


28/63

New Widgets

JSON

Finder Widget

Google Map Viewer

$$$Text in Javascript for client-side localization


29/63

JSON

Zens component provides a way totransport object data between a server and client, orbetween client and server

JSON refers to a JavaScript programming technique thatallows you to define a set of one or more objects usingobject literal syntax, e.g.:

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

Stands for JavaScript Object Notation (JSON) format

Great for working with hierarchical data


30/63

JSON: Pros and Cons

Advantages

Allows the transport of data without having to create or modifyserver classes

Disadvantages

Objects must form a graph from a parent object down throughlevels 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 thecode generated approach used by Zen components.

Cannot ship streams or binary values. Only references to childobjects are transported.


31/63

JSON: Client to Server

A component may contain zero or more 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 component has a client-side method,getContentObject(), which returns the client-side version ofthe target object.


32/63

Finder widget

Allows navigations ofhierarchical content

Simple to use (justsets an array

One pane for eachlevel of the array

Ability to specifyhandlers for handlingelements of the array


33/63

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

UsejsonProviderto move server side data to the client

Use finderPane widget to display that data



34/63

Hands On #3 Step 1

Open ZenStork.UI.HomePage.cls

Extend theapplicationby adding anew menuitem

Save and

Compile


35/63

Hands On #3 Step 2

Open ZENStork.UI.OrgChartPage.cls

Add theJSON

provider


36/63

Hands On #3 Step 3

Add the GetFinderArrayMethod


37/63

Hands On #3 Step 4

Add the finderPane


38/63

Hands On #3 Step 5

Add Methods to control presentation of elements in the finder


39/63

Hands On #3 Step 6

Add in the XData Style block for the Finder

Save & Compile


40/63

Hands On #3

View Home Page

Login:_system

Password: SYS

Select:

Admin (nearbottom of menu)

Org Chart

Try navigatingthrough this menu


41/63

Hands On #3 Review

Review:

Lets take a moment to look over what we just did.

$$$


42/63

$$$Text in Javascript

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

The syntax forlocalization 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 andmust set the DOMAIN parameter

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

H d O #4


43/63

Hands On #4

Well handle localization (translating to different languages)using $$$Text on either the server or the client (inJavascript)


H d O #4 St 1


44/63

Hands On #4 Step 1

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

System Explorer -> Globals -> ZENADVANCED

Click the View link next to CacheMsg:

You can type(ZENStork,

After the globalname in thesearch box tonarrow down theview to a relevantsample.

H d O 4 St 2


45/63

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.

H d O #4 St 3


46/63

Hands On #4 Step 3

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; youll have to add a newparameter entry for LOCALIZE.

H d O #4 St 4


47/63

Hands On #4 Step 4

Just before the closing brace in this Zen page, add this%OnAfterCreatePagemethod:

As long as the $$$Text macro is present, CSP willautomatically generate the default language entries in theMessage Dictionary for all components on this page.

H d O #4 St 5


48/63

Hands On #4 Step 5

Right after the %OnAfterCreatePage method, add a newJavascript method called translate. (Make sure its still

inside the closing curly-brace for the page.)

H d O #4 St 6


49/63

Hands On #4 Step 6

Add a new button right after the Save button on thispage (inside the tags)

Note that the new button calls the Javascript method

you added to the page.

Save and compile.

H d O #4 St 7


50/63

Hands On #4 Step 7

View the page in a browser be sure to click theTranslate/Traduire button.

The four labels in the middle did NOT get translated because theywere generated as part of a dynaForm.

G l M Wid t


51/63

Google Map Widget

%DeepSee.Component.mapView

Delivered as part of 2011.1 andrecent DSII kits

Incorporate maps into yourapplication with very little effort

Zen component is also used forDeepSee

Can be driven by a controller

Very rich API for modifying look andfeel and setting markers

H d O #5


52/63

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


H d O #5 St 1


53/63

Hands On #5 Step 1

Open ZenStork.UI.HomePage.cls

Extend theapplicationby adding anew menuitem

Save and Compile

H d O #5 St 2


54/63

Hands On #5 Step 2

Add a Google Map Component (mapView) to

ZENStork.UI.MapPage

H d O #5 t 3


55/63

Hands On #5 step 3

Add an onSelectRow Action to the table to call a JS

method displayOnMap() which we will be writing

H d O #5 t 4


56/63

Hands On #5 step 4

Lets write the javascript method to control the map

Save, compile and view page.

Completed Map Page


57/63

Completed Map Page

Try clicking on differentrows in the table

Agenda


58/63

Agenda

Academy 101

Zen the basics



New Widgets

Review Q &A

Review


59/63

Review

Securing a Zen Application

Adding a component to a page dynamically

New Components

Finder widget

$$$Text (in Javascript)

Google Map Viewer

Agenda


60/63

Agenda

Academy 101

Zen the basics



New Widgets

Review Q&A

Q&A


61/63

Q&A

Any Questions?Be sure to use these resources while youre learning

Zen:

- Zen Google community:

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

- InterSystems e-Learning sessions

- Zen Demo which ships with Cache/Ensemble (searchdocs for Zen demo)

Wed love your feedback


62/63

We d love your feedback

If you have a minute, wed love your feedback on theacademy 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/surveyhttp://www.intersystems.com/survey


63/63

Advanced ZenGlobal Summit 2011Mark Massias, Lori Fassman

advancedzen-111018152531-phpapp01

Documents

elacentomiguelmichuacruz 120808092539 phpapp01 140921164602...

matematicaalgofantastico...

enzim 1320676633-phpapp01-111107083832-phpapp01

primercursodecontabilidadeliaslaraflores...

configuracindeunaredinalmbricaen13pasos...

results 140712082255-phpapp01-140712094930-phpapp01

soalprediksiunipasmptahun2014paket3 140317073721 phpapp01...

powerpointdelgnerodramtico...

smarttrafficlightcontroller 13337105649115 phpapp01...

briefrml 13196537590544-phpapp01-111026133451-phpapp01

1cursopp 090925185447 phpapp01 091010170857 phpapp01

precauciones estandar 1304921194 phpapp01 110509010732...

1 140502061903-phpapp01-140502160314-phpapp01

elabcdelaanalicaavanzadaparaelsectorbancario 13154751768865...

conferencesolvabilit2ia2011...

socialmediaisalotlikesex...

rakoffshoreiiinc...

experienciaexitosadeliciaschihuahua...

situaesquearotinanecessitacontemplar...

borregoaustralianospanishrecipecards...