Modifying the index.js Script
File
- Expand the script node under the Phobos Application node in the Projects window.
- Double-click index.js to open the file in the Source Editor.
- Modify the URL to call the index function by modifying makeUrl to point to fisheye/index. The modified script
should look like the following:
library.httpserver.sendRedirect(library.httpserver.makeUrl("/fisheye"));
- Save your changes.
Adding Images to the Project
- Right-click the project node and select Properties.
- Expand the Build node in the Categories menu of the Project Properties dialog.
- Select Packaging from the Build node.
- Click Add File/Folder.
- Select the swdp.tutorial.home/examples/phobos/images directory from the Add File/Folder dialog and click OK.
- In the Path in War cell of the WAR Content table, enter /images/.
- Click OK.
Creating New Embedded JavaScript Files
- Expand the Phobos Application node in the Projects window.
- Right-click the view node and choose New→File/Folder.
- Select Scripting in the Categories pane and Stylized Phobos View under File Type and click Next.
- Type fisheye for EJS File Name.
- Select No CSS Style for the layout and click Finish.
- Repeat the steps to create the following Embedded JavaScript files:
combobox.ejs
index.ejs
greg.ejs
jayashri.ejs
roberto.ejs
Each of the files is now open in the Source editor. A corresponding controller file has also been created under the controller node.
- Expand the controller node and delete all the files except for fisheye.js.
Modifying the fisheye.ejs Embedded
JavaScript File
- Open fisheye.ejs in the Source editor (if it is not already open).
- Expand the jMaki Dojo node in the Palette window to reveal the Dojo widgets.
- Locate and drag the Fish Eye widget into fisheye.ejs in the Source Editor in between the <body> tags.
- Change the default arguments for the list items by making the
following modifications to the generated code:
{iconSrc: '../images/blog_murray.jpg', url: 'greg', caption: 'Greg', index: 1}, {iconSrc: '../images/chinnici.jpg', url: 'roberto', caption: 'Roberto', index: 2}, {iconSrc: '../images/JayashriVisvanathan.jpg', url: 'jayashri', caption: 'Jayashri', index: 3}
- Expand the jMaki Widgets node in the Palette window.
- Locate and drag the Dynamic Container to below the Fish Eye code in the Source Editor.
- Add the following arguments:
args:{topic:'/jmaki/centercontainer'}
The dynamic container should now look like the following:
<% library.jmaki.insert({ component: "jmaki.dcontainer", args:{topic:'/jmaki/centercontainer'} }); %>
- Enclose the dynamic container inside <div> tags.
- Save your changes.