Transcript Advanced Rich Internet Applications done the easy way

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
IamLUG 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
IamLUG 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/
IamLUG 2009
What is Ext.nd
• Ext.nd is a a cross-browser JavaScript framework for
building rich internet applications specifically for IBM
Lotus Domino. Began with the merger of three separate
projects from
 Rich Waters
 Jake Howlett
 Jack Ratcliff
• Built on top of the Ext client-side JavaScript framework
by Jack Slocum (http://extjs.com)
IamLUG 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 JavaScript classes for the Domino objects
• Easy to use (less than 10 lines of code to get started!)
IamLUG 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/)
IamLUG 2009
The Steps
Use the Ext.nd.DominoUI 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
2. Convert LotusScript Domino Object code into the
equivalent Ext.nd Domino Object code
1.
•
•
3.
Convert LotusScript event handlers into Ext.nd event
handlers
•
•
IamLUG 2009
UIDocument Actions
UIView Actions
•
UIDocument Open event
UIDocument Save event
UIView BeforeAddToFolder event
Step 1 – The Layout
• Ext.nd allows for a simple two pane (outline + view)
layout using the Ext.nd.DominoUI class.
• More complex layouts can be done by combining Ext and
Ext.nd widgets into the various layout managers
provided by Ext.
IamLUG 2009
Step 1 – The Layout
STEP 1
IamLUG 2009
Step 2 – Ext.nd API
• Ext.nd has a similar API (for the classes, methods, properties,
and events) to the LotusScript API for the Domino Objects.
LotusScript Class
Ext.nd Class
NotesSession
Ext.nd.Session
AddressBooks, CommonUsername,
CurrentDatabase, UserName, UserNameList, etc.
NotesUIView
Documents, ViewName
NotesUIDocument
IsNewDoc, Document, EditMode, Save(), Close(),
FieldGetText(), FieldSetText(), FieldAppendText(),
FieldClear(), FieldContains()
IamLUG 2009
addressBooks, commonUsername,
currentDatabase, userName, userNameList,
userRoles, etc.
Ext.nd.UIView
getDocuments(), getSelectedDocument(),
viewName, expandAll(), collapseAll(), refresh(),
openDocument(), editDocument()
Ext.nd.UIDocument
isNewDoc, document, editMode, edit(), save(),
close(), fieldGetText(), fieldSetText(),
fieldAppendText(), fieldClear(), fieldContains()
Step 2 – Ext.nd API
STEP 2
IamLUG 2009
Step 3a – 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:
 You can use the Open event to change field values after a document has
been opened
 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.
NotesUIDocument Event Name
Ext.nd.UIDocument Event Name
PostOpen
Open
QueryModeChange
BeforeModeChange
QuerySave
BeforeSave
QueryClose
BeforeClose
IamLUG 2009
Step 3a – UIDocument Events
STEP 3a
IamLUG 2009
Step 3b – UIView Events
• A few of the NotesUIView events have been added to Ext.nd.
• Custom code can be written that will respond to these events. For
instance:
 You can prevent a document from opening using the BeforeOpenDocument
event.
 The GetDesignSuccess event can be used to define custom column
renderers that will be used to format view column data.
NotesUIView Event Name
Ext.nd.UIView Event Name
QueryOpenDocument
BeforeOpenDocument
PostOpen
Open
QueryAddToFolder
BeforeAddToFolder
GetDesignSuccess
IamLUG 2009
Step 3b – View Events
STEP 3b
IamLUG 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. etc.
• Ext.nd has added ‘Notes Client like’ widgets such as UIView,
UIOutline, Actionbar, Action button, PickList, Address Name
Picker, Timefield, Chained Combo, etc.
IamLUG 2009
Step 4 - Widgets
STEP 4
IamLUG 2009
Q&A
• Ext Web site
 http://extjs.com
• Ext forums
 http://extjs.com/forum/
• Ext.nd forum on Ext
 http://extjs.com/forum/forumdisplay.php?f=15
IamLUG 2009