40 peter korn light weight ui toolkit

527 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
527
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

40 peter korn light weight ui toolkit

  1. 1. Mobile Accessibility with theJava Lightweight UI ToolkitPeter Korn, Accessibility Principal AEGIS Workshop and International Conference, Brussels
  2. 2. LWUIT INTROAEGIS Workshop and International Conference, Brussels
  3. 3. What is LWUIT?Lightweight User Interface Toolkit● Advanced, lightweight UI library● Compelling UI ● Consistent across different devices● For todays handsets (and more ...)● Portable ● MIDP, Blackberry, Android, CDC, SE, TV, ...● Inspired by Swing● Tools support● Open Source! and International Conference, Brussels AEGIS Workshop
  4. 4. LWUIT: Key BenefitsEasy Development and Deployment● Rapid development ● Familiar API ● Clean & simple● Easy deployment ● One jar, many devices● Consistent & flexible ● Customizable, extensible● “Filthy Rich” UI● Brand-able AEGIS Workshop and International Conference, Brussels
  5. 5. LWUIT: Key FeaturesRich Functionality● Swing-like MVC● Layouts● Fonts● Rich widgets● HTML widget● 3D & SVG integration● Touch screen support● Animations & transitions● PluggableWorkshop and Internationaltheming AEGIS Look & Feel, Conference, Brussels
  6. 6. ACCESSIBILITY: THE BASICS AEGIS Workshop and International Conference, Brussels
  7. 7. Access Requirements for LWUITWhat needs to be there to support users with disabilities● Needs to be operable from the keyboard (by someone who can’t use a touchscreen) ● LWUIT already has full phone keyboard operability● Needs to support a variety of themes for folks with poor vision – e.g. “high contrast”, “large print” ● LWUIT already themeable● Needs to support an accessibility API for interoperability with assistive technologies AEGIS Workshop and International Conference, Brussels ●
  8. 8. Accessibility API requirementsIndustry consensus on a “sufficient accessibility API”● Expose detailed information about UI components ● Role, state(s), boundary, name & desc. ● Min/max/current value of anything that takes a value (e.g. slider) ● Text contents, attributes, boundary of all text on the display ● Relationships of UI components with each other; including tabular● Fire events when things happen to UI components and International Conference, Brussels AEGIS Workshop
  9. 9. Goals and Constraints● Minimal impact on phones that arent running AT● Minimal impact on LWUIT API (only add something if we really need to)● Run with existing LWUIT apps● Minimal runtime impact for accessibility metadata (e.g. name of icons, associating labels with text fields)● Support native AT, support Java AT AEGIS Workshop and International Conference, Brussels
  10. 10. Roles● LWUIT base components mapped to ARIA roles: ● Roles are determined by: – If a “role” client property is assigned, then it overrides everything else – instanceof checks: e.g. if component is TextArea: its role is TEXTBOX – UIID checks: e.g. if the component is a Dialog, then if its UIID is “Menu” its role is MENU (otherwise its role is DIALOG) – Hierarchy checks: e.g. if grandparent of a component is a Tabs class then it is either a TAB or a TABPANEL (according to class and UIID) AEGIS Workshop and International Conference, Brussels
  11. 11. Attributes or States● LWUIT base components get some attributes inherently ● The user can specify attributes in the components client properties. These will override everything. ● Attributes are determined by base component states. For example: – aria-disabled – by isEnabled() – aria-visible – by isVisible() – aria-checked – by isSelected() – aria-expanded, aria-setsize, aria-posinset, aria- level – Workshop and International Conference, Brussels AEGIS for tree
  12. 12. ARCHITECTUREAEGIS Workshop and International Conference, Brussels
  13. 13. Architecture – Event Bus Application Event Bus AT LWUIT App Handler AT Broker app Event Bus LWUIT AT app AT Handler Broker● The Event Bus listens on 2 TCP/IP ports, one for ATs and one for applications ● The Bus opens an AppHandler/ATHandler instance for each app/AT ● ATHandler listens to AT queries, and forward relevant App events to the AT AEGIS Workshop and International Conference, Brussels ●
  14. 14. Architecture – AT Application Event Bus AT LWUIT App Handler AT Broker app Event Bus LWUIT AT app AT Handler Broker● ATBroker provides for AT developers event listeners and query methods, and on the other hand communicates with the Bus via TCP/IP (Or IMC in the future)● The AT can signal (via the ATBroker) to which events it would like to listen AEGIS Workshop and International Conference, Brussels
  15. 15. Architecture – Application Application Event Bus AT LWUIT App Handler AT Broker app Event Bus LWUIT AT app AT Handler Broker● The broker once started with Broker.init(), starts polling the application UI.● Once a new Form comes up, it adds itself (and helper objects) as listeners to all components in the UI.● In additionWorkshop and Internationalchanges to the UI for AEGIS it polls other Conference, Brussels
  16. 16. Packages● accessibility.common – a common package used by all 3 runtimes (AT/App/Bus) for a unified way of serializing event objects. Includes: ● AEvent – the base event class. Basically serializes the event type and a queryId. AEvent can also be a query or response (Considering elaborating the class structure) ● Other events: RegisterEvent (App/AT identification), FocusEvent, ComponentQuery (queries component states/children etc.), StatesResponsesInternational Conference, Brussels queries) AEGIS Workshop and (Returns component
  17. 17. Code Samples: Enabling Access● Making a LWUIT app accessible is very easy, simply add to your midlet: Broker.init(“App Name”);● Notes: ● This should be added after the Display.init(midlet) call. ● Your app should use the ATBroker project ● This applies to the prototype only, when the accessibility technology will be integrated into OJWC, There would be no need to explicitly initialize the broker, it would be done by LWUIT. AEGIS Workshop and International Conference, Brussels
  18. 18. Code Samples: Custom Properties● Most ARIA properties are determined automatically by the Broker.● However, some custom components may require setting various properties● Example: Lets say that we have a custom component that needs to relay the information that it has 6 items: putClientProperty(Attribute.getAttName(Attribute.ARI A_SETSIZE), 6);● Notes: ● AEGIS Workshop and International Conference, Brussels
  19. 19. Code Samples: Setting names● Another way of adding accessibility info is by using: component.setLabelForComponent(Label componentLabel); ● This was created in LWUIT for other uses. ● It is especially useful for components that don’t have a defined name (For example TextArea/Field vs. Label/Button)● Example: Label nameLabel = new Label(“Name:”); TextField nameField = new TextField(); AEGIS Workshop and International Conference, Brussels
  20. 20. Code Samples:ListCellRenderers● Work is needed for custom list cells ● Set the appropriate Role for the cell ● Set the appropriate Name, Description ● Ensure correct Selection, item count● Example from ScrollDemo.java: public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected) { Contact person = (Contact) value; name.setText(person.getName()); email.setText(person.getEmail()); AEGIS Workshop and International Conference, Brussels
  21. 21. Code Samples: ListCellRendererspublic ComponentgetListCellRendererComponent(List list, Objectvalue, int index boolean isSelected) { Contact person = (Contact) value; name.setText(person.getName()); email.setText(person.getEmail()); pic.setIcon(person.getPic());putClientProperty(Attribute.ATT_NAMES[Attribute.ROLE], new Integer(Role.LISTITEM)); AEGIS Workshop and International Conference, Brussels
  22. 22. Code Samples: AT● Writing an assistive technology is also quite easy.● First, initialize the ATBroker: ATBroker.getInstance().init(midlet,"AT Name");● Implement the relevant Listener ● For focus for example, implement AFocusListener that gets called on its focusGained method. ● Other listeners: AEGIS Workshop and International Conference, Brussels – AHierarchyListener, ADataChangeListener,
  23. 23. Code Samples: ATimport accessibility.at.AFocusListener;import accessibility.at.ATBroker;import accessibility.common.FocusEvent;import javax.microedition.midlet.MIDlet;importjavax.microedition.midlet.MIDletStateChangeException;public class SimpleATMIDlet extends MIDletimplements AFocusListener { protected WorkshopstartApp() throws AEGIS void and International Conference, Brussels
  24. 24. Monkey ApplicationScans all UI components and provides details about them● Demonstrates the ability for AT to query entire UI hierarchy● Also a great accessibility debugging tool AEGIS Workshop and International Conference, Brussels
  25. 25. DEMOSAEGIS Workshop and International Conference, Brussels

×