Modifying the Fish Eye Widget

By performing this task, you will modify the fish eye widget so that you can use it to navigate between the pages in the application. You'll create the four pages for your application later in the tutorial.

1. Right-click the widget tag and choose jMaki→jMaki from the popup menu to open the tag Customizer.
2. Modify the value of labelEdge by selecting Right from the drop-down list.
3. Modify the value of orientation by selecting Vertical from the drop-down list. Click OK.
4. In the Source Editor, replace the default item arguments for image sources, URLs and captions with the following:

   {'iconSrc':'pull-down_menu.gif','url':'simpleCombobox.jsp',
       'caption':'Combobox Example'},
   {'iconSrc':'map.gif','url':'comboboxGeocoder.jsp',
       'caption':'Map Example'},
   {'iconSrc':'table_list.gif','url':'tableData.jsp',
       'caption':'Table Example'}

Adding Images for the Fish Eye Widget

Now, you need to add the images that the Fish Eye Widget uses to the application. After adding the images and running the index.jsp page, you will be able to see the fisheye widget images in the page.

1. Right-click the project node.
2. Select Properties from the popup menu.
3. Select Packaging from the Categories menu.
4. Click Add File/Folder.
5. From the Add File/Folder dialog, go to swdp.tutorial.home/examples/jmaki/.
6. Select the images directory and click Open. When you click Open, the path to the images is displayed in the Item column in the WAR Content table.
7. In the Path in WAR cell of the WAR Content table, click in the cell, type / and then press Enter to set the path in the WAR for the images directory.
8. Click OK.
9. Select File→Save All to save your changes.
10. Test the index.jsp page by right-clicking the index.jsp page in the Projects window and selecting Run File. You should see the templated index.jsp page, with the sidebar pane containing the fish eye widget, open in your browser.

Adding a Dynamic Container to index.jsp

By performing this task, you are adding dContainer widget, which will load individual pages in response to events on the fish eye widget.

1. Expand the jMaki Widgets node in the Palette and select and drag the Dynamic Container into the content area in index.jsp. Delete the default text in the content area.
2. Modify the default code to add an iframe to contain the content for our application and to add a topic for publishing events from this widget. The modified code should now look like the following:

   <a:widget name="jmaki.dcontainer" 
             args="{topic:'/jmaki/centercontainer', iframe: true}"/>

3. Save your changes.

Creating the Combobox Example Page

By performing this set of tasks, you are creating the simpleCombobox.jsp page, which demonstrates the following features:

• Including a Dojo combobox widget in a page

• Binding the combobox widget to a data source

• Writing a handler that listens for events fired by the widget

Creating simpleCombobox.jsp

1. Right-click the Web Pages node in the Projects window and choose New→JSP.
2. Type simpleCombobox in the JSP File Name field and click Finish.
3. Expand the JSP node in the Palette and select and drag Use Bean into the Source Editor below the <h1> tag.
4. In the Insert Use Bean dialog box, enter the following values and then click OK.

   • ID: appBean

   • Class: simplejMaki.ApplicationBean

   • Scope: session

   The IDE generates the following tag:

   <jsp:useBean id="appBean" scope="session" 
       class="simplejMaki.ApplicationBean" />

5. Expand the jMaki Dojo node in the Palette and select and drag the Combobox widget into the Source Editor below the useBean tag.
6. Modify the default arguments by adding the following values:

   • topic: /dojo/combobox/value

   • value: ${appBean.stateData}

     The tag should look like the following:

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

7. Save your changes.