The Dojo JavaScript Toolkit j p Part III: Rich GUIs with Dijit - Custom ...

© 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