New and Updated Sample AJAX Components

We have been quiet recently because we have not only been updating and writing new tutorials, we have been super busy preparing for the new and updated Sun Java Studio Sample AJAX Components. Gail has been leading the tutorial effort, and Chris has been working with Matthew and Jayashri to develop a great hands-on lab for JavaOne. This lab shows how to AJAXize the basic components and explains how to use the Sample AJAX Components that you can download from the Update Center.

The newest version of the Sample AJAX components, and the updated tutorials, were posted last night. Here is a brief description of the components:

  • Auto-Complete Text Field: Provides a list of suggested input as the user types.
  • Progress Bar: Displays the progress of a long-running operation.
  • Select Value Text Field: Provides a drop-down list of suggested choices as the user types.
  • Text Editor Component: Provides a text area that supports rich text editing.
  • Map Viewer: Sends AJAX requests to the Google Maps API to display a map, and to pan, zoom, show different views, and add balloon markers to the map.
  • Buy Now Button: Renders a form element that submits order-item information to Pay Pal.
  • Rating: This component allows a user to submit a rating and then view the average rating.

You can read more about the components at http://developers.sun.com/prodtech/javatools/jscreator/reference/code/samplecomps/.

We have three AJAX tutorials at http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/index.jsp, More tutorials are in the works.

To learn how to download and import the components, see http://dscpreview.sfbay.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/ajaximportcomponents.html.

Here is an excerpt from the JaveOne hands-on lab that uses the Select Value Text Field component. You use the Select Value Text Field to display a drop-down list of filenames. The list narrows down to filenames that contain the entered characters as the user types.

  1. Add this code to the bottom of the init method in SessionBean1. Note that for Windows, your path would look something like "///C:/MyPrograms/CreatorFiles".
    Code Sample 1: init Code
            File directory = new File(PUT PATH HERE);
            files = directory.list();
    
     
  2. Right-click and choose Fix Imports.

  3. Add the following files property, along with its getter and setter to SessionBean1.
    Code Sample 2: files Property
        /\*\*
         \* Holds value of property files.
         \*/
        private String[] files;
    
        /\*\*
         \* Getter for property files.
         \* @return Value of property files.
         \*/
        public String[] getFiles() {
    
            return this.files;
        }
    
        /\*\*
         \* Setter for property files.
         \* @param files New value of property files.
         \*/
        public void setFiles(String[] files) {
    
            this.files = files;
        }
     
  4. Open a page in the Visual Designer and drop a Select Value Text Field on the page.

  5. Double-click the Select Value Text Field. The IDE adds a method to the page's Java source and displays the method.

    This method takes a String (what the user types) and returns a SelectItem array (what goes in the drop-down list). The back-end calls this method every time the user types a character into the Select Value Text Field's textbox, and the client updates the page to display the new drop-down list of values based on the returned SelectItems array.

  6. Replace the body of the method with the following code shown in bold.
    Code Sample 3: matchValue Method
         public SelectItem[] selectValue1_matchValue(
                    FacesContext context, String value) {
            ArrayList matches = new ArrayList();
            try {
                String[] fileList = getSessionBean1().getFiles();
                for (int i=0; i < fileList.length; i++) {
                    if  (fileList[i].toUpperCase().indexOf(value.toUpperCase()) != -1) {
                        SelectItem item = new SelectItem(fileList[i]);
                        matches.add(item);
                    }
                }
            } catch (Exception ex) {
                log("Exception getting matches: " +
                        ex.getMessage(), ex);
                SelectItem item = new SelectItem(
                        "Error getting matching names");
                matches.add(item);
            }
            SelectItem[] items = (SelectItem[]) matches.toArray(new SelectItem[0]);
            return items;
        }
     
  7. Right-click and choose Fix Imports.

  8. Click the Run Main Project button or press Ctrl-F5.

  9. Type in chacters and watch how the drop-down list changes as you type.

  10. (Optional) Shut-down the Application Server. In the Properties window for the Application Server, set the Enable HTTP Monitor to true. Restart the server and run the web application. Select the Get records to see the AJAX requests that are sent to the server.
Comments:

Can not reach the server dscpreview.sfbay.sun.com. I think correct url should be http://developers.sun.com/<path>

Posted by Volker on April 15, 2006 at 08:13 AM PDT #

Thank you for letting us know. The fix is in.

Posted by diva2 on April 18, 2006 at 10:57 AM PDT #

Post a Comment:
Comments are closed for this entry.
About

divas

Search

Archives
« July 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  
       
Today