Page 1

© 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 hall@coreservlets.com 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 <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( 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 – <link … href="…/dijit/themes/soria/soria.css" …/> • Three bundled themes: soria (richest), tundra (medium), nihilo ((simplest). p ) Can make yyour own variations. • Load this before dojo.js

– <body class="soria"> • Needed because all styles are under .soria, 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>

• 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 • <input type="text" id="date-box-1" • dojoType="dijit.form.DateTextBox" • required="true" />

– On page load, Dojo parses the attributes and replaces the element l with i h the h Dijit Diji version i • Requires <script … djConfig="parseOnload:true"> • 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. <link rel="stylesheet" h f " / href="./css/styles.css" / t l " Standard Dijit style sheet. Other predefined options are tundra and nihilo. type="text/css"/> Load before dojo.js. <link rel="stylesheet" href="./scripts/dijit/themes/soria/soria.css" type="text/css"/> if you declare <script src src="./scripts/dojo/dojo.js" ./scripts/dojo/dojo.js Required components in HTML. type="text/javascript" djConfig="parseOnLoad:true"></script> < <script i t src="./scripts/dojo-dijit.js" " / i t /d j dijit j " type="text/javascript"></script> 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 <form action="#"> <button dojoType="dijit.form.Button" onClick="buttonTest">Click Me!</button> / </form>

• JavaScript J S i t dojo.require("dijit.form.Button"); function buttonTest() { alert("I was clicked"); }

14


Example: Simple Styled Button (Programmatic Creation) â&#x20AC;˘ HTML <form action="#"><div id="Button-id"/></form>

â&#x20AC;˘ 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) <div id="Dialog-id" dojoType="dijit.Dialog" titl "C fi title="Confirm Fil File D Deletion"> l ti "> Do you really want to delete all files on your PC?<br/> <button dojoType="dijit.form.Button" onClick="deleteFiles">Yes</button> <button dojoType dojoType="dijit.form.Button" dijit.form.Button onClick="deleteFilesAnyway">No</button> </div>

• 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) <form action="#"> <button dojoType="dijit.form.Button" dojoType "dijit form Button" onClick="createDialog()">Show Dialog</button> </form>

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


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 <input type="text" id="date-box-1" dojoType="dijit.form.DateTextBox" required="true" q /> /

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

26


DateTextBox (Programmatic Creation) • HTML <div id="DateTextBox-id"/>

• 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 <i <input t t type="text" "t t" id id="ssn-box-1" " b 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");

30


ValidationTextBox (Programmatic Creation) • HTML <div id="ValidationTextBox-id"/>

• JavaScript

31

dojo.require( dojo require("dijit dijit.form.ValidationTextBox form ValidationTextBox"); ); dojo.addOnLoad(function() { makeValidationTextBox(); }); function makeValidationTextBox() { Since I am building string that will contain \d, I have to use \\d new dijit.form.ValidationTextBox({ in the raw code. id: "ssn-box-2", ssn box 2 , regExp: "\\d{3}-\\d{2}-\\d{4}", invalidMessage: "Numbers and dashes only", q true }, required: "ValidationTextBox-id" ); }

ValidationTextBox: Results

32


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

• Main properties – value • For 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: y 350px"> p Blah, blah, blah. Yadda, yadda, yadda. Blah, blah, blah. Yadda, yadda, yadda. Blah blah Blah, blah, blah. blah Yadda, Yadda yadda, yadda yadda. yadda Blah, blah, blah. Yadda, yadda, yadda. </textarea>

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

34


Textarea (Programmatic Creation) • HTML <div id="Textarea-id"/>

• JavaScript

35

dojo.require( dojo require("dijit dijit.form.Textarea 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" , value: l content, t t style: "width: 350px" }, "Textarea-id" ); }

Textarea: Results

36


© 2009 Marty Hall

Complex Input Components p 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.

HorizontalSlider and VerticalSlider • Idea – Relatively normal looking slider for interactively choosing numeric values.

• Main properties – – – – –

value: where slider is initially p) of slider minimum: value at left ((or top) 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 38


HorizontalSlider (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 JavaScript dojo require("dijit form Slider"); dojo.require("dijit.form.Slider"); Note the more generic class name! 39

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", // Or dojo.byId(id).value = temp; }

40

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 you need d to t callll Dijit-specific Dijit ifi methods.


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

Note the more generic class name! (Slider, not HorizontalSlider.)

41

HorizontalSlider (Programmatic Creation) • Slider Creation

42

new dijit.form.HorizontalSlider({ id: "coffee-slider-2", style: "width:350px;", value: 180, minimum: 150, maximum: 212, onChange: showTemp2, intermediateChanges: true }, Slider-id "Slider-id" ); new dijit.form.TextBox({ id "slider-value-2" id: lid l 2 } }, "TextBox-id" ); }

Actual slider. Textfield that will show value.


HorizontalSlider (Programmatic Creation) â&#x20AC;˘ onChange event handler function showTemp2(temp) { showTemp("slider-value-2", temp); } function showTemp(id, temp) { dijit.byId(id).attr("value", temp); // Or dojo.byId(id).value = temp; }

43

HorizontalSlider: Results

44


Autocompleting ComboBox • Idea –T Textfield fi ld with i h possible ibl matches h automatically i ll displayed di l d underneath.

• Main properties p p – store • The JSON data containing the possible matches. Dojo has a huge g data API,, but for simple p p purposes, p , use an 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” foo property. property

• Related components 45

– FilteringSelect, MultiSelect

ComboBox (Declarative Creation) • HTML for data store <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore1" Name that the ComboBox url="./scripts/states.json 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 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");

46


ComboBox (Declarative Creation) • HTML for ComboBox <input dojoType="dijit.form.ComboBox" id="state-1" The jsId of the data store from previous slide. store="stateStore1" 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: …, 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. against

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


ComboBox: Results (After Entering “ma”) 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() { makeComboBox(); k C b B () });

50


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, stateStore searchAttr: "name"}, "ComboBox-id"); }

51

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

52


© 2009 Marty Hall

Wrap-up 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.

Other Components • Layout containers – dijit.layout.Blah provides a number of containers similar to those in jQuery UI (AccordionContainer, TabContainer, etc.)

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

• Inline text editor – Lets user click on text and edit it. Similar to inline editor i Scriptaculous. in S i l

• Color palette • Progress bar • Tree 54


Summary • Build component in HTML markup – Use dojoType and other nonstandard HTML attributes – Example • <someElement … dojoType= dojoType="dijit dijit.foo.Bar 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 go

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

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

© 2009 Marty Hall

Questions? 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.

Dojo Dijit  

Dijit tutorial