the dojjpo javascript toolkit part iii: rich guis with...

© 2009 Marty Hall

The Dojo JavaScript Toolkitj pPart III: Rich GUIs with Dijit

(Dojo 1.3 Version)( j )

Originals of Slides and Source Code for Examples:http://courses.coreservlets.com/Course-Materials/ajax.html

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.

p j

© 2009 Marty Hall

For live Ajax & GWT training, see training t htt // l t /courses at http://courses.coreservlets.com/.

Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial Available at public Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held on-site

at your organization.



y 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• Courses developed and taught by coreservlets.com experts (edited by Marty)

– Spring, Hibernate/JPA, EJB3, Ruby/Rails

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



Overview of Dijit

• General– Large set of rich GUI components

• Autocompleters, textfields that limit types or patterns of input, trees, dialog boxes, sliders, spinners, jQuery-like p , , g , , p , j ylayout containers, trees, menus, color palettes, etc.

– Much more extensive than jQuery UI

• Creating components declaratively• Creating components declaratively<input type="text" id="ssn-box-1"

dojoType="dijit.form.ValidationTextBox"regExp="\d{3}-\d{2}-\d{4}" … />

• Creating components programmaticallynew dijit form ValidationTextBox(new 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 or dojo-release-x.y.z.tar.gzdojo release x.y.z.zip or 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• 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



Setup

• Load dijit style sheet– <link … href="…/dijit/themes/soria/soria.css" …/>

• Three bundled themes: soria (richest), tundra (medium), nihilo (simplest). Can make your own variations.( p ) y

• Load this before dojo.js

– <body class="soria">• Needed because all styles are under soria so Dijit styles• Needed because all styles are under .soria, so Dijit styles

won’t interfere with yours (unlike GWT!)

• Load dojo.js with “parseOnLoad: true”<script src="./scripts/dojo/dojo.js" type="text/javascript"

djConfig="parseOnLoad:true"></script>

U d j i f h Dijit t• Use dojo.require for each Dijit type– dojo.require("dijit.form.ValidationTextBox");

10

Defining Components DeclarativelyDeclaratively

• IdeaU HTML k i h l i il fi l l– Use HTML markup with element similar to final result

– Specify dojoType atttribute and Dijit-specific attributes• <input type="text" id="date-box-1" • dojoType="dijit.form.DateTextBox"• required="true" />

– On page load, Dojo parses the attributes and replaces the l i h h Diji ielement with the Dijit version• Requires <script … djConfig="parseOnload:true">• Requires dojo.require("dijit…ComponentType");

N t• Notes– Your pages will no longer validate as standard XHTML– Dijit event handling attributes use camel case (onClick)Dijit event handling attributes use camel case (onClick)– Parser usually gives helpful error messages

• Use Firebug to check syntax errors11

Defining Components ProgrammaticallyProgrammatically

• 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

– ExampleExamplenew dijit.form.DateTextBox(

{ id: "date-box-2", required: true },"DateTextBox id" );"DateTextBox-id" );

• Notes– Trigger call to new dijit ComponentType(options id)Trigger call to new dijit…ComponentType(options, id)

from dojo.addOnLoad– You also need dojo.require("dijit…ComponentType");

12

Examples: Setup

<link rel="stylesheet"h f " / / t l "

App-specific style sheet.

href="./css/styles.css"type="text/css"/>

<link rel="stylesheet"

Standard Dijit style sheet. Other predefined options are tundra and nihilo. Load before dojo.js.

href="./scripts/dijit/themes/soria/soria.css"type="text/css"/>

<script src="./scripts/dojo/dojo.js" Required if you declare <script src ./scripts/dojo/dojo.jstype="text/javascript"djConfig="parseOnLoad:true"></script>

< i t " / i t /d j dijit j "

components in HTML.

<script src="./scripts/dojo-dijit.js"type="text/javascript"></script>

App-specific JavaScript Will do

13

App-specific JavaScript. Will do dojo.require for each component type. If components created programmatically, will trigger creation from dojo.addOnLoad.

Example: Simple Styled Button (Declarative Creation)(Declarative Creation)

• HTML<form action="#">

<button dojoType="dijit.form.Button" onClick="buttonTest">Click Me!</button>/

</form>

J S i t• JavaScriptdojo.require("dijit.form.Button");

function buttonTest() {alert("I was clicked");

}

14

Example: Simple Styled Button (Programmatic Creation)(Programmatic Creation)

• HTML<form action="#"><div id="Button-id"/></form>

• JavaScriptdojo require("dijit form Button");dojo.require( dijit.form.Button );

dojo.addOnLoad(function() {makeButton();makeButton();

});function makeButton() {

dijit f B tt ({new dijit.form.Button({ label: "Click Me!", onClick: buttonTest },

id"Button-id");

}15

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 functions like hide() and show()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 th d thi lt S id lli d j b IdDOM methods on this result. So, avoid calling dojo.byIdon Dijit component ids!

• ExamplesExamples– 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)(Declarative Creation: HTML)<div id="Dialog-id" dojoType="dijit.Dialog"

titl "C fi Fil D l ti ">title="Confirm File Deletion">Do you really want to delete all fileson your PC?<br/><button dojoType="dijit.form.Button"

onClick="deleteFiles">Yes</button><button dojoType="dijit.form.Button"<button dojoType dijit.form.Button

onClick="deleteFilesAnyway">No</button></div>

• Note– Contents of the div are automatically hidden on pageContents 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.

18

Example: Dialog (Declarative Creation: JavaScript)Creation: JavaScript)

dojo.require("dijit.Dialog");Called by the button in

function showDialog() {dijit.byId("Dialog-id").show();

}

ythe original page.

}

function deleteFiles() {l t("All fil d l t d ")alert("All files deleted.");dijit.byId("Dialog-id").hide();

}

Called by the buttons in the Dialog.

function deleteFilesAnyway() {alert("Error preserving files. " +

"All files deleted anyway.");dijit.byId("Dialog-id").hide();

}19

Declarative Dialog: Results

20

Example: Dialog(Programmatic Creation: HTML)(Programmatic Creation: HTML)

<form action="#"><button dojoType "dijit form Button"<button dojoType="dijit.form.Button"

onClick="createDialog()">Show Dialog</button></form>

• NotesNo placeholder at all for Dialog It is created and inserted– No placeholder at all for 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)Creation: JavaScript)

dojo.require("dijit.Dialog");

function createDialog() {var dialogTitle = "Lucky Numbers for " + new Date();Lucky Numbers for + new Date();

var dialogContent ="<ul>" +" <li>" + Math.random() + "</li>" +() /" <li>" + Math.random() + "</li>" +" <li>" + Math.random() + "</li>" +"</ul>";

var dialog = new dijit.Dialog({title: dialogTitle,content: dialogContent

});dialog.show();

}22

Programmatic Dialog: Results

23

© 2009 Marty Hall

Simple InputSimple Input Componentsp



DateTextBox

• Idea– Textfield to collect a date. If user clicks inside textbox, a

popup calendar is displayed.

• Main properties• Main properties– required

• Are empty values prohibited? Default=falsep y p

– value• Initial value. Default=current date

Related components• Related components– TimeTextBox, CurrencyTextBox, NumberTextBox,

ValidationTextBox (covered next)( )

25

DateTextBox(Declarative Creation)(Declarative Creation)

• HTML<input type="text" id="date-box-1"

dojoType="dijit.form.DateTextBox"required="true" />q /

• JavaScriptdojo.require("dijit.form.DateTextBox");

26

DateTextBox(Programmatic Creation)(Programmatic Creation)

• HTML<div id="DateTextBox-id"/>

• JavaScriptdojo require("dijit form DateTextBox");dojo.require( dijit.form.DateTextBox );

dojo.addOnLoad(function() {makeDateTextBox();makeDateTextBox();

});function makeDateTextBox() {

dijit f D t T tB ({new dijit.form.DateTextBox({id: "date-box-2",required: true },

id"DateTextBox-id");

}27

DateTextBox (Results)

28

ValidationTextBox

• Idea– Textfield with associated regular expression. If input fails

to satisfy regular expression, warning message displayed.

• Main properties• Main properties– regExp

• The regular expression input must matchg p p

– invalidMessage• Message Dojo will pop up if input fails to match

Required– Required• Are empty values prohibited?

• Related componentsp– TimeTextBox, CurrencyTextBox, NumberTextBox,

DateTextBox (covered earlier)29

ValidationTextBox(Declarative Creation)(Declarative Creation)

• Goal– Accept Social Security Number in form XXX-YY-ZZZZ

• HTML<i t t "t t" id " b 1"<input type="text" id="ssn-box-1"

dojoType="dijit.form.ValidationTextBox"regExp="\d{3}-\d{2}-\d{4}"invalidMessage="Numbers and dashes only"required="true" />

• JavaScript• JavaScriptdojo.require("dijit.form.ValidationTextBox");

30

ValidationTextBox(Programmatic Creation)(Programmatic Creation)

• HTML<div id="ValidationTextBox-id"/>

• JavaScriptdojo require("dijit form ValidationTextBox");dojo.require( dijit.form.ValidationTextBox );dojo.addOnLoad(function() {

makeValidationTextBox();});});function makeValidationTextBox() {

new dijit.form.ValidationTextBox({id: "ssn-box-2",

Since I am building string that will contain \d, I have to use \\d in the raw code.

id: ssn box 2 ,regExp: "\\d{3}-\\d{2}-\\d{4}",invalidMessage: "Numbers and dashes only",required: true },q },"ValidationTextBox-id"

);}31

ValidationTextBox: Results

32

Textarea

• IdeaT h d i ll fi d I i i ll i d– Text area that expands vertically to fit data. Initially sized to hold original text, but if user types in extra data, Textarea stretches automatically.

• Main properties– value

• For programmatic creation: the original contentFor programmatic creation: the original content– style

• The normal HTML “style” attribute

• Related components• Related components– SimpleTextarea

• Note– It is Textarea, not TextArea (vs. TextBox for one-line

input elements).33

Textarea(Declarative Creation)(Declarative Creation)

• HTML<textarea id="textarea-1"

dojoType="dijit.form.Textarea"style="width: 350px">y p

Blah, blah, blah. Yadda, yadda, yadda.Blah, blah, blah. Yadda, yadda, yadda.Blah blah blah Yadda yadda yaddaBlah, blah, blah. Yadda, yadda, yadda.Blah, blah, blah. Yadda, yadda, yadda.</textarea>

• JavaScriptdojo require("dijit form Textarea");dojo.require( dijit.form.Textarea );

34

Textarea(Programmatic Creation)(Programmatic Creation)

• HTML<div id="Textarea-id"/>

• JavaScriptdojo require("dijit form Textarea");dojo.require( dijit.form.Textarea );dojo.addOnLoad(function() {makeTextarea(); });

function makeTextarea() {() {var content = "";for(var i=0; i<4; i++) {content += "Blah, blah, blah. Yadda, yadda, yadda.\n"

}new dijit.form.Textarea({id: "textarea-2" ,l t tvalue: content,

style: "width: 350px" },"Textarea-id"

); }35

Textarea: Results

36

© 2009 Marty Hall

Complex InputComplex Input Componentsp



HorizontalSlider and VerticalSliderVerticalSlider

• Idea– Relatively normal looking slider for interactively

choosing numeric values.

• Main properties• Main properties– value: where slider is initially– minimum: value at left (or top) of slider( p)– maximum: value at right (or bottom) of slider– onChange: function to call when slider is moved– intermediateChanges: should onChange be called during

the drag, or only when user lets go of handle?

• Related components• Related components– NumberSpinner

38

HorizontalSlider(Declarative Creation)(Declarative Creation)

• HTML<form action="#"><label>Coffee Temperature (F):<br/><div id="coffee-slider-1" style="width:350px;"

dojoType="dijit.form.HorizontalSlider"value="180" minimum="150" maximum="212" onChange="showTemp1" intermediateChanges="true"/>

</label><p><input type="text" id="slider-value-1"

dojoType="dijit.form.TextBox" /></p></form>

• Core JavaScriptdojo require("dijit form Slider");dojo.require("dijit.form.Slider");

39

Note the more generic class name!

HorizontalSlider(Declarative Creation)(Declarative Creation)

• Supporting JavaScriptfunction showTemp1(temp) {

showTemp("slider-value-1", temp);}}

function showTemp(id, temp) {dijit byId(id) attr("value" temp);dijit.byId(id).attr("value", temp);// Or dojo.byId(id).value = temp;

} Since a dijit.form.TextBox is really a normal HTML textfield under the hood, it is technically legal to get the raw DOM node and set its value attribute. But, in general, it is better to avoid calling dojo.id on Dijitcomponents. Use dijit.byId in case

d t ll Dijit ifi

40

you need to call Dijit-specific methods.

HorizontalSlider(Programmatic Creation)(Programmatic Creation)

• HTML<div id="Slider-id"/>…<p><span id="TextBox-id"/></p>

• JavaScript Setupdojo require("dijit form Slider");dojo.require("dijit.form.Slider");

dojo.addOnLoad(function() {Note the more generic class name!(Slider, not HorizontalSlider.)

makeSlider();});

41


• Slider Creationnew dijit.form.HorizontalSlider({

id: "coffee-slider-2",style: "width:350px;",value: 180,minimum: 150,maximum: 212,maximum: 212,onChange: showTemp2, intermediateChanges: true },"Slider-id"

Actual slider.

Textfield that will show value.

Slider-id);new dijit.form.TextBox({

id lid l 2 }id: "slider-value-2" },"TextBox-id"

); }42


• onChange event handler

function showTemp2(temp) {showTemp("slider-value-2", temp);

}

function showTemp(id, temp) {function showTemp(id, temp) {dijit.byId(id).attr("value", temp);// Or dojo.byId(id).value = temp;

}}

43

HorizontalSlider: Results

44

Autocompleting ComboBox

• IdeaT fi ld i h ibl h i ll di l d– Textfield with possible matches automatically displayed underneath.

• Main propertiesp p– store

• The JSON data containing the possible matches. Dojo has a huge data API, but for simple purposes, use an g , p p p ,ItemFileReadStore (see upcoming slides) that points at a JSON object that has an “items” property that is an array.

– searchAttr• The property name to match against. For example, if I

specify “foo” for “searchAtrr”, then the store above should have an “items” property that has an array of objects, each of which have a “foo” propertyof which have a foo property.

• Related components– FilteringSelect, MultiSelect

45

ComboBox(Declarative Creation)(Declarative Creation)

• HTML for data store<div dojoType="dojo.data.ItemFileReadStore"

jsId="stateStore1"url=" /scripts/states json"/>

Name that the ComboBoxurl ./scripts/states.json />will refer to.

Relative URL of a resource that returns JSON. The JSON object should have an “items” property that is an array of “items” property that is an array of objects. The ComboBox will use “searchAttr” to designate which property in that array to match against.

• JavaScript for data storedojo.require("dijit.form.ItemFileReadStore");

46

ComboBox(Declarative Creation)(Declarative Creation)

• HTML for ComboBox<input dojoType="dijit.form.ComboBox"

id="state-1"store="stateStore1"

The jsId of the data store from previous slide.store stateStore1

searchAttr="name"/>

The property name of the objects within the “items” array in the data store. So, if the end user types in “blah”, the ComboBox will find entries in store.items where entry.name starts with “blah”.

• JavaScript for ComboBoxdojo.require("dijit.form.ComboBox");

47

ComboBox: states.json

{ someRandomProperty1: …,someRandomProperty2:someRandomProperty2: …,items: [{name:"Alabama", …},

{name:"Alaska",…},…]

}All ItemFileReadStoresshould have a property called “items” that is an array.

Entries in the items array can have any property names they want. The ComboBox uses searchAttr to designate which property to match against

N t

ComboBox uses searchAttr to designate which property to match against.

• Note– states.json copied from examples on Dijit site

48

ComboBox: Results (After Entering “ma”)(After Entering ma )

49

ComboBox(Programmatic Creation)(Programmatic Creation)

• HTML<div id="ComboBox-id"/>

• JavaScript Setup• JavaScript Setupdojo.require("dijit.form.ComboBox");dojo.require("dojo.data.ItemFileReadStore");j q ( j )

dojo.addOnLoad(function() {k C b B ()makeComboBox();

});

50

ComboBox(Programmatic Creation)(Programmatic Creation)

• ComboBox Creationfunction makeComboBox() {

var stateStore = new dojo.data.ItemFileReadStore({url: "./scripts/states.json" });/ p / j });

new dijit.form.ComboBox({id: "state-2", store: stateStorestore: stateStore, searchAttr: "name"}, "ComboBox-id");

}

51

ComboBox: Results (After Entering “te”)(After Entering te )

52

© 2009 Marty Hall

Wrap-up



Other Components

• Layout containers– dijit.layout.Blah provides a number of containers similar

to those in jQuery UI (AccordionContainer, TabContainer, etc.)TabContainer, etc.)

• Rich text editor– “Text area on steriods”. Can enter and edit stylized text.y

• Inline text editor– Lets user click on text and edit it. Similar to inline editor

i S i lin Scriptaculous.

• Color paletteProgress bar• Progress bar

• Tree 54

Summary

• Build component in HTML markup– Use dojoType and other nonstandard HTML attributes– Example

• <someElement dojoType="dijit foo Bar"• <someElement … dojoType= dijit.foo.BarbarAttr1="…" barAttr2="…"/>

• Build component in JavaScript– Call constructor with two arguments

• Options for the specific type• The id of the HTML element where component will goThe id of the HTML element where component will go

– Example• new dijit.foo.Bar({ barAttr1: …, barAttr2: …}, "some-id");

• In both cases– Call dojo.require("dijit.foo.Bar");

55

© 2009 Marty Hall

Questions?



the dojjpo javascript toolkit part iii: rich guis with...

Documents