Page History

Warning

title	Dojo plugin is deprecated

The Dojo plugin will be deprecated on Struts 2.1

2.1

This documentation refers to version 2.1 which has not been released yet.

Table of Contents

minLevel	3
indent	20px
style	none

...

Code Block

	HTML
	HTML

<script type="text/javascript">
  dojo.event.topic.subscribe("/value", function(textEnteredtext, date, widget){
      alert('value changed');
      //textEntered: String eneteredentered in the textbox
      //date: JavaScript Date object with the value selected
      //widetwidget: widget that published the topic 
  });
</script> 

<sx:datetimepicker label="Order Date" valueNotifyTopics="/value"/>

Use other locales.

Warning
Locales must be specified in the sx:head tag.

Code Block

	HTML
	HTML

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

...

Local Tabs

Code Block

	HTML
	HTML

<sx:tabbedpanel>tabbedpanel id="tabContainer">
   <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

	HTML
	HTML

<sx:tabbedpanel>tabbedpanel id="tabContainer">
   <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>

...

Code Block

	HTML
	HTML

<sx:tabbedpanel cssStyle="width: 500px; height: 300px;" doLayout="true" id="tabContainer">
   <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

	HTML
	HTML

<sx:tabbedpanel>tabbedpanel id="tabContainer">
   <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

	HTML
	HTML

<sx:tabbedpanel>tabbedpanel id="tabContainer">
   <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

	HTML
	HTML

<sx:tabbedpanel>tabbedpanel id="tabContainer">
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" disabled="true">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

...

Code Block

	HTML
	HTML

<script type="text/javascript">
   function enableTab(idparam) {
      var tabContainer = dojo.widget.byId('tabContainer');
      tabContainer.enableTab(idparam);
   }
    
   
   function disableTab(indexparam) {
      var tabContainer = dojo.widget.byId('tabContainer');
      tabContainer.disableTab(indexparam);
   }
</script>

<sx:tabbedpanel id="tabContainer" 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 to bottom (can be: top, right, bottom, left)

Code Block

	HTML
	HTML

<sx:tabbedpanel labelposition="bottom" id="tabContainer">
   <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

	HTML
	HTML

<sx:tabbedpanel>tabbedpanel id="tabContainer">
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2"  closable="true">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

...

Code Block

	HTML
	HTML

<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" id="tabContainer">
   <sx:div label="Tab 1">
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

...

Select tab using JavaScript

Code Block

	HTML
	HTML

<script type="text/javascript">
   dojo.event.topic.subscribe('/before', function(event, tab, tabContainerfunction selectTab(id) {
     var if(tab.widgetIdtabContainer == "tab1dojo.widget.byId("tabContainer") {;
     tabContainer.selectTab(id);
   }
</script>
<sx:tabbedpanel id="tabContainer">
   <sx:div label="Tab 1" id="tab1">
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" id="tab2">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

<input type="button" onclick="selectTab('tab1')" value="Select tab 1" />
<input type="button" onclick="selectTab('tab2')" value="Select tab 2" />

Prevent tab 2 from being selected

Code Block

	HTML
	HTML


<script type="text/javascript">
   dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) {
      event.cancel = true;
      }tab.widgetId == "tab2" ;
   });
</script>
<sx:tabbedpanel beforeSelectTabNotifyTopics="/before" id="tabContainer">
   <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>

...

Code Block

	HTML
	HTML

<sx:tabbedpanel templateCssPath="%{#cssUrl}" id="tabContainer">
   <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>

...

Code Block

	HTML
	HTML

<sx:autocompleter list="{'apple','banana','grape','pear'}" value="apple" />

Force valid option (restore option when focus is lost)

...

Code Block

	Java
	Java
title	AutocompleterExample.java

public class AutocompleterExample extends ActionSupport {

   public Map<String, String> getOptions() {
      Map<String,String> options = new HashMap<String,String>();
      options.put("FLFlorida", "FloridaFL");
      options.put("ALAlabama", "AlabamaAL");

      return options;
   }
}

The mapping:

...

Code Block

	java
	java
title	MyAction.java

public MyAction extends ActionSupport {
    private String optionsKey;
    private String options;

    ...    
}

The JSP:

Code Block

	HTML
	HTML


<s:form id="form">
  <sx:autocompleter name="options" label="Options" />
</s:form>

Set initial key and value

Code Block

	HTMLHTML
	HTML
1	JSP page

<s:formurl id="optionsUrl" namespace="/autocompleter" action="formgetStates" />
  
<sx:autocompleter namehref="options%{#optionsUrl}" labelvalue="OptionsFlorida" keyValue="FL"/>
</s:form>

Change default key name

The action:

...

Code Block

	javascript
	javascript
title	Map(recommended as it is the easiest one to generate)

{
    "Alabama" : "AL",
    "Alaska"  : "AK"
}

Code Block

	javascript
	javascript
title	Array of arrays

[
    ["Alabama", "AL"],
    ["FloridaAlaska", "FLAK"]
]

Code Block

	javascript
	javascript
title	Array inside object, same name as field

{
    "state" : [
        ["Alabama","AL"],
        ["Alaska","AK"]
    ]
}

Code Block

	javascript
	javascript
title	Map inside object, same name as field

{
    "state" : {
        "Alabama" : "ALAlabama",
        "Alaska"  : "AK"
    }
}

Code Block

	javascript
	javascript
title	Array inside object, field in response starts with the name of the autocompleter("state" in this example)

{
    "states" : [
        ["Alabama","AL"],
        ["Alaska","AK"]
    ]
}

...

Code Block

	HTML
	HTML

<sx:autocompleter autoComplete="false" href="%{#url}" />

Prevent options from loading when page loads

Code Block

	HTML
	HTML


<sx:autocompleter preload="false" href="%{#url}" />

Child pages

Versions Compared

Old Version 23

New Version Current

Key

Use other locales.

Local Tabs

Local and remote tabs

Do not load tab 2 when page loads (it will be loaded when selected)

Reload tabs content when selected

Disabled tabs

Set Tab labels position to bottom (can be: top, right, bottom, left)

Allow tab 2 to be removed(closed)

Select tab using JavaScript

Prevent tab 2 from being selected

Force valid option (restore option when focus is lost)

Set initial key and value

Change default key name

Prevent options from loading when page loads