sun.com docs.sun.com My Sun Worldwide Sites

  Previous Contents Next

Modifying the index.js Script File

  1. Expand the script node under the Phobos Application node in the Projects window.
  2. Double-click index.js to open the file in the Source Editor.
  3. 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"));
  4. Save your changes.

Adding Images to the Project

  1. Right-click the project node and select Properties.
  2. Expand the Build node in the Categories menu of the Project Properties dialog.
  3. Select Packaging from the Build node.
  4. Click Add File/Folder.
  5. Select the swdp.tutorial.home/examples/phobos/images directory from the Add File/Folder dialog and click OK.
  6. In the Path in War cell of the WAR Content table, enter /images/.
  7. Click OK.

Creating New Embedded JavaScript Files

  1. Expand the Phobos Application node in the Projects window.
  2. Right-click the view node and choose New→File/Folder.
  3. Select Scripting in the Categories pane and Stylized Phobos View under File Type and click Next.
  4. Type fisheye for EJS File Name.
  5. Select No CSS Style for the layout and click Finish.
  6. 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.

  7. Expand the controller node and delete all the files except for fisheye.js.

Modifying the fisheye.ejs Embedded JavaScript File

  1. Open fisheye.ejs in the Source editor (if it is not already open).
  2. Expand the jMaki Dojo node in the Palette window to reveal the Dojo widgets.
  3. Locate and drag the Fish Eye widget into fisheye.ejs in the Source Editor in between the <body> tags.
  4. 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}
  5. Expand the jMaki Widgets node in the Palette window.
  6. Locate and drag the Dynamic Container to below the Fish Eye code in the Source Editor.
  7. 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'} }); %> 
  8. Enclose the dynamic container inside <div> tags.
  9. Save your changes.
Previous Contents Next
Company Info Contact Terms of Use Privacy Copyright 1994-2007 Sun Microsystems, Inc.