| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <!-- | |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <meta name="description" content="A short introduction to the Wicket web framework | |
| in NetBeans IDE"> | |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, | |
| Wicket, wereplacedb frameworks, open source"> | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <script type="text/javascript" src="../../../images_www/js/window_opener.js"></script> | |
| <title>Introduction to the Wicket Web Framework - NetBeans IDE Tutorial</title> | |
| </head> | |
| <body> | |
| <h1>Introduction to the Wicket Web Framework</h1> | |
| <p>This document takes you through the basics of creating reusable components | |
| and assembling them into a web application. Each component consists of | |
| a Java class and an HTML file. The framework that allows you to develop | |
| your application in this way is called Wicket. In addition to its | |
| component-based approach, a distinguishing feature of Wicket is the absence | |
| of XML configuration files. Instead of an XML configuration file, you | |
| use a Java class for application-wide settings, such as the identification | |
| of a home page. <p>Each widget in your web application is created in a Java class | |
| and rendered in an HTML page. The Java class and HTML page must have | |
| the same name and exist in the same source structure. They are linked | |
| to each other via a Wicket identifier. You will be shown how the IDE | |
| supports the development of Wicket applications so that | |
| you can quickly and efficiently create reusable components that can | |
| give your web application a consistent look and feel without | |
| very much work on your part.</p> | |
| <p><strong>Contents</strong></p> | |
| <img src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" class="stamp" alt="Content on this page applies to NetBeans IDE 7.2, 7.3, 7.4 and 8.0" title="Content on this page applies to the NetBeans IDE 7.2, 7.3, 7.4 and 8.0" > | |
| <ul class="toc"> | |
| <li><a href="#setup">Setting Up the Environment</a> | |
| <ul> | |
| <li><a href="#creating">Creating the Source Structure of a Wicket Application</a> | |
| <ul> | |
| <li><a href="#create-1">Scenario 1: Creating an Ant Based Wicket Application from Scratch</a></li> | |
| <li><a href="#create-2">Scenario 2: Creating a Maven Based Wicket Application from Scratch</a></li> | |
| <li><a href="#create-3">Scenario 3: Creating a Maven Based Wicket Application from Archetype</a></li> | |
| <li><a href="#create-4">Scenario 4: Adding Wicket Support to an Existing Application</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#libraries">Providing Support for Alternative Versions of Wicket</a></li> | |
| <li><a href="#examining">Examining the Source Structure of the Generated Wicket Application</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#features">Using Wicket Features</a> | |
| <ul> | |
| <li><a href="#widget">Adding a Widget</a> | |
| <li><a href="#component">Adding a Reusable Component</a></li> | |
| <li><a href="#ajax">Adding AJAX Features</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#next">Next Steps</a></li> | |
| <li><a href="#seeAlso">See Also</a></li> | |
| </ul> | |
| <p><strong>To follow this tutorial, you need the following software and resources.</strong></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">Software or Resource</th> | |
| <th class="tblheader" scope="col">Version Required</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td> | |
| <td class="tbltd1">7.2, 7.3, 7.4, 8.0, Java EE</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1">Java Development Kit (JDK)</td> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">version 7</a> or | |
| above</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1">Wicket plugin for NetBeans IDE</td> | |
| <td class="tbltd1"><a href="http://plugins.netbeans.org/plugin/3586/wicket-support">NetBeans Wicket plugin page</a></td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1">GlassFish Server Open Source Edition | |
| <br><em class="indent margin-around">or</em> | |
| <br>Tomcat servlet container</td> | |
| <td class="tbltd1">3.1.x or above | |
| <br><em class="margin-around indent"> </em> | |
| <br>version 7.x or above</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p><strong class="notes">Notes:</strong></p> | |
| <ul> | |
| <li>The Wicket support plugin for NetBeans consists of the following modules: | |
| <ul> | |
| <li><b>org-netbeans-modules-web-wicket.nbm.</b> | |
| Provides the Wicket-specific functionality that is | |
| used in this tutorial.</li> | |
| <li><b>org-netbeans-modules-wicket-templates.nbm.</b> | |
| Provides Wicket file-level templates for creating typical | |
| Wicket artifacts, such as pages | |
| and panels.</li> | |
| <li><b>org-netbeans-modules-wicket-library.nbm.</b> | |
| Provides the Wicket JARs, installs them in the IDE's Library Manager. | |
| Therefore, you do not need to download the Wicket distribution from | |
| the Wicket site, because the plugin provides everything you need.</li> | |
| </ul></li> | |
| <li>To install the Wicket support plugin into the IDE, go to the Plugin Manager | |
| (Tools > Plugins from the main menu) and install the plugin under the | |
| Downloaded tab. For more detailed instructions on how to install a framework | |
| plugin into the IDE, see: <a href="framework-adding-support.html">Adding | |
| Support For A Web Framework</a>.</li> | |
| <li> | |
| For more information on Wicket, see <a href="http://wicket.sourceforge.net/">http://wicket.sourceforge.net/</a>. | |
| For the development page for support for Wicket in NetBeans IDE, see | |
| <a href="http://java.net/projects/NbWicketSupport">http://java.net/projects/NbWicketSupport</a>. | |
| If you are familiar with Wicket, you are welcome to contribute code to the Wicket | |
| plugin for NetBeans IDE.</li> | |
| </ul> | |
| <a name="setup"></a> | |
| <h2>Setting Up the Environment</h2> | |
| <p>Before you start writing your Wicket application, you have to make | |
| sure you have all of the necessary software and that your project is set up | |
| correctly. Once you have installed the Wicket support plugin for NetBeans IDE | |
| as described above, you will have a wizard that sets up all the basic files | |
| needed for a Wicket application.</p> | |
| <div class="indent"> | |
| <a name="creating"></a> | |
| <h3>Creating the Source Structure of a Wicket Application</h3> | |
| <p>The source structure of our application must include the Wicket JAR files, | |
| the registration of the Wicket servlet in the <tt>web.xml</tt> file, as | |
| well as some standard artifacts such as the application class and a home page. | |
| Since we are using an IDE, we shouldn't need to create all these files by hand. | |
| Instead, we have wizards to do the work for us.</p> | |
| <p>Depending on your needs, choose one of the appropriate scenarios below:</p> | |
| <ul> | |
| <li><a href="#create-1">Scenario 1: Creating an Ant Based Wicket Application from Scratch</a></li> | |
| <li><a href="#create-2">Scenario 2: Creating a Maven Based Wicket Application from Scratch</a></li> | |
| <li><a href="#create-3">Scenario 3: Creating a Maven Based Wicket Application from Archetype</a></li> | |
| <li><a href="#create-4">Scenario 4: Adding Wicket Support to an Existing Application</a></li> | |
| </ul> | |
| <div class="indent"> | |
| <h4><a name="create-1"></a>Scenario 1: Creating an Ant Based Wicket Application from Scratch</h4> | |
| <p>When creating a new web application in the IDE, the final | |
| panel of the Web Application wizard will be very useful in the context of | |
| our Wicket application.</p> | |
| <ol> | |
| <li>Choose File > New Project. Under Categories, select Web. Under | |
| Projects, select Web Application. Click Next.</li> | |
| <li>In the Name and Location panel, type <tt>MyFirstWicketApp</tt> in Project Name. | |
| Change the | |
| Project Location to any directory on your computer. Click Next. | |
| <li>Leave all the settings unchanged. Or, if you like, you can change them. | |
| Wicket supports any version of Java EE. A Wicket application can be deployed | |
| to any server. Click Next. | |
| <li><p>In the Frameworks panel, choose Wicket, as shown here:</p> | |
| <p><p class="align-left"><img src="https://blogs.oracle.com/geertjan_images/resource/wicket-160-nb.png" alt="frameworks 1"> | |
| <p class="notes"><b>Note:</b> Depending on the modules installed into the IDE, you | |
| may see more or less items in the Frameworks list shown in the screenshot above. | |
| <p>In the panel shown above, | |
| leave all the defaults unchanged. The fields in the panel above provide the following: | |
| <p><ul> | |
| <li><b>Wicket Filter Name.</b> Shows the name of the filter that will be defined in the <tt>web.xml</tt> file. | |
| <li><b>Wicket URL Pattern.</b> Adds the relative URL pattern to the <tt>web.xml</tt> file. | |
| <li><b>Wicket Application Class.</b> Specifies name of the class where the application-wide | |
| settings, such as the home page, are set. | |
| <li><b>Wicket Home Page.</b> Specifies the name of the home page, which will consist | |
| of a file called <tt>xxx.java</tt> and <tt>xxx.html</tt>. | |
| <li><b>Main Package.</b> The Java package in which all the generated artifacts will be | |
| put by the IDE. | |
| <li><b>Version.</b> The Wicket version. Any library in the | |
| Library Manager with a name starting with "Wicket" will | |
| be listed in the Version drop-down above. By default, the | |
| only version listed is 1.6.0 because that is the version | |
| provided by the plugin. | |
| </ul> | |
| <li>Click Finish. | |
| </ol> | |
| <p>The IDE creates the <tt>MyFirstWicketApp </tt> | |
| project. The project contains all of your sources and | |
| project metadata, such as the project's Ant build script. The project | |
| opens in the IDE. You can view its logical structure in the Projects window (Ctrl-1): | |
| <p><p class="align-left"><img src="https://blogs.oracle.com/geertjan_images/resource/wicket-160-nb-2.png" alt="Initial Projects window."> | |
| <h4><a name="create-2"></a>Scenario 2: Creating a Maven Based Wicket Application from Scratch</h4> | |
| <p>When you already have an Ant based application, the IDE can | |
| help you add Wicket support.</p> | |
| <ol> | |
| <li>Choose File > New Project. Under Categories, select Maven. Under | |
| Projects, select Web Application. | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-1.png" alt="HTML side of hyperlink."> | |
| <p>Click Next.</p> | |
| </li> | |
| <li>In the Name and Location panel, type <tt>MyFirstWicketApp</tt> in Project Name. | |
| Change the | |
| Project Location and the default Maven settings as required by your needs. | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-3.png" alt="HTML side of hyperlink."> | |
| <p>Click Next.</p> | |
| </li> | |
| <li>Choose the appropriate server for your needs, as well as "Java EE 6 Web" for the Java EE Version setting. | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-4.png" alt="HTML side of hyperlink."> | |
| <p>Click Finish. The IDE creates the source structure shown below:</p> | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-5.png" alt="HTML side of hyperlink."> | |
| </li> | |
| <li><p>Because we have added support for Java EE 6, no <tt>web.xml</tt> file is created in | |
| the previous step. However, Wicket requires the Wicket application filter to be | |
| registered in the <tt>web.xml</tt> file. Therefore, before continuining, we add | |
| a new <tt>web.xml</tt> file in the application.</p> | |
| <p>Right-click the application, choose New > Other, followed by | |
| Web > Standard Deployment Descriptor (web.xml). Click Next and then click Finish.</p> | |
| </li> | |
| <li><p>Now we are ready to add Wicket support to the application. | |
| Right-click the project node and choose Properties. In the Project Properties dialog, | |
| select Frameworks, and click Wicket. Use the descriptions in the previous sections | |
| to fill out the details in the Wicket Configuration part of the dialog. Click OK.</p> | |
| <p>The IDE creates all the Wicket files needed to get started:</p> | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-6.png" alt="HTML side of hyperlink."> | |
| </li> | |
| </ol> | |
| <h4><a name="create-3"></a>Scenario 3: Creating a Maven Based Wicket Application from Archetype</h4> | |
| <p>Archetypes exist in Maven repositories for setting up Wicket applications.</p> | |
| <ol> | |
| <li><p>Choose File > New Project. Under Categories, select Maven. Under | |
| Projects, select Project from Archetype.</p> | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-7.png" alt="HTML side of hyperlink."> | |
| <p>Click Next.</p> | |
| </li> | |
| <li><p>In the Search field, type "wicket" and then select the archetype you would like to use.</p> | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-8.png" alt="HTML side of hyperlink."> | |
| <p>Complete the wizard with values appropriate to your needs. Click Finish.</p> | |
| </li> | |
| </ol> | |
| <p>The IDE adds Wicket support to the application created from archetype.</p> | |
| <h4><a name="create-4"></a>Scenario 4: Adding Wicket Support to an Existing Application</h4> | |
| <p>When you already have an application, whether created on Ant or Maven, the IDE can | |
| help you add Wicket support.</p> | |
| <ol> | |
| <li>Right-click the application and choose Properties.</li> | |
| <li>In the Project | |
| Properties dialog, select the Frameworks panel, and then click Add. | |
| Then choose Wicket. Click OK.</li> | |
| <li>Use the descriptions in the previous section to fill out | |
| the Wicket Configuration in the Frameworks panel.</li> | |
| <li>Click OK to confirm.</li> | |
| </ol> | |
| <p>The IDE adds Wicket support to the existing application.</p> | |
| </div> | |
| <p>In the next section, we will explore each of the generated files in detail. | |
| <h3><a name="libraries"></a>Providing Support for Alternative Versions of Wicket</h3> | |
| <p>The version of Wicket included in the NetBeans Wicket plugin might not be the one you need. | |
| Take the steps below to register and use an alternative version of Wicket.</p> | |
| <ol> | |
| <li><p>Go to Tools | Ant Libraries. Notice that the Wicket JARs registered | |
| by the NetBeans Wicket plugin are available:</p> | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-9.png" alt="Ant Libraries"> | |
| </li> | |
| <li>In the dialog shown above, click New Library and create a new library with a name beginning with "Wicket". Add JARs | |
| to the library, that is, register the JARs of your preferred version of Wicket into the library you have created.</li> | |
| <li><p>When next you create a new web application, or when you add Wicket support to an existing | |
| application, the Frameworks panel will display your newly registered library, | |
| if its name begins with the word "Wicket":</p> | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/maven-91.png" alt="Ant Libraries"> | |
| <p>When you complete the wizard, the JARs registered in the selected library will be put on the classpath of your application.</p> | |
| </li> | |
| </ol> | |
| <p class="notes"><b>Note:</b> The approach above applies to Ant-based Wicket applications. If you want to use | |
| an alternative version of Wicket in a Maven-based application, change the relevant POM file.</p> | |
| <h3><a name="examining"></a>Examining the Source Structure of the Generated Wicket Application</h3> | |
| <p>The IDE's Web Application wizard has created a lot of files for us. | |
| Here, | |
| we look at the files and see how they relate to each other within | |
| the context of a Wicket development.</p> | |
| <ol> | |
| <li>Let's begin our tour of the generated files.<p></p><p></p><p></p> | |
| <ul> | |
| <li><b>Web Descriptor.</b> We begin by looking in the <tt>web.xml</tt> file, which is | |
| the general deployment descriptor common to all web applications | |
| that comply with the Servlet specification. Expand the <tt>WEB-INF</tt> folder | |
| or the Configuration Files folder, open the file in raw XML view, and | |
| notice the definition of the Wicket filter: | |
| <p><pre class="examplecode"><?xml version="1.0" encoding="UTF-8"?> | |
| <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" | |
| xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | |
| xsi:schemaLocation="http://java.sun.com/xml/ns/javaee | |
| http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> | |
| <filter> | |
| <filter-name>WicketApplication</filter-name> | |
| <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class> | |
| <init-param> | |
| <param-name>applicationClassName</param-name> | |
| <param-value>com.myapp.wicket.Application</param-value> | |
| </init-param> | |
| </filter> | |
| <filter-mapping> | |
| <filter-name>WicketApplication</filter-name> | |
| <url-pattern>/wicket/*</url-pattern> | |
| </filter-mapping> | |
| <session-config> | |
| <session-timeout> | |
| 30 | |
| </session-timeout> | |
| </session-config> | |
| <welcome-file-list> | |
| <welcome-file/> | |
| </welcome-file-list> | |
| </web-app></pre> | |
| <p class="notes"><b>Note:</b> The value of the application class name | |
| is set to <tt>com.myapp.wicket.Application</tt>. In the | |
| next step, we will open the application class file | |
| and inspect its content. | |
| <li><b>Wicket Application Class.</b> Open the | |
| <tt>com.myapp.wicket</tt> package in the Source Packages folder | |
| and then open the <tt>Application.java</tt> file. It looks like this: | |
| <p><pre class="examplecode">package com.myapp.wicket; | |
| import org.apache.wicket.protocol.http.WebApplication; | |
| public class Application extends WebApplication { | |
| public Application() { | |
| } | |
| @Override | |
| public Class getHomePage() { | |
| return HomePage.class; | |
| } | |
| }</pre> | |
| <p>This is the Java file that provides application-wide | |
| settings, comparable to <tt>struts-config.xml</tt> in the | |
| Struts framework and <tt>faces-config.xml</tt> in the | |
| JSF framework. Notice the definition of the <tt>getHomePage()</tt> method. | |
| This method is the minimum requirement of the | |
| application-wide class. It specifies the first page (the home | |
| page) that will be displayed when you deploy the | |
| application. Notice that <tt>HomePage.class</tt> is returned. In | |
| the next step, we will open the <tt>HomePage.java</tt> file | |
| and inspect its content. | |
| <li><b>Wicket Home Page.</b> Open <tt>HomePage.java</tt>. | |
| It looks like this: | |
| <p><pre class="examplecode">package com.myapp.wicket; | |
| public class HomePage extends BasePage { | |
| public HomePage() { | |
| add(new Label("message", "Hello, World!")); | |
| } | |
| }</pre> | |
| <p>The file adds a label to the home page. Rendering of Wicket widgets | |
| created in this file is done in a file with the | |
| same name in the same source structure, which | |
| can only be <tt>HomePage.html</tt>, which looks | |
| as follows, currently: | |
| <p><pre class="examplecode"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" | |
| xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" | |
| xml:lang="en" | |
| lang="en"> | |
| <head> | |
| <wicket:head> | |
| <title>Wicket Example</title> | |
| </wicket:head> | |
| </head> | |
| <body> | |
| <wicket:extend> | |
| <h1 wicket:id="message">This gets replaced</h1> | |
| </wicket:extend> | |
| </body> | |
| </html></pre> | |
| <p>Notice that in <tt>HomePage.java</tt> | |
| we are extending <tt>BasePage</tt>. In <tt>HomePage.html</tt> | |
| we have a <tt>wicket:id</tt> attribute, which tells | |
| us that this is a placeholder | |
| for something created somewhere by a Java file. Also, we have | |
| a reference to the CSS stylesheet that the IDE generated for us. You | |
| can find it in the Web Pages folder, in the Projects window. In the | |
| next step, we will open <tt>BasePage</tt> | |
| and examine its content.</p></li> | |
| <li><b>Base Page.</b> Open | |
| <tt>BasePage.java</tt>. This is what | |
| it looks like: | |
| <p><pre class="examplecode">package com.myapp.wicket; | |
| import org.apache.wicket.markup.html.WebPage; | |
| 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")); | |
| } | |
| }</pre> | |
| <p>This is the class that we want all our | |
| web pages to extend. Every class extending <tt>BasePage</tt> | |
| will inherit an instance of <tt>HeaderPanel</tt> and <tt>FooterPanel</tt>. This | |
| ensures that all our web pages will have the same header and footer. | |
| The HTML side of the base page is as follows:</p> | |
| <p><pre class="examplecode"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" | |
| xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" | |
| xml:lang="en" | |
| lang="en"> | |
| <head> | |
| <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></pre> | |
| <p>In | |
| the next step, we will open <tt>HeaderPanel.java</tt> | |
| and inspect its content. | |
| <li><b>Header Panel.</b> Open | |
| <tt>HeaderPanel.java</tt>. This is what | |
| it looks like: | |
| <p><pre class="examplecode">package com.myapp.wicket; | |
| import org.apache.wicket.markup.html.basic.Label; | |
| import org.apache.wicket.markup.html.panel.Panel; | |
| public class HeaderPanel extends Panel { | |
| public HeaderPanel(String componentName, String exampleTitle) | |
| { | |
| super(componentName); | |
| <b>add(new Label("exampleTitle", exampleTitle));</b> | |
| } | |
| }</pre> | |
| <p>Notice the line in bold above. Here, we create | |
| a Wicket Label widget. The HeaderPanel is a reusable | |
| component. This is the Java side, where widgets are created. | |
| Next we will look at the HTML side, which is where we can | |
| expect the Wicket Label widget to be rendered. In the | |
| next step, we will open the <tt>HeaderPanel.html</tt> | |
| file and inspect its content. | |
| <p>Now change the second argument to "My Very First Component Based Application", | |
| so that the definition of the Label is now as follows: | |
| <p><pre class="examplecode">add(new Label("exampleTitle", "My Very First Component Based Application"));</pre> | |
| <p>Open | |
| <tt>HeaderPanel.html</tt>. Notice that | |
| it has the same name as the Java file we have | |
| just looked at. It is found within | |
| the same package structure. This is what it looks like: | |
| <p><pre class="examplecode"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" | |
| xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" | |
| xml:lang="en" | |
| lang="en"> | |
| <head><title>Wicket Example</title></head> | |
| <body> | |
| <wicket:panel> | |
| <h1>Wicket Example</h1> | |
| <p id="titleblock"> | |
| <b><font size="+1">Start of <span wicket:id="exampleTitle">Example Title Goes Here</span></font></b> | |
| </p> | |
| </wicket:panel> | |
| </body> | |
| </html></pre> | |
| <p>Notice the line in bold above. This is | |
| how you specify where a widget should be rendered | |
| in the HTML side of a web page. Hold down the Ctrl | |
| key and move your mouse over the value | |
| of the <tt>wicket:id</tt> attribute in | |
| the <tt>span</tt> tag. Notice that | |
| the value turns into a hyperlink: | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/hyperlink-1.png" alt="HTML side of hyperlink."> | |
| <p>Click the hyperlink and notice that the Java side | |
| of the web page opens. | |
| <p>Now click the left arrow at the top of the Source Editor to | |
| return to the HTML page: | |
| <p><p class="align-left"><img border="1" src="../../../images_www/articles/74/web/wicket/hyperlink-2.png" alt="Java side of hyperlink."> | |
| <p>In this way, you can navigate quickly | |
| and efficiently between the two sides of Wicket components. | |
| <li><b>Footer Panel.</b> The structure of the footer panel is the same as the header panel, described above.</li> | |
| </ul></li> | |
| <li><p>Right-click the project and run it. The IDE compiles | |
| the application, creates a WAR file, sends it to the deployment server, | |
| opens the IDE's default browser, and displays the application:</p> | |
| <p><p class="align-left"><img border="1" src="../../../images_www/articles/74/web/wicket/deploy-1.png" alt="first deployment."> | |
| <p class="notes"><b>Note:</b> Make sure that "/wicket" is appended to the URL, as shown | |
| above, which maps the URL to the Wicket filter registered in the <tt>web.xml</tt> file.</p> | |
| </ol> | |
| </div> | |
| <br /> | |
| <!-- ===================================================================================== --> | |
| <h2><a name="features"></a>Using Wicket Features</h2> | |
| <p>In the next sections, you will learn about three key Wicket features and how NetBeans IDE supports them | |
| via the NetBeans Wicket plugin:</p> | |
| <ul> | |
| <li><a href="#widget">Widget</a></li> | |
| <li><a href="#component">Reusable Component</a></li> | |
| <li><a href="#ajax">AJAX Support</a></li> | |
| </ul> | |
| <p>The sections below also introduce you to various supporting features that the NetBeans Wicket | |
| plugin makes available.</p> | |
| <div class="indent"> | |
| <h3><a name="widget"></a>Adding a Widget</h3> | |
| <p>In this section, we create our first widget in Wicket. Just like | |
| most other artifacts in Wicket, a widget has a Java side and an HTML side. | |
| On the Java side, the widget is created. On the HTML side, it is rendered. | |
| As shown previously, navigation | |
| between the two sides is made possible via a hyperlink. | |
| <ol> | |
| <li><p>Open <tt>HomePage.html</tt>. If the Palette does not open automatically, | |
| open it via Window > Palette (Ctrl-Shift-8).</p> | |
| <p><p class="align-left"><img border="1" src="../../../images_www/articles/74/web/wicket/widget-2.png" alt="Java side of hyperlink."> | |
| </li> | |
| <li><p>After adding a line below the H1 element in the HTML file, | |
| drag the Label item from the Palette and drop it below the H1 element. You see the | |
| dialog below:</p> | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/widget-3.png" alt="Java side of hyperlink."> | |
| <p><p>Change the values in the dialog to the following:</p> | |
| <p><p class="align-left"><img src="../../../images_www/articles/74/web/wicket/widget-4.png" alt="Java side of hyperlink."> | |
| <p><p>Click OK. Notice that the tag in bold below has been added to the file:</p> | |
| <p><pre class="examplecode"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" | |
| xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" | |
| xml:lang="en" | |
| lang="en"> | |
| <head> | |
| <wicket:head> | |
| <title>Wicket Example</title> | |
| </wicket:head> | |
| </head> | |
| <body> | |
| <wicket:extend> | |
| <h1 wicket:id="message">This gets replaced</h1> | |
| <b><span wicket:id="message1">This gets replaced</span></b> | |
| </wicket:extend> | |
| </body> | |
| </html></pre> | |
| <p>Now you can style the newly added widget by, for example, using H3 tags:</p> | |
| <pre class="examplecode"><h3 wicket:id="message1">This gets replaced</h3></pre> | |
| <p>Next, open <tt>HomePage.java</tt> and notice that a label has been added, with the same | |
| identifier as in the HTML file | |
| (changes in <strong>bold</strong>): | |
| <pre class="examplecode">public class HomePage extends BasePage { | |
| public HomePage() { | |
| add(new Label("message", "Hello, World!")); | |
| <b>add(new Label("message1", "Hello again, World!"));</b> | |
| } | |
| }</pre> | |
| </li> | |
| <li><p>Save the files. Refresh the browser and you will see the Wicket Label, | |
| rendered in the <tt>HomePage.html</tt> file:</p> | |
| <p><p><img border="1" src="../../../images_www/articles/74/web/wicket/deploy-2.png" alt="palette."> | |
| </ol> | |
| <p>You can create placeholders, just like the tag you created | |
| in the <tt>HomePage.html</tt> file above, and then hand the HTML file to your | |
| web designer. While the web designer designs the web page, you can work | |
| on the Java side and create the widgets completely independently. Since the | |
| HTML tags are not embedded in the Java file, you and the web designer can | |
| reap the rewards of Wicket's central focus of "separation of concerns".</p> | |
| <p class="tips">Open the Navigator (Window > Navigating > Navigator), while | |
| the above HTML file is selected in the editor, and then | |
| you can see an overview of the tags, in the Navigator's "Wicket Tags" list:</p> | |
| <p><img border="1" src="../../../images_www/articles/74/web/wicket/wicket-navigator.png" alt="wicket navigator"> | |
| <p class="tips">If there is no matching tag in the matching HTML page, you see an | |
| error message in the Java file: | |
| <p><img alt="Label import statement displayed from clicking lightbulb icon in left margin" | |
| src="../../../images_www/articles/74/web/wicket/widget-1.png" style="border:1px solid"> | |
| </p> | |
| <!-- ===================================================================================== --> | |
| <h3><a name="component"></a>Adding a Reusable Component</h3> | |
| <p>One of strengths of Wicket is the concept of "reusable components". Here, | |
| in this section, we use a wizard to generate a panel, which again has | |
| a Java side and an HTML side. We will create this panel so that we have | |
| a banner that we will reuse in our web pages, so that the banner | |
| is consistent across our web site. We will see how easy it is to add | |
| a panel to a web page. | |
| <ol> | |
| <li><p>Right-click the <tt>com.myapp.wicket</tt> package node | |
| and choose New > Other. Under Categories, choose Web. | |
| Under File Types, notice the following templates:</p> | |
| <p><p><img src="../../../images_www/articles/74/web/wicket/panel-1.png" alt="file templates"></p> | |
| <p>Choose Wicket Panel and click Next.</p> | |
| <li>Type <tt>BannerPanel</tt> in File Name. You should now | |
| see the following: | |
| <p><p><img src="../../../images_www/articles/74/web/wicket/panel-2.png" alt="file templates"> | |
| <p>Click Finish.</p> | |
| <p>Notice that we now have two new files in our package, <tt>BannerPanel.html</tt> | |
| and <tt>BannerPanel.java</tt>. | |
| <li>Open <tt>BannerPanel.html</tt> and notice that the content of | |
| the file is as follows: | |
| <p><pre class="examplecode"><?xml version="1.0" encoding="UTF-8"?> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns:wicket> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
| <title>BannerPanel</title> | |
| </head> | |
| <body> | |
| <wicket:panel> | |
| <!-- TODO - add components here, ala | |
| <span wicket:id="title">title here</span> | |
| --> | |
| </wicket:panel> | |
| </body> | |
| </html</pre> | |
| <p>Between <tt>wicket:panel</tt> tags, a Wicket placeholder is found. Remove | |
| the line above and below the SPAN tag, so that the line with the SPAN | |
| tag is no longer commented out. Hold down | |
| the Ctrl key, move the mouse over the value of the Wicket id, and click | |
| the hyperlink that appears. The <tt>BannerPanel.java</tt> file opens: | |
| <p><pre class="examplecode">package com.myapp.wicket; | |
| import org.apache.wicket.markup.html.panel.Panel; | |
| public final class BannerPanel extends Panel { | |
| BannerPanel(String id) { | |
| super (id); | |
| } | |
| }</pre> | |
| <p>Add a label, as you did earlier in the <tt>HomePage.java</tt> file, | |
| shown in bold below: | |
| <p><pre class="examplecode">package com.myapp.wicket; | |
| <b>import org.apache.wicket.markup.html.basic.Label;</b> | |
| import org.apache.wicket.markup.html.panel.Panel; | |
| public final class BannerPanel extends Panel { | |
| BannerPanel(String id) { | |
| super (id); | |
| <b>add(new Label("title","I am a reusable component!"));</b> | |
| } | |
| }</pre> | |
| <li>Our panel, while simple, is actually complete already. Lets add | |
| it to the home page. Open <tt>HomePage.java</tt> and then create a new | |
| instance of BannerPanel, by adding the following line to the end | |
| of the Constructor: | |
| <p><pre class="examplecode">add(new BannerPanel("bannerPanel"));</pre> | |
| <li>Next, we need to render the panel. Open <tt>HomePage.html</tt> | |
| and add the placeholder tag right above the closing BODY tag, | |
| making sure to use the same Wicket identifier as used in the Java file: | |
| <p><pre class="examplecode"><span wicket:id='bannerPanel'/></pre> | |
| <li><p>Run the project again. Notice that the panel is displayed, | |
| exactly where the HTML file specified it should be rendered:</p> | |
| <p class="align-left"><p><img border="1" src="../../../images_www/articles/74/web/wicket/result-3.png" alt="new deploy"> | |
| </ol> | |
| <p>In Wicket terminology, a panel is a reusable component. Exactly | |
| as shown in this section, you can reuse the panel as often as you like | |
| and in as many web pages as you fancy. | |
| <!-- ===================================================================================== --> | |
| <h3><a name="ajax"></a>Adding AJAX Features</h3> | |
| <p>Instead of using JavaScript to add asynchronous web features (via <a href="http://en.wikipedia.org/wiki/Ajax_(programming)">AJAX technology</a>) to a Wicket | |
| application, Wicket makes available | |
| a Java component model that encapsulates AJAX features. Below, you | |
| are shown how to change the BannerPanel to include an AJAX autocomplete | |
| widget, instead of the label widget you created previously.</p> | |
| <ol> | |
| <li><p>On the HTML side of the <tt>BannerPanel</tt> class, drag an AJAX Text Input item | |
| from the Palette (Ctrl-Shift-8), as shown below:</p> | |
| <p><p><img src="../../../images_www/articles/74/web/wicket/drag-1.png" alt="file templates"></p> | |
| <p>Drop the item below the existing Wicket placeholder, as shown below:</p> | |
| <p><pre class="examplecode"><?xml version="1.0" encoding="UTF-8"?> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns:wicket> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
| <title>BannerPanel</title> | |
| </head> | |
| <body> | |
| <wicket:panel> | |
| <span wicket:id="title">title here</span> | |
| <b><input type="text" wicket:id="countries" size="50"/></b> | |
| </wicket:panel> | |
| </body> | |
| </html></pre> | |
| </li> | |
| <li>On the matching Java side, notice that the following has been added automatically: | |
| <p><pre class="examplecode">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(); | |
| } | |
| };</pre> | |
| </li> | |
| <li>Press Ctrl-Shift-I and then make sure to select the correct import statements: | |
| <p><p><img src="../../../images_www/articles/74/web/wicket/imports-1.png" alt="file templates"></p> | |
| <p>Click OK and make sure the <tt>BannerPanel</tt> class uses the following import statements: | |
| <pre>import java.util.ArrayList; | |
| import java.util.Collections; | |
| import java.util.Iterator; | |
| import java.util.List; | |
| import java.util.Locale; | |
| import org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteTextField; | |
| import org.apache.wicket.markup.html.basic.Label; | |
| import org.apache.wicket.markup.html.panel.Panel; | |
| import org.apache.wicket.model.Model; | |
| import org.apache.wicket.util.string.Strings;</pre> | |
| </li> | |
| <li><p>Refresh the browser again and you will have an AJAX autocomplete field. | |
| As you type, the field will be filled with countries matching the entered text.</p> | |
| <p><p><img border="1" src="../../../images_www/articles/74/web/wicket/result-4.png" alt="file templates"></p> | |
| </ol> | |
| </div> | |
| <!-- ===================================================================================== --> | |
| <h2><a name="next"></a>Next Steps</h2> | |
| <p>This is the end of the introduction to Wicket development in | |
| NetBeans IDE. You are encouraged to continue your journey in the Wicket | |
| framework by working through the Pizza Application Sample described | |
| in <a href="http://www.ensode.net/wicket_first_look.html">A First Look at the Wicket Framework</a> | |
| by David R. Heffelfinger. Note that the result of that tutorial is available as a sample | |
| in the New Project wizard, together with other samples, as shown here: | |
| <p><img src="../../../images_www/articles/74/web/wicket/samples.png" alt="file templates"> | |
| <br> | |
| <div class="feedback-box"> | |
| <a href="/about/contact_form.html?to=3&subject=Feedback: Introduction to the Wicket Framework in 7.2">Send | |
| Us Your Feedback</a></div> | |
| <br style="clear:both;"> | |
| <a name="seeAlso"></a> | |
| <h2>See Also</h2> | |
| <p>For related or more advanced tutorials, see the following resources:</p> | |
| <ul> | |
| <li><a href="../../docs/web/quickstart-webapps.html">Introduction to Developing Web Applications</a></li> | |
| <li><a href="../../docs/web/quickstart-webapps-struts.html">Introduction to the Struts Web Framework</a></li> | |
| <li><a href="quickstart-webapps-spring.html">Introduction to the Spring Web Framework</a></li> | |
| </ul> | |
| </body> | |
| </html> |