Picking & choosing for a rich user interface

Manu Vermeyen

The case of Flanders Investment & Trade

DISCLAIMERS

AGENDA

Why ‘classic’ domino web dev Rich User Experience: javascript frameworks Who is FIT? Examples

• Structure: why ajax?• Important notices : what is dojo?• Searching: YUI• Phototheque: MooTools• Forms: Dojo• Agenda: Dojo

CLASSIC WEB VS XPAGES

Pre 8.5 period

Learning curve for xpages for all involved

Sense of control

Quick wins

New web developers

Future direction : sharpen your axe

RICH USER INTERFACE

Modern web sites offer (full) client functionality

Rely on javascript and/or XML

AJAX based models for speed and bandwidth

DOM Manipulation

CSS & Javascript frameworks

WHAT ARE JAVASCRIPT FRAMEWORKS

Library of utilities and functions

Manipulate DOM objects

Event handling

AJAX support

Not necessary to use the complete framework

WHICH FRAMEWORKS AND WHY

DOJO

MooTools

Yui

Completeness of the set

Development and documentation

Specific functionality

WHO IS FIT: MISSION

Improve the international entrepreneurship of Flemish companies, especially SMB

Attract foreign investments to Flanders

Stimulate international entrepreneurship focussing on a sustainable and ethical approach

Provide an excellent service to our Flemish and foreign customers

F.I.T is close to its customers, present not only in Brussels but also in:

• Every Flemish province: close-knit domestic network

• Abroad: more than 90 offices worldwide

WHO IS FIT: SERVICES

Towards local companies

• Events & Actions

• Subsidies.

• Opportunities & International information

• Contact data of prospects and partners

• Foreign presence

• Foreign expertise

WHO IS FIT: SERVICES

Towards foreign companies

• Promote Flanders as investment location

• Advise companies wanting to invest in Flanders

WHO IS FIT: LOTUS NOTES

Role of Lotus Notes

• Primary communication end collaboration tool between central and descentralised offices

• On/offline collaboration• RAD in a fast changing environment

FIT THE INTRANET: REQUIREMENTS

Simplicity

Performance

Easily ‘click in’ new and existing notes applications

Roles and functions (security)

EXAMPLES: STRUCTURE

Reasons

• Simplicity to ‘click in’ new blocks

• Change of mind / importance

• Extensible

Technical

Form preloading all necessary classes shared and structure of the site

documents describing the individual blocks

Framework

Dojo: loading of individual blocks using xhrget (ajax call for html)

IMPORTANCE NOTICES

Reason

• Show top notices on restricted screen real estate• Look

Technical

• One form, one view

Framework

• Dojo : Rotator

TYPE AHEAD SEARCH

Reason

• Help users enter correct search criteria that lead to answers (no ‘nothing found’), fast response

Technical

• Field and a lookup view

Framework

• YUI, Autocomplete

5

FOTOTHEEK

Reason

• Modern way to present picture series• Easy navigation (and extra info)

Technical

• Form and view for lookup

Framework

• MooTools: copying functionality of example web site• And Dojo lightbox

VARIOUS FORMS

Reason

• Enhanced user experience

Technical

• Field properties

Framework

• DOJO

FORM EXAMPLES

RENDEZ VOUS?

• POT days : Deep dive in web dev (javascript framework DOJO, YUI,…) – week 16/5 (FREEFREEFREE!)

• www.groupwave.com• manu.vermeyen@groupwave.com• Tungle.me/ManuV

CONCLUSIONS

Choose one framework

You’ve got friends

Decide on some ‘standards’ up front

Don’t want to do everything ‘like Google LotusLive’

When starting from scratch : sharpen your axe