Geertjan Wielenga has released an updated version of the Wicket Plugin for NetBeans 7. For us Wicket fanatics this is indeed great news. The plugin adds some really nice enhancements and productivity features to the NetBeans platform and, when taken in total, in my opinion makes NetBeans the undisputed best platform for Wicket development.
If you haven’t done so already I urge you to download this plugin from the NetBeans plugin portal and install it into NetBeans 7. For those of you not familiar with installing plugins from the NetBeans portal, here are the steps you should follow:
Installing The Wicket Plugin
1. Go to http://plugins.netbeans.org/plugin/3586/wicket-1-4-support and click the Download button to download the zip file to your computer. Once it is downloaded extract all the files. On Windows you can extract the files by right clicking the file with your mouse and selecting Extract All.
2. Start up NetBeans if it isn’t already and select Tools | Plugins from the main menu. This will open the Plugin window.
3. Select the Downloaded tab and then select the Add Plugins button.
4. Navigate to the folder where you the extracted files reside, select all 3 files and then select the Open button.
5. Select the Install button and NetBeans will install the plugin modules after which you will be prompted to restart NetBeans. Please, restart NetBeans.
Create A Wicket Project
Lets explore some of the productivity enhancing features that the Wicket plugin provides. We’ll start first by creating a new Wicket project.
1. From the main menu select File | New Project. Then, select Java Web from the Categories panel and select Web Application from the Projects panel and then select Next.
2. Enter any name you like for the Project Name and select Next.
3. Select Apache Tomcat 7.0.11 for the Server (if you prefer, you can also select GlassFish 3.1) and Java EE 6 Web for the Java EE Version and select Next.
4. In the Frameworks step you can see that there is an option to select Wicket as the framework you want to use in your application. This is the 1st and most obvious contribution that the Wicket plugin provides, easy integration of Wicket into a NetBeans Java Web project. When you select Wicket the Plugin provides you with numerous configuration options such as the name of the Wicket filter and the URL pattern, for instance. For our run through we are going to accept all the defaults.
5. Select Wicket and then select Finish. NetBeans will now generate a starter Wicket application.
Fully expand the newly created project in the Projects panel.
As you can see from the above, the Wicket plugin created a complete Wicket starter project, libraries and all. It also created numerous Wicket components: BasePage, FooterPanel, HeaderPanel and HomePage as well as the required Application.java class. The plugin also configured web.xml according to the configuration parameters that we chose in the Frameworks step.
Run The New Wicket Application
Now, from the main menu select Run | Run Main Project to run the newly created application. As you can see from the rendered page in the browser, the starter project, though trivial, is rather nice - it has a header section, a middle section for content and a footer section, too.
You will, of course, want to modify the starter project to match your own application’s requirement but because the starter project uses Wicket Markup Inheritance you will be able to do this rather easily.
The Starter Project
Lets explore the components that the plugin generated for us.
Open the BasePage component by double clicking on either BasePage.html or BasePage.java. When you click on either, both files will open. This behavior is contributed by the Wicket plugin and I find it extremely convenient.
Now, lets look at BasePage’s markup and java implementation.
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="UTF-8">
<meta name="description" content="Put your description here!" />
<wicket:head>
<wicket:link>
<link rel="stylesheet" type="text/css" href="style.css"/>
</wicket:link>
</wicket:head>
</head>
<body>
<header wicket:id="headerpanel" />
<section class="content_container">
<wicket:child/>
</section>
<footer wicket:id="footerpanel" />
</body>
</html>
package com.myapp.wicket;
import org.apache.wicket.markup.html.WebPage;
/**
*
* @author Jeff
* @version
*/
public abstract class BasePage extends WebPage {
public BasePage() {
super();
add(new HeaderPanel("headerpanel", "Welcome To Wicket"));
add(new FooterPanel("footerpanel", "Powered by Wicket and the NetBeans Wicket Plugin"));
}
}
BasePage.html’s header contributes style.css, which is a packaged resource that resides in the same package as the BasePage component. By using wicket:head and wicket:link tags, Wicket will be able to resolve the reference to style.css and include it in the rendered page.
In the body of the page there are place holders for the header and footer panels. There’s also a wicket:child tag declared which will allow any page that inherits from BasePage to contribute its content to the page. This is what Wicket calls ‘Markup Inheritance’. I’ll show you how this is used when we look at the HomePage component later in the article.
BasePage.java’s implementation is what you would expect to find considering the markup we just explored. BasePage derives from WebPage and after calling into its super class BasePage’s contrcutor adds the HeaderPanel and FooterPanel components to the page. The constructors for both of these components allows you to add the text that will be displayed for each as their second parameters.
Now, lets look at HomePage’s markup and java implementation.
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="UTF-8">
<wicket:head>
<title>Wicket Example</title>
</wicket:head>
</head>
<body>
<wicket:extend>
<h1 wicket:id="message">This gets replaced</h1>
</wicket:extend>
</body>
</html>
package com.myapp.wicket;
import org.apache.wicket.markup.html.basic.Label;
public class HomePage extends BasePage {
public HomePage() {
add(new Label("message", "Hello, World!"));
}
}
Again, there are no surprises here but one item needs to be elaborated on. HomePage derives from BasePage and as I had mentioned, HomePage uses Markup Inheritance to contribute its markup to the page. It will attach its markup to the h1 tag which is sandwiched between the opening and closing wicket:extend tags. This is how Wicket Markup Inheritance works and it is a very powerful technique to use when you want to compose pages that have the same layout and appearance.
I’ll let you explore HeaderPanel and FooterPanel on your own though these also will be what you would expect as both implementations are derived from Panel.
Now lets explore some of the other productivity enhancements that the Wicket plugin provides.
Creating A New Page And A New Panel
To create a new Page, right click the package which currently contains our project’s components and select New | Wicket Page. Enter any name for the Page and select Finish. Two files, one html and one Java, will open in the browser.
Creating a new Panel is much like creating a new Page. Right click the package which currently contains our project’s components and select New | Wicket Panel. Enter any name for the Panel and select Finish. Two files, one html and one Java, will open in the browser.
Exploring Components With Navigator
The plugin adds what I call ‘Wicket Sense’ (my term for a lack of a better one) to the NetBeans Navigator. To see this in action, in the editor select the BasePage.html file and if it isn’t already, open the Navigator and select Wicket Tags from its list of views.
As you can see, the Navigator displays all the elements that include wicket:id attributes in their tags. Now switch editor views to BasePage.java and again, notice how the Navigator has identified all the Wicket components in the Java code.
Your will really appreciate Navigator’s Wicket Sense when you are dealing with large Java and markup files.
Jump To Implementation
Another nice feature that the plugin adds is the ability to jump to the Java implementation from within the markup file. In HomePage.html, hold down the control key and hover the mouse over the ‘message’ wicket:id value. An underline will appear and if you now click on ‘message’ the editor will switch views to the Java implementation, opening the file if it isn’t currently open in the editor.
The plugin doesn’t currently support jumping to the markup page from the implementation file but maybe a future release of the plugin will provide this feature.
Much Thanks And Appreciation
Geertjan deserves our thanks and he earns our appreciation for all the effort he has put into this plugin. In my opinion, the plugin empowers NetBeans to provide a level of support for Wicket development that no other IDE can currently match.
Geertjan, great job and thank you!
Well, that’s it for now but remember, busy hands are happy hands, so get going and explore this fabulous plugin and all its great features. Happy coding!
Posts
That's great work, but why not use the latest stable Wicket release 1.4.17 instead of .10?
ReplyDelete@reinouts Geertjan posted on the plugin's portal page about this. The problem is that point releases are very frequent which makes keeping the library that the plugin installs current somewhat difficult. I pointed out that what I do upon a new release of the libraries is to copy them to the library that the plugin installed via Netbeans main menu option - Tools | Libraries.
ReplyDeletegreat article on wicket
ReplyDeletethis was very helpful thanks Jeff!
ReplyDelete