Creating ApplicationBean.java

By performing this task, you are creating the bean that contains the data for the combobox widget.

1. Right-click the project in the Projects window and choose New→Java class.
2. Type ApplicationBean for the Class Name, type simplejMaki for the Package, and click Finish.
3. Add the following field declaration to the class:

   String state;

4. Right-click the field declaration in the Source Editor and choose Refactor→Encapsulate fields to generate getters and setters for the field.
5. Click Next in the Encapsulate Fields dialog box.
6. Click the Do Refactoring button, located in the Refactoring tab at the bottom of the IDE.
7. Set the initial state of the state field to California by making the following modification:

   private String state = "California";

8. Set the values for the variables westernStates and westernStateCapitals by adding the following:

   private String[] westernStates = new String[] {
       "Alaska", "Arizona", "California", "Hawaii"};
   private String[] westernStateCapitals = new String[] {
       "Juneau", "Phoenix", "Sacramento", "Honolulu"};

9. Add the following method to the class:

   public JSONArray getStateData() {
       JSONArray statesData = new JSONArray();
       JSONArray stateData = new JSONArray();
       for (int loop=0; loop < westernStates.length; loop++){
           stateData.put(westernStates[loop]);
           stateData.put(westernStateCapitals[loop]);
           statesData.put(stateData);
           stateData = new JSONArray();
       }
       return statesData;
   }

10. Press Alt-Shift-F to generate any necessary import statements for the class. The IDE adds an import statement for org.json.JSONArray.
11. Save your changes.
12. Test the simpleCombobox.jsp page by right-clicking the icon for the page in the Projects window and selecting Run File. When you run the page, the combobox is populated with data from ApplicationBean.

Adding a Display Element for the Results of the Combobox Widget Event

With this task, you will add an element to simpleCombobox.jsp in which the response to the combobox widget event is displayed.

1. Open simpleCombobox.jsp in the Source Editor.
2. Add the following <div> tag below the widget tag representing the Dojo combobox widget:

   <div id="newvalue"></div>

3. Save your changes.

Adding a GlueListener for the Combobox Widget Event

By performing this task, you are adding a listener to glue.js to listen for combobox widget events.

1. Double-click glue.js to open the file in the Source Editor.
2. Add the following glueListener at the bottom of the file.

   jmaki.addGlueListener("/dojo/combobox/value", "jmaki.listeners.getValue");
   
   jmaki.listeners.getValue = function(args) {
       var targetDiv = document.getElementById("newvalue");
       if (targetDiv)
           targetDiv.innerHTML = "The capital of this state is " + args.value;
   }

3. Save your changes.

Creating the Map Example Page

With this set of tasks, you are creating the comboboxGeocoder.jsp page, which includes a Dojo combobox widget and a Yahoo map widget. The combobox widget contains a list of states. When you select a state, its capital is plotted on the map represented by the Yahoo map widget.

Creating comboboxGeocoder.jsp

1. Right-click the Web Pages node in the Projects window and choose New→JSP.
2. Type comboboxGeocoder in the JSP File Name field and click Finish.
3. Copy the Use Bean and combobox tags you created in the simpleCombobox.jsp page and paste them into comboboxGeocoder.jsp below the <h1> tag.
4. Modify the topic of the combobox tag to /dojo/combobox/updateMap. The tag should now look like the following:

   <a:widget name="dojo.combobox" 
       args="{topic:'/dojo/combobox/updateMap'}" 
       value="${appBean.stateData}"/>

5. Expand the jMaki Yahoo node in the Palette and select and drag the Map widget into the Source Editor below the combobox tag.
6. Change the zoom level and width of the map by modifying the default code to look like the following:

   <a:widget name="yahoo.map" 
       args="{centerLat:37.4041960114344, zoom:14, width:350, 
              centerLon:-122.008194923401}"/>

7. Save your changes.