Getting Up to Speed on IBM Workplace Designer

Slide 1: Getting Up to Speed on IBM Workplace Designer Rob Novak SNAPPS © 2006 Wellesley Information Services. All rights reserved.

Slide 2: What We’ll Cover … • Introducing Workplace Designer (101) • Understanding the Database • Navigating the Workplace Designer UI • Understanding Forms, Views, and Security • Programming in Workplace Designer 2

Slide 3: A Typical Domino Application Could Have: • LotusScript • Forms • Domino Object Model • Views • @functions • Pages • JavaScript • Outlines • Action bars • Images • Roles/Security • Workflow • Tables • Framesets • HTML We assume you know how to do all that, or at least where it “fits” in a developer’s toolbox … 3

Slide 4: The Good News – in Workplace Designer: • LotusScript • Forms • Document API • Views • @functions • Pages • JavaScript • Outlines • Action bars • Images • Roles/Security • Workflow • Tables • Framesets • HTML A lot of what you know is transferable 4

Slide 5: Goal of This Presentation Provide a practical mapping of what you know about Lotus Domino programming to the concepts in Workplace Designer 5

Slide 6: IBM Workplace Designer • Components • Forms • UI Controls • XML storage in a relational database • Schema Editor • JavaScript Editor • Document API • Workplace integration 6

Slide 7: A Composite Application 7

Slide 8: Workplace Designer Server Architecture Designer Runtime JavaScript Doc API Java Doc API Database Driver RDBMS 8

Slide 9: What We’ll Cover … • Introducing Workplace Designer (101) • Understanding the Database • Navigating the Workplace Designer UI • Understanding Forms, Views, and Security • Programming in Workplace Designer 9

Slide 10: Understanding the Database • In Domino Designer … NSF holds design and data Database schema defined by form design Documents are CD Records • In Workplace Designer … Code is in the file system in the Eclipse workspace Compiled and deployed as .war file to server Data stored in RDBMS tables Document schema defined by XSD Documents are XML 10

Slide 11: Design of the Document Storage • Documents are XML Can contain hierarchical data Defined by a standard XSD schema Documents can be organized in a hierarchy (responses) • Documents are stored in a “database” Logically similar to a Notes .NSF for data storage Contains both meta-data (data definition) and XML documents • Queries are done using “views” Defined within a “database” Extract data from a selection of documents Uses columns and selection formulas • Document content accessed via XPath expressions 11

Slide 12: Integration With the Runtime • One storage is created per Workplace component The storage (“database”) has the name of the component Physical tables created at deployment time Data is not destroyed during an update Each component instance has its own private set of data Notion of instance – based on the component ID • Document API is automatically initialized by the runtime “session”: session opened with the user credentials “database”: component database “document” or “currentDocument”: document(s) accessible within a page 12

Slide 13: What We’ll Cover … • Introducing Workplace Designer (101) • Understanding the Database • Navigating the Workplace Designer UI • Understanding Forms, Views, and Security • Programming in Workplace Designer 13

Slide 14: Navigating the Workplace Designer UI 14

Slide 15: Component Navigator • Very similar to Domino Designer’s “Recent Databases” default folder • Used simply for navigation among Component design elements, to bring them focus in the Canvas • New design elements created here with right-click action 15

Slide 16: UI Controls Palette • Core and Container controls • Core controls very much mimic Domino field types Edit Box, Rich Text, Combo Box, Check Box … • With some departures that are separate elements in Domino Designer Button, Image, File upload and download • Container controls are for positioning or to create views 16

Slide 17: Data Palette • Displays Schema(s) that are in use on the form that has focus in the Canvas • All schemas are available via the drop-down • Create controls on forms by drag-and- drop from the Data palette 17

Slide 18: Canvas • Do your design work here! • Standard navigation – Close, Maximize, etc. • Available from the right-click menu on the tabs and in the upper right corner • Drag and drop controls and schema elements here 18

Slide 19: Properties Panel • Dynamically changes with each selection of the cursor on the work above – forms, fields, views, etc. • All “programming” and formatting can be accomplished here, or launched from here • Dynamic schemas defined here – when you don’t have an underlying schema already built 19

Slide 20: What We’ll Cover … • Introducing Workplace Designer (101) • Understanding the Database • Navigating the Workplace Designer UI • Understanding Forms, Views, and Security • Programming in Workplace Designer 20

Slide 21: Understanding Forms • In Domino Designer … Forms are the primary design element Fields define schema, data type, and UI Event-driven programming model Hide/when formulas • In Workplace Designer … Forms are the primary design element UI Controls are “mostly” for UI only XML Schema defines the document and data type Event-driven programming model Visibility formulas 21

Slide 22: Understanding Views • In Domino Designer … View design element handled both UI and indexing Selection formulas define the query to perform Column definitions (data and formulas) UI stuff – categories, colors, fonts, lines, etc. • In Workplace Designer … View design is separated into UI and query definition – behind the scenes anyway … Selection by schema, can be refined using formulas View Control for user interface Database object created for each view 22

Slide 23: Relationship of View Design to Runtime and Database Design Run FB_”Name”_QY Table 23

Slide 24: Views • Filtering on document schemas • Filtering on column values Using a simple query language Stored in the design element • Filtering on document content JavaScript formula executed when the document is saved Can use any of the JavaScript functions • Dynamic filter Use the simple query language Not part of the design element Can be computed dynamically 24

Slide 25: Understanding Security • In Domino and Designer … Server Database ACLs Design Elements Roles Documents – Readers, Authors field types • In Workplace Designer … Portlet permissions Database permissions based on role Roles integrated with Workplace Collaboration Services Documents – Readers/Editors fields set programmatically 25

Slide 26: What We’ll Cover … • Introducing Workplace Designer (101) • Understanding the Database • Navigating the Workplace Designer UI • Understanding Forms, Views, and Security • Programming in Workplace Designer 26

Slide 27: Understanding Programming Options • In Domino Designer … Server, Notes, and Web browser options Language options: @functions, LotusScript, Java, Simple Actions, JavaScript Domino Object Model Field, form, database events; Agents • In Workplace Designer … Server and Web browser options JavaScript, Simple Actions on server and client @functions are JavaScript functions Document API similar to Domino Objects Field, form, component events; no Agents 27

Slide 28: @Functions ? • JavaScript parser in Workplace Designer has been enhanced to accommodate about 120 @Functions and their variations! • They are used differently to incorporate into JavaScript (see the doc for arguments, but they perform the same functions) • Examples @Adjust(time:Date, years:int, months:int, days:int, hours:int, minutes:int, seconds:int, keywords:string) : Date @DbTitle() : string @LowerCase(value:string) : string @SetField(name:string, value:any) : void Remember: All functions in JavaScript are case-sensitive! 28

Slide 29: Script Libraries • One of the four main design elements, Script Libraries contain functions that can be used in form development • Similar to Domino Designer (and almost every other IDE), this is a way to centralize code maintenance • Script Libraries can be created from saved code – programming an event on a form, select Save As … • Server-side code only 29

Slide 30: Workplace Designer Document Database API • High level: Workplace Designer has a document database API (referred to as DocAPI) that mimics the Domino document API in many respects • It is a layer used to manage documents • Examples Domino: document.getItemValue("fieldname") WP Designer: document.getStringValue("/xpath") • More examples available in help…for instance 30

Slide 31: Code Listing: Printing a List of Views (getViewList) function p(myview) { print("<<<" + myview + ">>>"); } Defined in: DBDatabase class Parameters: showHidden (default false) var viewlist : DBViewList; Return value: DBViewList try { viewlist = database.getViewList(); p("view count = " + viewlist.getViewCount()); viewnames = viewlist.getAllViewNames(); for(var i=0; i<viewnames.length; i++) { p(“View name = " + viewnames[i]); } } catch(e) { p("Error = " + e); } 31

Slide 32: Getting Started With Workplace Designer • Setting up the scenario … • I’m a Domino developer (or so I make people think!) who has been handed the task of learning Workplace Designer • So I do what I would do with any new IDE • Cheat • Seriously, I would: 1. Find the doc, and if there’s a RedBook or RedPaper, get that and any examples that came with it 2. Open examples and dig into the code – or in this case the UI 3. Try to build something I know works in Domino 32

Slide 33: Importing a Component • Components can be started or developed elsewhere (i.e., examples) and imported into the IDE • Extensions differ in 2.5 and 2.6, but the process is the same • Each component must have a unique name 33

Slide 34: Deploying Components • Components can be deployed on Workplace Services Express or Workplace Collaboration Services using deployment profiles • Portal 6 is the new deployment platform of choice • Workplace Designer runtime must be installed on the server (easy 10-minute install to a configured server) • Let’s check out one of our examples as deployed 34

Slide 35: Integrating with Workplace and Portal • Roles – Security Five roles pre-defined for each component No_Access, Reader, Author, Editor, Administrator Role association done by Template Editor User roles accessible at runtime using JavaScript DirectoryUser object retains current user information Access control is automatically defined using these roles Custom JavaScript code to hide/show sections depending on roles 35

Slide 36: Technologies You Need to Study • XML • XPath • XML schema (XSD) • JavaScript • A deployment platform Workplace Services Express Workplace Collaboration Services WebSphere Portal 6 36

Slide 37: Resources • John Bergland et al, IBM Workplace 2.5 Development with Workplace Designer (IBM, December 2005), www.redbooks.ibm.com/abstracts/redp4090.html • Product site (data sheets, announcements, demos) http://www.ibm.com/software/workplace/designer • Workplace on LDD http://www.lotus.com/ldd 37

Slide 38: 7 Key Points to Take Home • Domino Designer is still the IDE for Domino applications (for now) – it is being enhanced on an ongoing basis • Workplace Designer is the IDE for component development for Workplace Services Express, Workplace Collaboration Services, Portal 6 • Hannover’s “composite applications” can make use of both IDEs for the parts • JavaScript is the language of choice for Workplace Designer; XML and Xpath are the document database and method of addressing documents 38

Slide 39: 7 Key Points to Take Home (cont.) • Most of your Domino Designer skills will transfer, there’s just a lot more to learn about application architecture and deployment • Re-use simple designs from Domino as the base for development with Workplace Designer • Grab and study examples as a starting point – and get involved in Workplace Designer 6, either beta or release 39

Slide 40: Your Turn! Questions? How to Contact Me: Rob Novak rnovak@snapps.com © Copyright 2006 SNAPPS. All Rights Reserved. 40