>> More Visual Web Pack Documentation

Installing the Currency Trader Sample Application

This document describes how to download, install, deploy, and run the Currency Trader sample application. The sample application demonstrates how to use the Dynamic Faces technology to employ Ajax techniques with Ajax-unaware JavaServer Faces components. The application uses both the Dynamic Faces Ajax Zone component and the fireAjaxTransaction function from the Dynamic Faces JavaScript API. The web application comprises one rendered page, shown below, and is entirely Ajax-based. No conventional page submissions occur.

Figure 1: Currency Trader Sample Application

Contents Obtaining the Sample Application Installing the Dynamic Faces Component Library Creating the Currency Trader Web Application

Software Needed for This Tutorial

Before installing the Currency Trader sample application, you need to have the following software installed on your computer.

• NetBeans IDE 5.5.1 (download)
• NetBeans Visual Web Pack 5.5.1 (download)
• Sun Java System Application Server 9.1 ( download)
• Either the Firefox or IE 7 browser

Note: You must register a local instance of the Sun Java System Application Server with the IDE. See the Configuration Information section in the NetBeans Visual Web Pack 5.5.1 Installation Instructions for more information.

top

Obtaining the Sample Application

Follow these steps to download the Dynamic Faces 0.1.1 component library and the Currency Trader sample application from the update center.

1. From the main toolbar, choose Tools > Update Center.
2. Select the checkbox for the NetBeans Visual Web Pack Update Center, as shown below, and click Next.
   
   

   Figure 2: Update Center Selection

   
   
   Note: If you are behind a firewall, you might need to first click Proxy Configuration to configure your HTTP proxy.
3. The update center displays the modules that you have not yet installed. If you see the NetBeans Visual Web Pack Update Center > Sample Custom Components > Dynamic Faces Components (Technology Preview) node, select this node and click Add.
   
   If you do not see the node, you have already installed the module.
4. If you see the NetBeans Visual Web Pack Update Center > Sample Custom Components > Latest Visual Web Pack Sample node, select this node and click Add. If you do not see the node, you have already installed the module.
   
   The Include in Install list should look similar to the following figure, unless you previously installed either module.
   
   

   Figure 3: Module Selection

5. Click Next, and click Accept to start the download.
6. When the download completes, click Next.
7. The Update Center Wizard dispays the list of modules to install, as shown below. Click Next to install the modules.
   
   

   Figure 4: Modules List

8. When prompted, click OK to restart the IDE, as shown below.
   
   

   Figure 5: Restart Prompt

top

Installing the Dynamic Faces Component Library

Follow these steps to add the Dynamic Faces 0.1.1 component library to the IDE's component library manager. You can skip this section if you have already installed version 0.1.1 of the component library.

1. From the main menu, choose Tools > Component Library Manager.
2. In the Component Library Manager, click Import.
3. In the Import Component Library dialog box, click Browse.
   
   An Open dialog box appears, which displays the files of type Component Library File in the netbeans-installation-directory/rave2.0/samples folder, as shown below.
   
   

   Figure 6: Open Dialog Box

4. Select dynamicfaces.complib and click Open.
5. Click OK.
   
   If prompted, click OK to overwrite the existing library.
6. The Component Library Manager displays the contents of the component library, as shown below. Click Close to dismiss the manager.
   
   

   Figure 7: Component Library Manager

top

Creating the Currency Trader Web Application

You are now ready to create the Currency Trader web application.

1. From the main menu, choose File > New Projects.
2. In the New Project dialog box, select Samples > Visual Web from the Categories list, and select Currency Trader from the Projects list, as shown below, and click Next.
   
   

   Figure 8: Currency Trader Visual Web Project

3. Specify a project location and ensure that Set as Main Project is selected, as shown below.
   
   

   Figure 9: Project Location

4. Click Finish to create the project.
   
   The IDE displays Page1 in the Visual Designer. As shown below, there are errors because there are dependencies on the Dynamic Faces component library, which needs to be added to the project.
   
   

   Figure 10: Source File Errors

5. In the Projects window, right-click Component Libraries and choose Add Component Library from the popup menu.
   
   

   Figure 11: Add Component Library

6. Select Dynamic Faces Components (0.1.1) and click Add Component Library.
7. In the Visual Designer, click the x in the Page1 tab to close the page.
8. In the Projects window, double-click Web Pages > Page1 to reopen the page.
   
   The source errors should be resolved and the page should display correctly in the Visual Designer.
9. Double-click Web Pages > README.txt to learn about the sample application.
10. You must view the web application from either IE 7 or Firefox 1.5 or higher. Follow these steps to ensure that the IDE opens the web application in one of these browsers.
    
    
    1. Choose Tools > Options from the main menu.
    2. Choose Firefox or Internet Explorer, whichever is applicable.
    3. Click OK.
11. Click Run Main Project to run the web application.

top

See Also

• Getting Started With Dynamic Faces

---

Send Us Your Feedback