Download - Advanced Zen
![Page 1: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/1.jpg)
Advanced ZenGlobal Summit 2011
Mark Massias, Lori Fassman and Chris Carmichael
![Page 2: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/2.jpg)
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
![Page 3: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/3.jpg)
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
![Page 4: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/4.jpg)
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
![Page 5: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/5.jpg)
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)
![Page 6: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/6.jpg)
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
![Page 7: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/7.jpg)
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.
![Page 8: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/8.jpg)
How Zen Works
![Page 9: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/9.jpg)
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
![Page 10: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/10.jpg)
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
![Page 11: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/11.jpg)
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.
![Page 12: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/12.jpg)
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.
![Page 13: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/13.jpg)
Hands On #1
• View “Home Page”
– In Studio, open the class “ZENStork.UI.HomePage”
– From the Studio menu View ► Web Pageor
![Page 14: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/14.jpg)
Hands On #1
• You should see this page in the browser:
– Note that you did NOT have to log in to see this page.
![Page 15: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/15.jpg)
Hands On #1
• Secure your application by forcing user to log in
– From the System Management Portal:
System Admin -> Security -> Applications -> Web Applications -> Go
![Page 16: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/16.jpg)
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
![Page 17: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/17.jpg)
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
![Page 18: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/18.jpg)
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
![Page 19: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/19.jpg)
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
![Page 20: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/20.jpg)
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.‟);
![Page 21: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/21.jpg)
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.
Exercise 2 starts on page 11 of the handout.
![Page 22: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/22.jpg)
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
![Page 23: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/23.jpg)
Hands On #2 – Step 2
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();
![Page 24: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/24.jpg)
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 and
Compile
![Page 25: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/25.jpg)
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 Add TablePane button
![Page 26: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/26.jpg)
Hands On #2 – Review
• Review:
Let‟s take a moment to look over what we just did.
![Page 27: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/27.jpg)
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
![Page 28: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/28.jpg)
New Widgets
• JSON <jsonProvider>
• Finder Widget
• Google Map Viewer
• $$$Text in Javascript for client-side localization
![Page 29: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/29.jpg)
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
![Page 30: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/30.jpg)
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.
![Page 31: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/31.jpg)
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.
![Page 32: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/32.jpg)
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
![Page 33: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/33.jpg)
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
Exercise 3 starts on page 17 of the handout.
![Page 34: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/34.jpg)
Hands On #3 Step 1
• Open ZenStork.UI.HomePage.cls
• Extend the
application
by adding a
new menu
item
• Save and
Compile
![Page 35: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/35.jpg)
Hands On #3 Step 2
• Open ZENStork.UI.OrgChartPage.cls
• Add the
JSON
provider
![Page 36: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/36.jpg)
Hands On #3 Step 3
• Add the GetFinderArray Method
![Page 37: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/37.jpg)
Hands On #3 Step 4
• Add the finderPane
![Page 38: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/38.jpg)
Hands On #3 Step 5
• Add Methods to control presentation of elements in the finder
![Page 39: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/39.jpg)
Hands On #3 Step 6
• Add in the XData Style block for the Finder
• Save & Compile
![Page 40: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/40.jpg)
Hands On #3
• View “Home Page”
– Login: _system
– Password: SYS
• Select:
– Admin (near
bottom of menu)
• Org Chart
• Try navigating through this menu
![Page 41: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/41.jpg)
Hands On #3 – Review
• Review:
Let‟s take a moment to look over what we just did.
![Page 42: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/42.jpg)
$$$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.
![Page 43: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/43.jpg)
Hands On #4
• We‟ll handle localization (translating to different languages) using $$$Text on either the server or the client (in Javascript)
Exercise 4 starts on page 22 of the handout.
![Page 44: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/44.jpg)
Hands On #4 – Step 1
• 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.
![Page 45: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/45.jpg)
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.
![Page 46: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/46.jpg)
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; you’ll have to add a new
parameter entry for LOCALIZE.
![Page 47: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/47.jpg)
Hands On #4 – Step 4
• 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.
![Page 48: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/48.jpg)
Hands On #4 – Step 5
• 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.)
![Page 49: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/49.jpg)
Hands On #4 – Step 6
• 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.
![Page 50: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/50.jpg)
Hands On #4 – Step 7
• 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.
![Page 51: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/51.jpg)
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
![Page 52: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/52.jpg)
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
Exercise 5 starts on page 27 of the handout.
![Page 53: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/53.jpg)
Hands On #5 Step 1
• Open ZenStork.UI.HomePage.cls
• Extend the
application
by adding a
new menu
item
• Save and Compile
![Page 54: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/54.jpg)
Hands On #5 Step 2
• Add a Google Map Component (mapView) to ZENStork.UI.MapPage
![Page 55: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/55.jpg)
Hands On #5 step 3
• Add an onSelectRow Action to the table to call a JS method displayOnMap() which we will be writing
![Page 56: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/56.jpg)
Hands On #5 step 4
• Let’s write the javascript method to control the map
• Save, compile and view page.
![Page 57: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/57.jpg)
Completed Map Page
Try clicking on different
rows in the table
![Page 58: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/58.jpg)
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
![Page 59: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/59.jpg)
Review
• Securing a Zen Application
• Adding a component to a page dynamically
• New Components
– <jsonProvider>
– “Finder” widget
– $$$Text (in Javascript)
– Google Map Viewer
![Page 60: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/60.jpg)
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
![Page 61: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/61.jpg)
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”)
![Page 62: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/62.jpg)
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
![Page 63: Advanced Zen](https://reader033.vdocument.in/reader033/viewer/2022052205/5569ec32d8b42ac1468b4db8/html5/thumbnails/63.jpg)
Advanced ZenGlobal Summit 2011
Mark Massias, Lori Fassman and Chris Carmichael