Element index

Element list

This list intends to be a comprehensive collection of the discrete UI elements used in the Sakai Style Guide

It is not meant to be normative to the design, but to the rendering engine, whatever it may be.

For each element there is an example of its rendering, the source, notes on usage, a JSF example (if available) in actual usage, an ideal JSF tag (if available), the position in the hierarchy of the element. When things jell a schema that the rendered element needs to validate against for purposes of consistency, usability and accessibility will be provided.

still focused just on xhtml, need the other user agent ML equivalents - and also a schema that would express them all? Headache.
If this schema expresses the abstraction - how do you enforce specific renderings - say use of a caption with a table?
on ideal JSF tag - how to indicate what passthrough attributes are allowed - and to what children do they apply? Are there limits on how parsimonious the tag can be with information? See inputText - it resolves to a block with class(es) attribute and 2, 3 or 4 children (required marker, validation message, label, input). Perhaps the normative aspects can be declared in the attributes of the tag, the optional ones at will in the attributes of the children?
Each alternate expression would need to obey a schema of its own
layout elements are good for simple constructs adopt the Yahoo grid for more complex layouts
flesh out JSF into what is needed and provide example how analog is being done now
RSF being created now - issues: keying to class, id, or stub - what happens when class has more than one value? Decided to concatenate.
Make sure that tabbish things have enough hooks (li - span - a)
All of the javascript is provisional - we really need a coherent javascript vision
Need a date picker for completeness, not necessarily a canonical one. Also color picker.
Markup examples are meant only for Firefox - when thngs jell more they will be made cross-browser.

action
1. actionToolBar
Item xml | Item xsd | Item rsf

User needs to initiate an action on the present view
2. actionItem
Item xml | Item xsd | Item rsf

User needs to act on a single item in a list
3. actionButtonBar
Item xml | Item xsd | Item rsf

User needs to finalize an action on a view, or go to the next or previous steps in multi-step actions
filter
4. filterToggle
Item xml | Item xsd | Item rsf

User needs to expand or collapse a hierarchical list
5. filterSearch
Item xml | Item xsd | Item rsf

User needs to filter a collection by searching
6. filterViewSelect
Item xml | Item xsd | Item rsf

User needs to choose alternate displays of a list
input
7. inputFileUpload
Item xml | Item xsd | Item rsf

User needs to add a file to the system
8. inputSelect
Item xml | Item xsd | Item rsf

User needs to choose one or more alternatives
9. inputLongText
Item xml | Item xsd | Item rsf

User needs to add more than one line of text
10. inputRichText
Item xml | Item xsd | Item rsf

User needs to add rich text
11. inputText
Item xml | Item xsd | Item rsf

User needs to type in a line of text
12. inputCheck
Item xml | Item xsd | Item rsf

User needs to choose between a value and it's default (not selecting it)
13. inputCheckboxGroup
Item xml | Item xsd | Item rsf

User needs to select more than one value from a set of choices
14. inputRadioGroup
Item xml | Item xsd | Item rsf

User needs to select only one value from a set of choices
15. inputDoubleList
Item xml | Item xsd | Item rsf

User needs to populate one list with values from another and viceversa
layout
16. layoutViewContainer
Item xml | Item xsd | Item rsf

Outermost box in a given view
17. layoutNavPanel
Item xml | Item xsd | Item rsf

Parent of any navigational widget
18. layoutFlowPanel
Item xml | Item xsd | Item rsf

Fluid inlined panels
19. layoutHorizontalPanel
Item xml | Item xsd | Item rsf

Stacked panels in rows
20. layoutVerticalPanel
Item xml | Item xsd | Item rsf

Subpanels stacked in columns
21. layoutStackPanel
Item xml | Item xsd | Item rsf

Stacked subpanels - full contents of each panel can be made visible
22. layoutTabPanel
Item xml | Item xsd | Item rsf

Encompasses tabbed navigation of a deck
23. layoutDeckPanel
Item xml | Item xsd | Item rsf

Superimposed collection of panels - only one is visible at a time - navigated via the tabs in the parent layoutTabPanel
message
24. messageWarn
Item xml | Item xsd | Item rsf

System needs to let user know that a possible action has consequences
25. messageSuccess
Item xml | Item xsd | Item rsf

System needs to let user know that a complex action has been completed successfully
26. messageInfo
Item xml | Item xsd | Item rsf

System needs to let user know that a trivial action has been completed successfully
27. messageStep
Item xml | Item xsd | Item rsf

System needs to let user know where she is in a sequential process
28. messageStepSequence
Item xml | Item xsd | Item rsf

System needs to let user know where she is in a sequential process, with reference to other steps
29. messageValidationErrorGlobal
Item xml | Item xsd | Item rsf

System needs to generally alert user that an action is missing something.
30. messageValidationErrorItem
Item xml | Item xsd | Item rsf

System needs to indicate to the user what element needs attention to complete an action, after a failure
31. messageInstruction
Item xml | Item xsd | Item rsf

System needs to display some information to user
32. messagePanelAlert
Item xml | Item xsd | Item rsf

System needs to notify users about a sytem-wide event
33. messagePanelError
Item xml | Item xsd | Item rsf

Message to display when there has been a system error
navigation
34. navToolBar
Item xml | Item xsd | Item rsf

Menu for navigating between sections of a given tool.
35. navLinkList
Item xml | Item xsd | Item rsf

Vertical navigation list
36. navPageList
Item xml | Item xsd | Item rsf

Group of controls for paging through a sequence of pages
37. navAlphaIndex
Item xml | Item xsd | Item rsf

Alternative paging mechanism when first column in list is alphabetically sorted
38. navBreadCrumb
Item xml | Item xsd | Item rsf

Breadcrumb display when navigating a hierarchy
39. navItem
Item xml | Item xsd | Item rsf

Group of controls for paging through a sequence of items
structure
40. structureHeader
Item xml | Item xsd | Item rsf

Top most header
tabular
41. tableItemSummary
Item xml | Item xsd | Item rsf

Item display grid
42. tableHierarchical
Item xml | Item xsd | Item rsf

Table holding a list of items in a hierarchical relationship
43. tableAction
Item xml | Item xsd | Item rsf

Table with inputs inside of it to perfom actions on more than one item at the time
44. tableFlat
Item xml | Item xsd | Item rsf

Sortable flat table
widget
45. widgetAttachList
Item xml | Item xsd | Item rsf

Listing of attachments associated with an item.
46. widgetCollapsibleSection
Item xml | Item xsd | Item rsf

Block enclosing a collapsible section and the control that toggles it
47. widgetTree
Item xml | Item xsd | Item rsf

Tree view of a hierarchical structure (like a file system)
48. widgetTabMenu
Item xml | Item xsd | Item rsf

Tab menu

The items in the html directory are generated via a transformation of the items in the sak-elements directory. Make your edits in the later.

If you add any new elements, add the element as well to the element list

Element list

action

filter

input

layout

message

navigation

structure

tabular

widget