Reasonable Sakai Reasonable Sakai WidgetsWidgets

Aaron Zeckoski (aaronz@vt.edu)

Gonzalo Silverio (gsilver@umich.edu)

Antranig Basman (antranig@caret.cam.ac.uk)

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

Introduction to Widgets

Introduction to Widgets

• 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)

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

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!

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/

Current Sakai Widgets

Current Widgets

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

Date pickers

• Allow the user to set a date without having to type it but still allowing them to paste

WYSIWYG editor

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

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

Actions and navigation

• Allow the user to trigger a page action– Links or buttons styled in a consistent way

User Input

• Allows user to input information– Consistently styled input form elements

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)

Table rendering

• Allows rendering of tables for consistent display to the user

Others (misc)

• Various things to provide a consistent user experience– Primarily for rendering

RSF Widgets

RSF Widgets

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

RSF Date picker

• Uses the Yahoo UI library

• Full internationalization support

• AJAX validation

RSF WYSIWYG

• Uses FCKeditor– http://www.fckeditor.net/

RSF Double selection

• Uses Gonzalo’s markup

• Uses custom javascript– Works in the template (allows preview)

Widgets Demonstrated

Widgets demonstrated

• See the RSF widgets in action

Constructing a widget

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

Constructing a new widget

• Most new widgets would be built using a standard workflow1.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

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

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

Sakai Widgets Discussion

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)

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

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?

Questions?

• Join the UI email discussion group– mailto:sakai-dg-ui@collab.sakaiproject.org

• Check out the confluence pages– http://bugs.sakaiproject.org/confluence/display/UI/– 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…