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

(1)

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: 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 yourlocation.

p j

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

(2)

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

Introduction

(3)

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 y layout containers, trees, menus, color palettes, etc.

– Much more extensive than jQuery UI

• Creating components declaratively

<input type="text" id="ssn-box-1"

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

• Creating components programmatically

new 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.gz dojo 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

– http://dojotoolkit.org/docs

– http://docs.dojocampus.org/dijit/index

• Bookmark this site; it is hard to find from top-level documentation page

(4)

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 beforedojo.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”

U

d j

i

f

h Dijit t

• Use dojo.require for each Dijit type

– dojo.require("dijit.form.ValidationTextBox");

(5)

Defining Components

Declaratively

• Idea

U 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 i

element 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 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

– ExampleExample

new dijit.form.DateTextBox(

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

"DateTextBox-id" );

• Notes

– Trigger call to new dijitTrigger call to new dijit…ComponentType(options, id) ComponentType(options id) from dojo.addOnLoad

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

(6)

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.js

type="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)

• HTML

<form action="#">

<button dojoType="dijit.form.Button"

onClick="buttonTest">Click Me!</button>/ </form>

J

S

i t

• JavaScript

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

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

(7)

Example: Simple Styled Button

(Programmatic Creation)

• HTML

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

• JavaScript

dojo 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

(8)

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 Id

DOM methods on this result. So, avoid calling dojo.byId on Dijit component ids!

• Examples

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)

<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 files

on your PC?<br/>

onClick="deleteFiles">Yes</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.

(9)

Example: Dialog (Declarative

Creation: JavaScript)

dojo.require("dijit.Dialog");

Called by the button in

function showDialog() {

dijit.byId("Dialog-id").show(); }

y the 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

(10)

Example: Dialog

(Programmatic Creation: HTML)

<button dojoType "dijit form Button" <button dojoType="dijit.form.Button"

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

• Notes

No 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)

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(); }

(11)

Programmatic Dialog: Results

23

Simple Input

Components

p

(12)

DateTextBox

• Idea

– Textfield to collect a date. If user clicks inside textbox, a popup calendar is displayed.

• 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)

• HTML

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

dojoType="dijit.form.DateTextBox"

required="true" q />/

• JavaScript

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

(13)

DateTextBox

(Programmatic Creation)

• HTML

<div id="DateTextBox-id"/>

• JavaScript

dojo 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)

(14)

ValidationTextBox

• Idea

– Textfield with associated regular expression. If input fails to satisfy regular expression, warning message displayed.

• 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 components

p

– TimeTextBox, CurrencyTextBox, NumberTextBox, DateTextBox (covered earlier)

29

ValidationTextBox

(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

dojo.require("dijit.form.ValidationTextBox");

(15)

ValidationTextBox

(Programmatic Creation)

• HTML

<div id="ValidationTextBox-id"/>

• JavaScript

dojo 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

(16)

Textarea

• Idea

T 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

– SimpleTextarea

• Note

– It is Textarea, not TextArea (vs. TextBox for one-line input elements).

33

Textarea

(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, yadda.

</textarea>

• JavaScript

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

(17)

Textarea

(Programmatic Creation)

• HTML

<div id="Textarea-id"/>

• JavaScript

dojo 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 t

value: content,

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

); }

35

Textarea: Results

(18)

Complex Input

Components

p

HorizontalSlider and

VerticalSlider

• Idea

– Relatively normal looking slider for interactively choosing numeric values.

• 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

– NumberSpinner

(19)

HorizontalSlider

(Declarative Creation)

• HTML

<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 JavaScript

dojo require("dijit form Slider");

dojo.require("dijit.form.Slider");

39

Note the more generic class name!

HorizontalSlider

(Declarative Creation)

• Supporting JavaScript

function 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 Dijit components. Use dijit.byId in case

d t ll Dijit ifi

40

(20)

HorizontalSlider

(Programmatic Creation)

• HTML

<div id="Slider-id"/> …

<p><span id="TextBox-id"/></p>

• JavaScript Setup

dojo require("dijit form Slider");

dojo.require("dijit.form.Slider");

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

makeSlider();

});

41

HorizontalSlider

(Programmatic Creation)

• Slider Creation

new 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"

(21)

HorizontalSlider

(Programmatic Creation)

• 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

(22)

Autocompleting ComboBox

• Idea

T fi ld i h ibl h i ll di l d

– Textfield with possible matches automatically displayed underneath.

• Main properties

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” property

of which have a foo property.

• Related components

– FilteringSelect, MultiSelect

45

ComboBox

(Declarative Creation)

• HTML for data store

<div dojoType="dojo.data.ItemFileReadStore"

jsId="stateStore1"

url=" /scripts/states json"/>

Name that the ComboBox

url ./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 store

dojo.require("dijit.form.ItemFileReadStore");

(23)

ComboBox

(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 ComboBox

dojo.require("dijit.form.ComboBox");

47

ComboBox: states.json

{ someRandomProperty1: …, someRandomProperty2: someRandomProperty2: …,

items: [{name:"Alabama", …}, {name:"Alaska",…}, …

] }

All ItemFileReadStores should 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

(24)

ComboBox: Results

(After Entering “ma”)

(After Entering ma )

49

ComboBox

(Programmatic Creation)

• HTML

<div id="ComboBox-id"/>

• JavaScript Setup

dojo.require("dijit.form.ComboBox");

dojo.require("dojo.data.ItemFileReadStore");j q ( j )

dojo.addOnLoad(function() {

k C b B ()

makeComboBox();

});

(25)

ComboBox

(Programmatic Creation)

• ComboBox Creation

function makeComboBox() {

var stateStore = new dojo.data.ItemFileReadStore({

url: "./scripts/states.json" });/ p / j });

new dijit.form.ComboBox({

id: "state-2",

store: stateStore store: stateStore,

searchAttr: "name"}, "ComboBox-id");

}

51

ComboBox: Results

(After Entering “te”)

(After Entering te )

(26)

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 l

in Scriptaculous.

• Color palette

Progress bar

• Progress bar

• Tree

(27)

Summary

• Build component in HTML markup

– Use dojoType and other nonstandard HTML attributes

– Example

• <someElement dojoType="dijit foo Bar"

• <someElement … dojoType= dijit.foo.Bar

barAttr1="…" 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