Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Advanced Rich Internet Applications (RIAs) done the easy way Jack Ratcliff Ext.nd, LLC
  • 2. 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
  • 3. 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
  • 4. 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)
  • 5. 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:// )
  • 6. 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!)
  • 7. 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” (
      • “ 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.” (
  • 8. 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
    • Convert LotusScript Domino Object code into the equivalent Ext.nd Domino Object code
        • UIDocument Actions
        • UIView Actions
    • Convert LotusScript event handlers into Ext.nd event handlers
        • UIDocument Open event
        • UIDocument Save event
        • UIView BeforeAddToFolder event
        • UIView BeforeOpenDocument event
    • If time permits, look into adding a widget or two to add more functionality or to spruce things up a bit. 
  • 9. 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.
  • 10. Step 1 – The Layout
    • STEP 1
  • 11. 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.
    • Ext.nd.UIDocument
      • isNewDoc, document, editMode, edit(), save(), close(), fieldGetText(), fieldSetText(), fieldAppendText(), fieldClear(), fieldContains()
    • NotesUIDocument
      • IsNewDoc, Document, EditMode, Save(), Close(), FieldGetText(), FieldSetText(), FieldAppendText(), FieldClear(), FieldContains()
    • Ext.nd.UIView
      • getDocuments(), getSelectedDocument(), viewName, expandAll(), collapseAll(), refresh(), openDocument(), editDocument()
    • NotesUIView
      • Documents, ViewName
    • Ext.nd.Session
      • addressBooks, commonUsername, currentDatabase, userName, userNameList, userRoles, etc.
    • NotesSession
      • AddressBooks, CommonUsername, CurrentDatabase, UserName, UserNameList, etc.
    Ext.nd Class LotusScript Class
  • 12. Step 2 – Ext.nd API
    • STEP 2
  • 13. 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.
    Ext.nd.UIDocument Event Name NotesUIDocument Event Name BeforeClose QueryClose BeforeSave QuerySave BeforeModeChange QueryModeChange Open PostOpen
  • 14. Step 3a – UIDocument Events
    • STEP 3a
  • 15. 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.
    Ext.nd.UIView Event Name NotesUIView Event Name GetDesignSuccess BeforeAddToFolder QueryAddToFolder Open PostOpen BeforeOpenDocument QueryOpenDocument
  • 16. Step 3b – View Events
    • STEP 3b
  • 17. 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.
  • 18. Step 4 - Widgets
    • STEP 4
  • 19. Q & A
    • Ext Web site
      • http://
    • Ext forums
      • http:// /forum/
    • Ext.nd forum on Ext
      • http:// =15