1. Reasonable Sakai Widgets Aaron Zeckoski (aaronz@vt.edu)aaronz@vt.edu Gonzalo Silverio (gsilver@umich.edu)gsilver@umich.edu Antranig Basman (antranig@caret.cam.ac.uk)antranig@caret.cam.ac.uk

2. Overview Introduction to widgets (GS) List of needed Sakai widgets (GS) Current Sakai widgets (AZ) RSF widgets (AZ) Widgets demonstrated (AB) Constructing a new widget (AB) Discussion of Sakai widgets (You!) –Your chance to talk about what we need! Note: We only need 60 minutes

3. Introduction to Widgets

4. A widget (or control) is an interface element that a computer user interacts with –Programmers and designers use widgets to build user interfaces –Generally thought to be from “windows gadget” –Packaged as widget toolkits URL: http://en.wikipedia.org/wiki/Widget_(computing)http://en.wikipedia.org/wiki/Widget_(computing)

5. What is a widget? A placeholder. Working Definition: –a unit of UI meaning (+ more) Simple widgets (the morphemes) –smallest logical combination of elements –Example: inputText - required/optional children and attributes Complex widgets (the words) –combinations of simple widgets –Example:layoutStackPanel

6. Nice Widgets Are abstract –Are rendering engine neutral –Are user agent neutral Are concrete –Answer to a widget schema –Produce valid markup –Provide maximum range of style-able options Are useful! To everyone!

7. List of needed Sakai Widgets Initial laundry list - freely cannibalized from –Sakai past practice –Yahoo –Google Input on what is there More needed How grow? Or - how to codify the organic growth? URL: http://www-personal.umich.edu/~gsilver/sak-ui-elements/html/http://www-personal.umich.edu/~gsilver/sak-ui-elements/html/

8. Current Sakai Widgets

9. Current Widgets Let’s take a look at some of the current widgets in Sakai –Not comprehensive –Good and Bad –Various technologies

10. Date pickers Allow the user to set a date without having to type it but still allowing them to paste

11. WYSIWYG editor Allows user to create formatted text without knowing html –Also allows adding links, images, etc.

12. List paging Allows the user navigate through lists of items which are too large to display on a single page –Also often allows choice of number of items per page

13. Actions and navigation Allow the user to trigger a page action –Links or buttons styled in a consistent way

14. User Input Allows user to input information –Consistently styled input form elements

15. User Messages Provide feedback messages to the user –Primarily to consistently format messages so that the user is able to easily realize system state and message importance –Not currently used enough Mostly only for error messages (alerts)

16. Table rendering Allows rendering of tables for consistent display to the user

17. Others (misc) Various things to provide a consistent user experience –Primarily for rendering

18. RSF Widgets

19. Currently there are only a handful of RSF widgets –Focusing on the more complex –Adding advanced javascript functionality

20. RSF Date picker Uses the Yahoo UI library Full internationalization support AJAX validation

21. RSF WYSIWYG Uses FCKeditor –http://www.fckeditor.net/http://www.fckeditor.net/

22. RSF Double selection Uses Gonzalo’s markup Uses custom javascript –Works in the template (allows preview)

23. Widgets Demonstrated

24. Widgets demonstrated See the RSF widgets in action

25. Constructing a widget

26. Constructing a new widget Mostly we are talking about a process of constructing a widget –We can talk about the technical bits but that is not the focus here The process should be quite simple –It should include UI design best practices

27. Constructing a new widget Most new widgets would be built using a standard workflow 1.Mock up the widget as an image / PDF 2.Mock up the widget’s appearance as XHTML –Recommend you start on this step if possible 3.Add any Javascript to the template to demonstrate the desired behavior 4.Decide on a naming convention to assign rsf:ids to parts of the template 5.Hand the markup + Javascript to an RSF programmer to convert to a server-side component * Will look at this in more detail on the following slides

28. Workflow in detail (1) 1.Mock up the widget as an image / PDF –Use your UI practices here 2.Mock up the widget’s appearance as XHTML –Recommend you start on this step if possible –Allows you to preview the widget –Verify that things can be styled –Check for cross browser compliance 3.Add any Javascript to the template to demonstrate the desired behavior –Use standard libraries if possible Check with community to see what libraries are good –Test the functionality of the widget

29. Workflow in detail (2) 4.Decide on a naming convention to assign rsf:ids to parts of the template –Allows for multiple html templates –Sets up communication from UI -> dev 5.Hand the markup + Javascript to an RSF programmer to convert to a server-side component –If you do not have one on campus there are folks on the dev list that will take care of you

30. Sakai Widgets Discussion

31. Discussion of Sakai widgets Should we use widgets or just good styling practices? –Styles allow previewability of templates and wireframes where widgets do not –Both require remembering something in order to use them (name of widgets, name of CSS)

32. Discussion of Sakai widgets What is needed to make this easier for UI designers and UI developers? –Documented steps? –Tutorials? –A unified style guide? –Online set of widgets and examples Gonzalo has a nice page started

33. Discussion of Sakai widgets Currently difficult to style apps consistently –Mostly seems to be lack of knowledge where to go, what to use, how to use What is needed to make this easier for developers? –A style guide document of some kind? –A searchable website or online database? –A printed guide?

34. Questions? Join the UI email discussion group –mailto:sakai-dg-ui@collab.sakaiproject.orgmailto:sakai-dg-ui@collab.sakaiproject.org Check out the confluence pages –http://bugs.sakaiproject.org/confluence/display/UI/http://bugs.sakaiproject.org/confluence/display/UI/ –http://bugs.sakaiproject.org/confluence/display/BOOT/http://bugs.sakaiproject.org/confluence/display/BOOT/ Get involved in the work –There are many many ideas but we need some implementers –You know what they say about opinions…