Thursday May 01, 2008

Wicket 1.3.3 Support for NetBeans IDE 6.1

Today we uploaded the latest NBMs of our Wicket support into the Plugin Portal:

http://plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=3586

There are several changes, some mentioned recently in this blog. Basically, the names of the generated templates are friendlier, the JARs are Wicket 1.3.3 instead of 1.3.0, some useless options have been removed from the Frameworks panel, the Wicket Stylesheet support is part of the generated code, the Wicket filter is used in web.xml instead of the Wicket servlet, a header panel is always created... so mostly quite simple enhancements that, I believe, will make the user experience a lot better. Click the above link, then the Download button on the Plugin Portal page, unzip the ZIP that you then get and install the three NBMs. There is no need to download Wicket JARs from the Wicket site, because one of the three NBMs provides these and registers them in the IDE when you install the NBM.

I've installed them into 6.1, though they should probably also work in 6.0. Here's a quick scenario that should show you most of the Wicket support provided by this plugin, together with some nice Wicket/Ajax integration:

  1. Create a new web application and choose Wicket in the Frameworks panel:

  2. When you click Finish you have a nice simple source structure to begin your adventures with Wicket:

    (From a NetBeans API point of view, the coolest thing about the above screenshot is that you see exactly that when you complete the wizard, i.e., the package opens automatically and the HomePage.java is also opened automatically, so that you can begin coding there right away. It's a small thing, but pretty cool.)

  3. Right-click on the package (not on the project node, else you'll come across a known bug in this plugin) and choose New | Other and then choose the Panel template from the New File dialog:

  4. Name your panel:

  5. Click Finish and you have the skeleton of a new panel, i.e., both the Java side and the HTML side:

  6. Add a text field to the HTML side of the new panel, with a Wicket ID that will connect the HTML to the Java side of the panel:

  7. On the Java side of the Country Panel, use Wicket's AutoCompleteTextField class, as follows, making sure to pass the 'countries' ID, which connects the Java side with the HTML side defined in the previous step:

    final AutoCompleteTextField field = new AutoCompleteTextField("countries", new Model("")) {
    
        @Override
        protected Iterator getChoices(String input) {
            if (Strings.isEmpty(input)) {
                return Collections.EMPTY_LIST.iterator();
            }
            List choices = new ArrayList(10);
            Locale[] locales = Locale.getAvailableLocales();
            for (int i = 0; i < locales.length; i++) {
                final Locale locale = locales[i];
                final String country = locale.getDisplayCountry();
                if (country.toUpperCase().startsWith(input.toUpperCase())) {
                    choices.add(country);
                    if (choices.size() == 10) {
                        break;
                    }
                }
            }
            return choices.iterator();
        }
    };

    Above, the bits in bold is Wicket, the rest is just standard JDK code for getting the country names for the available locales. Here we're just building up a collection that will be displayed in the auto complete text field that we are creating here. The collection could contain anything at all, but Wicket provides the class that will make the text field behave in a way that we've come to expect from Ajax.

  8. Now add the field to the panel, on the Java side, by adding the one line below that is in bold, in the constructor:

    CountryPanel(String id) {
        super(id);
        add(field);
    }
  9. Hurray. You've just defined your first reusable panel. Now let's actually make use of it. In the HomePage.html, add a new tag below the existing tag, i.e., add the tag that is in bold below:

    <html>
      <head>
        <title></title>
        <link wicket:id='stylesheet'/>
      </head>
      <body>
        <span wicket:id='mainNavigation'/>
        <span wicket:id='countryPanel'/>
      </body>
    </html>

    The Wicket ID you specify here could be anything, so long as it is matched by the Wicket ID we add to the Java side, in the next step.

  10. In the HomePage.java, instantiate the Country Panel, by simply adding the line in bold (all the rest was generated by the Frameworks panel in the Web Application wizard):

    package com.myapp.wicket;           
    
    import org.apache.wicket.model.CompoundPropertyModel; 
    
    public class HomePage extends BasePage {
    
        public HomePage() {
    
            setModel(new CompoundPropertyModel(this));
            add(new CountryPanel("countryPanel"));
    
        }
    }

    In the same way that you've instantiated the Country Panel above, you could do so anywhere else, such as in the generated Header Panel. You just need to make sure that the Wicket ID is the same on both sides, i.e., in the HTML file and in the Java file.

  11. Hurray, you're done. Deploy the application to the server of your choice. Notice that you now have an auto complete text field in your browser:

What have you learned? Firstly, you've learned that NetBeans IDE has cool support for Wicket (and you haven't seen everything yet, for example, when you refactor a Java class, the related HTML side will be refactored at the same time and you can cause a hyperlink to be created on the Wicket ID on the HTML side, which will let you open the Java side from inside the HTML page, plus the Navigator shows the Wicket tags in the page, plus there's Wicket samples in the New Project wizard). Secondly, you've learned about one of Wicket's Ajax classes (go here for more). Thirdly... how much JavaScript have you used in order to create a very typical Ajax component? Well... ummm... none. So, you can use Ajax without leaving the comfortable world of Java. Fourthly, in the debug mode, which is Wicket's default mode, there's a cool debug console right inside the HTML page, which provides a lot of useful information about the current session. Fifthly (but something you can't see here), if the browser doesn't support JavaScript, Wicket provides fallback behavior to handle this for you. Finally, isn't it cool that you can wrap your Ajax behavior in your own Wicket components and then reuse them, so easily?

About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« May 2008 »
SunMonTueWedThuFriSat
    
2
5
7
16
20
22
25
28
       
Today