Adding the Widgets to the Page

With this task, you will add the thisState and thisCity combobox widgets and the Google map widget to the page.

1. Open index.jsp in the editor pane if it is not already there.

2. Expand the jMaki Dojo node in the jMaki Palette, located on the right side of the IDE window.

3. Select and drag two Combobox widgets onto index.jsp

4. Save your changes.

   You should now see the following tags on index.jsp:

   <%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
   ...
   <a:widget name="dojo.combobox"
      value="[
          {label : 'Alabama', value : 'AL'},
          {label : 'California', value : 'CA'},
          {label : 'New York', value : 'NY', selected : true},
          {label : 'Texas', value : 'TX'}	           
       ]" />
   <a:widget name="dojo.combobox"
      value="[
          {label : 'Alabama', value : 'AL'},
          {label : 'California', value : 'CA'},
          {label : 'New York', value : 'NY', selected : true},
          {label : 'Texas', value : 'TX'}	           
       ]" />

5. Add the ID, thisState to the first Combobox widget and the ID, thisCity to the second combobox widget, so that the page now looks like the following:

   <%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
   ...
   <a:widget id="thisState" name="dojo.combobox"
      value="[
          {label : 'Alabama', value : 'AL'},
          {label : 'California', value : 'CA'},
          {label : 'New York', value : 'NY', selected : true},
          {label : 'Texas', value : 'TX'}	           
       ]" />
   <a:widget id="thisCity" name="dojo.combobox"
      value="[
          {label : 'Alabama', value : 'AL'},
          {label : 'California', value : 'CA'},
          {label : 'New York', value : 'NY', selected : true},
          {label : 'Texas', value : 'TX'}	           
       ]" />

6. Add the text, Select a state: right before the first Combobox widget.

7. Add a paragraph tag and the text, Select a city: right before the second combobox widget.

   The page should now look like this:

   <%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
   ...
   Select a state:
   <a:widget id="thisState" name="dojo.combobox"
      value="[
          {label : 'Alabama', value : 'AL'},
          {label : 'California', value : 'CA'},
          {label : 'New York', value : 'NY', selected : true},
          {label : 'Texas', value : 'TX'}	           
       ]" />
   <p>
   Select a city:
   <a:widget id="thisCity" name="dojo.combobox"
      value="[
          {label : 'Alabama', value : 'AL'},
          {label : 'California', value : 'CA'},
          {label : 'New York', value : 'NY', selected : true},
          {label : 'Texas', value : 'TX'}	           
       ]" />

8. Expand the jMaki Google node in the jMaki Palette, located on the right side of the IDE window.

9. Select and drag a Google Map widget onto index.jsp, right after the Combobox widgets.

10. Add another paragraph tag directly before the Google map widget.

    The page should now look like this:

    <%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
    ...
    Select a state:
    <a:widget id="thisState" name="dojo.combobox"
       value="[
           {label : 'Alabama', value : 'AL'},
           {label : 'California', value : 'CA'},
           {label : 'New York', value : 'NY', selected : true},
           {label : 'Texas', value : 'TX'}	           
        ]" />
    
    <p>
    Select a city:
    <a:widget id="thisCity" name="dojo.combobox"
       value="[
           {label : 'Alabama', value : 'AL'},
           {label : 'California', value : 'CA'},
           {label : 'New York', value : 'NY', selected : true},
           {label : 'Texas', value : 'TX'}	           
        ]" />
     <p>     
     <a:widget  name="google.map"
    	args="{ centerLat : 37.4041960114344,
    	centerLon : -122.008194923401 }" />

11. Save index.jsp.

12. (Optional) Run the application by right-clicking the project node and selecting Run.

    You will see the three widgets on the page in the browser, but the combobox widgets are populated with the default set of data, and nothing happens when you select values from them. With the next task, you'll load the appropriate data into the combobox widgets.