Loading Data Into a Widget in the plotCity Application

This section details the tasks required to populate a widget with data, using the comboboxes included in the plotCity application as examples. These tasks are:

• Creating the Server-Side Data

• Creating the JavaBeans^TM Component to Hold the Data

• Accessing the Data From the Page

Creating the Server-Side Data

With this task, you are creating a properties file that contains a set of states and a set of cities for each state. This file acts as the database for the application for simplicity's sake.

1. Expand the plotCity node and right-click on the Source Packages node.

2. Select New > Java Package.

3. Enter plotCity as the package name.

4. Click Finish.

5. Right-click on the project in the Projects window and choose New > Other

6. In the New File dialog, select Other from the Categories pane.

7. Select Properties File from the File Types pane.

8. Click Next.

9. Enter cities in the File Name field.

10. Click Finish.

11. Select plotCity/src/java/plotCity as the location of the properties file.

12. Copy the following content to the cities.properties file:

    AK=Anchorage,Fairbanks,Juneau,Nome
    AZ=Mesa,Phoenix,Scottsdale,Tucson
    CA=Los Angeles,Sacramento,San Diego,San Francisco
    OR=Bend,Eugene,Portland,Salem
    WA=Olympia,Seattle,Spokane,Tacoma

13. Save the file.

Creating a JavaBeans Component That Holds the Data

By performing this task, you are creating the bean that holds the state and city data that you can use with the comboboxes.

1. Expand the plotCity > Source Packages nodes.

2. Right-click the plotCity package and choose New > Java class.

3. Type StateBean for the Class Name, plotCity for the Package and click Finish.

4. Add the following variable declarations to the class:

   private String[] states = 
   	new String [] {"Alaska", "Arizona", "California", "Oregon"};
   private String[] stateCodes = 
   	new String[]{"AK", "AZ", "CA", "OR"};
   protected String[] AKCities = 
   	new String[] {"Anchorage", "Fairbanks", "Juneau", "Nome"};
   private ResourceBundle cityNames = null;

5. Add an init method after the constructor that creates a ResourceBundle object from the cities.properties file:

   private void init() {
    cityNames = ResourceBundle.getBundle("plotCity.cities");   
   }

6. Add a call to the init method inside the StateBean constructor:

   public StateBean(){
   	this.init();
   }

7. Add the following getStates method to the class. It loads a JSON array with the list of state names that you initialized in step 4:

   public String getStates() throws JSONException {
   	JSONArray statesData = new JSONArray();
   	JSONObject stateData = new JSONObject();
   	for (int loop = 0; loop < states.length; loop++) {
   		stateData.put("label", states[loop]);
   		stateData.put("value", stateCodes[loop]);
   		statesData.put(stateData);
   		stateData = new JSONObject();
   	}
   	return jmaki.util.JSONUtil.jsonArrayToString(statesData, new StringBuffer());
   }

8. Add the following getCities method to the class. It loads a JSON array with the list of Alaskan city names that you initialized in step 4:

   public String getCities() throws Exception {
   	JSONObject cityData = new JSONObject();
   	JSONArray citiesData = new JSONArray();
   	for(int i = 0; i < AKCities.length; i++){
   		cityData.put("label", AKCities[i]).toString();
   		cityData.put("value", AKCities[i]).toString();
   		citiesData.put(cityData);
   		cityData = new JSONObject();
   	}
   	return jmaki.util.JSONUtil.jsonArrayToString(citiesData, new StringBuffer());
   }

9. Add the following getNewCities method to the class. It loads a JSON array with the list of city names for the selected state:

       
   public String getNewCities(String state) throws JSONException {
   	JSONObject city = new JSONObject();
   	JSONArray cities = new JSONArray();
   	String[] names = null;
   	try {
   		names = cityNames.getString(state).split(",");
   	} catch(Exception e){
   		return null;
   	}
   	for(int i = 0; i < names.length; i++){
   		city.put("label", names[i]);
   		city.put("value", names[i]);
   		cities.put(city);
   		city = new JSONObject();
   	}
   	return jmaki.util.JSONUtil.jsonArrayToString(cities, new StringBuffer());
   }

10. Right-click the editor pane and select Fix Imports from the pop-up menu. The IDE will import the packages the class needs.

11. Save StateBean.java

Accessing Data From the Page

With this task, you will initialize the combobox widgets with the server-side data.

1. Open index.jsp into the source editor pane.

2. Expand the JSP node in the Palette and select and drag Use Bean into the Source Editor below the h1 tag.

3. In the Insert Use Bean dialog box, enter the following values and then click OK.

   • ID: StateBean

   • Class: plotCity.StateBean

   • Scope: session

   The IDE generates the following tag:

   <jsp:useBean id="StateBean" scope="session" 
   	class="plotCity.StateBean" />

   This tag gives index.jsp access to the StateBean component.

4. Replace the value attribute of the thisState tag with an EL expression that points to the states property of StateBean:

   value="${StateBean.states}"

5. Replace the value element of the thisCity tag with an EL expression that points to the cities property of StateBean.

   value="${StateBean.cities}"

6. Save the file.

7. (Optional) Right-click the project node and select Run.

   Your browser should open and show the two comboboxes populated with the data your created. With the next set of tasks, you will add the event-handling mechanism so that you can select a city and plot it on the map.