您 web 应用程序中的每个窗口小部件都是在一个 Java 类中创建的，并呈现在一个 HTML 页中。该 Java 类与 HTML 页必须同名并且存在于同一个源结构中。它们通过一个 Wicket 标识符相互链接。稍后 将向您展示 IDE 如何支持基于组件的应用程序开发以便您能快速高效的创建可重用组件，这些可重用组 件将帮助您轻松实现 web 应用程序外观的一致性。
本教程所需要的软件
开始之前，需要在您 的计算机中下载并安装以下软件：
NetBeans IDE 6.0 Web & Java EE。
Java Standard Development Kit (JDK™) 5.0 版或 6.0 版
针对 NetBeans IDE 的 Wicket Support 插件。该插件由以下两部分组成：
org-netbeans-modules-web-wicket.nbm。 提供模板和其 他特定于 Wicket 的功能，本教程需要使用。
org-netbeans-modules-wicket-library.nbm。 提 供 Wicket JAR，并将它们安装到 IDE 的 Library Manager 中。因此，您不需要从 Wicket 站点下载 Wicket 发行版，这一款插件已经提供了所需的一切功能。
使用 Tools 菜单下面的 Plugin Manager 将以上两个模块安装到 IDE 中。
有关 Wicket 的更多信息，请参见 http://wicket.sourceforge.net/。有关 NetBeans IDE 对 Wicket 支持的详细资料，请参见 https://nbwicketsupport.dev.java.net/。如果您熟悉 Wicket，欢迎您为 NetBeans IDE 的 Wicket Support 模块贡献代码。
建立环境
在开始编写基于组件的应用程序之前，必须确保已经拥有了 所有必需的软件并正确地建立了项目。安装了用于 NetBeans IDE 的 Wicket Support 模块后，将出现一 个向导程序来帮助您建立 Wicket 应用程序所需的所有基本文件。
创建基于组件应用程序的源结构
我们应用程序的源结构必须包含 Wicket JAR 文件，在 web.xml 文件中注册的 Wicket servlet 和一 些标准工件，例如应用类和主页。由于使用的是 IDE，我们不需要手动创建所有的这些文件。取而代之的 是，我们使用一个向导来做这些工作。特别地，Web Application 向导的最终面板在基于组件的应用程序 的上下文中非常有用。
选择 File > New Project 选项。在 Categories 列表中，选择 Web 选项。在 Projects 列表中 ，选择 Web Application 选项。单击 Next 按钮。
在 Name and Location 面板中，在 Project Name 字段中键入 MyFirstWicketApp。将 Project Location 更改为计算机上的任意目录。
不要更改其它设置。如果您喜欢的话，也可以更改它们。Wicket 支持 J2EE 1.4 和 Java EE 5。可以 将 Wicket 应用程序部署到任何服务器。单击 Next 按钮。
在 Framework 面板中，选择 Wicket 选项。
不要改变默认设置。该面板提供了以下字段：
Action Servlet Name：显示将在 web.xml 文件中定义的 servlet 名称。
Action URL Pattern：将相关 URL 添加到 web.xml 文件中。
Wicket Application Class：在进行应用程序范围设置的地方（如主页）指定类的名称。
Wicket Home Page：指定主页的名称，它将包含名为 xxx.java 和 xxx.html 的文件。
Dummy POJO：POJO 是 Wicket 中的通用工件。这里，您可以令 IDE 为您生成一个简单的、空的 JavaBeans 文件。
Main Package：IDE 用来放置所有生成工件的 Java 包。
Add Example Formatting：添加一个由 Java 类和 HTML 文件组成的可重用组件，以及一个 CSS 样式 表，以便为您所有的 web 页定义通用标题。
单击 Finish 按钮。
IDE 创建了 MyFirstWicketApp 项目。此项目包含所有源和项目元数据，例如项目的 Ant 构建脚本。 此项目在 IDE 中打开。您可以在 Projects 窗口 (Ctrl-1) 中查看它的逻辑结构：
在下一节中，我们将详细讨论每一个文件。
检查基于组件应用程序的源结构
IDE 的 Web Application 向导为我们创建了许多文件。本节我们将讨论这些文件是如何在基于组件的 开发环境中相互联系的。
我们从 web.xml 文件开始，该文件是所有 web 应用程序的通用常规部署描述符，它遵守 Servlet 规 范。展开 WEB-INF 文件夹或者 Configuration Files 文件夹，以原始 XML 视图方式打开文件，注意 servlet 的定义：WicketApplication WicketApplication org.apache.wicket.protocol.http.WicketServlet applicationClassName com.myapp.wicket.WicketApplication debug 2 detail 2 2 WicketApplication /wicket/*
注意应用程序类名称的值。在下一步骤中，我们将打开应用程序类文件并查看其内容。
打开 Source Package 文件夹中的 com.myapp.wicket 包，然后打开 WicketApplication.java 文件 。文件内容如下所示package com.myapp.wicket;import org.apache.wicket.protocol.http.WebApplication;public class WicketApplication extends WebApplication { public WicketApplication() { } public Class getHomePage() { return Home.class; }}
这是提供应用程序范围设置的 Java 文件，类似于 Struts 框架中的 struts-config.xml或者 JSF 框 架中的 faces-config.xml。注意 getHomePage() 方法的定义。此方法是应用程序范围类的最小需求。它 指定了在部署应用程序时将被展示的第一页（主页）。注意 Home.class 会被返回。在下一步骤中，我们 将打开 Home.java 文件查看其内容。
打开 Home.java 文件。文件内容如下所示：package com.myapp.wicket;public class Home extends WicketExamplePage { public Home() { }}
该文件是空的。呈现此文件中创建的 Wicket 窗口小部件的是同一源结构中的同名文件，它只能是 Home.html，它通常看起来如下：
注意在 Home.java 中，我们正在展开 WicketExamplePage。在 Home.html 中有一个 wicket:id 属性 ，它告诉我们这是某个 Java 文件在某处所创建内容的占位符。并且，我们也会和 IDE 为我们创建的 CSS 样式表相关联。您可以在 Web Pages 文件夹中的 Projects 窗口发现它。在下一步骤中，我们会打 开 WicketExamplePage 并检查其内容。
打开 WicketExamplePage.java 文件。文件内容如下所示：package com.myapp.wicket;import org.apache.wicket.markup.html.WebPage;import org.apache.wicket.model.IModel;import org.apache.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, '.'))); }}
这就是我们希望所有的 web 页都进行扩展的类。例如，注意上面的粗体字行。每一个扩展 WicketExamplePage 的类都将继承一个 WicketExampleHeader 实例。Wicket ID 为“mainNavigation” ，它就是我们在上一个步骤的 Home.html 文件中看到的 Wicket ID。我们可以在所有 HTML 页面的顶部 引用“mainNavigation” Wicket ID。这确保了我们所有的 web 页面都拥有相同的标题。在下一步骤中 ，我们将打开 WicketExampleHeader.java 并查看其内容。
打开 WicketExampleHeader.java 文件。文件内容如下所示：package com.myapp.wicket;import org.apache.wicket.markup.html.basic.Label;import org.apache.wicket.markup.html.panel.Panel;public class WicketExampleHeader extends Panel { public WicketExampleHeader(String componentName, String exampleTitle) { super(componentName); add(new Label("exampleTitle", exampleTitle)); }}
注意上面的粗体字行。这里，我们创建一个 Wicket Label 窗口小部件。WicketExampleHeader 是一 个可重用组件。这是 Java 端，创建窗口小部件的地方。让我们来看 HTML 端，即我们期望 Wicket Label 窗口小部件被呈现的一端。在下一步骤中，我们将打开 WicketExampleHeader.html 文件查看其内 容。
现在将第二参数更改为“My Very First Component Based Applicaion”，从而使 Label 的定义变为 ：
add(new Label("exampleTitle", "My Very First Component Based Application"));
Open 打开 WicketExampleHeader.html 文件。注意它与我们刚才介绍的 Java 文件同名。您可以在同 一个包结构下找到它。文件内容如下所示： Wicket Example
Start of Example Title Goes Here
注意上面的粗体字行。您通过这一行指定在一个 web 页面的 HTML 端呈现窗口小部件的地方。按住 Ctrl 键并将鼠标移动到 span 标记中 wicket:id 属性的值上。注意此值会变成一个超链接：
单击超链接，注意 web 页面的 Java 端会打开，并且指针会落在 Wicket 标识符的起始引号的左侧：
现在单击 Source EdiTor 顶部的左箭头返回 HTML 页面。用这种方法，您可以在 Wicket 组件的两端 之间快速高效地导航。
右键单击项目并选择 Run Project 选项。IDE 会编译应用程序，创建一个 WAR 文件，将它发送到部 署服务器，打开 IDE 的默认浏览器，并显示应用程序。
添加一个窗口小部件
本节中，我们将在 Wicket 中创建第一个窗口小部件。就像 Wicket 中的许多其它工件一样，一个窗 口小部件有一个 Java 端和一个 HTML 端。窗口小部件将在 Java 端创建。而 HTML 端是呈现窗口小部件 的地方。如前所示，两端之间的导航通过一个超链接来实现。
打开 Home.html 文件并在其中添加以下黑体标记。
打开Home.java 文件并添加一个标签，使用与 HTML 文件中相同的标识符：
右键单击项目并选择 Run Project 选项。当再次部署应用程序时，您会看到在 Home.html 文件中呈 现的 Wicket Label。
在 Home.html 文件中的 SPAN 标记左右添加 H2 标记并再次部署应用程序。注意结果：
注意： 您可以创建占位符，就像在 Home.html 文件中生成的 SPAN 标记一样，然后将 HTML 文件提 交给您的 web 设计人员。在 web 设计人员设计 web 页面时，您可以在 Java 端工作并完全独立地创建 窗口小部件。由于 HTML 标记没有被嵌入到 Java 文件中，您和 web 设计人员可以坐享 Wicket“分工合 作”的好处。
添加一个可重用组件
Wicket 的优点之一就是就是“可重用组件”的概念。在本节中，我们将使用向导来生成一个面板，它 也有一个 Java 端与一个 HTML 端。我们创建此面板是为了获得一个可在 web 页面中重用的页脚，以使 我们所有 web 站点中的页脚保持一致。我们将看到在 Web 页而中添回一个面板是多么简单。
右键单击 MyFirstWicketApp 项目结点并选择 New>File/Folder 选项。在 Categories 列表中， 选择 Wicket 选项。在 File Types 列表中，注意以下模板：
注意： 在编写的时候，BodyBorder 模板无效。
选择 Panel 选项并单击 Next 按钮。
在 Class Name 中键入 FooterPanel，在 Package 下拉列表中选择com.myapp.wicket，注意我们使用 的超类是 wicket.markup.html.panel.Panel。现在您应该看到：
单击 Finish 按钮。
注意现在我们的包中有两个新文件：FooterPanel.html 和 FooterPanel.java。
打开 FooterPanel.html 文件，文件内容如下所示：
在 wicket:panel 标记之间，可以发现一个 Wicket 占位符。按住 Ctrl 键，将鼠标移动到 Wicket id 的值上，然后单击出现的超链接。这样会打开 FooterPanel.java 文件，指针落在 Wicket 标识符的 起始处。注意它已经为我们定义了一个 Wicket Label：
package com.myapp.wicket;import org.apache.wicket.markup.html.panel.Panel;import org.apache.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!")); }}
我们的面板虽然简单，但其实已经很完整了。让我们将它添加到主页中。打开 Home.java 文件，然后 通过将下面的行添加到 ConstrucTor 的末尾来创建一个 FooterPanel 的新实例：add(new FooterPanel("footerPanel"));
然后，我们需要将面板呈现出来。打开 Home.html 然后在 BODY 结束标记的上方添加占位符，并确保 使用的 Wicket 标识符与在 Java 文件中使用的相同：
再次运行项目。注意所显示的面板是否位于 HTML 文件指定的位置：
注意：在 Wicket 术语中，面板是一个可重用组件。正如本节所示，您可以在任何的 web 页面中重复 使用此面板。
在 NetBeans IDE 中开发基于组件的 Web 应用程序的介绍到此结束。建议您通过 David R. Heffelfinger 撰写的 A First Look at the Wicket Framework 中的 Pizza Application Sample 继续 学习 Wicket 框架。
当一个人把寂寞当作人生预约的美丽，
