1. Advanced Zen
Global Summit 2011
Mark Massias, Lori Fassman
and Chris Carmichael

2. 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. 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

4. 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

5. 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)

6. 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

7. Zen
• Our definition:
– The Zen application framework provides a simple way
to 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 and
object technology.

8. How Zen Works

9. 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

10. 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

11. Login page
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.
• The login form must contain form fields named:
– “CacheUserName”
– “CachePassword”

12. 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.

13. Hands On #1
• View “Home Page”
– In Studio, open the class “ZENStork.UI.HomePage”
– From the Studio menu View ► Web Pageor

14. 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. 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. 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

17. 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

18. 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

19. 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

20. 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.‟);

21. 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.

22. 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

23. 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();

24. 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

25. 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

26. Hands On #2 – Review
• Review:
Let‟s take a moment to look over what we just did.

27. 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

28. New Widgets
• JSON <jsonProvider>
• Finder Widget
• Google Map Viewer
• $$$Text in Javascript for client-side localization

29. 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

30. 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.

31. 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.

32. 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

33. 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.

34. Hands On #3 Step 1
• Open ZenStork.UI.HomePage.cls
• Extend the
application
by adding a
new menu
item
• Save and
Compile

35. Hands On #3 Step 2
• Open ZENStork.UI.OrgChartPage.cls
• Add the
JSON
provider

36. Hands On #3 Step 3
• Add the GetFinderArray Method

37. Hands On #3 Step 4
• Add the finderPane

38. Hands On #3 Step 5
• Add Methods to control presentation of elements in the finder

39. Hands On #3 Step 6
• Add in the XData Style block for the Finder
• Save & Compile

40. Hands On #3
• View “Home Page”
– Login: _system
– Password: SYS
• Select:
– Admin (near
bottom of menu)
• Org Chart
• Try navigating
through this menu

41. Hands On #3 – Review
• Review:
Let‟s take a moment to look over what we just did.

42. $$$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.

43. 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.

44. 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.

45. 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.

46. 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.

47. 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.

48. 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.)

49. 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.

50. 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.

51. 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

52. 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.

53. Hands On #5 Step 1
• Open ZenStork.UI.HomePage.cls
• Extend the
application
by adding a
new menu
item
• Save and Compile

54. Hands On #5 Step 2
• Add a Google Map Component (mapView) to
ZENStork.UI.MapPage

55. Hands On #5 step 3
• Add an onSelectRow Action to the table to call a JS
method displayOnMap() which we will be writing

56. Hands On #5 step 4
• Let’s write the javascript method to control the map
• Save, compile and view page.

57. Completed Map Page
Try clicking on different
rows in the table

58. 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

59. Review
• Securing a Zen Application
• Adding a component to a page dynamically
• New Components
– <jsonProvider>
– “Finder” widget
– $$$Text (in Javascript)
– Google Map Viewer

60. 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

61. 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”)

62. 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

63. Advanced Zen
Global Summit 2011
Mark Massias, Lori Fassman
and Chris Carmichael