Component Functionality Checklist

Owned by Jonathan Hung
Last updated: Mar 17, 2011Version comment
3 min read

* = in a demo, otherwise demo uses default behaviour.

PROGRESS

  • Events: on start and end.
  • show, hide, update, refresh
  • Customization through options: selectors, UI strings, animation, events, min width of progress bar, delay before hiding, speed of bar animation between update points. Animate direction: forward, back, both (what does it mean for both?),

INLINE EDIT

  • 3 configurations: Simple, dropdown, rich
  • customization of styling,
  • submit on enter
  • custom renderer: binds ui elements with things that happen.
  • blur handler binder: customize blur behaviour, i.e. use deadman's blur
  • select on edit
  • default text
  • tooltip component to use
  • tooltip text
  • tooltip ID
  • tooltipDelay

SIMPLE INLINE EDIT

  • single and multiple inline edits

DROPDOWN INLINE EDIT

  • no options documented currently.

RICH TEXT INLINE EDIT

  • Uses CKEditor, TinyMCE, or any rich text editor provided by user.
  • How do you use a rich edit other than these two?

REORDERER

  • use any container
  • 4 pre-configurations: list, grid, layout, images
  • Events: keyboardDropwarning, on select, on move, after move, on hover, and on refresh
  • Specify what is movable, selectable.
  • Customize drop targets, grab handles, and drop warnings.
  • merge policy (question) what is this?
  • styles
  • multiple keysets
  • drag avatar (the thing dragged)
  • configurable wrapping at the end of a container.

GRID REORDERER

Features:

  • A convenient packaging of the generic Reorderer component for grid layouts. Adds grid specific behaviour like understanding of item positions and geometry, and handling of navigation keystrokes.
  • Specify whether something is: movable, draggable, and selectable
  • specify drop area(s)
  • customizable drag bars
  • display a drop warning
  • keyboard navigation wrapping
  • fires multiple events and support for custom listeners: onHover, onMove, onSelect, and more
  • customizable styles (i.e. drag avater)
  • customizable keysets used for navigation including modifier keys

IMAGE REORDERER

  • custom labels for images

LAYOUT REORDERER

  • specify column containers, modules, lock modules, grab handles, drop warning.

LIST REODERER

  • orientation: horizontal, vertical

PAGER

  • option to be data-driven (will be default in the future)
  • support for events: add your own listeners and customize behaviour
  • customization: styling (of page links), text / strings, sorting of columns / results
  • control over appearance and presentation of list of page links, previous and next links, summary text (i.e. "1 to 10 of 130 items"), and number of results to display per page
  • annotations for page links: tooltips to help preview and navigate.
  • two different page link presentation strategies: continuous, or gapped.

LIST REORDERER:
==============================================================

Features:

  • * make something movable, draggable, and selectable
  • * specify drop area(s)
  • display a drop warning
  • keyboard navigation wrapping
  • fires multiple events and support for custom listeners: onHover, onMove, onSelect, and more
  • * customizable styles (i.e. drag avater)
  • customizable keysets used for navigation including modifier keys
  • works for horizontal or *vertical lists

What's in it for Aegis?

  • reorder items in any list, and by extension, common web interfaces like menus, results from database queries, etc.
  • preserves list semantics.
  • play list, contact reordering, todo, speak order.
  • ability to use keyboard to rearrange content

Questions Demo Portal Pages should answer:

  • does it use the keyboard plugin?
  • when do you use one reorderer over the other?
  • what do the terms mean? i.e. modifiers, onHover, etc.

LAYOUT REORDERER:
==============================================================

Features:

  • * make something movable, draggable, and selectable
  • * specify layout caharacteristics like: # columns, movable and locked elements
  • * specify grab handles
  • fires multiple events and support for custom listeners: onHover, onMove, onSelect, and more
  • * display drop warning
  • keyboard navigation wrapping
  • customizable *styles, *avatars, *text, and keysets

What's in it for Aegis?

  • customize the layout to suit mode of consumption
  • ability to use keyboard to rearrange content

KEYBOARD PLUGIN:
==============================================================

Features:

  • make something activatable using Enter, Space, or any other key stroke (customization), and add custom behaviour when something activates
  • * make something selectable and customize what is done when selecting, entering, exiting, and more.
  • * make something tabbable and customize the tab order.

What's in it for Aegis?

  • make something that would otherwise be keyboard inaccessible, keyboard accessible.
  • enhance existing keyboard experience with additional interactions.
  • makes it easier to customize tab orders.
  • po

UPLOADER:
==============================================================

Features:

  • Multiple file upload
  • Progressive Enhancements / Graceful Degradation: Full featured for newer/supported browsers, compatibility for older browsers, and no Javascript modes.
  • Flash / No Flash support (question) - exactly what is this?
  • Customizable behaviour: support for multiple events and listeners (onUploadStart, onFileError, afterFileRemoved)
  • Customizable look and feel: use the default, or use your own (i.e. progress bar, file list view, strings)

What's in it for Aegis?

  • full keyboard accessible controls. ? (Appears to be broken Nov 3, 2010)

IMAGE REORDERER:
==============================================================

Features:

  • A convenient packaging of the Grid reorderer specific for a grid of images.
  • Specify whether something is: movable, draggable, and selectable
  • specify drop area(s)
  • display a drop warning
  • keyboard navigation wrapping
  • fires multiple events and support for custom listeners: onHover, onMove, onSelect, and more
  • customizable styles (i.e. drag avater)
  • customizable keysets used for navigation including modifier keys

What's in it for Aegis?

  • Same as grid reorderer?

Questions:

  • Why and how is this different from Grid? Can you use Grid instead of Image?

SIMPLE INLINE EDIT:
==============================================================

Features:

  • Quick, single line text edits without leaving the user's context of work.
  • Make any text editable (as long as it is in a proper container).
  • Customize behaviour of what happens before and after an edit.
  • Customizable appearance and edit controls.

TODO:
==============================================================

Uploader - incomplete
Grid Reorderer - in progress. Need to examine demo to see what is implemented.
Image Reorderer
Inline Edit
Pager
Progress

Feature:

  • Basic AT accessibility: