Professional Documents
Culture Documents
Agenda
Academy 101
Review
Q&A
Agenda
Academy 101
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.
Agenda
Academy 101
Review
Q&A
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.
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
Review
Q&A
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
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 lets incorporate our own custom login page
(A login page has already been built for you: ZENStork.UI.Login.cls)
Hands On #1
From the Studio, view Home Page again This time youre 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
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 serverside 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.);
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)
Hands On #2 Step 4
View this page in the browser From the Studio menu View Web Page
Hands On #2 Review
Review: Lets take a moment to look over what we just did.
Agenda
Academy 101 Zen the basics Building a secure application
Review
Q&A
New Widgets
JSON <jsonProvider>
Finder Widget Google Map Viewer $$$Text in Javascript for client-side localization
JSON
Zens <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
Finder widget
Allows navigations of hierarchical content Simple to use (just sets an array One pane for each level 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
Hands On #3 Step 1
Open ZenStork.UI.HomePage.cls
Extend the application by adding a new menu item
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
Hands On #3
View Home Page Login: _system Password: SYS Select: Admin (near
bottom of menu)
Org Chart
Hands On #3 Review
Review: Lets 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
Well 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
Hands On 4 Step 2
In the ZENStork application (in the browser), navigate into the Admin / Configuration page.
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 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 its 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.
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
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
Lets write the javascript method to control the map
Agenda
Academy 101 Zen the basics Building a secure application
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
Review
Q&A
intersystems.com/survey
Select the day and time of the academy you attended and complete our short evaluation form. Thank you
Advanced Zen
Global Summit 2011
Mark Massias, Lori Fassman and Chris Carmichael