Dojo provides cool cross browser javascript widgets that enable
full featured GUI clients running on javascript in a browser. JSF
developers who want to use dojo need to find a way to connect the dojo
widgets with their backing beans. With Facelets we can build templates
that connect dojo widgets with standard JSF tags. These templates are
packaged as tags in a jar. Using templates with standard JSF tags we
achieve portability from JSF 1.1 up to JSF 2.0. Furthermore you can
easily take a template out of the jar, modify it and use it separately.
DojoFaces is released under the Apache License to give you all legal
right to do so.
All tags have full AJAX support. With Dojo it's good practice to reduce
roundtrips and use AJAX whereever possible to avoid time consuming page
startups. Here's the link to our examples page to
demonstrate the features. The examples are available as war file
for download.
Community support is available on dojofaces-users@lists.sourceforge.net, please subscribe before posting. For commercial support please specify your needs on support@dojofaces.com and we will send an offer. Commercial support includes fixed response times, training and project startup support in english or german language.
The DojoFaces download does NOT include a wrapped Dojo version. Download and install Dojo separately from the Dojo site. The DojoFaces tags rely on a ready installed Dojo release, render standard HTML via standard JSF tags and dojofy them programmatically via Javascript.
DojoFaces is a JSF tag library but not a component library. Using component libraries can lead to problems with JSF upgrades, platform changes (like appserver change or portlet usage) or implementation bugs. DojoFaces provides implementation patterns to connect Dojo and JSF and wraps the more sophisticated ones in template tags. With this template based tag library approach you get well tested Dojo JavaScript together with highly stable standard JSF components to bring you cross JSF version, cross browser, cross Dojo version, cross AJAX library compatible patterns and tags.
DojoFaces requires working Facelets and Dojo installations. All popular versions are supportet:
Integrate dojo with your XHTML page as described in the dojo docs. Basically you add dojo styles and dojo scripts to the HEAD section of your document. You can download Dojo from http://dojotoolkit.org/. Get help with your first Dojo page at http://dojotoolkit.org/reference-guide/quickstart/.
Now download the release and put the contained jar on your classpath.
Refer to the taglib with: xmlns:dojo="http://j4fry.org/dojo"
Dojo JavaScript can be added either with declarative or with programmatic syntax. HTML tags with dojoType="..." attribute form the declarative dojo usage and require parseOnLoad:true in djConfig. Programmatic syntax constructs Dojo widgets in script sections through JavaScript constructors. DojoFaces tags generate programmatic Dojo code, so parseOnLoad:false is sufficient for DojoFaces if your application doesn't use Dojo declaratively.
When should you use declarative Dojo tags, when to use Dojo programmatically and which are the proper places to put DojoFaces tags? There are two reasons to use a DojoFaces tag: If you have a form value to submit to your server model, DojoFaces connects the Dojo widget to a JSF component and this way sends user input to the server model. And if you want to use a Dojo widget that connects to a dojo.data.Store then dojo:store will retrieve server data for you, provide them to the Dojo widget and even post eventual changes back to the server model.
OTOH if you don't have a value to post back and no store to connect to then a simple declarative dojo tag is sufficient. E.g. you might want to add a declarative dojoType="dijit.form.HorizontalRule" to a dojo:horizontalSlider to provide a ruler to a slider. To be able to combine both successfully you need to understand the order of Javascript calls when the page is built. While loading the page the browser executes any contained scripts. Next the dojo parser starts and converts declarative dojo tags into dojo widgets. Last all functions registered via dojo.addOnLoad are executed. This last step is where DojoFaces tags transform the JSF generated tags into Dojo widgets. Now, to add the HorizontalRule with id="hrule" to the dojo:horizontalSlider with id="hslider" you'd have to wait for both widgets to be generated and put a dojo.addOnLoad script *after* the hslider to perform:
dijit.byId('#{dojoHelper.clientId['hslider']}').addChild(dijit.byId('hrule'));
Now let's say you want to replace a section of your XHTML page via AJAX. When the AJAX call returns, JSF AJAX implementations will implicitly run any script sections contained within the replaced section. This implies that Dojo widgets that are built programmatically are rebuilt by AJAX. Declarative Dojo widgets are built by the Dojo parser that only runs when the page loads. Thus if you want to replace a Dojo widget by AJAX you need to use the programmatic Dojo style.
DojoFaces tags that submit numbers (dojo:currencyTextBox, dojo:horizontalSlider, dojo:numberSpinner, dojo:numberTextBox, dojo:rating and dojo:verticalSlider) require locale 'en-us' for transport. Add it as an extraLocale to djConfig:
<style type="text/css">
@import "resources/dojo/dijit/themes/tundra/tundra.css"
@import "resources/dojo/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="resources/dojo/dojo/dojo.js"
djConfig="isDebug: false, parseOnLoad: true, extraLocale: ['en-us']>
</script>
dojo.require is issued by the templates, so you don't need to supply it.
If you are using JSF 2.0, your application uses AJAX to rerender DojoFaces Tags and it is supposed to work on Safari you need to tweak the Content-Type your application works on. Add the phase listener listed below to your faces-config.xml to use the SetContentTypeListener contained within DojoFaces:
<lifecycle>
<phase-listener>
org.j4fry.dojo.listener.SetContentTypeListener
</phase-listener>
</lifecycle>
These are the attributes that are shared among all DojoFaces tags:
Here is a comprehensive list of the components supportet by
DojoFaces along with the supportet attributes.
These tags are available up to now:
This tag renders dijit.layout.AccordionContainer backed by a JSF inputHidden that holds the id of the selected fold.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. Refer to the hidden input that holds the containers state with #{dojoHelper.clientId['myIdHidden']} for an accordionContainer with id 'myId'. Nest each fold inside a dijit.layout.AccordionPane with the title attribute set to the folds label. Example:
<div id="myFold1" dojoType="dijit.layout.AccordionPane" title="fold 1"/>
This is my folds content
</div>
This tag renders dijit.form.Button backed by a JSF commandButton.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax or aj4:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
For a dojo submit button set attr="type: 'submit'". For a button that triggers an AJAX request don't set type: 'submit'. For an example of an AJAX button see dojo:editor.
This tag renders dijit.form.CheckBox backed by a JSF selectBooleanCheckbox.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myCheck']}') to add event handlers (replace 'myCheck' with the id of your checkBox). To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.CheckedMenuItem backed by a JSF selectBooleanCheckbox combined with a JSF commandButton.
Access the dojo widget with dijit.byId(#{dojoHelper.clientId['myItem']}) to add event handlers (replace 'myItem' with the id of your menuItem). To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.ColorPalette backed by a JSF inputHidden that holds the selected color.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.ComboBox backed by a JSF inputHidden that holds the store containing the items and a JSF inputText for the selected value.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myCombo']}') to add event handlers (replace 'myCombo' with the id of your comboBox). It is backed by a ItemFileReadStore with the id myCombo_store where you can add, modify or remove items. The store is initialized from a hidden field. If you wish to update the stores items from the server model with AJAX use dijit.byId('#{dojoHelper.clientId['myCombo']}').domNode.nextSibling to access the stores hidden field and dijit.byId('#{dojoHelper.clientId['myCombo']}').domNode.nextSibling.id to access its id. To reinitialize the store from the updated hidden field the tag provides the javascript function #{dojoHelper.jsId['myCombo']}_refreshStore(). To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.ComboButton backed by a JSF commandButton.
Access the dojo widget with dijit.byId(#{dojoHelper.clientId['myId']}) to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax or aj4:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
Attach the menu 'testMenu' with attr="dropDown: testMenu". For a dojo submit button set attr="type: 'submit'". For a button that triggers an AJAX request don't set type: 'submit' (There's currently a dojo issue with this functionality). Here's an example for a submit button with a menu:
<dojo:comboButton label="test" id="myTest" attr="type: 'submit', dropDown: testMenu" />
<div dojoType="dijit.Menu" id="testMenu">
... some dojo menu nested here ...
</div>
This tag renders dijit.form.CurrencyTextBox backed by a JSF inputText. It tag requires extraLocale: ['en-us'] in djConfig for server communication (see installation).
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dojox.grid.DataGrid backed by a JSF inputHidden that holds the store.
As this is a widget from dojox the styles aren't included with dojo.css. Add these styles to the HEAD section of your page (use claro/tundra/nihilo/soria according to your needs):
@import "../../resources/dojo/dojox/grid/resources/Grid.css"
@import "../../resources/dojo/dojox/grid/resources/claroGrid.css"
.dojoxGrid table {
margin: 0;
}
Grid rendering takes time (approx. 30 ms per grid column). To allow refreshing the grid data quickly without rerendering the entire grid the tag supports exchanging the store: Use an AJAX call to fetch new data from the server and rerender the hidden field that contains the grids data. dojo:dataGrid is backed by dojo:store, the store's id appends '_store' to the grid's id. To determine the HTML id of the hidden field containing the store for a dataGrid named 'myGrid' use #{dojoHelper.clientId['myGrid_store']} in conjunction with AJAX tags that require a HTML id (like JSF 2.0 AJAX). The JSF component id of the hidden fields again appends '_store', so for usage with AJAX tags that require the component id of the hidden field use 'myGrid_store_store'. After updating the store'S hidden field use the grid's #{dojoHelper.jsId['myGrid']}_refreshStore() function to update the grid with the new store content. All functionality defined in dojo:store is available, see there for documentation. dojo:dataGrid passes all tag attributes on to the store, so they aren't documented here again.
For a grid with id 'myGrid' access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to attach events.
This tag renders dijit.form.DateTextBox backed by a JSF inputText.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.Dialog programmatically. It is used instead of a declarative dijit.Dialog to nest other DojoFaces tags whereever nested content needs to rendered before the Dialog. dojo:dialog itself doesn't write any values back to the server, so no JSF value connection is provided.
Access the dojo widget 'myId' with dojo.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications.
This tag defines a dojo.dnd.Source or a dojo.dnd.Target div containing a list of items. dojo:dnd is backed by a dojo:store - see there for the store specific attributes. The store's label will be displayed - if properly escaped you can define an image or a handle in the structure and make it the label (example: label="label" plus structure="{id:'\#{item}', label:'<img src="${request.contextPath}/resources/images/\#{item}" />'}"). For dojo:dnd the attr attribute is extremely useful, because it allows you to specify the your dnd.Source's behaviour (like accept, handle or checkAcceptance).
When you drag an item in your browser in drop it in another list, the store structure will be used to create a complete new object. This solution not only allows you to drag around Strings. In the server model entire objects are being moved.
This tag renders dijit.form.DropDownButton. It has a similar function to the declarative form of dijit.form.DropDownButton, but renders the programmatic form, so that dojo:menu can be nested. Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications.
This tag renders dijit.form.DropDownSelect backed by a JSF selectOneMenu.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.Editor backed by a JSF inputHidden that holds the text.
Access a dojo editor with id 'myEditor' by using dijit.byId('#{dojoHelper.clientId['myEditor']}') to add event handlers or make modifications. The dojo widget is backed by a JSF hiddenInput to supply server communication. The tag supports javascript functions #{dojoHelper.jsId['myEditor']}_save() to write the current editor's content to the hidden field and #{dojoHelper.jsId['myEditor']}_refresh() to refresh the editor with the hidden field's current content (replace 'myEditor with the id of your editor). A button that saves the editor's content with AJAX and displays the result in 'myAJAXUpdatedComponent' could look like this:
<dojo:button label="save" id="save_editor" onclick="#{dojoHelper.jsId['myEditor']}_save()" attr="">
<f:ajax execute="myEditor" render="myAJAXUpdatedComponent"/>
</dojo:button>
The JSF hidden field can be addressed with dojoHelper.clientId['myEditorHidden']. Use this expression to update the hidden field by AJAX and call #{dojoHelper.jsId['myEditor']}_refresh() afterwards to push the new content into the editor.
This tag renders dijit.form.FilteringSelect backed by a JSF selectOneMenu.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.HorizontalSlider backed by a JSF inputText. It requires extraLocale: ['en-us'] in djConfig for server communication (see installation).
Access the dojo widget with id dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. Rules may be added with added with addChild in a dojo.addOnLoad block. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.Form backed by a JSF form.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. Nest form content as you would do with h:form.
This tag is an extension for dojo:dataGrid to enable form and AJAX submits based on grid cell clicks
This tag is an extension for dojo:dataGrid to enable server side sorting on grid header clicks. The properties sort and asc are read, when rendering the grid. They are used to set the grid's sorting arrows and are written when a grid header is clicked.
This tag renders dijit.InlineEditBox backed by a JSF inputHidden that holds the text.
Access a dojo inlineEditBox with id 'myEditBox' by using dijit.byId('dojoHelper.clientId['myEditBox']') to add event handlers or make modifications. The dojo widget is backed by a JSF hiddenInput to supply server communication. The tag supports javascript functions #{dojoHelper.jsId['myEditBox']}_save() to write the current inlineEditBox content to the hidden field and #{dojoHelper.jsId['myEditBox']}_refresh() to refresh the inlineEditBox with the hidden field's current content (replace 'myEditBox' with the id of your inlineEditBox). A button that saves the inlineEditBox's content with AJAX and displays the result in 'myAJAXUpdatedComponent' could look like this:
<dojo:button label="save" id="save_editBox" onclick="#{dojoHelper.jsId['myEditBox']}_save()" attr="">
<f:ajax execute="myEditBox" render="myAJAXUpdatedComponent"/>
</dojo:button>
The JSF hidden field can be addressed with dojo.byId('#{dojoHelper.clientId['myEditBoxHidden']}'). Use this expression to update the hidden field by AJAX and call #{dojoHelper.jsId['myEditBox']}_refresh() afterwards to push the new content into the editor.
This tag renders dijit.Menu. It has a similar function to the declarative form of dijit.Menu, but renders the programmatic form, so that dojo:menuItem and dojo:checkedMenuItem can be nested.
Access the dojo widget with dijit.byId(#{dojoHelper.clientId['myMenu']}) to add event handlers.
This tag renders dijit.MenuItem backed by a JSF commandButton.
Access the dojo widget with dijit.byId(#{dojoHelper.clientId['myItem']}) to add event handlers (replace 'myItem' with the id of your menuItem). To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders a dojo.dnd.Moveable, a dojo.dnd.TimedMoveable, a dojo.dnd.move.parentConstrainedMoveable, or a dojo.dnd.move.boxConstrainedMoveable depending on the constraint attribute. The moveable DOM node is a SPAN with absolute positioning, two hidden inputs connect it's top and left attributes to JSF EL expressions.
Access the widget with #{dojoHelper.jsId['myId']} to add event handlers like 'onMoveStop' via dojo.connect. The widget gives you access to it'S DOM node via it's #{dojoHelper.jsId['myId']}.node property.
This tag renders dijit.form.MultiSelect backed by a JSF selectManyMenu.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.NumberSpinner backed by a JSF inputText. It requires extraLocale: ['en-us'] in djConfig for server communication (see installation).
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.NumberTextBox backed by a JSF inputText. It tag requires extraLocale: ['en-us'] in djConfig for server communication (see installation).
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
Access the dojo widget with dijit.byId(#{dojoHelper.clientId['myItem']}) to add event handlers.
This tag renders dijit.form.RadioButton. Multiple instances of this tags form a radio group. Define the radio group with tag dojo:radioGroup prior to (within the XHTML page before) adding radio buttons to the group.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. Add AJAX or other nested tags to dojo:radioGroup that establishes the JSF connection.
Defines a radio group that instances of dojo:radioButton can be added to. Don't nest the radio buttons inside the group, define the group prior to the buttons in your XHTML page.
This tag renders no dojo widget, it's the JSF link for a group of radio buttons. To trigger AJAX from the adjoined radio buttons nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0 inside this tag. As radioGroup has no dojo widget no attr attribute can be passed anywhere, so the general attribute attr does not exist here.
This tag renders dojox.form.Rating backed by a JSF inputText. It requires extraLocale: ['en-us'] in djConfig for server communication (see installation).
As this is a widget from dojox the styles aren't included with dojo.css. Add the styles to the HEAD section of your page:
@import "../../resources/dojo/dojox/form/resources/Rating.css"
Access the dojo widget with id dijit.byId('#{dojoHelper.clientId[id]}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.SimpleTextarea backed by a JSF inputTextarea.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders a dojo.data.ItemFileWriteStore and fills it with a list of objects from the server model. Supports writing changes back to the model, JSF converters and validators, tree structures and numeric and date properties.
Reference the store from declarative or programmatic Dojo tags via #{dojoHelper.jsId['myStore']} where myStore is the store's id. To connect events to the store (onSet, onDelete, ...) or to modify the content (addItem, ...) the store is globally accessible in Javascript with #{dojoHelper.jsId['myStore']}. The store is initialized from a hidden field, updates to the store reside in a second hidden field. If you wish to update the stores items from the server model with AJAX you can access the HTML id of hidden update field with #{dojoHelper.clientId['myStore_update']} (for a store with id="myStore") to send updates to the server. Get new store content into the second hidden field #{dojoHelper.clientId['myStore']} that contains the store data. The store exposes the Javascript method #{dojoHelper.jsId['myStore']}_createStore() to initialize the store from the hidden field after AJAX requests and #{dojoHelper.jsId['myStore']}_flushUpdates() to flush the hidden updates field after it has been pushed to the server (all this with id="myStore").
structure="{
a: {el: '\#{x}',
converter: {id: 'javax.faces.Number', pattern: '#,##0.00'},
validators: [{id: 'javax.faces.Required'},
{id:'javax.faces.DoubleRange', minimum:0, maximum:100}]}
b: {el: '\#{y}',
converter: {id: 'javax.faces.DateTime', pattern: 'MM/dd/yy'}}
}"
This tag renders dijit.layout.TabContainer backed by a JSF inputHidden that holds the selected tab.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myTabContainer']}') to add event handlers or make modifications. Refer to the hidden input that holds the containers state with #{dojoHelper.clientId['myTabContainerHidden']} for an accordionContainer with id 'myTabContainer'. Nest tab content as you would do with h:panelGroup. Nest each tab inside a dijit.layout.ContentPane with the title attribute set to the tabs label. Example:
<div id="myTab1" dojoType="dijit.layout.ContentPane" title="tab 1"/>
This is my tabs content
</div>
This tag renders dijit.form.Textarea backed by a JSF inputTextarea.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.TextBox backed by a JSF inputText.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.TimeTextBox backed by a JSF inputText.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.TitlePane backed by a JSF inputHidden that holds the toggle state.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. Nest pane content as you would do with h:panelGroup.
This tag attaches to the onShow/onHide events of the dijit widget. TitlePanes in dojo versions prior to 1.4 didn't emit onShow. DojoFaces versions 1.2_00 and before fixed the bug of the dojo TitlePane for dojo < 1.4. DojoFaces 1.2_01 and higher rely on the fixed behaviour in dojo >= 1.4.
This tag renders dijit.form.ToggleButton backed by a JSF selectBooleanCheckBox and a JSF commendButton.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myToggle']}') to add event handlers (replace 'myToggle' with the id of your toggle button). To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders a dijit.Tree based on nested java.util.Lists. Tree DnD can be enabled by setting attr="dndController: 'dijit._tree.dndSource'", changes will be written back to the java model.
Read and write the Cookie 'myIdSaveStateCookie' (replace myId with the id of your tree) to determine and set the toggle state of your tree. The Cookie contains a %2C separated list of node ids that are toggled open, all others are toggled close.
Access the dojo widget with dijit.byId('myId') to add event handlers or make modifications.
This tag renders dijit.form.ValidationTextBox backed by a JSF inputText.
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.
This tag renders dijit.form.VerticalSlider backed by a JSF inputText. It requires extraLocale: ['en-us'] in djConfig for server communication (see installation).
Access the dojo widget with dijit.byId('#{dojoHelper.clientId['myId']}') to add event handlers or make modifications. Rules may be added with added with addChild in a dojo.addOnLoad block. To trigger AJAX from this tag nest standard compatible Ajax tags like fry:ajax for jsf 1.1/1.2 and f:ajax for jsf 2.0.