Modifying the index.js Script
File
- Expand the script node under the Application Directory node in the Projects window.
- Double-click index.js to open the file in the Source Editor.
- 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"));
- Save your changes.
Creating a New Embedded JavaScript File
- Right-click the view node under the Application Directory node in the Projects window and choose New→Stylized Phobos View.
- Type calculator for EJS File Name.
- 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
- 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>
- 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
- 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.
- 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.
- Choose File→New Project.
- Select Web under Categories and Web Application under Projects. Click Next.
- Type bioFisheye for Project Name.
- Change the Project Location to any directory on your computer.
- Leave the rest of the settings at the default and click Next.
- Select Phobos Runtime as a Web Application Extension as the Framework. Click Finish.
- Close and delete the default index.jsp file under the Web Pages node.
Creating a New Controller File
- Expand the Phobos Application node in the Projects window.
- Right-click the controller node and choose New→File/Folder.
- Select Scripting in the Categories pane and Phobos Controller under File Type and click Next.
- Type fisheye for Controller File Name and click Finish.
Modifying the fisheye.js Controller
File
- Define the fisheye controller by adding the
following to fisheye.js:
library.common.define(controller, "fisheye", function() { });
- Enter the following fisheye controller class
inside the brackets:
this.Fisheye = function() { };
- 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"); };
- Save your changes.