Picking choosing for a rich user interface The

Picking & choosing for a rich user interface The case of Flanders Investment & Trade Manu Vermeyen

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: Moo. Tools 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 Moo. Tools 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 site Form preloading all necessary classes shared and structure of the 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 • Moo. Tools: 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 (FREEFREE!) • www. groupwave. com • manu. vermeyen@groupwave. com • Tungle. me/Manu. V

CONCLUSIONS Choose one framework You’ve got friends Decide on some ‘standards’ up front Don’t want to do everything ‘like Google Lotus. Live’ When starting from scratch : sharpen your axe