当前页面: 开发资料首页 → Netbeans 专题 → Component Based Web Development in NetBeans IDE
摘要: 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
The following topics are covered below:
This tutorial can be completed in 20 minutes.
For more information on Wicket, see http://wicket.sourceforge.net/. For details on support for Wicket in NetBeans IDE, see https://nbwicketsupport.dev.java.net/. If you are familiar with Wicket, you are welcome to contribute code to the Wicket Support module for NetBeans IDE.
Note: The Wicket Support module for NetBeans, which you will
use extensively in this tutorial, is incomplete. However, more than
enough functionality is provided for you to get started developing
Wicket applications. Where there are gaps in the functionality, they
will be mentioned in the instructions below.
Before you start writing your component based 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 module for NetBeans IDE, you will have a wizard that sets up all the basic files needed for a Wicket application.
Before you begin, you need to install the following software on your computer:
Once you have downloaded the Wicket Support module for NetBeans IDE, open the nbmodule project in the IDE. Do not open the genericwebmodule project. Right-click the project and choose Install/Reload in Development IDE.
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.
For example, browse to "wicket-1.2.2", if that is the top level of your Wicket download:
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.
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.
<servlet> <servlet-name>WicketApplication</servlet-name> <servlet-class>wicket.protocol.http.WicketServlet</servlet-class> <init-param> <param-name>applicationClassName</param-name> <param-value>com.myapp.wicket.WicketApplication</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>2</param-value> </init-param> <init-param> <param-name>detail</param-name> <param-value>2</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet>
Notice the value of the application class name. In the next step, we will open the application class file and inspect its content.
package com.myapp.wicket; import wicket.protocol.http.WebApplication; public class WicketApplication extends WebApplication { public WicketApplication() { } public Class getHomePage() { return Home.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 Home.class is returned. In the next step, we will open the Home.java file and inspect its content.
package com.myapp.wicket; public class Home extends WicketExamplePage { public Home() { } }
The file is empty. 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 Home.html, which looks as follows, currently:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <link rel='stylesheet' type='text/css' href='style.css'/> </head> <body> <span wicket:id='mainNavigation'/> </body> </html>
Notice that in Home.java we are extending WicketExamplePage. In Home.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 WicketExamplePage and examine its content.
package com.myapp.wicket; import wicket.markup.html.WebPage; import wicket.model.IModel; import wicket.util.string.Strings; public class WicketExamplePage extends WebPage { public WicketExamplePage() { this(null); } public WicketExamplePage(IModel model) { super(model); final String packageName = getClass().getPackage().getName(); add(new WicketExampleHeader("mainNavigation", Strings.afterLast(packageName, '.'))); } }
This is the class that we want all our web pages to extend. For exxample, notice the line in bold above. Every class extending WicketExamplePage will inherit an instance of WicketExampleHeader. The Wicket id is "mainNavigation", which is the Wicket id we saw in the previous step, in the Home.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 WicketExampleHeader.java and inspect its content.
package com.myapp.wicket; import wicket.markup.html.basic.Label; import wicket.markup.html.panel.Panel; public class WicketExampleHeader extends Panel { public WicketExampleHeader(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 WicketExampleHeader is a reusable component. This is the Java side, where widgets are created. Lets 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 WicketExampleHeader.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"));
<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 and that the cursor lands to the left of the opening quotation of the Wicket identifier:
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.
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. In NetBeans IDE, tools are provided for you to generate stubs on both the Java side and HTML side simultaneously. As shown previously, navigation between the two sides is made possible via a hyperlink.
Note: At the time of writing, the Border item in the Wicket palette does not work.
Note: Parts of this dialog box do not work yet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <link rel='stylesheet' type='text/css' href='style.css'/> </head> <body> <span wicket:id='mainNavigation'/> <span wicket:id="message1">this text will be replaced</span> </body> </html>
Note: The Wicket Label, with the Wicket identifier, was created on the Java side when you dropped the Wicket Label on the HTML side.
Note: You can create placeholders, just like the SPAN tag generated in the Home.html file, 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".
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 footer that we will reuse in our web pages, so that the footer is consistent across our web site. We will see how easy it is to add a panel to a web page.
Note: At the time of writing, the BodyBorder template does not work.
Choose Panel and click Next.
Click Finish.
Notice that we now have two new files in our package:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> </head> <body> <wicket:panel> <span wicket:id="message">this text will be replaced</span> </wicket:panel> </body> </html>
Between wicket:panel tags, a Wicket placeholder is found. Hold down the Ctrl key, move the mouse over the value of the Wicket id, and click the hyperlink that appears. The FooterPanel.java file opens, the cursor landing at the start of the Wicket identifier. Notice that a Wicket label has already been defined for us:
package com.myapp.wicket; import wicket.markup.html.panel.Panel; import wicket.markup.html.basic.Label; public class FooterPanel extends Panel { /** Creates a new instance of FooterPanel */ public FooterPanel(String id) { super(id); add(new Label("message", "I am a reusable component!")); } }
add(new FooterPanel("footerPanel"));
<span wicket:id='footerPanel'/>
Note: 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.
This is the end of the introduction to component based web 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 First Look at the Wicket Framework
by David R. Heffelfinger.
↑返回目录
前一篇: Creating a wizard console in NetBeans IDE 5.5
后一篇: Building a Tree From Database Data