Advanced Zen

download Advanced Zen

of 63

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Advanced Zen

  • 1. Advanced ZenGlobal Summit 2011Mark 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 webdevelopment) 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 wayto rapidly create complex, data-rich Web applicationsby assembling pre-built object components. Zen is a rich library of pre-built object components anddevelopment tools based on InterSystems CSP andobject 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 forcinguser to log in Enable Password, Disable Unauthenticated Save your changes and CLOSE THE BROWSER (to preventproblems with caching.) Try to view the home page again (View Web Page from Studio) Log in as user _system with password SYSThis is thedefault Zenlogin page in2011.1 17. 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. Hands On #1 From the Studio, view Home Page again This time youre forced to log in. Log in with username _system and passwordSYSThis timeyou see ourown customlogin 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=heres a new text string.JavaScript: var txt=zenPage.getComponentById(txtbox); txt.setValue(heres 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 between the tags, and place one button inside the group:Give the group an id=myGroupGive 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 AddTablePane button 26. Hands On #2 Review Review:Lets 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 Finder Widget Google Map Viewer $$$Text in Javascript for client-side localization 29. 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. 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 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 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 theapplicationby adding anew menuitem Save andCompile 35. Hands On #3 Step 2 Open ZENStork.UI.OrgChartPage.cls Add theJSONprovider 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 (nearbottom of menu) Org Chart Try navigating through this menu 41. Hands On #3 Review Review:Lets take a moment to look over what we just did. 42. $$$Text in Javascript $$$Text macro (for localization) can now be called on theclient 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 andmust set the DOMAIN parameter Seed the page with $$$Text and CSP will automaticallycreate Message Dictionary entries for the default language. 43. Hands On #4 Well handle localization (translating to different languages)using $$$Text on either the server or the client (inJavascript) Exercise 4 starts on page 22 of the handout. 44. 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. 45. Hands On 4 Step 2In 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 pageZENStork.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. 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