Handling jMaki Widget Events
Before modifying a widget, you must know that a widget contains three main components:
-
component.htm: This is an HTML file that acts as a template.
-
component.js: This is a JavaScript file that implements the behavior of the widget.
-
component.css: This a CSS file that describes the widget styles.
Additionally, there is one more file named widget.json. This file permits tools to access the widget. For a better understanding, open NetBeans and try to get familiar with these files (try the Editor widget components, for starters).
| Author's Note: To understand these files, you'll need to be familiar with HTML, JavaScript, CSS, and JSON technologies. |
In the previous section, you just saw how to capture the text from the Editor widget. Now, suppose you want your Web application to send emails to addresses on a list, which is stored in a ComboBox. Everytime you select an email address from the ComboBox, you'll see a picture of the recipient, their email address, and a button to send the email.
The news is that in place of your usual HTML ComboBox, you will be using another jMaki widget, named Combobox. You know from the previous section how to implement a widget, but you do not know how to respond to a widget event—for example, when an item is selected from the Combobox widget.
jMaki's publish/subscribe mechanism, available for use on every widget, allows your Web application to respond to an event from a widget. Using this mechanism, a widget publishes an event to a topic, after which any application can subscribe to that topic.
There's two steps involved in responding to a widget event:
- Determine whether the widget has published the appropriate content to a topic.
- Subscribe to that topic.
First, you need to set the stage for the event. Implement the Combobox widget into your application exactly like you learned in the previous section. This time, drag and drop the widget to after the Sidebar Content Here section, as shown in Figure 10.
Figure 10. Setting the Stage: Drag and drop the widget to after the Sidebar Content Here section.
To insert four of the list's email addresses, just replace this line:
<a:widget name="dojo.combobox"
publish="/dojo/combobox"
value="[
{label : 'Friend 1', value : 'myFriend_2@yahoo.com'},
{label : 'Friend 2', value : 'myFriend_2@yahoo.com'},
{label : 'Friend 3', value : 'myFriend_3@yahoo.com',
selected : true},
{label : 'Friend 4', value : 'myFriend_4@yahoo.com'}
]" />
With this:
<a:ajax name="dojo.combobox" value="[['myFriend_1@yahoo.com', 'myFriend_1@yahoo.com'],
['myFriend_2@yahoo.com', 'myFriend_2@yahoo.com'], ['myFriend_3@yahoo.com',
'myFriend_3@yahoo.com'], ['myFriend_4@yahoo.com', 'myFriend_4@yahoo.com']]" />
To revisit the steps outlined above:
- To see if the
Combobox widget has published the appropriate content to a topic, you have to check the component.js file. Just go into the MyProjectWithWidget/Web Pages/resources/dojo/combobox/component.js and look for the following code lines:
Sometimes, you have to adjust the publish method call so you can subscribe later. For example, if you are looking into the Fisheye widget, you will see that in the component.js file the onClick function looks like this:
icon.onClick = function () {
jmaki.publish(topic, {target:this, wargs:wargs});
}
In this case, you can subscribe only if the icon—which includes all the properties passed from the tag—is published. You need to modify the publish method call:
icon.onClick = function () {
//jmaki.publish(topic, {target:this, wargs:wargs});
jmaki.publish(topic, this);
}
- There are two steps involved in subscribing to the
/dojo/combobox topic:
- Implement a widget listener, named
comboboxListener. This is an event listener for the onChange event. Use it to find out what item has been selected from the ComboBox and when.
- Invoke the
jmaki.subscribe method. This method has two arguments, both of which are represented by the name of the topic (/dojo/comobox/*) and the name of the listener (comboboxListener).
To complete the two previous steps, add the code in Listing 1 to the index.jsp page.
Another important modification affects the JavaScript getTextEditor function. This function populates the hidden action field with the content taken from the Editor widget:
…
<script type="text/javascript">
function getTextEditor()
{
var text = jmaki.attributes.get('jMakiEditor').getValue();
document.forms[0].action.value=text;
}
</script>
…
The application is almost over—we'll just make some simple adjustations for personalization. The final index.jsp page should looks like Listing 2.
As you can see, when you click the Send E-mail button, this sends the information stored in the two hidden fields to a servlet. Now, it's your job to complete the servlet shown in Listing 3 to send the email.
Figure 11 shows a test case of this application.
Figure 11. Test Case: Drag and drop the widget to after the Sidebar Content Here section.
New on the Java Boutique:
New Review:
Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling
API boasts simplicity, ease-of-integration, a well-rounded feature
set, and it's free!
New Applet:
Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA
sequences into three useful formats.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
