Warning |
---|
|
This documentation refers to version 2.1 which has not been released yet. |
Common
All examples on this page assume the following JSP fragment is on the same page as the example.
Code Block |
---|
|
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<head>
<sx:head />
</head>
<s:url id="url" value="/MyAction.action" />
|
Requests
Request is triggered by a topic
Code Block |
---|
|
<s:submit value="Make Request" onclick="dojo.event.topic.publish('/request')" />
<sx:bind listenTopics="/request" href="%{#url}" />
|
Attached to an event
Code Block |
---|
|
<s:submit value="Make Request" id="submit" />
<sx:bind sources="submit" events="onclick" href="%{#url}" />
|
Attached to an event on multiple sources
Code Block |
---|
|
<s:submit value="Make Request" id="submit0" />
<s:submit value="Make Request" id="submit1" />
<sx:bind sources="submit0,submit1" events="onclick" href="%{#url}" />
|
Attached to multiple events on multiple sources
Code Block |
---|
|
<s:textarea id="area0" />
<s:textarea id="area1" />
<sx:bind sources="area0,area1" events="onfocus,onchange" href="%{#url}" />
|
Update target element with content returned from url
Code Block |
---|
|
<s:div id="div" />
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind targets="div" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit targets="div" value="Make Request" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a targets="div" value="Make Request" href="%{#url}" />
|
Update multiple target elements with content returned from url
Code Block |
---|
|
<s:div id="div0" />
<s:div id="div1" />
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind targets="div0,div1" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit targets="div0,div1" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a targets="div0,div1" href="%{#url}" />
|
Show indicator while request is in progress
Code Block |
---|
|
<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none" />
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind indicator="indicator" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit indicator="indicator" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a indicator="indicator" href="%{#url}" />
|
Highlight content of target with blue color, for 2 seconds
Code Block |
---|
|
<s:div id="div" />
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind highlightColor="blue" highlightDuration="2000" targets="div" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit highlightColor="blue" highlightDuration="2000" targets="div" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a highlightColor="blue" highlightDuration="2000" targets="div" href="%{#url}" />
|
Execute JavaScript in the returned content
Code Block |
---|
|
<s:div id="div" />
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind executeScripts="true" targets="div" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit executeScripts="true" targets="div" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a executeScripts="true" targets="div" href="%{#url}" />
|
Publish a topic before the request
Code Block |
---|
|
<script type="text/javascript">
dojo.event.topic.subscribe("/before", function(event, widget){
alert('inside a topic event. before request');
//event: event object
//widget: widget that published the topic
});
</script>
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind beforeNotifyTopics="/before" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit beforeNotifyTopics="/before" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a beforeNotifyTopics="/before" href="%{#url}" />
|
Publish a topic after the request
Code Block |
---|
|
<script type="text/javascript">
dojo.event.topic.subscribe("/after", function(data, request, widget){
alert('inside a topic event. after request');
//data : text returned from request
//request: XMLHttpRequest object
//widget: widget that published the topic
});
</script>
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind afterNotifyTopics="/after" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit afterNotifyTopics="/after" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a afterNotifyTopics="/after" href="%{#url}" />
|
Publish a topic on error
Code Block |
---|
|
<script type="text/javascript">
dojo.event.topic.subscribe("/error", function(error, request, widget){
alert('inside a topic event. on error');
//error : error object (error.message has the error message)
//request: XMLHttpRequest object
//widget: widget that published the topic
});
</script>
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind errorNotifyTopics="/error" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit errorNotifyTopics="/error" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a errorNotifyTopics="/error" href="%{#url}" />
|
Show a fixed error message on error
Code Block |
---|
|
<div id="div" />
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind errorText="Error Loading" targets="div" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit errorText="Error Loading" targets="div" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a errorText="Error Loading" targets="div" href="%{#url}" />
|
Prevent a request
Code Block |
---|
|
<script type="text/javascript">
dojo.event.topic.subscribe("/before", function(event, widget){
alert('I will stop this request');
event.cancel = true;
});
</script>
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind beforeNotifyTopics="/before" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit beforeNotifyTopics="/before" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a beforeNotifyTopics="/before" href="%{#url}" />
|
Code Block |
---|
|
<form id="form">
<input type=textbox name="data">
</form>
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind formId="form" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit formId="form" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a formId="form" href="%{#url}" />
|
Code Block |
---|
|
<!-- With a submit tag -->
<s:form namespace="/mynamespace" action="MyAction">
<input type=textbox name="data">
<sx:submit />
</s:form>
<!-- With an anchor tag -->
<s:form namespace="/mynamespace" action="MyAction">
<input type=textbox name="data">
<sx:a />
</s:form>
|
Div
Loads its content after page is loaded
Code Block |
---|
|
<sx:div href="%{#url}">
Initial Content
</sx:div>
|
Reloads content when topic is published
Code Block |
---|
|
<sx:div href="%{#url}" listenTopics="/refresh">
Initial Content
</sx:div>
<s:submit value="Refresh" onclick="dojo.event.topic.publish('/refresh')" />
|
Updates its content every 2 seconds, shows indicator while loading content
Code Block |
---|
|
<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/>
<sx:div href="%{#url}" updateFreq="2000">
Initial Content
</sx:div>
|
Loads its content after a delay of 2 seconds
Code Block |
---|
|
<sx:div href="%{#url}" delay="2000">
Initial Content
</sx:div>
|
Show some text while content is loaded
Code Block |
---|
|
<sx:div href="%{#url}" loadingText="reloading" showLoadingText="true">
Initial Content
</sx:div>
|
Fixed error message
Code Block |
---|
|
<sx:div href="noaction" errorText="Error loading content">
Initial Content
</sx:div>
|
Execute JavaScript in the returned content
Code Block |
---|
|
<sx:div href="%{#url}" executeScripts="true">
Initial Content
</sx:div>
|
Control refresh timer using topics
Code Block |
---|
|
<sx:div href="%{#url}"
listenTopics="/refresh"
startTimerListenTopics="/startTimer"
stopTimerListenTopics="/stopTimer"
updateFreq="3000">
Initial Content
</sx:div>
<s:submit value="Refresh" onclick="dojo.event.topic.publish('/refresh')" />
<s:submit value="Start refresh timer" onclick="dojo.event.topic.publish('/startTimer')" />
<s:submit value="Stop refresh timer" onclick="dojo.event.topic.publish('/stopTimer')" />
|
Date and Time picker
Date picker
Code Block |
---|
|
<sx:datetimepicker name="picker" />
|
Time picker
Code Block |
---|
|
<sx:datetimepicker type="time" name="picker" />
|
Set value from an String
Code Block |
---|
|
<sx:datetimepicker value="%{'2007-01-01'}" name="picker" />
|
Code Block |
---|
|
<sx:datetimepicker value="date" name="picker" />
|
Set/Get value using JavaScript
Code Block |
---|
|
<script type="text/javascript">
function setValue() {
var picker = dojo.widget.byId("picker");
//string value
picker.setValue('2007-01-01');
//Date value
picker.setValue(new Date());
}
function showValue() {
var picker = dojo.widget.byId("picker");
//string value
var stringValue = picker.getValue();
alert(stringValue);
//date value
var dateValue = picker.getDate();
alert(dateValue);
}
</script>
<sx:datetimepicker id="picker" />
|
Style the textbox
Code Block |
---|
|
<sx:datetimepicker id="picker" cssStye="background:red" cssClass="someclass"/>
|
Publish topic when value changes
Code Block |
---|
|
<script type="text/javascript">
dojo.event.topic.subscribe("/value", function(textEntered, date, widget){
alert('value changed');
//textEntered: String enetered in the textbox
//date: JavaScript Date object with the value selected
//widet: widget that published the topic
});
</script>
<sx:datetimepicker label="Order Date" valueNotifyTopics="/value"/>
|
Use other locales. Locales must be specified in the s:x head tag.
Code Block |
---|
|
<sx:head extraLocales="en-us,nl-nl,de-de" />
<sx:datetimepicker label="In German" name="dddp7" value="%{'2006-06-28'}" language="de-de" />
<sx:datetimepicker label="In Dutch" name="dddp8" value="%{'2006-06-28'}" language="nl-nl" />
|
Tabbed Panel
Local Tabs
Code Block |
---|
|
<sx:tabbedpanel>
<sx:div label="Tab 1" >
Local Tab 1
</sx:div>
<sx:div label="Tab 2" >
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|
Local and remote tabs
Code Block |
---|
|
<sx:tabbedpanel>
<sx:div label="Local Tab 1" >
Tab 1
</sx:div>
<sx:div label="Remote Tab 2" href="%{#url}">
Remote Tab 2
</sx:div>
</sx:tabbedpanel>
|
Fixed size (size does not adjust to current tab)
Code Block |
---|
|
<sx:tabbedpanel cssStyle="width: 500px; height: 300px;" doLayout="true">
<sx:div label="Tab 1" >
Local Tab 1
</sx:div>
<sx:div label="Tab 2" >
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|
Do not load tab 2 when page loads (it will be loaded when selected)
Code Block |
---|
|
<sx:tabbedpanel>
<sx:div label="Remote Tab 1" href="%{#url}">
Remote Tab 1
</sx:div>
<sx:div label="Remote Tab 2" href="%{#url}" preload="false">
Remote Tab 1
</sx:div>
</sx:tabbedpanel>
|
Reload tabs content when selected
Code Block |
---|
|
<sx:tabbedpanel>
<sx:div label="Remote Tab 1" href="%{#url}" refreshOnShow="true">
Remote Tab 1
</sx:div>
<sx:div label="Remote Tab 2" href="%{#url}" refreshOnShow="true">
Remote Tab 2
</sx:div>
</sx:tabbedpanel>
|
Disabled tabs
Code Block |
---|
|
<sx:tabbedpanel>
<sx:div label="Tab 1" >
Local Tab 1
</sx:div>
<sx:div label="Tab 2" disabled="true">
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|
Enable/Disable tabs using JavaScript
Code Block |
---|
|
<script type="text/javascript">
function enableTab(id) {
var tabContainer = dojo.widget.byId('tabContainer');
tabContainer.enableTab(id);
}
function disableTab(index) {
var tabContainer = dojo.widget.byId('tabContainer');
tabContainer.disableTab(index);
}
</script>
<sx:tabbedpanel id="tabContainer">
<sx:div id="tab1" label="Tab 1" >
Local Tab 1
</sx:div>
<sx:div id="tab2" label="Tab 2" disabled="true">
Local Tab 2
</sx:div>
</sx:tabbedpanel>
<!-- By Tab Index -->
<input type="button" onclick="enableTab(1)" value="Enable Tab 2 using Index" />
<input type="button" onclick="disableTab(1)" value="Disable Tab 2 using Index" />
<!-- By Tab Id -->
<input type="button" onclick="enableTab('tab2')" value="Enable Tab 2 using Id" />
<input type="button" onclick="disableTab('tab2')" value="Disable Tab 2 using Id" />
<!-- By Widget -->
<input type="button" onclick="enableTab(dojo.widget.byId('tab2'))" value="Enable Tab 2 using widget" />
<input type="button" onclick="disableTab(dojo.widget.byId('tab2'))" value="Disable Tab 2 using widget" />
|
Set Tab labels position (top, right, bottom, left)
Code Block |
---|
|
<sx:tabbedpanel labelposition="bottom">
<sx:div label="Tab 1" >
Local Tab 1
</sx:div>
<sx:div label="Tab 2" >
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|
Allow tab 2 to be removed(closed)
Code Block |
---|
|
<sx:tabbedpanel>
<sx:div label="Tab 1" >
Local Tab 1
</sx:div>
<sx:div label="Tab 2" closable="true">
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|
Publish topics when tab is selected
Code Block |
---|
|
<script type="text/javascript">
dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) {
alert("Before selecting tab");
});
dojo.event.topic.subscribe('/after', function(tab, tabContainer) {
alert("After tab was selected");
});
</script>
<sx:tabbedpanel beforeSelectTabNotifyTopics="/before" afterSelectTabNotifyTopics="/after">
<sx:div label="Tab 1">
Local Tab 1
</sx:div>
<sx:div label="Tab 2">
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|
Prevent tab 2 from being selected
Code Block |
---|
|
<script type="text/javascript">
dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) {
if(tab.widgetId == "tab1") {
event.cancel = true;
}
});
</script>
<sx:tabbedpanel beforeSelectTabNotifyTopics="/before">
<sx:div id="tab1" label="Tab 1">
Local Tab 1
</sx:div>
<sx:div id="tab2" label="Tab 2">
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|
Customize template css path (Dojo widget template css)
Code Block |
---|
|
<sx:tabbedpanel templateCssPath="%{#cssUrl}" >
<sx:div id="tab1" label="Tab 1">
Local Tab 1
</sx:div>
<sx:div id="tab2" label="Tab 2">
Local Tab 2
</sx:div>
</sx:tabbedpanel>
|