Friday Dec 14, 2007

Five-Minute Ruby on Rails jMaki Tutorial

If you have installed the NetBeans IDE support for Ruby and you are interested in integrating jMaki in your Ruby on Rails projects, here is a five-minute tutorial that will get you started. In this tutorial, you add a Yahoo data table to a Ruby on Rails view. (If you have not yet installed the NetBeans IDE 6.0 or if you need to add Ruby support to your NetBeans IDE, learn how to here.)


  1. If you haven't installed the jMaki plugin for the NetBeans IDE, it takes just a minute. Select Tools > Plugins from the main menu, select jMaki Ajax Support, click Install and follow the instructions.

  2. Follow the steps in the "Working With Ruby on Rails Files" section in the Getting Started With Ruby and Rails. This should take just a few minutes as no database is involved. Finish all the steps up to but not including the "Practicing What You Have Learned" subsection. It is important that you add the routing code (Code Sample 10) to the routes.rb file and delete the Public > index.html file.

    Note: If you already have done these sections, but added the jMaki plugin after you created the project, you need to create a new project in order to have jMaki included.

  3. Edit the Views > item > index.rhtml file.

  4. Remove the <table> including the nested <tr> and <td> tags. You will replace this HTML table with the Yahoo Data Table.

  5. Choose Window > Palette from the main menu to view the Palette window.

  6. Expand the jMaki Yahoo section in the Palette, then drag and drop the Data Table onto the index.rhtml.

  7. Replace the jmaki_widget tag with the following code:

    <%= jmaki_widget 'yahoo.dataTable',
    :value =>
    {:columns => [
         { :label => 'Id', :id => 'id'},
         { :label =>'Type', :id => 'type'},
         { :label => 'Price', :id => 'price'},
         ],
      :rows => @items
      }
    -%>
    


  8. Click the small x button in the bottom right corner of the IDE to stop the WEBrick server.

  9. Click the Run Main Project button and the browser should display a nice Yahoo table that contains the item data.

Tuesday Oct 30, 2007

Ruby Getting Started Draft Available for Review

 

We have posted a draft of the first 2 sections of the Getting Started With Ruby and Rails tutorial. If you can take some time to look it over and give us feedback, please do.

For those of you who are new to using the NetBeans Ruby support, we would like to know:

  • How is it so far for getting you started with using the product?
  • Were the steps clear and complete? Did you stumble or have to try a step more than once to get it to work?
  • Is it too much for introductory material? If so, what to remove. If not enough, what to include.
  • Looking at the proposed table of contents, does it appear it will be complete? Too much?

For those of you who are experienced with Ruby, can you look for incorrect terminology or misinformation? Are the code examples ok?

To provide feedback on this tutorial, please send corrections, suggestions, and comments to the NetBeans Ruby Developers mailing list at dev@ruby.netbeans.org. Put "Getting Started Draft Feedback" in the subject line.

Friday Aug 10, 2007

jMaki 0.9.7: Using the Yahoo Tabbed View in a NetBeans Visual Web Application

Yesterday, in our blog entry about using the Spry Accordion widget, we mentioned that it uses the same data model as the tabbed view and that you would swap out widgets. Today I will show you how simple it is to do so.

First, complete the steps from yesterday's mini-tutorial.

Next, open your Base jMaki project, and drag a Yahoo Tabbed View widget into index.jsp. Run the project to ensure that all the necessary files are copied into the  resources/yahoo folder.

Copy the resources/yahoo folder from the Base jMaki project and paste it into the resources folder of your Visual Web project.

Click JSP to view the JSP tags for Page1. Replace the following line:

<a:widget name="spry.accordion" value="#{SessionBean1.tripContent}"/>

with:

<a:widget name="yahoo.tabbedview"
  value="#{SessionBean1.tripContent}" />

Now click the Run Main Project button. You should see a tabbed view instead of the accordion.

Thursday Aug 09, 2007

Using the Spry Accordion in a Visual Web Application With jMaki 0.9.7

The jMaki team keeps making great changes to the technology, but sometimes it is hard to keep up with all the changes. I have finally gotten a working version of the latest jMaki-wrapped Spry Accordion. I think that this API will be stable for awhile, so now is a good time to post some instructions on how to use the Spry Accordion in a NetBeans 5.5.1 Visual Web project using the latest NetBeans jMaki plug-in (1.6.9.9.9.5), which bundles jMaki 0.9.7.

One of the recent changes has been the data model. The jMaki team is now publishing the data model information on the ajax.dev.java.net portal at http://wiki.java.net/bin/view/Projects/jMakiDataModels. The data model for the Spry Accordion widget is as follows:

    items::= "{"  {<label> } "}"
    label ::=  "{" "label:"  <string>, [<content> | <include> |<action> ] 
       [<lazyload>]  [<rowid>] <selected>"},"
    selected ::= "selected:" "true" | "false"  (default is false)
    include ::= "include:" <string> ,  
    lazyload ::= "lazyload:" "true" | "false",
    rowid ::= "rowid:" <string> ,
    content ::= "content:" <string>,
    action ::= "action:" "{" [<topic>] <message>  "},"
    topic ::=  "topic:" <string>,
    message ::= "message:" <obj>
    obj ::= <string> | <JavaScript object literal>

Note: This model is the same as the data model for the tabbed view. This means that you can swap out the accordion with a tabbed view and not have to change the data.

To follow this mini-tutorial, you need to get the NetBeans jMaki Plugin. If you have already installed the plugin, use the NetBeans Update Center from the Tools menu to make sure you have the latest version (1.6.9.9.9.5). If you have an earlier version, See Carla's blog entry about how to update the jMaki framework resources in a jMaki project.

I noted in an earlier blog entry that you also need to download the JSF Compounds library (jsfcompounds-0.0.2.jar). This is no longer true. The 1.6.9.9.9.5 plug-in includes this library.

  1. Create a plain (not a Visual Web) Web Application project, name the project something like BaseJSFjMaki097, choose the Sun Java Application Server, and click Next. Select jMaki Ajax Framework and select JavaServer Faces, then click Finish (honestly, for the purposes of this tutorial, it doesn't really matter if you include the JSF framework or not. It works either way). You now have a project from which you can copy the necessary jMaki resources into your Visual Web Project.

  2. Drag the jMaki Spry Accordion widget from the Palette into the index.jsp to add the the widget's resources to the project.

  3. (Important) Click the Run Main Project button. I have noticed that not all the widget resource library files get copied into the project until you run the project. We need to make sure we have them all before we copy them into our VWP project.

  4. Now, create a new Visual Web Project and make it the main project.

  5. To add the jMaki libraries (ajax-wrapper-comp, org.json, and jsfcompounds) to your project, right-click the Libraries node and choose Add Library. Choose jmakilibrary from the Library Manager (when you installed the plugin, it put the jmakilibrary into the Library Manager) and click OK.

  6. Copy the supporting files from the BaseJSFjMaki project to your project:

    1. Copy BaseJSFjMaki/Web Pages/glue.js to Your-VWP-Project/Web Pages.

    2. Copy the following files from BaseJSFjMaki/Web Pages/resources to Your-VWP-Project/Web Pages/resources:

      • config.json
      • jmaki.js
      • system-glue.js


    3. Copy the BaseJSFjMaki/Web Pages/resources/spry folder to Your-VWP-Project/Web Pages/resources.

  7. You can now close the BaseJSFjMaki project.

  8. In the Visual Designer add a Group Panel component to the page (Page1). You will be putting the accordion in this component. This enables you to position the ajax widget as well as see in the visual designer where this jMaki widget is. Any of the layout components will suffice, but for this tutorial, I chose to use the Group Panel.

  9. In the IDE, click the JSP button in the editing toolbar to display the JSP tags for the page.

  10. Add xmlns:a="http://jmaki/v1.0/jsf" to the <jsp:root> tag.

  11. Replace the <webuijsf:panelGroup> tag with the following tags:
    <webuijsf:panelGroup binding="#{Page1.groupPanel1}" id="groupPanel1"
      style="position: absolute; left: 72px; top: 48px;">
       <a:widget name="spry.accordion" value="#{SessionBean1.tripContent}"/>
    </webuijsf:panelGroup>

Now we can setup the web application to return data from the Travel database in the data model format for the accordion.

  1. Click Design to display Page1 in the Visual Designer. This also causes the Navigator window to appear, which you will need in Step 5.

  2. Click the Runtime tab to display the Runtime window.

  3. In the Runtime window,  expand databases , right-click the jdbc:derby node for the travel database, and choose connect. If prompted, type travel in the Password text box and click OK. (The sample travel database is installed if the Sun Java Application Server was added to the IDE before you installed the Visual Web Pack. If you do not see the travel database, go to the NetBeans Visual Web Pack Installation Instructions for information about installing the sample travel database.)

  4. Expand the jdbc:derby node for the travel database, and expand the Tables node.

  5. Drag the TRIP node from the Runtime window and drop it on the SessionBean1 node in the Navigator window, as shown in the following screen shot.



  6. When you dropped the TRIP table on the SessionBean1 node, the IDE added a tripDataProvider node and a tripRowSet node. Double-click the tripRowSet node to open its query in the query editor.

  7. Replace the query in the Query pane (the third pane down) with the following query.
    SELECT ALL TRAVEL.PERSON.PERSONID, 
      TRAVEL.PERSON.NAME, 
      TRAVEL.TRIP.TRIPID, 
      TRAVEL.TRIP.DEPDATE 
    FROM TRAVEL.PERSON
      INNER JOIN TRAVEL.TRIP ON TRAVEL.TRIP.PERSONID = 
        TRAVEL.PERSON.PERSONID
    ORDER BY TRAVEL.PERSON.PERSONID ASC, 
      TRAVEL.TRIP.DEPDATE ASC 
    


  8. Right-click in the query pane and choose Parse Query. The query editor updates the other panes to match the query.

  9. Close the query editor.

  10. Click the Projects tab to display the Projects window.

  11. In the Projects window, double-click the Session Bean node to open the source for SessionBean1.

  12. Add the following code to the bottom of the source, just before the ending brace (}).
         public String getTripContent() {
            // Data Model Format
            // { items : [
            //   {label: "label", content : "content"},
            //   ...
            //  ]}
            String retVal = "";
            try {
                retVal = buildTripTreeData().toString();
            } catch (JSONException ex) {
                log("Exception building tree data" +
                        ex.getMessage());
            }
            return retVal;
        }
        
        
        public JSONObject buildTripTreeData()
        throws JSONException {
            JSONObject rootObject = new JSONObject();
            JSONArray items = new JSONArray();
            JSONObject itemObject = new JSONObject();
            boolean hasNext = tripDataProvider.cursorFirst();
            Integer currentPersonId =
                    (Integer) tripDataProvider.getValue(
                    "PERSON.PERSONID");
            String currentName = 
                    tripDataProvider.getValue(
                    "PERSON.NAME").toString();
            StringBuffer currentContent = new StringBuffer();
            while (hasNext) {
                Integer newPersonId =
                        (Integer) tripDataProvider.getValue(
                        "PERSON.PERSONID");
                if (!newPersonId.equals(currentPersonId)) {
                    // write out data for previous person
                    itemObject.put("label", currentName);
                    itemObject.put("content", 
                      currentContent.toString());
                    items.put(itemObject);
                    // start gathering data for a new item
                    currentPersonId = newPersonId;
                    currentName = 
                            tripDataProvider.getValue(
                            "PERSON.NAME").toString();
                    itemObject = new JSONObject();
                    currentContent = new StringBuffer();
                }
                // Add trip's date to the content
                currentContent.append(tripDataProvider.getValue(
                        "TRIP.DEPDATE").toString() +
                        "<br>");
                hasNext = tripDataProvider.cursorNext();
            }
            // write out data for last person
            itemObject.put("label", currentName);
            itemObject.put("content", currentContent.toString());
            items.put(itemObject);
            rootObject.put("items", items);
            return rootObject;
        }
    

    Note: I got the idea for the buildTripTreeData method from Watsh Rajneesh;s Working With jMaki post.

  13. Click the Run Main Project button to run the web application. You should see a panel for each employee, and each panel should contain the dates of that employee's trips. One odd thing happens, though, that I don't now how to fix. Everytime I click a panel header, the accordion gets wider. Does anyone know why that happens?

Greg and Carla say that they have added some cool features to the accordion widget. I am hoping that as I learn about them, I can add to this mini-tutorial.

Thursday Jun 14, 2007

Using jMaki 9.3 With the NetBeans Visual Web Pack or the Sun Java Studio Creator IDE

We have been blogging about jMaki for over a year, and, during that time, the technology has gone through many iterations, making most of our posts obsolete. With the release of 9.3, there became enough changes that it was time to start reposting these mini tutorials. So, to start, here are new instructions for adding jMaki to a Visual Web Application project or a Sun Java Studio Creator project.

Note: To learn about the modifications, see Carla Mott's Big changes in jMaki blog entry.

Aug 6, 2007 Update: With the later versions, such as 9.6.1, they abstracted some of the functionalities into a separate JSF Compounds library ( jsfcompounds-0.0.2.jar), which you can download from https://ajax.dev.java.net/servlets/ProjectDocumentList?folderID=7871. You must add this jar file to your classpath, by right-clicking the Libraries node in the Projects window, choosing Add Jar/Folder, navigating to and selecting jsfcompounds-0.0.2.jar, and clicking Open. A symptom of this missing jar file is getting the following error in the JSP editor: java.lang.NoClassDefFoundError: com/truchsess/faces/compound/webapp/CompoundChildTagBase

Doing the Set Up

  1. Get the 9.3 jMaki zip. You can download it from http://ajax.dev.java.net/download.html.

    Note: There is also a NetBeans jMaki plug-in. In the past, we have written how to create a NetBeans jMaki project and copy the resources from that project into a Visual Web project. When I try it with the latest NBM, I get the following error: Unable to create an instance of jmaki.widgets.yahoo.tree.Widget. See the error log for more details. If I figure out what I am doing wrong, I will repost this with the added instrucitons.

  2. Unzip it to a folder of your choice. I will refer to this folder as jmaki-dir.

  3. Unzip the zip files in jmaki-dir/widgets for the desired widget libraries. In this mini tutorial, you will use the Tree widget from the Yahoo widget library, so, at a minimum, unzip the jmaki-yahoo zip so that you end up with jmaki-dir/widgets/resources/yahoo.

  4. Create a project (if you are using the Visual Web Pack, create a Visual Web Application). In this example, I named mine Jmaki93Demo. I will refer to to the location of this project as project-dir.

  5. Copy the supporting files to your project. You can use File > Add Existing Item to add files to your project. However, to cut down on the number of steps that I have to write up, I will explain up how to copy the files using the operating system instead of using the IDE.

    1. Copy jmaki-dir/scripts/glue.js to project-dir/web.

    2. Copy jmaki-dir/scripts/system-glue.js and jmaki-dir/scripts/jmaki.js to project-dir/web/resources.

    3. Copy jmaki-dir/core/web/resources/config.json to project-dir/web/resources.

  6. In the Projects window right-click Libraries and choose Add Jar/Folder. Then, navigate to and select jmaki-dir/lib/ajax-wrapper-comp.jar, and click OK.

    This is the jMaki tag library.

  7. Copy the desired widget resource libraries to jmaki-dir/widgets/resources. For this mini tutorial, you need to copy jmaki-dir/widgets/resources/yahoo to project-dir/web/resources.

  8. In the IDE, click the JSP button in the editing toolbar to display the JSP tags for the page.

  9. Add xmlns:a="http://jmaki/v1.0/jsf" to the <jsp:root> tag.

Adding the Yahoo Tree Widget

Now you are done setting up your project resources and you can add the Tree widget to your web page. One problem that you have to work around is that the jMaki widgets do not expose their features using the Design-Time API. What this means is that you will not be able to see the widgets in the Visual Designer. In addtion, with jMaki, you wrap the component in an <a:widget> tag. Even if you were to use a component from the Pallette, if you wrap the component in an <a:widget> tag, the Visual Designer won't see it. To make it easier to work with the widgets in the Visual Designer, I usually put them inside layout components, such as the Grid Panel. That way, I can position the widgets and be able to see in the Visual Designer where the jMaki widgets are on the page.

Note: Work is in progress to provide the jMaki widgets in component libraries that will work in the Visual Designer. We did a JavaOne Hands-On Lab that covered how this is done.

  1. Click Design in the editing toolbar to return to the Visual Designer.

  2. Drag a Grid Panel component from the Layout section of the Palette and drop it on the page.

    While in the development stage, I like to set the border property to 1 to make it easier to visualize the location of the widget on the page. You can clear the border property when you are ready to deploy.

  3. Click JSP in the editing toolbar to display the JSP tags for the page. Replace the <h:panelGrid> tag with the following (this assumes that the Grid Panel's id is gridPanel1. If not, change to match. It is OK if you change the style tag.
    <h:panelGrid binding="#{Page1.gridPanel1}" border="1" id="gridPanel1" 
    style="position: absolute; left: 48px; top: 48px">
    <a:widget name="yahoo.tree"
    value="{'root' : {
    'title' : 'Food',
    'expanded' : true,
    'children' : [
    {'title' : 'Nuts'},
    {'title' : 'Fruit',
    'children' : [
    {'title' : 'Banana'}
    ]
    }
    ]
    }
    }"/>
    </h:panelGrid>
    You now have added a jMaki tag for the Yahoo Tree widget.

  4. Click the Run button. When the page displays in the browser, view the source from the browser to see how the jMaki tags are rendered.

  5. In future blogs, we will further explore the jMaki features. To keep this blog short, we will just show how to subscribe to the Tree widget's onClick topic get the widget's value. If necessary, click Design in the editing toolbar to display the page in the Visual Designer. Drag a Script component from the Advanced section of the Palette and drop it on a blank spot on the page.

  6. Click JSP to view the JSP tags.

    • If you are using the Sun Java Studio Creator IDE, replace the <ui:script> tag as follows:
      <ui:script binding="#{Page1.script1}" id="script1">
      var handler = function(message) {
      alert('You selected ' + message.value.label);
      }
      jmaki.subscribe("/yahoo/tree/onClick", handler);
      </ui:script>
    • If you are using the NetBeans Visual Web Pack, replace the <webuijsf:script> tag as follows:
      <webuijsf:script binding="#{Page1.script1}" id="script1">
      var handler = function(message) {
      alert('You selected ' + message.value.label);
      }
      jmaki.subscribe("/yahoo/tree/onClick", handler);
      </webuijsf:script>
  7. If the script tag appears before the <a:widget> tag, cut the script tag and paste it below the <a:widget> tag, or else you might get a jMaki undefined error when you run the web application and click on a tree node..

  8. Run the web application again. When you click on a tree node (not the expansion box), you get an Alert box that shows what you just clicked.

Monday May 14, 2007

Ajaxifying JavaServer Faces Components

For those of you who were not able to attend our JavaOne 2007 hands-on lab, the lab is now available online at http://developers.sun.com/learning/javaoneonline/j1labs.jsp?track=8&yr=2007.

The lab starts off showing how to use dynamic faces Ajax zones to easily enable plain old JavaServer Faces components to send Ajax requests, and, in turn, dynamically update other components with the Ajax response. You also use an Ajax Transaction to continually poll the server. When you have completed the exercise, you have a simple chat room, like the one shown above. In the instructor-led lab, we had the web app running on the demo machine so you could watch us chatting with the lab attendees. The lab file contains an older version of the dynamic faces component library. To get the more recent one, see Installing the Currency Trader Sample Application at the NetBeans Visual Web Application documentation page.

In the second part of the lab, Winston and the Andersons show how to build a JavaServer Faces component from scratch, and use dynamic faces internally to Ajaxify the component.

The final section shows how to leverage jMaki to create a JavaScript component from one of the popular frameworks into a JavaServer Faces component. You can learn more about jMaki at ajax.dev.java.net and about the componentized widgets at widgets.dev.java.jet.

Sunday May 06, 2007

Dynamic Faces Component Library Makes it Easy to Ajaxify JavaServer Faces Components

One of the things I have been working on for the last few months is writing about the Visual Web Pack Dynamic Faces component library that has been under development, and a very cool chat program that Matt designed to demonstrate this technology.

The Dynamic Faces technology, which comes from the JSF Extensions project, makes it extremely easy to Ajaxify plain old JavaServer Faces components.

The Visual Web Pack Dynamic Faces component library is now available from the NetBeans Update Center, along with another sample application that Matt wrote. To learn how to obtain and install the library and sample application, see Installing the Currency Trader Sample Application, available from the NetBeans Visual Web Pack documentation page.

If you are attending JavaOne 2007, and you are interested in Dynamic faces, here are some sessions, labs, and BOFs to check out:

  • BOF-6825: Testing Web 2.0 Features, Using Real-World Applications by Prakash Narayan and Ed Burns
  • TS-9511: Using Ajax With POJC (Plain Old JavaServer Faces Components) by Craig McClanahan and Matthew Bohm
  • S288058: Building Ajax-Enabled JavaServer Faces Components and Web Applications With jMaki, Dynamic Faces, and the NetBeans IDE by Greg Murray, Craig McClanhan, Ludovic Champenois, and Roberto Chinichi. This presentation is at CommunityOne which is a free event.
  • Lab-4460: Building Ajax-Enabled JavaServer Faces Components and Web Applications with jMaki, Dynamic Faces, and the NetBeans IDE, by me, Craig McClanahan, Matthew Bohm, Winston Prakash, and the Andersons.

Also, come by the NetBeans Visual Web Pack booth at the JavaOne pavillion to see demos of how easy it is to use the Dynamic Faces technology. Tell them Chris sent you .

Wednesday Apr 11, 2007

See You at JavaOne 2007

For the past few months, I have been collaborating with a great group of people to bring you a fantastic hands on lab for JavaOne. This lab, session # LAB-4460 Building Ajax-Enabled JavaServer Faces Components and Web Applications With jMaki, Dynamic Faces, and the NetBeans IDE, was put together by Craig McClanahan, Matthew Bohm, Gail and Paul Anderson, Winston Prakash, and myself. It starts out by showing how to use Dynamic Faces (JSF Extensions) to add Ajax functionality to plain old JavaServer Faces components. It then teaches you how to build your own JSF Ajax-enabled component and add design-time features so that you can use it in the NetBeans Visual Web Pack. Last, it shows how to build a JSF component from a jMaki widget. By leveraging an existing jMaki widget and specialized base classes, you quickly build an Ajax-enabled JavaServer Faces component offering a rich user interface with a minimum of code.

They will also be handing out CDs of the hands on labs. The CDs contain additional labs including another lab (4420) that Craig, Matt, and I wrote that covers some of the above material as well as how to use the jMaki-wrapped DHTML Goodies Tooltip widget. In addition, the CD contains lab 4450. I contributed a section to this lab that shows how to use the jMaki-wrapped Dojo Fisheye widget.

Tuesday Sep 19, 2006

More on the AJAX Map Viewer Tutorial

A customer noticed a display problem with the Map Viewer component in the Firefox browser. The text in the "balloon" for the Map Marker component displays one word per line. So instead of

 This is the place!

as shown in the following figure, the text displays as

    This
    is
    the 
    place! 
 
Figure 1: Map with Map Marker
Figure 1: Map Viewer Application
 
The fix is to use non-breaking spaces (&nbsp;) in the markup property for the Map Marker component. The non-breaking spaces prevent the text from breaking onto multiple lines due to the limited space allotted for the text.

So for the example above, you would do the following:

  1. From the BluePrints AJAX Support Beans section of the Palette, drag a Map Marker component and drop it anywhere on Page1.

  2. In the Properties window for mapMarker1, set set the markup property to This&nbsp;is&nbsp;the&nbsp;place!

For a complete example, see the Map Viewer tutorial.

You can also set the non-breaking spaces programmatically. Here is the code that Matthew Bohn uses for the Map Viewer component in the component catalog to replace all spaces with non-breaking spaces ( ).

      public String button1_action() {
       ...
               String m = formatMarker(userPoint.toString());
               MapMarker marker = new MapMarker(latitude, longitude, m);
               this.mapViewer1.setMarkers( new MapMarker[] {marker} );
       ...
   }
      private String formatMarker(String text) {
       text = "<b>" + text + "</b>";
       text = "Location shown: <br/>" + text;
       text = text.replaceAll(" ", "&nbsp;");
       return text;
   }

Several customers have asked how to customize the controls in the Map Viewer component. For customization information, see the Custom Map Controls section of the Google Maps API Version 2 Documentation..

Wednesday Sep 06, 2006

Using the dojo ComboBox in a Java Studio Creator Project

Note: See Using jMaki 9.3 With the NetBeans Visual Web Pack or the Sun Java Studio Creator IDE for updated instructions on how to add jMaki to a project.

Jennifer Ball just published two new jMaki tutorials, which you can read about in her blog. One of the tutorials shows how to use jMaki in JavaServer Faces projects, and it completes the information that I needed to figure out how to integrate a jMaki widget in a page built using the Java Studio Creator IDE. In particular, how to bind to a bean property, how to save off the widget's values, and how to make managed bean methods available for the AJAX requests.

So, here is a mini-tutorial on how to use jMaki to add a dojo AJAX combo box to a JavaServer Faces web page.

  1. Download version 4 of the jMaki zip from https://ajax.dev.java.net/. There is a newer version, but it might have changes that would break this tutorial. I will update this post after I have done some testing.

  2. Unzip the zip file, then unjar the JAR file and copy the following files to your project. To unjar the JAR file, you can use the jar xvf jMaki.war command, or you can rename the file to have a .zip extension and unzip it.

    • jmaki/resources/jmaki.js to creator-project-dir/web/resources.
    • jmaki/resources/dojo/combobox to creator-project-dir/web/resources/dojo/combobox.
    • The contents of the /resources/libs/dojo directory (not the whole dojo directory) to creator-project-dir/web/resources/libs/dojo/version.3.1.
    • jmaki/WEB-INF/lib/ajax-wrapper-comp.jar to creator-project-dir/web/WEB-INF/lib.


    Note: You might want to add the ajax-wraper-comp.jar to the IDE's library manager. Then, you can easily add the jMaki library to a project by right-clicking the Libraries node in the Projects window and choosing Add Library.

  3. Create a project.

  4. Add a Group Panel component to the page and position the component where you want the combo box to be.

  5. In the editing area of the IDE, click JSP to view the JSP script.

  6. Add xmlns:a="http://java.sun.com/jmaki-jsf" to the top-level <div> tag.

  7. Inside the tag for the Group Panel component, add the jMaki ajax tag for the combo box . Wrap the a:ajax tag inside an f:verbatim tag, as shown below. Note that the service attribute is referring to ApplicationBean1. Later, you add the completeCountry() method to the application bean to return the list of choices.

    Notice: February 2007: jMaki is still evolving. I am working with the latest version from https://ajax.dev.java.net/jmaki-plugin.html. I am still experimenting, but I think instead of the service attribute you need something like value="#{ApplicationBean1.completeCountry}". Once I get it figured out, I will post a new entry.

     
    	
    <?xml version="1.0" encoding="UTF-8"?>
    <jsp:root version="1.2" xmlns:a="http://java.sun.com/jmaki-jsf" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:ui="http://www.sun.com/web/ui">
        <jsp:directive.page contentType="text/html;charset=UTF-8" 
             pageEncoding="UTF-8"/>
        <f:view>
            <ui:page binding="#{Page1.page1}" id="page1">
                <ui:html binding="#{Page1.html1}" id="html1">
                    <ui:head binding="#{Page1.head1}" id="head1">
                        <ui:link binding="#{Page1.link1}" id="link1" 
                            url="/resources/stylesheet.css"/>
                    </ui:head>
                    <ui:body binding="#{Page1.body1}" id="body1" 
                        style="-rave-layout: grid">
                        <ui:form binding="#{Page1.form1}" id="form1">
                            <ui:panelGroup binding="#{Page1.groupPanel1}" 
                                id="groupPanel1" 
                                style="position: absolute; left: 24px; top: 48px">
                            <f:verbatim>
                            <a:ajax id="cb1" name="dojo.combobox" 
                               service="ApplicationBean1-completeCountry.ajax" />
                            </f:verbatim>
                            </ui:panelGroup>
                        </ui:form>
                    </ui:body>
                </ui:html>
            </ui:page>
        </f:view>
    </jsp:root>
    
    
     


  8. In the Projects window, double-click the Application Bean node to open the code in the Source Editor.

    Note: In this mini-tutorial, you add the properties to ApplicationBean1, mostly to make the tutorial short. In your own applications, you might want to create a class that extends AbstractApplicationBean and use the Managed Beans node in the Projects window to make the class' properties available in application scope.

  9. Add the following code to the bottom of the class (I got this from Jennifer's tutorial):


     
        private String[] countries =new String[] {
            "Canada", "France", "Uganda", "Ukraine", "United States of America",
                    "United Kingdom", "Japan", "Korea", "Jamacia", "Thailand"
        };
        
        private String[] countryCodes =
                new String[] {"CA", "FR", "UG", "UR", "USA", "UK", "JP",
                        "KR", "JA", "TH"
        };
        
        public void completeCountry(FacesContext context,
                String[] args,AjaxResult result) {
            result.setResponseType(AjaxResult.JSON);
            result.append("[");
            for (int loop=0; loop < countries.length; loop++){
                result.append("[\\"" + countries[loop] + "\\",\\""
                        + countryCodes[loop] + "\\" ]");
                if (loop < countries.length -1) result.append(",");}
            result.append("]");
        }		
    		
     


  10. Right-click in the code and choose Fix Imports.

  11. Run and test the code. The countries should show up in the drop-down list and, if you type K, Korea should show up in the text box.

  12. In the Projects window, double-click the Session Bean node to open it in the Source Editor. You will now add a property for storing the combo box's selection.

  13. Add the following code to the bottom of the class:

     
        private String country = "";
        
        public String getCountry() {
            return country;
        }
        
        public void setCountry(String country){
            this.country = country;
        }
    		
     


  14. In the JSP for Page1, add the value="#{SessionBean1.country}" attribute to the ajax tag, as shown below.

                            <a:ajax id="cb1" name="dojo.combobox" 
                               service="ApplicationBean1-completeCountry.ajax" 
                               value="#{SessionBean1.country}"/>		
    		
     


  15. Click Design to switch to the Visual Designer.

  16. In the Outline window, select the form1 node.

  17. In the Properties window, set the value for the onSubmit property to jmaki.attributes.get('form1:cb1').saveState();.

  18. Drop a Button component on the page and set it's text to Go.

  19. Right-click in the page and choose Page Navigation.

  20. In the Page Navigation editor, right-click and choose New Page. Click OK to accept the name Page2.

  21. Click Page1.jsp to expand the icon, then drag from Button1 to Page2.jsp.

  22. Double-click Page2.jsp to open it in the Visual Designer.

  23. Drop a Static Text component on the page.

  24. Right-click the component and choose Bind to Data. Click the Bind to an Object tab and select SessionBean1 > country (if, by chance, the property does not appear on the list, close and reopen the project and try again).

  25. Add a Hyperlink component to the page and set its text to Back. Click the ... button for the component's url property, choose Page1, and click OK.

  26. Click OK.

  27. Run the application. Select a value and click Go. The selected value, which was saved to the session bean's country property, is displayed.

  28. Click Back. Because the widget's value attribute is bound to the session bean's country property, the previously selected value is displayed.

To understand how the jMaki tags work, I highly recommend that you read both of Jennifer's tutorials.

Monday Aug 28, 2006

AJAX Grid Component Webinar Announcement

We have received quite a few tutorial requests on how to display cross-tabular data in a web page. So, I imagine that many of you will be as excited as I am to hear about the upcoming Java Studio Creator & eBusiness Applications' Grid Ajax Component Webinar, which launches on Monday, August 28.

Using the Ajax-powered Nitobi Grid, you can display and edit tabular data in your web applications.

The on-demand webinar will be available through September 1 from https://sun.webex.com/sun/onstage/onstage/framesets/viewrecording1.php?EventID=346934662. There will also be an "Ask the Expert" session where presenters and engineers from both eBusiness Applications and Sun will be available to answer questions. Submit your question to http://java.sun.com/developer/community/askxprt/

Thursday Aug 03, 2006

jMaki, the Spry Accordion Widget, and Java Studio Creator Projects

Note: See Using jMaki 9.3 With the NetBeans Visual Web Pack or the Sun Java Studio Creator IDE for updated instructions on how to add jMaki to a project.

One of the widgets in the jMaki zip is the Spry Accordion. I thought this would be a nice way to display a page fragment menu in an application that I am building using the Sun Java Studio Creator IDE. Here is how I used the jMaki tag library to add the Accordion widget to my page fragment.

1. First, I downloaded the latest jMaki zip from https://ajax.dev.java.net/. I used 3.2.6.

2. Just like with my earlier project, I unjared the jar file and copied the necessary files to my project:

  • jmaki/resources/jmaki.js to creator-project-dir/web/resources.
  • jmaki/WEB-INF/types.properties to creator-project-dir/web/WEB-INF.
  • jmaki/WEB-INF/lib/ajax-wrapper-comp.jar to creator-project-dir/web/WEB-INF/lib.
  • jmaki/resources/spry/plainAccordion to creator-project-dir/web/resources/spry/plainAccordion.

3. Additionally, I added a resources/libs directory and copied over the Spry libraries from jmaki/resources/libs/spry.

4. I added a pageFragment, Sidebar.jspf, to my project, and in the JSP file for my page fragment, I added xmlns:a="http://java.sun.com/jmaki" to the top-level <div> tag.

5. In the page fragment, I used a Group Panel component to wrap the jMaki tag. The JSPF file looks like this:

 
	
<?xml version="1.0" encoding="UTF-8"?>
<div style="height: 400px; width: 200px; -rave-layout: grid" 
    xmlns:a="http://java.sun.com/jmaki" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://www.sun.com/web/ui">
    <f:subview id="Sidebar">
        <ui:panelGroup binding="#{Sidebar.groupPanel1}" 
            id="groupPanel1" 
            style="height: 382px; left: 0px; top: 0px; position: absolute; width: 190px">
            <f:verbatim>
                <a:ajax type="spry" name="spry.plainAccordion" />       
            </f:verbatim>
    </ui:panelGroup>
    </f:subview>
</div>

 

6. I wanted each section in the accordion to resize to the section's content. The samples that you get when you download the components from Adobe come with an AquaAccordion style that does not set a section height. To save some time, I simply copied those styles to the resources/spry/accordion/components.css file.

 
	
.AquaAccordion {
	border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;
	overflow: hidden;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
}

.AquaAccordion .Tab {
	height: 24px;
	background-image: url(images/aqua-gradient.gif);
	background-repeat: repeat-x;
	background-color: #6dc1fc;
	border-top: solid 1px black;
	border-bottom: solid 1px gray;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	text-align: center;
}

.AquaAccordion .Content {
	overflow: auto;
	margin: 0px;
	padding: 0px;
	background-image: url(images/gray-gradient.gif);
	background-repeat: repeat-x;
}

.AquaAccordion .hover {
	background-image: none;
	background-color: #33CCFF;
}

7. Now I can design my Accordion widget menu. In this simple example, I hard-coded the menu contents in my resources/spry/accordion/components.htm file. Note that because I am using the overriding styles, I am using Panel instead of AccordionPanel, Tab instead of AccordionPanelTab, and so forth.

 
	
<div id="${uuid}" class="AquaAccordion" tabindex="0">
    <div class="Panel">
        <div class="Tab">
            <div class="Label">Fruit</div>
        </div>
        <div class="Content">
            <a href="faces/FoodDetail.jsp?name=banana">Banana</a><br/>
            <a href="faces/FoodDetail.jsp?name=papaya">Papaya</a><br/>       
            <a href="faces/FoodDetail.jsp?name=grapes">Grapes</a><br/>   
        </div>
    </div>
    <div class="Panel">
        <div class="Tab">
            <div class="Label">Vegetables</div>
        </div>
        <div class="Content">
            <a href="faces/FoodDetail.jsp?name=avocado">Avocado</a><br/> 
            <a href="faces/FoodDetail.jsp?name=sprouts">Brussel Sprouts</a><br/>
            <a href="faces/FoodDetail.jsp?name=asparagus">Asparagus</a><br/>       
            <a href="faces/FoodDetail.jsp?name=onion">Onion</a><br/> 
        </div>       
    </div>
    <div class="Panel">
        <div class="Tab">
             <div class="Label">Grains and Cereal</div>
        </div>
        <div class="Content">
            <a href="faces/FoodDetail.jsp?name=rice">Rice</a><br/> 
            <a href="faces/FoodDetail.jsp?name=macaroni">Macaroni</a><br/>
        </div>       
    </div>    
</div>

 

8. To make the content sections shrink to fit the content, you must turn off animation, so I modified the widget creation statement in component.js as follows:

var acc1 = new Spry.Widget.Accordion(widget.uuid, { enableAnimation: false });

9. I can now add this page fragment to all the pages in my application.

Monday Jul 31, 2006

Updated Progress Bar Tutorial Shows More Features

Joe, our man in Prague, collaborated with Matthew Bohm and developed a new Using the AJAX Progress Bar tutorial. The updated tutorial shows how to start and stop the progress bar without having to navigate to a new page. It also includes a new section on how to create a progress bar for an indeterminate process,which uses motion to show that a task is under way. The tutorial ends with a couple of challenges -- one to simulate a failed task, and another to change the style of the progress bar. Check it out.

Thursday Jun 29, 2006

Using the AJAX Rating Component

Good news. We just released a new AJAX tutorial, Using the AJAX Rating Component. In this blog, Gail interviews Matthew Bohm, the developer who authored the Rating component. Matt had some interesting things to say about the Rating component and his other contributions to the Sun Java Studio Creator IDE. Be sure to read to the end of the blog, where we ask Matt about his interests outside of work.

Gail: Why do a Rating component?
Matt: We decided to write the Rating component for two reasons. First, it is one of the components used in the Java Pet Store. Second, AJAX is intrinsically part of the UI paradigm established by Rating components on the web; that is, they almost always use AJAX and provide a great use case for demonstrating AJAX.

Gail: Briefly explain the component.
Matt: The Rating component, of course, lets the user assign a rating to an item, such as a book or movie. It displays a row of stars the user can click on. It also can display controls to indicate the user is "not interested" in the item, to clear the rating, and to toggle between normal and average mode. There are properties for specifying the text and hover texts to be displayed. When the user assigns a rating, the client sends that rating to the server via an AJAX request, and the server sends the values of several properties back to the client via the AJAX response. There are also a number of advanced properties, including those that let you execute your own client-side scripting when the user assigns a new rating, mouses over a control, or toggles the mode.

Gail: The mode toggle feature is an innovation. Can you say more about it?
Matt: When I looked at rating controls on existing web sites, I was disappointed with how they presented the user's rating and the average rating in combination. In most cases, the user and average ratings for an item were shown in separate rating instances. In the case where they were shown in the same rating instance, the user could not view the average rating after assigning a user rating. I felt we could do better. So in the Rating component for the Java Studio Creator IDE, we have a mode toggle control that lets the user alternately view the user and average rating for an item within the same rating instance.

Gail: What's another of your favorite contributions to the Java Studio Creator IDE?
Matt: My biggest contribution is definitely the invention of virtual forms. Without them, writing applications in the IDE would be much more difficult. The team's sample application developers particularly like them.

Gail: You were a technical writer in a previous life, and we owe you a thanks for writing the script for the Rating tutorial.  What made you switch to development?
Matt: Actually, my technical writing career lasted only two months or so. I had my eye on development from the start. I was working in a data warehousing group and wrote a much-needed intranet application at a time when the development team was stretched for resources. The group's director, with whom I still keep in touch,
quickly moved me into development.

Gail: Tell me something about yourself not related to work.
Matt: I write classical music. Currently I'm setting some poems by the great Argentine poet Alejandra Pizarnik for soprano and piano. Pizarnik is not so well known; she died in 1972 at age thirty-six, and her poetry is dark and surreal. My wife, who is also a poet and Argentine, introduced me to her work.

Tuesday May 30, 2006

Giving jMaki a Whirl

Note: See Using jMaki 9.3 With the NetBeans Visual Web Pack or the Sun Java Studio Creator IDE for updated instructions on how to add jMaki to a project.

In my last blog, I mentioned Greg Murray's jMaki project which enables Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component. Having struggled with the JavaScript part of our Building AJAX-based JavaServer Faces Web Applications With Sun Java Studio Creator hands-on lab, I was excited to learn about a tool that makes the JavaScript part of AJAX technology easier. Geertjan provides a NetBeans module that makes it easy to try out in the NetBeans IDE. I wondered whether I could use jMaki from the Creator IDE, and decided to give it a whirl. Here is how to use jMaki from the IDE.

  1. Get the jMaki zip. You can download it from http://ajax.dev.java.net/. After you unzip the zip file, you need to unjar the jmaki.jar file. If you don't know how to unjar a jar file, one easy way is to rename it jmaki.zip and unzip it.

  2. Create a Sun Java Studio Creator project. I named mine JmakiDemo.

  3. Copy the supporting files to your project. You can use File > Add Existing Item to add files to your project. However, to cut down on the number of steps that I have to write up, I will explain up how to copy the files using the operating system instead of using the IDE.

    1. Copy jmaki/jmaki.js to creator-project-dir/web.

    2. Copy jmaki/WEB-INF/types.properties to creator-project-dir/web/WEB-INF.

      This properties file maps a type to the location of the supporting JavaScript libraries. If the widget uses JavaScript libraries, you set the type parameter in the jMaki ajax tag.

    3. Copy jmaki/WEB-INF/lib/ajax-wrapper-comp.jar to creator-project-dir/web/WEB-INF/lib.

      This is the jMaki tag library.

    4. Copy the directory that contains the widget's HTML template, CSS style, and JavaScript file containing bootstrap code from jmaki/resources to creator-project-dir/web/resources.

      For example, I copied the tree, list, and sudoku directories.

      The jMaki classes look in several places for the widget's files. One place it looks is /resources/widget-name. This is how the jMaki sample app is set up and I chose to put mine in the same place. Look at the Using jMaki widgets (https://ajax.dev.java.net/page-developer.html) documentation for alternative locations.

  4. In the IDE, click the JSP button in the editing toolbar to display the JSP source for the page.

  5. Add xmlns:a="http://java.sun.com/jmaki" to the <jsp:root> tag. The tag should look similar to this:

    <jsp:root version="1.2" xmlns:a="http://java.sun.com/jmaki" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:ui="http://www.sun.com/web/ui">


  6. Now you are done setting up your project resources and you can start adding the widgets to your web page. One problem that you have to work around is that the jMaki widgets do not expose their features using the Java Studio Creator Design-Time API. What this means is that you will not be able to see the widgets in the Visual Designer. In addtion, with jMaki, you wrap the component in an <a:ajax> tag. Even if you were to use a component from the Pallette, if you wrap the component in an <a:ajax> tag, the Visual Designer won't see it. To make it easier to work with the widgets in the Visual Designer, I used a Grid Panel component to help me visualize where the widgets are on the page.



    Click Design in the editing toolbar to return to the Visual Designer.

  7. Drag a Grid Panel component from the Layout section of the Palette and drop it on the page.

    For my project, I set the column property to 2 and set the border property to 1. By setting the border to 1, it makes it easier to visualize the page. You can clear the border property when you are ready to deploy.

  8. For my project, I dropped a Label component in the left column and a Group Panel in the right column. The sole purpose of the Group Panel is to occupy the right column with something visual. I ended up with three rows, one each for tree, list, and sudoku.

  9. Drop a Faces Verbatim component from the Advanced section of the Palette into each Group Panel. The <a:ajax> wrapper tags are nested in the <f:verbatim> tags. By nesting the <a:ajax> tag within an <f:verbatim> tag, you can control its position in the web page. Otherwise, the rendered output will put the widgets in places that have no relation to where you positioned the <a:ajax> tag in the page's JSP.

  10. Each widget needs an <a:ajax> wrapper tag.

    Look in the widget's .jsp page in the jMaki sample application to see what the <a:ajax> tag should look like for that widget. For example, for the List widget, I looked at jmaki/list/index.jsp.

    Basically, you provide the name, type (if applicable), and service (if applicable). You also need to provide the names of the .js and .css files if their names do not match the name of the component or are not located in one of the default directories. Below is what my tags look like. Notice that I replaced <f:verbatim/> with start and ending tags.

    <h:panelGrid binding="#{Page1.gridPanel1}" 
        border="1" columns="2" id="gridPanel1" 
        style="position: absolute; left: 96px; top: 48px">
      <ui:label binding="#{Page1.label1}" id="label1" text="List Widget:"/>
      <ui:panelGroup binding="#{Page1.groupPanel1}" id="groupPanel1">
        <f:verbatim>
          <a:ajax name="list" service="listService.jsp"/>
        </f:verbatim>
      </ui:panelGroup>
      <ui:label binding="#{Page1.label2}" id="label2" text="Tree Widget:"/>
      <ui:panelGroup binding="#{Page1.groupPanel2}" id="groupPanel2">
        <f:verbatim>
          <a:ajax type="dojo" name="tree"/>
        </f:verbatim>
      </ui:panelGroup>
      <ui:label binding="#{Page1.label3}" id="label3" text="Sudoku Widget:"/>
      <ui:panelGroup binding="#{Page1.groupPanel3}" id="groupPanel3">
        <f:verbatim>
          <a:ajax name="sudoku"/>
        </f:verbatim>
      </ui:panelGroup>
    


  11. The List widget uses a service .jsp file. Copy jmaki/web/listService.jsp to creator-project-dir/web.

  12. Note that for the Tree widget, there is a type attribute set to dojo. This means that the widget uses the dojo library. So, you have to copy jmaki/web/resources/dojo to creator-project-dir/web/resources.

    Here is what my Projects window looks like:



  13. There you have it. You are ready to hit the Run button. After you do, view the source from the browser to see how the ajax tags are rendered.

Saturday Apr 15, 2006

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.

Friday Mar 24, 2006

New and Improved AJAX Component Tutorials

We now have three tutorials to help you learn about the sample Java BluePrints AJAX components. These tutorials include:

You download the BluePrints AJAX Component modules from the Sun Java Studio Creator Update Center, then import the modules into the IDE. You need only download and import the modules once to make the AJAX modules available to all your applications.

Here is a tidbit from the Progress Bar tutorial: To change the color and font of the Progress Bar component, add the following code to your stylesheet.css file. Open the style sheet from the Projects window by double-clicking the projectname > Web Pages > resources > stylesheet.css node.

Code Sample 1: Stylesheet Code to Set Progress Bar Color
.bpui_progressbar_portionComplete {
   background: blue !important;
}
.bpui_progressbar_portionRemaining {
   background: lightgrey !important;
}
.bpui_progressbar_percentageText {
  color: blue !important;
  font-size: 18px;
  font-style: italic;
  font-weight: normal !important;
  text-align: center
}
.bpui_progressbar_barArea {
   height: 9px !important;
}
About

divas

Search

Archives
« April 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
   
       
Today