Adding a GlueListener for the Widget Event
By performing this task, you are doing two things:
Adding a listener to glue.js to listen for events from the combobox widget on comboboxGeocoder.jsp.
Adding a listener to glue.js to listen for Fish Eye events to make the navigation work.
After performing these tasks, you can use the fish eye navigation to navigate between the simpleCombobox.jsp and comboboxGeocoder.jsp pages you created.
- Double-click glue.js to open the file in the Source Editor.
- Add the following glue listener at the bottom of the file.
jmaki.addGlueListener("/dojo/combobox/updateMap", "jmaki.listeners.updateMapHandler"); jmaki.listeners.updateMapHandler = function(args) { var location = encodeURIComponent("location=" + args.value); dojo.io.bind({ url: "xhp?id=yahoogeocoder&urlparams=" + location, method: "get", mimetype: "text/json", load: function(type, data){ jmaki.publish("/jmaki/plotmap", data.coordinates); } }); }
- Locate the following glue listener for the fisheye widget:
jmaki.listeners.handleFisheye = function(args) { alert("glue.js : fisheye event"); } // map topic dojo/fisheye to fisheye handler jmaki.addGlueListener(new RegExp("^(?!/global).*/dojo/fisheye"), "jmaki.listeners.handleFisheye");
After the line alert("glue.js : fisheye event"); , insert the following line:
jmaki.publish("/jmaki/centercontainer", args.target.url);
The resulting code for the jmaki.listeners.handleFisheye function will look like this:
jmaki.listeners.handleFisheye = function(args) { alert("glue.js : fisheye event"); jmaki.publish("/jmaki/centercontainer", args.target.url); }
- Save your changes.
- Test the application by right-clicking the project node in the Projects window and selecting Run Project. To navigate to the simpleCombobox.jsp page, select the top menu icon from the fish eye widget. To navigate to the comboboxGeocoder.jsp page, select the earth icon from the fish eye. When you select a state from the combobox widget on comboboxGeocoder.jsp, the map will display the capital city of that state. You can mouse over the tool tip displayed on the map to get it to show the name of the capital city.
Creating the Table Data Example Page
With this set of tasks, you will create the tableData.jsp page, which includes a Dojo table widget that gets its data from a JavaBeans component.
Creating tableData.jsp
- Right-click the Web Pages node in the Projects window and choose New→JSP.
- Type tableData in the JSP File Name field and click Finish.
- Copy the Use Bean tag you created in the comboboxGeocoder.jsp page and paste it into the tableData.jsp page below the <h1> tag.
- Expand the jMaki Dojo node in the Palette and select and drag the Table widget into the Source Editor below the usebean tag.
- Modify the default value attribute of the table
tag to the following:
{columns: {'isbn':'ISBN #','title':'Title','firstName':'First Name', 'surname':'Last Name'}, rows:${appBean.bookData} }
- Save your changes.
Creating Book.java
- Right-click the project in the Projects window and choose New→Java class.
- Type Book for the Class Name, type simplejMaki for the Package, and click Finish.
- Add the following field declarations to the class:
private int bookId; private String title; private String firstName; private String surname;
- Right-click in the Source Editor and choose Refactor→Encapsulate fields to generate getters and setters for the fields.
- Click Next in the Encapsulate Fields dialog box.
- Click the Do Refactoring button, located in the Refactoring tab at the bottom of the IDE.
- Create the following constructor, which takes the fields as arguments:
public Book(int bookId, String title, String firstName, String surname) { this.bookId = bookId; this.title = title; this.firstName = firstName; this.surname = surname; }
- Save your changes.
Modifying ApplicationBean.java
With this task, you create add methods to ApplicationBean.java to generate the table data and convert it to JSON format.
- Open ApplicationBean.java in the Source Editor.
- Add the following methods to the class:
public List createBooks() throws Exception { ArrayList<Book> books = new ArrayList<Book>(); Book book = new Book(201, "My Early Years: Growing up on *7", "Duke", ""); books.add(book); book = new Book(202, "Web Servers for Fun and Profit", "Jeeves", ""); books.add(book); book = new Book(203, "Web Components for Web Developers", "Webster", "Masterson"); books.add(book); return books; } public JSONArray getBookData() throws Exception { JSONArray books = new JSONArray(); JSONArray book = new JSONArray(); ArrayList<Book> bookList = (ArrayList<Book>)createBooks(); Iterator i = bookList.iterator(); while(i.hasNext()){ Book bookData = (Book)i.next(); book.put(bookData.getBookId()); book.put(bookData.getTitle()); book.put(bookData.getFirstName()); book.put(bookData.getSurname()); books.put(book); book = new JSONArray(); } return books; }
- Press Alt-Shift-F to generate any necessary import statements for the class. The IDE adds import statements for java.util.ArrayList, java.util.Iterator and java.util.List.
- Save your changes.
- To test the application, right-click the project node in the Projects window and choose Run Project. Select the table icon from the fish eye widget to load the tableData.jsp page. You can sort the data in the table by clicking the table column headings.