From Basic HTML to Accessible Web 2.0 Using Dojo – Part 1
Contents
1. function setResidenceType theRadio var on document getElementById onCampus var off document getElementById offCampus var show hide if theRadio id on amp amp theRadio checked show on show onCampus hide off Jelse if theRadio id off amp amp theRadio checked show off hide on show style display block hide style display none so ere lt input type radio id on name resides value onclick setResidenceType this gt lt input type radio id off name resides value false onclick setResidenceType this checked gt true Client Side Validation of Form Add validation on page load if scripting is enabled lt script type text javascript gt function setup var loc document getElementById location loc style display block document getElementById cardReg onsubmit validate lt script gt Client Side Validation Script function validate var message Please correct the following fields var isClean true var bContinue true var theForm document getElementById cardReg var test for var i 0 i lt theForm length i field theForm elements i switch field id case fname case lname case street case city case campusAddr var labels document getElementsByTagName label if field clientHeight gt 0 amp amp field value for var j 0 j lt labels length2. option gt Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form dijit form Validation TextBox Checks to make sure user input is valid according to specified criterion Required attribute Sets ARIA required attribute Regular expression On error will Display error icon Change background color Set ARIA invalid property Display error message via tooltip if provided Displays prompt message if provided StudentlD field as dijit form Validation TextBox From lt input name StudentId id studentId type text size 9 gt example A123 4567 Plus code in validate function TO lt input name studentId id studentId type text style width 10em dojoType dijit form ValidationTextBox regExp A Z d 3 d 4 required true invalidMessage Invalid Student ID A123 1234 promptMessage A123 1234 gt Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form Use dijit form Form Perform validation of contained widgets Convert form to object or json
3. amp nbsp amp nbsp To lt label for fname class leftLabel gt First Name lt label gt lt input dojoType dijit form TextBox trim true propercase true id fname name fname type text style width 10em gt Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form Use dijit form FilteringSelect Like an HTML Select Type ahead filtering to modify the options displayed Only valid selections allowed dijit form ComboBox allows any value Can be used with a dojo data store data stores will be briefly discussed in part 2 Size using style attribute on widget Switch to dijit form FilteringSelect From lt select id state name state gt lt option value AL gt Alabama lt option gt lt option value AK gt Alaska lt option gt lt option value AZ gt Arizona lt option gt lt option value AR gt Arkansas lt option gt lt option value CA selected gt California lt option gt To lt select id state name state dojoType dijit form FilteringSelect gt lt option value AL gt Alabama lt option gt lt option value AK gt Alaska lt option gt lt option value AZ gt Arizona lt option gt lt option value AR gt Arkansas lt option gt lt option value CA selected gt California lt
4. dijit form Validation TextBox Use dijit form Form Move to Web 2 0 with Dojo Get Dojo TAYO 0 R D oJ 0 Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form Get Dojo Install Dojo on your server Download from http dojotoolkit org downloads Once development is complete consider creating your own optimized build http dojocampus org content tag build Use Dojo from your IDE Example Eclipse with Aptana plugin from Apanta page select create new project link adds projectNamel lib dojo dojo projectName lib dojo dijit projectName lib dojo dojox Use Dojo from CDN AOL lt SCRIPT TYPE text javascript SRC http o aolcdn com dojo 1 2 dojo dojo xd js gt lt SCRIPT gt Google lt SCRIPT TYPE text javascript SRC http ajax googleapis com ajax libs dojo 1 2 dojo dojo xd j gt lt SCRIPT gt Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form Adding Dojo lt style type text css gt import lib dojo dojo resources dojo css import resources calwac css lt style gt lt required dojo js gt lt script type t
5. for Ajax submittal Using dijit form Form Update dijit form TextBox fields to dijit form Validation TextBox and add required attribute First Name Last Name Street City required true Campus Address required false since it is not shown on page load Update setResidenceType to update required attribute as hide required false and show required true fields Remove original validate function since it is no longer needed Add reset button lt button type reset gt Reset lt button gt Add form event handlers for onsubmit and onreset functions Advanced use Ajax and server functions to evaluate that the City is valid for the State selected not implemented in demo Modify form control to dijit form Form lt form id cardReq encType multipart form data action fakeSubmit php method post dojoType dijit form Form gt lt script type dojo method event onSubmit gt var bSubmit true if this validate bSubmit confirm Form is valid press OK to submit else alert Form contains invalid data Please correct bSubmit false return bSubmit lt script gt lt script type dojo method event onReset gt var bReset confirm reset Form if bReset reset back to off campus address dojo byId off checked true setResidenceType dojo byId off return bReset lt script gt Update setResidenceType Function function s
6. j if labels j htmlFor field id a bit dangerous assuming the first node of label is the one I want message n labels j firstChild nodeValue break isClean false break continued Client Side Validation Script continued case studentId var idExp new RegExp A Z d 3 d 4 g var idExp A Z 0 9 3 0 9 4 if lidExp test field value message n Studend ID isClean false break case email not well tested obtained from http www regular expressions info email html var testExp new RegExp A Z0 9 A Z0 9 A Z 2 4 i if testExp test field value message n Email isClean false break case zip var zipExp 0 9 5 if zipExp test field value message n Zip isClean false break end switch end for loop if isClean false alert message return isClean Testing with JAWS 10 and Firefox 3 Move to Web 2 0 Using Dojo Improve Look and Feel Prompts about data entry format Visual error indication Error messages Improve Accessibility Simplify Validation Learn Dojo and Dijit Basics Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use
7. Button To From lt fieldset gt lt legend gt Residence Location lt legend gt lt label for on gt On Campus lt label gt lt input type radio id on name resides value true onclick setResidenceType this gt lt label for off gt Off Campus lt label gt lt input type radio id off name resides value false onclick setResidenceType this checked gt lt fieldset gt lt fieldset gt lt legend gt Residence Location lt legend gt lt label for on gt On Campus lt label gt lt input type radio dojoType dijit form RadioButton id on name resides value true onclick setResidenceType this gt lt label for off gt Off Campus lt label gt lt input type radio dojoType dijit form RadioButton id off name resides value false checked onclick setResidenceType this gt lt fieldset gt Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form dijit form TextBox Basic lt input type text gt form control Has rudimentary text formatting Trim Propercase Sized via style attribute Use dijit form TextBox From lt label for fname class leftLabel gt First Name lt label gt lt input id fname name fname type text size 15 gt
8. From Basic HTML to Accessible Web 2 0 Using Dojo Part 1 Becky Gibson Web Accessibility Architect Dojo Committer Agenda Brief Introduction to Dojo Dojo Accessibility Review a Basic HTML Form Progressive enhancement Client Side Validation Enhancing with Dojo Include Dojo Specify a Theme Including Dojo User Interface Elements Dijit Converting UI Elements to Dijit Dijit Validation Review amp Questions Dojo What is it Open Source JavaScript Toolkit Easy Ajax Data Binding Full event system Browser abstraction layer User Interface Widgets Dual Licensed Academic Free License v2 1 BSD License Dojo 1 0 available in November 2007 1 1 in March 2008 Dojo 1 2 released October 2008 1 2 3 in December 2008 Dojo 1 3 planned for Q1 2009 Core Widget Set dijit Accessible Internationalized Customizable Look and Feel Developer Documentation API User Manual Supported Browsers Firefox 2 Firefox 3 IE 6 IE 7 IE 8 support in progress Safari 3 Data Binding Tree Grid Select Grid is in dojox dojo extensions Dojo Core Widgets Dijit Form Widgets Layout Widgets Advanced Widgets IBM Emerging Technologies Drop Down x Combo yr v Toggle Form Widgets Button Dropdown Button Combo Button Checkbox Radio ComboBox Filtering Select Multi Select Tex
9. Library card is required to remove any materials from the Library Please complete all information You will receive email confirmation on receipt of your request An additional email will be sent when your card is ready for pickup at the Library r Residence Location On Campus Off Campus First Name Last Name Campus Address Student ID example A123 4567 Email Address Submit On Campus radioButton is selected and Campus Address field is displayed Web 2 0 with Dojo Part1 2009 IBM Corporation Using Progressive Enhancement RadioButtons are within a div styled with display none lt div id location style display none gt lt fieldset gt lt legend gt Residence Location lt legend gt lt label for on gt On Campus lt label gt lt input type radio id on name resides value true onchange setResidenceType this gt lt label for off gt Off Campus lt label gt lt input type radio id off name resides value false onchange setResidenceType this checked gt lt fieldset gt lt div gt Display Radio Buttons if Scripting Enabled RadioButtons are displayed on page load if scripting is enabled lt script type text javascript gt function setup var loc document getElementById location loc style display block lt script gt lt head gt lt body onload setup gt RadioButton onclick to display appropriate fields
10. Web 2 0 with Dojo Get Dojo TAYO 0 R D10 10 Add Dijit Theme Use Dojo addOnLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form Using dojo addOnlLoad From function setup var loc document getElementById location loc style display block document getElementById cardReg onsubmit validate lt body onload setup To le Coy Ko B Xe lo N Ro Ye Ni function var loc document getElementById location loc style display block dojo byId cardReq onsubmit validate lt body class soria gt Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form Add First Dijit Reguires lt script type text javascript gt dojo require dijit form CheckBox dojo require dijit form TextBox scan page for widgets and instantiate them dojo require dojo parser lt script gt Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form Use dijit form Radio
11. ess http docs dojocampus org DHTML Style Guide Draft http dev aol com dhtml_style_guide Dojo Books in Print Dojo The Definitive Guide by Matthew Russel O Reilly Press Dojo Using the Dojo JavaScript Library to Build Ajax Applications by James E Harmon Addision Wesley Developer s Library Mastering Dojo by Rawld Gill Craig Riecke Alex Russel Pragmatic Press
12. etResidenceType theRadio var on document getElementById onCampus var off document getElementById offCampus var show hide if theRadio id on amp amp theRadio checked show onCampus show on hide off dijit byId street attr reguired false dijit byId city attr reguired false dijit byId zip attr reguired false dijit byId state attr reguired false dijit byId campusAddr attr reguired true jelse if theRadio id off amp amp theRadio checked show off hide on dijit byId street attr required true dijit byId city attr required true dijit byId zip attr required true dijit byId state attr required true dijit byId campusAddr attr reguired false show style display block hide style display none Review Move to Web 2 0 with Dojo Get Dojo Add Dojo Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form Using our Form with JAWS 10 and Firefox 3 simple Dojo Enhancements Simple Immediate Validation of input Visual icon Background Color Change Error Message ARIA Support Prompt Message Accessible Tooltip to assist with input format Type ahead Filtering Select for faster selection Validation of regular expression w o addi
13. ext javascript src lib dojo dojo dojo js djConfig isDebug true parseOnLoad true gt lt script gt Useful Dojo Methods dojo reguire add dojo and dijit resources to your page dojo addOnLoad defers script execution until all the HTML is loaded dojo byld shortcut to document getElementByld dijit byld get a reference to a dijit widget by id dojo connect connecting event handlers dojo attr standard mechanism for getting setting attributes On a node Move to Web 2 0 with Dojo Get Dojo TAYO 0 MN D oJ 0 Add Dijit Theme Use Dojo addOnlLoad Add Dijit Requires Use dijit form RadioButton Use dijit form TextBox Use dijit form FilteringSelect Use dijit form Validation TextBox Use dijit form Form IBM Emerging Technologies Dijit Themes Enabled se Simple tundra i ja Disabled lt Simni Enabled Simple soria Disabled Enabled nihilo Disabled 30 Web 2 0 with Dojo Part 1 Drop Down ak Simple Simple Comba v Toggle Cut Copy Paste Drop Down Combo ex iw Toggle Comba Toggle Drop Down 7 Combo lv Toggle Combo Toggle 2009 IBM Corporation Add Dijit Theme lt style type text css gt import lib dojo dojo resources dojo css ADD DIJIT THEME import lib dojo dijit themes soria soria css import resources calwac css lt style gt Move to
14. igured to serve up CalWac directory Parallels Desktop to run Windows Firefox 3 in Windows JAWS 10 in Windows Basic HTML Form Scripting Off TACT CD POTEKI Request a Library Card A valid Library card is required to remove any materials from the Library Please complete all information You will receive email confirmation on receipt of your reguest An additional email will be sent when your card is ready for pickup at the Library First Name Last Name Street Address City State California Zip Student ID example A123 4567 Email Address Submit IBM Emerging Technologies Basic HTML Form Scripting On EE TER EET Request a Library Card A valid Library card is required to remove any materials from the Library Please complete all information You will receive email confirmation on receipt of your request An additional email will be sent when your card is ready for pickup at the Library r Residence Location On Campus Off Campus First Name Last Name Street Address City State California Zip Student ID example A123 4567 Email Address Submit RadioButton for selection of on or off campus location Default is off campus and street city state and Zip fields are displayed Web 2 0 with Dojo Part1 2009 IBM Corporation IBM Emerging Technologies Basic HTML Form Scripting On Request a Library Card A valid
15. tbox Currency amp Integer Validation Textboxes Resizable Textarea Slider Integer Spinner Inline Editbox Dropdown Calendar g o am er bs web 2 0 with Dojo Pat i S BM Emerging Technologies Layout Widgets Accordion Container moe Content Pane Dojo Tree from Store Dialog Calendar Border Container October M T W Tab Container Title Pane s ee 12 13 14 15 18 18 20 21 22 ZA 24 5B 27 ZE 28 30 Al 2007 2008 2009 7 Web2owith Dojo Parti ZI M IBM Emerging Technologies Advanced Widgets imi E mini Color Palette TT en Context Menu HEE E EEE Rich Text Editor mmaaaaana Progress Bar Toolbar Tooltip Tooltip Dialog Tree 8 Web 2 0 with Dojo Part 1 2009 IBM Corporation Accessibility Support in Dojo Core Widgets 1 0 x Keyboard support in IE 6 IE 7 Firefox 2 Firefox 3 Screen reader support in FF 2 8 FF 3 with JAWS 9 or later Implemented using Accessible Rich Internet Applications ARIA Low Vision Support Windows high contrast support in IE 6 IE 7 FF2 FF3 No fixed font sizes Support Images off in FF Low Vision support allows claim of equivalent facilitation for US Section 508 requirement to run with CSS turned off Starting with HTML Becky s Setup MacBook Pro Eclipse with Aptana and Dojo 1 2 plugin XAMPP Apache Server with PHP Conf
16. tional Scripting Dojo Features Used dojo js dojo require dojo byld dojo addOnLoad Dijit Widgets dijit form Validation TextBox dijit form RadioButton dijit form Button dijit form FilteringSelect diijit form Form lt script type dojo method gt Additional Dojo Features to Consider Field validation via Ajax and server side methods Is city valid for selected state ls zip valid for selected city Is student ID in good standing Use of additional dijit widgets dijit form Date TextBox for birthdate dijit form NumberSpinner for year of graduation Summary Dojo can enhance your HTML pages Dojo is easy Use as much or as little of Dojo as you need Progressively include more Dojo features Move to Web 2 0 today with Dojo Resources Beckys Accessibility Presentations and Papers http www weba11y com Presentations presentations html ARIA Roadmap Best Practices Primer Specifications http www w3 org wai pf Mozilla Developer Center Firefox ARIA Information http developer mozilla org en docs Accessible_ DHTML Mailing list for ARIA issues http lists w3 org Archives Public wai xtech Dojo Home http www dojotoolkit org Dojo Campus http dojocampus org Book http www dojotoolkit org book dojo book 1 0 API Reference http api dojotoolkit org 1 3 Book in progr
Download Pdf Manuals
Related Search