advanced zen
TRANSCRIPT
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
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
• Zen – the basics
• Building a secure application
• Adding a component to a Zen page at run-time
• 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
• Zen – the basics
• Building a secure application
• Adding a component to a Zen page at run-time
• 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
• Zen – the basics
• Building a secure application
• Adding a component to a Zen page at run-time
• 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.
Exercise 2 starts on page 11 of the handout.
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
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();
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
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
Hands On #2 – Review
• Review:
Let‟s take a moment to look over what we just did.
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
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
Exercise 3 starts on page 17 of the handout.
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)
Exercise 4 starts on page 22 of the handout.
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.
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.
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.
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.
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.)
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.
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.
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
Exercise 5 starts on page 27 of the handout.
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
• Zen – the basics
• Building a secure application
• Adding a component to a Zen page at run-time
• 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
• Zen – the basics
• Building a secure application
• Adding a component to a Zen page at run-time
• 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
Advanced ZenGlobal Summit 2011
Mark Massias, Lori Fassman and Chris Carmichael