Creating the Source Structure of a Component Based Application

The source structure of our application must include the Wicket JAR files, the registration of the Wicket servlet in the web.xml 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 a wizard to do the work for us. Specifically, the final panel of the Web Application wizard will be very useful in the context of our component based application.

1. Choose File > New Project. Under Categories, select Web. Under Projects, select Web Application. Click Next.
2. In the Name and Location panel, type MyFirstWicketApp in Project Name. Change the Project Location to any directory on your computer.
3. Leave all the other settings unchanged. Or, if you like, you can change them. Wicket supports J2EE 1.4 as well as Java EE 5. A Wicket application can be deployed to any server. Click Next.
4. In the Frameworks panel, choose Wicket, as shown here:

   

   Leave all the defaults unchanged. The fields in the panel above provide the following:

   • Wicket Servlet Name. Shows the name of the servlet that will be defined in the web.xml file.
   • Wicket URL Pattern. Adds the relative URL pattern to the web.xml file.
   • Wicket Application Class. Specifies name of the class where the application-wide settings, such as the home page, are set.
   • Wicket Home Page. Specifies the name of the home page, which will consist of a file called xxx.java and xxx.html.
   • Main Package. The Java package in which all the generated artifacts will be put by the IDE.
5. Click Finish.

The IDE creates the MyFirstWicketApp 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):

In the next section, we will explore each of these files in detail.

Examining the Source Structure of a Component Based Application

The IDE's Web Application wizard 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 component based development.

1. Let's begin by looking in the web.xml file, which is the general deployment descriptor common to all web applications that comply with the Servlet specification. Expand the WEB-INF folder or the Configuration Files folder, open the file in raw XML view, and notice the definition of the Wicket filter:

       <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>
           <init-param>
               <param-name>debug</param-name>
               <param-value>2</param-value>
           </init-param>
       </filter>
       <filter-mapping>
           <filter-name>WicketApplication</filter-name>
           <url-pattern>/wicket/*</url-pattern>
       </filter-mapping>

   Notice the value of the application class name. In the next step, we will open the application class file and inspect its content.

2. Open the com.myapp.wicket package in the Source Packages folder and then open the Application.java file. It looks like this:

   package com.myapp.wicket;
   
   import org.apache.wicket.protocol.http.WebApplication;
   
   public class Application extends WebApplication {
   
       public Application() {
       }
   
       public Class getHomePage() {
           return HomePage.class;
       }
   }

   This is the Java file that provides application-wide settings, comparable to struts-config.xml in the Struts framework and faces-config.xml in the JSF framework. Notice the definition of the getHomePage() 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 HomePage.class is returned. In the next step, we will open the HomePage.java file and inspect its content.

3. Open HomePage.java. It looks like this:

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

   The file is empty, other than the specification of the model to be used by the application. 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 HomePage.html, which looks as follows, currently:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   
   <html>
     <head>
       <title></title>
       <link wicket:id='stylesheet'/>
     </head>
     <body>
       <span wicket:id='mainNavigation'/>
   
     </body>
   </html>

   Notice that in HomePage.java we are extending BasePage. In HomePage.html we have a wicket:id 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 BasePage and examine its content.

4. Open BasePage.java. This is what it looks like:

   package com.myapp.wicket;
   
   import org.apache.wicket.markup.html.WebPage;
   import org.apache.wicket.model.IModel;
   import org.apache.wicket.markup.html.resources.StyleSheetReference;
   import org.apache.wicket.util.string.Strings;
   
   public class BasePage extends WebPage {
   
       public BasePage() {
           this(null);
       }
   
       public BasePage(IModel model) {
           super(model);
           final String packageName = getClass().getPackage().getName();
           add(new HeaderPanel("mainNavigation", Strings.afterLast(packageName, '.')));
           add(new StyleSheetReference("stylesheet", BasePage.class, "style.css"));
       }
   }

   This is the class that we want all our web pages to extend. For example, notice the line in bold above. Every class extending BasePage will inherit an instance of HeaderPanel. The Wicket id is "mainNavigation", which is the Wicket id we saw in the previous step, in the HomePage.html file. We can refer to the "mainNavigation" Wicket id at the top of all our HTML pages. This ensures that all our web pages will have the same header. In the next step, we will open HeaderPanel.java and inspect its content.

5. Open HeaderPanel.java. This is what it looks like:

   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);
           add(new Label("exampleTitle", exampleTitle));
       }
   
   }

   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 HeaderPanel.html file and inspect its content.

   Now change the second argument to "My Very First Component Based Application", so that the definition of the Label is now as follows:

   add(new Label("exampleTitle", "My Very First Component Based Application"));

6. Open HeaderPanel.html. 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:

   <html xmlns:wicket>
    <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>

   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 wicket:id attribute in the span tag. Notice that the value turns into a hyperlink:

   

   Click the hyperlink and notice that the Java side of the web page opens.

   Now click the left arrow at the top of the Source Editor to return to the HTML page:

   

   In this way, you can navigate quickly and efficiently between the two sides of Wicket components.

7. Right-click the project and choose Run Project. 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: