- What Is Dojo?
- Default Dojo Libraries Using Dojo Modules in XPages
- Dojo Modules and Dojo in the Extension Library
- Dojo Extensions to the Edit Box Control
- Dojo Extensions to the Multiline Edit Box Control
- Dojo Extensions to the Select Control
- Dojo Extensions to Buttons
- Composite Dojo Extensions
- Dojo Effects Simple Actions
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Dojo Extensions to Buttons
There are two Dojo Extensions to Buttons: the Dojo Button control and the Dojo Toggle Button control. Like the Dojo Check Box and Dojo Radio Button controls, the Dojo Button is not appreciably different from the core control version. Again, the main differences are the Dojo styling and the inclusion of properties for accessibility, the same ones covered earlier. Just like the core Button control, the Dojo Button control can have a label, show an icon, or both. The label property allows the developer to control the text to show, but the showLabel property can suppress the label from appearing. However, showing an icon is not merely a case of selecting an image. CSS handles the icon, with the relevant class defined as a string in the iconClass property. Dojo has some built-in icons for various editing functions, defined in the <dojoroot>\dijit\themes folder and shown in Listing 5.11. Line 4 shows the Dojo theme classes dijitEditorIcon and dijitEditorIconCut applied to the button. The former loads a sprite (a collection of images, held in a single file to minimize calls to the server), and the latter positions the sprite to show a specific image—in this case, the Cut icon. Line 15 applies an icon to a second button, this time using a CSS class. Listing 5.12 shows the stylesheet that loads an image from the icons folder on the server. Note that because this is a stylesheet, it is loaded using the HTTP server, not the XSP Command Manager, so standard Domino web URL syntax applies rather than /.ibmxspres/.... You can see the buttons produced in Figure 5.14. If multiple images from the icons folder are to be included in the application, using a sprite would be the recommended approach.
)
Figure 5.14. Dojo buttons.
Listing 5.11. Dojo Button Icons
1 <xe:djButton
2 id="djButton2"
3 label="Execute Client Code"
4 iconClass="dijitEditorIcon dijitEditorIconCut">
5 <xp:eventHandler
6 event="onClick"
7 submit="false">
8 <xp:this.script><![CDATA[alert("You clicked me,
#{javascript:@UserName()}!")]]></xp:this.script>
9 </xp:eventHandler>
10 </xe:djButton>
11 <xe:djButton
12 id="djButton3"
13 showLabel="false"
14 label="Increase Value on Server"
15 iconClass="testIcon">
16 <xp:eventHandler
17 event="onClick"
18 submit="true"
19 refreshMode="partial"
20 refreshId="computedField19">
21 <xp:this.action><![CDATA[#{javascript:if
(sessionScope.djButton4) {
22 sessionScope.djButton4+=1
23 } else {
24 sessionScope.djButton4 = 1
25 }}]]></xp:this.action>
26 </xp:eventHandler>
27 </xe:djButton>
Listing 5.12. testIcon Class
.testIcon {
background-image: url(/icons/actn010.gif); /* editor icons sprite
image */
background-repeat: no-repeat;
width: 18px;
height: 18px;
text-align: center;
}
Dojo Toggle Button Control
The Dojo Toggle Button is a control that is new to developers who are not familiar with Dojo. The control is similar to the Dojo Check Box control but is styled like the Button control. Like the Dojo Check Box, it can be bound to a datasource, with a value set when the button is unclicked and a different value set when the button is clicked. From inspecting the source HTML produced for the Dojo Toggle Button control, it becomes apparent that the Dojo Toggle Button consists of a button with a dojoType and a hidden input field, as shown in Figure 5.15—a similar technique to the way developers have built the kind of functionality the Dojo Toggle Button provides. Not surprisingly, when the user clicks the Dojo Toggle Button, a value is set into the hidden field. The toggle effect runs Client-Side, although Server-Side events can also be triggered. The hidden field has the same ID as the button, except that it is suffixed with _field. The value of the hidden field is not the checkedValue or uncheckedValue properties, but an empty string if unchecked or on if checked.
)
Figure 5.15. Dojo Button HTML.
By default, as with the Dojo Check Box, the values are false when unclicked and true when clicked. But you can override these values by defining the checkedValue and uncheckedValue properties, the property names highlighting that this is an extension of the Dojo Check Box control. The only downside is that the styling of the toggle button does not change depending on whether the button is clicked or unclicked. But with the understanding of the HTML produced by the control, it is a simple matter to add that functionality as in Listing 5.13. Lines 8 to 20 add an onChange xp:eventHandler to the control. Note that this has to be defined as an xp:eventHandler rather than the default xe:eventHandler, which does not exist. Line 11 loads the Client-Side ID of the button into a variable. Line 12 gets the button itself using dojo.byId() because of the classneeds setting, not a dojoAttribute. Lines 13 and 14 get the field and test whether the value is on. Lines 15 and 17 then set the class of the button.
Listing 5.13. Styling the ToggleButton Control
1 <xe:djToggleButton
2 id="djToggleButton1"
3 title="Toggle Button"
4 value="#{sessionScope.djButton3}"
5 label="Toggle Button"
6 checkedValue="Checked..."
7 uncheckedValue="Not Checked...">
8 <xp:eventHandler
9 event="onChange"
10 submit="false">
11 <xe:this.script><![CDATA[var id="#{id:djToggleButton1}";
12 var btn=dojo.byId(id);
13 var field = dojo.byId(id+"_field");
14 if (field.value == "on") {
15 btn.setAttribute("class","btnRed");
16 } else {
17 btn.setAttribute("class","btnGreen");
18 }
19 ]]></xe:this.script>
20 </xp:eventHandler>
21 </xe:djToggleButton>
Listing 5.14 shows the CSS for the classes.
Listing 5.14. btnRed and btnGreen Classes
.btnRed {
color: rgb(255,0,0);
}
.btnGreen {
color: rgb(0,255,0);
}