Flexing Domino... Our BoF209

2009-01-21T14:33:00.024-05:00

Setting up the flexcontacts.nsf test application (note: it covers login, view rendering, FT Search, Custom events, drag n drop between data grids etc...)

Download and install the free 60 day trial version of Adobe Flex Builder
Down load the zip file from here
Extract all the contents from the FlexContactsProject.zip (contains 2 nsfs, and FlexContacts.zip)
Import the FlexContacts.zip flex project into your Flex Builder IDE
Place the flexcontacts.nsf, and file_upload.nsf on your server
Sign both applications
Go into the flexcontacts.nsf from the notes client and update/create the Config doc (fill in path to file_upload, and set the google key)
Note... google key from your test server's host name will be required for the map of contacts to work (unless you are running localhost)
Go into the keywords area and add a "Country" keyword w/ appropriate synonyms (i.e. United States | US)
Run the BuildXML agent to create the xml version of that keyword document
Go to the application via web browser http://yourhost/flexcontacts.nsf...
Please let us know via comments if you have any issues getting the application to work.

Flexing Domino Presentation

What is Flex?
Adobe Flex Builder
Languages
Events/Event Listeners
Data Binding
Data Services (HTTP/s, Web Services, AMF)
Effects
Flex/Flash Integration
How Do I (covers flex with domino)?
Q & A

What is Flex?

Adobe defines flex as:
“an open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems”
Free SDK with command line compilers to compile MXML files and .as (actionscript) file.

Adobe Flex Builder

Adobe Flex Builder is an IDE based on eclipse
Contains all the standard features (debug, profiling, code complete).
Flex builder is not necessary to build flex applications but makes it very easy with nice visual development components and drag n drop palette (demo).
Not free but is reasonably priced.

Languages Used

MXML (A declarative markup language that builds the UI in a hierarchical format).
MXML is transformed into ActionScript files and then compiled. To view the created .as files add the following command to the Flex compiler arguments
--keep-generated-actionscript
ActionScript3 (Object oriented scripting language very similar in syntax to Java and JavaScript).
External Interface calls allowed to JavaScript (for browser based flash applications)

Events and Event Listeners

Flex is geared towards a more event-based programming model
Communication between objects is achieved through an implementation of the Observer Pattern
Does not follow page based flow driven development model (reload of the entire page/view is not necessary to see state changes)
Allows for custom event creation to “dispatch” events and objects wrapped in those events.
Facilitates the creation of a more loosely coupled architecture between your Flex components
(see com/events package in sample application)

Data Binding

Allows components the ability to reference an object and watch/listen for changes
Typical usage:
form text inputs bound to an xml variable stored in memory within the MXML
Data grid bound to xml variable
Combo Box pull down menu bound to selection lists
No extra coding beyond setting the components attribute to the [Bindable] component (flex/flash will handle events/listeners for you)
(see [Bindable] formXML:XML in com/notesui/ContactsForm.mxml)

Data Services

Data streaming via HTTP/s (i.e. XML, CSV)
Web services consumer client
AMF (ActionScript Message Format)
Binary Protocol based on HTTP.
Maps ActionScript objects to server side Java objects
Blaze DS (Open Source)
WebORB (Open Source)
LiveCycle Data Services

How Do I...?

Validate user input?

Flex comes out of the box w/ a decent set of validators (email, zip, etc.).

Persist Local Information (i.e. Cookie)?

Use a shared object to persist locally
var userObject:SharedObject=SharedObject.getLocal("userObject");
userObject.data.userName=String(xmlContent.username);
userObject.flush(); //writes the data to disk
userObject.clear(); //deletes the data from disk

How do I login a user to Domino?

Setup session based authentication
Post Login Credentials to the server via POST to login url command (.nsf?Login…)
Use an xml page/script to render the users authorization (i.e roles, first,last, notesname etc)
(see Login.mxml,LoginEvent,LoginFailedEvent in Flex project, and user.xml page in domino designer)

How Do I perform CRUD operations w/ Domino

Simplest approach is to use the URL commands that have been around since R5. Use of WebQuerySave agent to provide validation and other services
?CreateDocument
UNID?SaveDocument, view/key?SaveDocument
/0/UNID (xml rendering of the form)
Web services
(see ContactForm.mxml, com/utils/rpc/Rest.as, XMLContact in Domino Designer)

How do I render a view?

Simple Data grid component bound to XML rendering view
ReadViewEntries
Form w/ custom view embedded rendering XML (preferred way more control over XML rendering)
FTSearch required use of custom LotusScript class as SearchTemplateDefault forms do not render text/xml

How do I use keywords and generate lookups?

Create XML rendering of the Keyword data
Allow for “key” lookups via URL to the XML document
(See xml.KeywordXmlFeed LotusScript class, and XMLBuilder agent)
(See NotesComboBox in Flex application)
(see FlexContactsView.mxml and FTSearchView.mxml in flex project, FlexContactsView.xml in domino design)

How do I upload a file?

Make sure DominoDisableFileUploadChecks =1 in notes.ini
From flex make sure the name of the data field posting the file is %%File
(see ContactForm.mxml, FileUpoader.mxml,FileUpload.as)

How do I deploy my flex application
Steps:

Perform a production build from Flex Builder
Grab the application .swf, the playerProductInstall.swf, and any javascript files and import them into the notes file resources
Take the .html file in the bin-release folder and paste its contents into a domino page design element or form if you need to pass query_string parameters (add path elements where the resources are referenced via computed text)
Set the nsf's Launch properties to load your page

Effects

Comes w/ canned effects for almost all components
WipeUp/WipeDown,Iris,FadeIn/FadeOut
(see appViewStack in FlexContacts.mxml)

Adding Some Style

Customize the appearance of your components with Styles or Skins
Styles:
Built-in CSS Editor to create styles for all components
Visual Style Editor
Skins:
Skinning can be done with other Adobe products, such as Photoshop, Fireworks, Illustrator and Flash
You will have to download the Skin Design Extension and Flex Component Kit

Working with Designers

Design Partners can be a huge benefit for designing UI's
When picking a design partner confirm they have at least a working knowledge of Flex
When working with Design Partners, safeguard the success of your project by separating design and development concerns
Ensure both Flex/Flash versions are utilizing the same version of ActionScript
ActionScript does not have the same track record for backward compatibility as Domino.
ActionScript 3 is the preferred version currently.
Flex / Flash complement each other. Allow each to product to do what it does best (Flex-->Interactive/Integrated Software to backend systems, Flash-->Layouts, Animations, Graphics)

Links

Blogs

Adobe Flex Builder

http://www.adobe.com/products/flex/

Flex Component Explorer

http://examples.adobe.com/flex3/componentexplorer/explorer.html

Tour De Flex ( Adobe Air App )

http://www.adobe.com/devnet/flex/tourdeflex/index.html

Flex Skin Design Extensions

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins

Books
Learning Flex 3 by Alaric Cole (on the beginner side but has some very good examples and is a great "jumpstart" book)

Adobe Flex 3 Training from the Source (more comprehensive book, gets into a lot of details about Events,Custom Events, Remote Objects, Run-Time Shared libraries etc...)

Welcome!

2009-01-08T11:13:00.003-05:00

Hi Everyone, we are looking forward to sharing our experiences integrating Adobe Flex with Lotus Domino. This is our first try at blogging so please be gentle with us, we will do our best to be fun and informative.

We have a couple of applications under our belt and thought that it would be great to share how to create Rich Internet Applications(RIA's) with Adobe Flex and Lotus Domino.

Also, if anyone is attending Lotusphere 2009, please visit us at BOF209 - Flexing IBM Lotus Domino: Building Rich Internet Applications Using IBM Lotus Domino and Macromedia Flash. Click here for the details. Whether you are new to Flex or just courios about how to create RIA's, this is one BOF you don't want to miss. I know it's early, but you wont be disappointed. Hope to see you there.

Well, that's it for now. Cheers!