2009 Marty Hall. The Dojo JavaScript Toolkit j p. Part III: Rich GUIs with Dijit. (
Dojo 1.3 Version). ( j. ) Originals of Slides and Source Code for Examples:.
© 2009 Marty Hall
The Dojo j JavaScript p Toolkit Part III: Rich GUIs with Dijit ((Dojo j 1.3 Version)) Originals of Slides and Source Code for Examples: http://courses.coreservlets.com/Course-Materials/ajax.html p j Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
© 2009 Marty Hall
For live Ajax & GWT training, see training courses att http://courses.coreservlets.com/. htt // l t / Taught by the author of Core Servlets and JSP, More Servlets and JSP, JSP and this tutorial tutorial. Available at public venues, or customized versions can be held on-site at yyour organization. g • Courses developed and taught by Marty Hall – Java 5, Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF, Ajax, GWT, custom mix of topics
Customized Java Training: http://courses.coreservlets.com/ • Courses developed and taught by EE coreservlets.com experts (edited by Marty)
– Spring, JSP, Hibernate/JPA, EJB3, Ruby/Rails Servlets, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location. Contact
[email protected] for details
Topics in This Section • • • • • •
What Dijit provides Configuring pages to use Dijit Declarative vs. programmatic dijit creation The importance of dijit.byId Survey of simple components Survey of complex components
5
© 2009 Marty Hall
Introduction Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
Overview of Dijit • General – Large set of rich GUI components • Autocompleters, textfields that limit types or patterns of input, p , trees,, dialog g boxes,, sliders,, spinners, p , jjQuery-like y layout containers, trees, menus, color palettes, etc.
– Much more extensive than jQuery UI
• Creating components declaratively
• Creating components programmatically new dijit.form.ValidationTextBox( dijit form ValidationTextBox( {id: "ssn-box-2", regExp: "\\d{3}-\\d{2}-\\d{4}" … }, "div-id"); 7
Downloading and Installation • Download (applies to all of Dojo) – http://download.dojotoolkit.org/ – Choose “Download latest Stable Release”, then dojo-release-x.y.z.zip dojo release x.y.z.zip or dojo-release-x.y.z.tar.gz dojo release x.y.z.tar.gz
• Installation – Unzip release file, creating 3 subfolders: dojo, dijit, dojox • Load dojo.js, then use dojo.require for each dijit type
– Copy 3 folders to WebContent/scripts of Eclipse project
• Online documentation – http://dojotoolkit.org/docs – http://docs.dojocampus.org/dijit/index • Bookmark this site; it is hard to find from top-level documentation page 8
© 2009 Marty Hall
Basics Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
Setup • Load dijit style sheet – • Three bundled themes: soria (richest), tundra (medium), nihilo ((simplest). p ) Can make yyour own variations. • Load this before dojo.js
– • Needed because all styles are under .soria, soria so Dijit styles won’t interfere with yours (unlike GWT!)
• Load dojo.js with “parseOnLoad: true”
• Use U dojo.require d j i for f each h Dijit type t – dojo.require("dijit.form.ValidationTextBox"); 10
Defining Components Declaratively • Idea – Use U HTML markup k with i h element l similar i il to final fi l result l – Specify dojoType atttribute and Dijit-specific attributes •
– On page load, Dojo parses the attributes and replaces the element l with i h the h Dijit Diji version i • Requires • Requires dojo.require("dijit…ComponentType");
• Notes N t – Your pages will no longer validate as standard XHTML – Dijit event handling attributes use camel case (onClick) – Parser usually gives helpful error messages • Use Firebug to check syntax errors 11
Defining Components Programmatically • Idea – Call new dijit…ComponentType(options, id) • options is anonymous object with property names that match attribute names in declarative version • id designates place (often div or span) where component will be inserted
– Example new dijit.form.DateTextBox( { id: "date-box-2", required: true }, "DateTextBox id" ); "DateTextBox-id"
• Notes
12
– Trigger call to new dijit…ComponentType(options, dijit ComponentType(options id) from dojo.addOnLoad – You also need dojo.require("dijit…ComponentType");
Examples: Setup App-specific style sheet. Load before dojo.js. if you declare < App-specific JavaScript. JavaScript Will do dojo.require for each component type. If components created programmatically, will trigger creation from dojo.addOnLoad. 13
Example: Simple Styled Button (Declarative Creation) • HTML Click Me! /
• JavaScript J S i t dojo.require("dijit.form.Button"); function buttonTest() { alert("I was clicked"); }
14
Example: Simple Styled Button (Programmatic Creation) • HTML
• JavaScript dojo require("dijit dojo.require( dijit.form.Button form Button"); );
15
dojo.addOnLoad(function() { makeButton(); }); function makeButton() { new dijit.form.Button({ dijit f B tt ({ label: "Click Me!", onClick: buttonTest }, "Button-id" id ); }
Simple Styled Button: Results
16
Using dijit.byId • Idea – Calling dijit.byId("some-id") returns a Dijit object representing the component. You can then call various Dijit-specific Dijit specific functions like hide() and show() – In contrast, dojo.byId("some-id") returns the DOM node containing the Dijit object. You can only call general DOM methods th d on thi this result. lt So, S avoid id calling lli dojo.byId d j b Id on Dijit component ids!
• Examples – dijit.byId("Dialog-id").show(); • Pops up the specified Dialog
– dojo.byId("Dialog-id").show(); • Crashes: no “show” method on general DOM nodes 17
Example: Dialog (Declarative Creation: HTML)
Do you really want to delete all files on your PC?
Yes No
• Note
18
– Contents of the div are automatically hidden on page load, and not shown until “show” is called. At that point, the div is given absolute positioning and made visible.
Example: Dialog (Declarative Creation: JavaScript) dojo.require("dijit.Dialog"); Called byy the button in the original page.
function showDialog() { dijit.byId("Dialog-id").show(); } function deleteFiles() { alert("All l t("All fil files d deleted."); l t d ") dijit.byId("Dialog-id").hide(); }
19
Called by the buttons in the Dialog.
function deleteFilesAnyway() { alert("Error preserving files. " + "All files deleted anyway."); dijit.byId("Dialog-id").hide(); }
Declarative Dialog: Results
20
Example: Dialog (Programmatic Creation: HTML) Show Dialog
• Notes – No placeholder at all for Dialog Dialog. It is created and inserted entirely from JavaScript. – For static dialogs, the HTML-markup (declarative) approach is best. But building dialogs in JavaScript let you display dynamic values.
21
Example: Dialog (Programmatic Creation: JavaScript) dojo.require("dijit.Dialog");
22
function createDialog() { var dialogTitle = "Lucky Lucky Numbers for " + new Date(); var dialogContent = "
" + " - " + Math.random() () + "
" / + " - " + Math.random() + "
" + " - " + Math.random() + "
" + "
"; var dialog = new dijit.Dialog({ title: dialogTitle, content: dialogContent }); dialog.show(); }
Programmatic Dialog: Results
23
© 2009 Marty Hall
Simple Input p Components Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.
DateTextBox • Idea – Textfield to collect a date. If user clicks inside textbox, a popup calendar is displayed.
• Main properties – required • Are empty p y values p prohibited? Default=false
– value • Initial value. Default=current date
• Related components – TimeTextBox, CurrencyTextBox, NumberTextBox, ValidationTextBox ((covered next)) 25
DateTextBox (Declarative Creation) • HTML /
• JavaScript dojo.require("dijit.form.DateTextBox");
26
DateTextBox (Programmatic Creation) • HTML
• JavaScript dojo require("dijit dojo.require( dijit.form.DateTextBox form DateTextBox"); );
27
dojo.addOnLoad(function() { makeDateTextBox(); }); function makeDateTextBox() { new dijit.form.DateTextBox({ dijit f D t T tB ({ id: "date-box-2", required: true }, "DateTextBox-id" id ); }
DateTextBox (Results)
28
ValidationTextBox • Idea – Textfield with associated regular expression. If input fails to satisfy regular expression, warning message displayed.
• Main properties – regExp • The regular g expression p input p must match
– invalidMessage • Message Dojo will pop up if input fails to match
– Required • Are empty values prohibited?
• Related components p 29
– TimeTextBox, CurrencyTextBox, NumberTextBox, DateTextBox (covered earlier)
ValidationTextBox (Declarative Creation) • Goal – Accept Social Security Number in form XXX-YY-ZZZZ
• HTML