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 Application Directory node in the Projects window.
  2. Double-click index.js to open the file in the Source Editor.
  3. Modify the URL to display the list controller by modifying makeUrl to point to calculator/show. The modified script should look like the following:
    library.httpserver.sendRedirect(library.httpserver.makeUrl("/calculator/show"));
  4. Save your changes.

Creating a New Embedded JavaScript File

  1. Right-click the view node under the Application Directory node in the Projects window and choose New→Stylized Phobos View.
  2. Type calculator for EJS File Name.
  3. Select No CSS Style for the layout and click Finish. When you click Finish, calculator.ejs opens in the Source Editor.

Modifying the calculator.ejs Embedded JavaScript File

  1. Add the following JavaScript between the opening and closing body tags:
    <script type="text/javascript">
        window.onload = function() {
            var selectedOp = "<%= model.selectedOp %>";
            document.getElementById(selectedOp).checked = true;
        }
    </script>
  2. Add the following HTML form below the closing script tag:
    <form action=<%= library.view.quoteUrl("/calculator/compute") %>
          method="post">
    <table>
        <tr>
            <td>First Operand:</td>
            <td><input type="text" size="20" name="firstOperand"
                       value="<%= model.firstOperand %>"/></td>
        </tr>
        <tr>
            <td>Second Operand:</td>
            <td><input type="text" size="20" name="secondOperand"
                       value="<%= model.secondOperand %>"/></td>
        </tr>
        <tr>
            <td>Total:</td>
            <td><%= model.total %></td>
        </tr>
        <tr>
            <td>Operator</td>
            <td>
                <table>
                    <tr>
                        <td><input id="add" type="radio" name="operator"
                                   value="add">+</input></td>
                        <td><input id="subtract" type="radio" name="operator"
                                   value="subtract">-</input></td>
                        <td><input id="multiply" type="radio" name="operator"
                                   value="multiply">*</input></td>
                        <td><input id="divide" type="radio" name="operator"
                                   value="divide">/</input></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td/>
            <td><input type="submit" value="Compute"/></td>
        </tr>
    </table>
    </form>

Running the Phobos Application

  1. Right-click the Calculator project node in the Projects pane and choose Run Project. The application runs in the Phobos Runtime and opens in your browser window.
  2. To stop the application, right-click the Calculator application in the Projects pane and select Stop Phobos Runtime.

Developing the bioFisheye Phobos Web Application Using the NetBeans IDE

In this exercise you create the bioFisheye Phobos web application using theNetBeans IDE 5.5.1.

Building and Running the bioFisheye Phobos Web Application Project

Creating the Web Application Project

After completing this task, you will have a new Phobos web application project.

  1. Choose File→New Project.
  2. Select Web under Categories and Web Application under Projects. Click Next.
  3. Type bioFisheye for Project Name.
  4. Change the Project Location to any directory on your computer.
  5. Leave the rest of the settings at the default and click Next.
  6. Select Phobos Runtime as a Web Application Extension as the Framework. Click Finish.
  7. Close and delete the default index.jsp file under the Web Pages node.

Creating a New Controller File

  1. Expand the Phobos Application node in the Projects window.
  2. Right-click the controller node and choose New→File/Folder.
  3. Select Scripting in the Categories pane and Phobos Controller under File Type and click Next.
  4. Type fisheye for Controller File Name and click Finish.

Modifying the fisheye.js Controller File

  1. Define the fisheye controller by adding the following to fisheye.js:
    library.common.define(controller, "fisheye", function() {
    
    });
  2. Enter the following fisheye controller class inside the brackets:
    this.Fisheye = function() {
    
    };
  3. Enter the following functions to the Fisheye class function:
    this.index = function() {
        library.view.render("index.ejs");
    };
    
    this.combobox = function(){
        var value;
        model = {value: [
            ['Jayashri','fisheye/jayashri'],
            ['Greg','fisheye/greg'],
            ['Roberto','fisheye/roberto']
        ]}
        library.view.render("combobox.ejs");
    };
    
    this.fisheye = function(){
        library.view.render("fisheye.ejs");
    };
    this.greg = function() {
        library.view.render("greg.ejs");
    };
    this.jayashri = function() {
        library.view.render("jayashri.ejs");
    };
    this.roberto = function() {
        library.view.render("roberto.ejs");
    };
  4. Save your changes.
Previous Contents Next
Company Info Contact Terms of Use Privacy Copyright 1994-2007 Sun Microsystems, Inc.