Advanced Rich Internet Applications RIAs done the easy

Advanced Rich Internet Applications (RIAs) done the easy way Jack Ratcliff Ext. nd, LLC © 2009 by the individual speaker

Agenda • Who are we? • What is Ext. nd? • The Goals of Ext. nd • The Goal of Today’s Presentation • The Steps to get from a Notes app to a RIA • The Steps • Q&A Iam. LUG 2009

Jack Ratcliff • Co-Creator, Ext. nd • Working with IBM Lotus Notes since 1993 • Started writing Web applications with IBM Lotus Domino in 1997 • Began using Ext in October of 2006 when it was known as yui-ext • http: //jackratcliff. com Iam. LUG 2009

Rich Waters • Co-Creator, Ext. nd • Senior Developer, Ext JS • Began using Ext in October of 2006 when it was known as yui-ext • Developing web sites / applications since 1998 • Experience with web development on a wide array of back-end systems (Domino, Perl, PHP, Rails) • http: //rich-waters. com/blog/ Iam. LUG 2009

What is Ext. nd • Ext. nd is a a cross-browser Java. Script framework for building rich internet applications specifically for IBM Lotus Domino. Began with the merger of three separate projects from s Rich Waters s Jake Howlett s Jack Ratcliff • Built on top of the Ext client-side Java. Script framework by Jack Slocum (http: //extjs. com) Iam. LUG 2009

The Goals of Ext. nd • To extend Notes client functionality and programmability to the Web • Provide a better “out of the box” Web UI/UX for IBM Lotus Domino applications • Provide Java. Script classes for the Domino objects • Easy to use (less than 10 lines of code to get started!) Iam. LUG 2009

The Goals of Today’s Presention • Take an existing Notes Application and convert it to a Rich Internet Application (RIA) • But what is a RIA? “Rich Internet applications (RIAs) are web applications that have most of the characteristics of desktop applications, typically delivered by way of standards based web browser plug-ins or independently via sandboxes or virtual machines” (http: //en. wikipedia. org/wiki/Rich_Internet_application) “RIAs combine the flexibility, responsiveness, and ease of use of desktop applications with the broad reach of the web. RIAs provide a dynamic web experience that is rich and engaging, as well as interactive. ” (http: //www. adobe. com/devnet/projects/ria/) Iam. LUG 2009

The Steps 1. 2. 3. Use the Ext. nd. Domino. UI class to develop a ‘start’ page similar to the Notes version. Also, develop a few alternative, complex layouts to update the application from a ‘Notes looking’ application into a ‘Web looking’ application Convert Lotus. Script Domino Object code into the equivalent Ext. nd Domino Object code 1. UIDocument Actions 2. UIView Actions Convert Lotus. Script event handlers into Ext. nd event handlers 1. 2. 3. 4. Iam. LUG 2009 UIDocument Open event UIDocument Save event UIView Before. Add. To. Folder event UIView Before. Open. Document event If time permits, look into adding a widget or two to add more functionality or to spruce things up a bit.

Step 1 – The Layout • Ext. nd allows for a simple two pane (outline + view) layout using the Ext. nd. Domino. UI class. • More complex layouts can be done by combining Ext and Ext. nd widgets into the various layout managers provided by Ext. Iam. LUG 2009

Step 1 – The Layout STEP 1 Iam. LUG 2009

Step 2 – Ext. nd API • Ext. nd has a similar API (for the classes, methods, properties, and events) to the Lotus. Script API for the Domino Objects. Lotus. Script Class Ext. nd Class Notes. Session Ext. nd. Session Address. Books, Common. Username, Current. Database, User. Name. List, etc. Notes. UIView Documents, View. Name Notes. UIDocument Is. New. Doc, Document, Edit. Mode, Save(), Close(), Field. Get. Text(), Field. Set. Text(), Field. Append. Text(), Field. Clear(), Field. Contains() Iam. LUG 2009 address. Books, common. Username, current. Database, user. Name. List, user. Roles, etc. Ext. nd. UIView get. Documents(), get. Selected. Document(), view. Name, expand. All(), collapse. All(), refresh(), open. Document(), edit. Document() Ext. nd. UIDocument is. New. Doc, document, edit. Mode, edit(), save(), close(), field. Get. Text(), field. Set. Text(), field. Append. Text(), field. Clear(), field. Contains()

Step 2 – Ext. nd API STEP 2 Iam. LUG 2009

Step 3 a – UIDocument Events • Some of the most useful UIDocument events have been added to the Ext. nd. UIDocument class. • Custom code can be written that will respond to these events. For instance: s You can use the Open event to change field values after a document has been opened s Before a document is saved, you can perform some custom validation and if the validation fails, you can prevent the save from taking place and alert the user. Notes. UIDocument Event Name Ext. nd. UIDocument Event Name Post. Open Query. Mode. Change Before. Mode. Change Query. Save Before. Save Query. Close Before. Close Iam. LUG 2009

Step 3 a – UIDocument Events STEP 3 a Iam. LUG 2009

Step 3 b – UIView Events • A few of the Notes. UIView events have been added to Ext. nd. • Custom code can be written that will respond to these events. For instance: s You can prevent a document from opening using the Before. Open. Document event. s The Get. Design. Success event can be used to define custom column renderers that will be used to format view column data. Notes. UIView Event Name Ext. nd. UIView Event Name Query. Open. Document Before. Open. Document Post. Open Query. Add. To. Folder Before. Add. To. Folder Get. Design. Success Iam. LUG 2009

Step 3 b – View Events STEP 3 b Iam. LUG 2009

Step 4 – Widgets • Ext has an extensive library of high quality, Ajax enabled widgets such as charts, forms, grids, tree, menu, comboboxes, date pickers, toolbars, buttons, etc. • Ext. nd has added ‘Notes Client like’ widgets such as UIView, UIOutline, Actionbar, Action button, Pick. List, Address Name Picker, Timefield, Chained Combo, etc. Iam. LUG 2009

Step 4 - Widgets STEP 4 Iam. LUG 2009

Q&A • Ext Web site s http: //extjs. com • Ext forums s http: //extjs. com/forum/ • Ext. nd forum on Ext s http: //extjs. com/forumdisplay. php? f=15 Iam. LUG 2009