NBDemoDynaFaces

Building RIA with DynaFaces Demo (12 Minutes)

Description

This demo is part of the NetBeans Day World Tour and is used in the session “Technologies Used in Creating Rich Internet Applications”. The demo shows how to use NetBeans to develop a web application using visual web, JavaServer Faces, and DynaFaces that includes the use of AJAX and a tag cloud.

Product Versions Supported

Points to Hit

You will be emphasizing the visual web capabilities in this demo as well as DynaFaces. Here are some points to get across to the audience.

  • NetBeans visual web development allows for visual JavaServer Faces development.
  • NetBeans visual web development significantly simplifies JavaServer Faces development by providing a simplified lifecycle and by providing preset scoped managed beans (Page, Session, and Application).
  • With DynaFaces and visual web "AJAX Transaction" you can AJAX-enable any JSF component.

Demo Prep

  1. unzip the attached dynafaces_NBDemoDynaFaces.zip that contains a sample project, the code snippets and the plugin portal database.
  2. unzip the codeclips.zip file into ".netbeans/6.0beta1/config/".
  3. Shutdown NetBeans and unzip the File:Pluginsystem db.zip pluginsystem db.zip into ".netbeans-derby/". The "pluginsystem_db.zip" is the plugin portal database files that need to be unzipped into the directory that JavaDB is looking at for databases. You can see this directory setting in NetBeans by going to "Tools->JavaDB Database->Settings...". The directory the "pluginsystem_db.zip" should be unzipped into is the "Database Location:" setting.
  4. Make sure JavaDB is running on port 1527.
  5. Have the “PluginSystem” project available by unzipping pluginsystem_NBDemoDynaFaces.zip.
  6. Make sure you have a database connection defined for the Plugin Portal database, jdbc:derby://localhost:1527/pluginsystem, userid=admin, password=admin.
  7. Add dynamicfaces02_NBDemoDynaFaces.complib to the component libraries in NetBeans. Use [dynamicfaces02a_NBDemoDynaFaces.complib if you are using JDK 6.


Gotchas

  1. Make sure NetBeans is NOT running when you unzip the code clips.
  2. I have experienced problems with the code clips where lines where split in the middle of keyword. You should be able to easily figure out the syntax errors and correct the code.


Demo

1. Create a new project "web->web application" named TagCloud, choose "Visual Web JavaServer Faces" for the framework.

Explanation Point:
We need to add a JPA persistence unit to use the plugin portal database. Since we are using JavaServer Faces, the EntityManager will be provided by the app server.


2. Right-click on the new project node and choose "New->Persistence Unit...".

3. Enter "dynafacesPU" as the name, Take rest of the defaults and choose the "new data source..." for the Data Source.

4. enter "jdbc/pluginsystem" for the JNDI Name.

5. Choose "jdbc:derby://localhost:1527/pluginsystem" for the Database Connection and press OK.

6. Choose "None" for the "Table Generation Strategy:" and click "Finish".

Explanation Point:
Because the Plugin Portal implementation classes are in a different classpath than the persistence.xml, we need to specify the classes directly in the persistence.xml.


7. Once the "persistence.xml" file opens in the editor, select the "XML" view.

8. Copy the following code into the XML file just above the "<properties/>" element.

     <class>org.netbeans.pluginportal.data.PluginImpl</class>
     <class>org.netbeans.pluginportal.data.CommentImpl</class>
     <class>org.netbeans.pluginportal.data.DisplayCategoryImpl</class>
     <class>org.netbeans.pluginportal.data.OtherCategoryImpl</class>
     <class>org.netbeans.pluginportal.data.RatingImpl</class>
     <exclude-unlisted-classes>false</exclude-unlisted-classes>

Explanation Point:
We need to add the Plugin System project so we can have access to the business logic for getting category counts and categories.


9. Open the project properties by right-clicking on the project node and choosing "Properties".

10. Select the "Libraries" node on the left and choose "Add Project...".

11. Navigate to the "PluginSystem" project that was included with the zip file and click "Add Project JAR files".

12. Select "OK" on the Project Properties dialog to close that dialog.

Image:dynafaces_3_NBDemoDynaFaces.jpg

Explanation Point:
We will put access to the plugin system at the application level so all users can share the plugin system connection.


13. Open the "ApplicationBean1" class by drilling down into the source directory or by double clicking on it in the Navigator.

14. Add the following code inside the class.

 
    @PersistenceUnit(unitName="dynafacesPU")
    private EntityManagerFactory emf;
    
    private PluginSystem pluginsystem;

    public PluginSystem getPluginSystem() {
        if (null == pluginsystem) {
            pluginsystem = new PluginSystemFacade(emf);
        }
        return pluginsystem;
    }

15. Right-click anywhere in the code and do a "Fix imports".

16. Right-click anywhere in the code and do a "Reformat code".

Explanation Point:
We need to add the Dynamic Faces component library to the project so the appropriate components will be available from the palette.


17. Right-click on the "Component Libraries" node under the project and select "Add Component Library".

18. Select the "Dynamic Faces Components (0.2)" library and press "Add Component Library".

Image:dynafaces_2_NBDemoDynaFaces.jpg

19. Select "Page1" from the window tabs to switch to design view of Page1.

20. Now we will add some visual components. Drag a "Basic->static text" field onto the design window and change the text to "Categories".

21. Select the "style" property by clicking on "..." next to Style and open the style property editor.

  • Change the "weight" to "bold"
  • Change the size to "24".

Image:dynafaces_1_NBDemoDynaFaces.jpg

22. Drag a "Layout->Layout Panel" to the designer below the "Categories" static text and change the following properties.

  • Change the "id" property to "categoryPanel".
  • Add "text-align: justify;" to the "style" property.
Explanation Point:
Now we need to add the logic to generate the tag cloud.


23. Select the "Java" view of "Page1" and add the "Demo->getCategoryCloudLinks" code clip into the Page1.java class by placing the cursor just before the last brace "}" and double-clicking on the code clip.

  • Do a "Fix imports" and make sure "ActionEvent" points to "javax.faces.event.ActionEvent"
  • Do a "Reformat Code"

24. Add the following code to the "prerender()" method.

        this.fillCloud();

25. Run the web application to show the page with the tag cloud.

26. Switch back to the "Design" view of "Page1" and drag and drop a "Basic->Text Field" onto the designer below the "Categories" static text and above the "categoryPanel" Layout Panel.

Image:dynafaces_4_NBDemoDynaFaces.jpg

27. Drag a "Dynamic Faces->Ajax Transaction" onto the designer.

Image:dynafaces_5_NBDemoDynaFaces.jpg

28. In the "textField1" property "JavaScript->OnKeyUp" add the following code.


DynaFaces.Tx.fire("ajaxTransaction1", "textField1")

29. Double-click on the Text Field and add the following code to the "textField1_processValueChange" method.


  this.fillCloud();

Explanation Point:
Now we will set up the AJAX Transaction to do the AJAX magic for us.


30. Switch back to the "Design" mode for Page1, select the Text Field, right-click and select "Configure Ajax Transactions...".

31. Change the "Send Input" to "Yes" and click "OK".

Image:dynafaces_6_NBDemoDynaFaces.jpg

32. Right-click on the Layout Panel and select "Configure Ajax Transactions...".

33. Change the "Re-render" to "Yes" and click "OK".

Image:dynafaces_7_NBDemoDynaFaces.jpg

Explanation Point:
So we told the AJAX transaction to involve the Text Field in sending output for the transaction and to involve the Layout Panel in re-rendering for the transaction.


34. Click the "Show Virtual Forms" icon to show the Ajax Transaction visually.

Image:dynafaces_8_NBDemoDynaFaces.jpg

35. Switch to the "Java" view of Page1 and navigate to the "getCategoryCloudLinks" method.

36. Uncomment the following code block.


//            String categoryStart = (String) this.getTextField1().getText();
//            String categoryName = counts[Ii].getCategoryName();
//            /**
//             * If the category doesn't begin with the typed in prefix, don't add it to the cloud.
//             */
//            if (null != categoryStart && categoryStart.length() > 0 && null != categoryName) {
//                if (!categoryName.toUpperCase().startsWith(categoryStart.toUpperCase())) {
//                    continue;
//                }
//            }


37. Run the web application and show how typing different characters in the text field affect the tag cloud without page refreshes.

Demo Cleanup

None.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo