使用NetBeans IDE进行基于组件的Web开发

本文档将向您介绍如何创建可重用组件以及如何将它们装配到 web 应用程序中的基础知识。每个组件都包含一个 Java 类和一个 HTML 文件。允许您以这种方式开发应用程序的框架被称为 Wicket 。除了基于组件的方法之外， Wicket 的另一个特点是没有使用 XML 配置文件。您将使用一个Java 类来取代 XML 配置文件进行应用程序范围内的设置，例如主页的识别。

您web 应用程序中的每个窗口小部件都是在一个 Java 类中创建的，并呈现在一个 HTML 页中。该 Java 类与 HTML 页必须同名并且存在于同一个源结构中。它们通过一个 Wicket 标识符相互链接。稍后将向您展示 IDE 如何支持基于组件的应用程序开发以便您能快速高效的创建可重用组件，这些可重用组件将帮助您轻松实现 web 应用程序外观的一致性。

本教程涵盖以下主题：

l           建立环境

¡          安装软件

¡          创建基于组件的应用程序的源结构

¡          检查基于组件的应用程序的源结构

l           添加一个窗口小部件

l           添加一个可重用组件

此教程可以在20分钟之内完成。

有关 Wicket 的更多信息，请参见 http://wicket.sourceforge.net/ 。有关 NetBeans IDE 中支持 Wicket 的详细资料，请参见 https://nbwicketsupport.dev.java.net/ 。如果您熟悉 Wicket ，欢迎您为　NetBeans IDE　的 Wicket Support 模块贡献代码。

注意：本教程中将广泛使用的 NetBeans 的　Wicket Support　模块是不完整的。然而，鉴于您刚开始开发 Wicket 应用程序，这些功能已经绰绰有余。对于功能缺失的地方，将在下面的说明书会指出。

建立环境

在开始编写基于组件的应用程序之前，必须确保已经拥有了所有必需的软件并正确地建立了项目。安装了用于 NetBeans IDE 的 Wicket Support 模块后，将出现一个向导程序来帮助您建立 Wicket 应用程序所需的所有基本文件。

安装软件

在开始之前，您需要将以下软件安装到您的计算机中：

l         Wicket 1.2 或更高版本

l         用于 NetBeans IDE 的 Wicket Support 模块(https://nbwicketsupport.dev.java.net/)

l         NetBeans IDE 5.0 或更高版本。（此教程是在5.5 RC1 环境下编写与测试的。）

l         Java 标准开发包 (JDK™)　版本1.4.2

下载NetBeans IDE的Wicket Support模块后，在IDE中打开nbmodule项目。不要打开genericwebmodule项目。在Development IDE右键单击项目并选择Install/Reload。

创建一个基于组件的应用程序的源结构

我们应用程序的源结构必须包含 Wicket JAR 文件，在 web.xml 文件中注册的 Wicket servlet 和一些标准工件，例如应用类和主页。由于使用的是 IDE，我们不需要手动创建所有的这些文件。取而代之的是，我们使用一个向导来做这些工作。特别地，Web Application 向导的最终面板在基于组件的应用程序的上下文中非常有用。

1. 选择 File>New Project。在 Categories 下，选择Web。在 Projects 下，选择Web Application。单击Next。

2. 在 Name and Location 面板中，在 Project Name 处键入 MyFirstWicketApp。将 Project Location 更改为计算机中的某个目录。

3. 不要更改其它设置。如果您喜欢的话，也可以更改它们。Wicket 支持 J2EE 1.4 和 Java EE 5。可以将 Wicket 应用程序部署到任何服务器。单击 Next。

4. 在 Framework 面板中，选择　Wicket。您将会被提示浏览 Wicket 下载的顶级目录：

例如，浏览“wicket-1.2.2”，如果这是您 Wicket 下载的顶级目录：

5．当选择了正确的顶级目录时，会出现以下面板：

6．不要改变默认设置。上面的面板中的区域提供了：

¡      Wicket 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 向导会为我们创建许多文件。本节我们将讨论这些文件是如何在基于组件的开发环境中相互联系的。

　　1．我们从 web.xml 文件开始，该文件是所有 web 应用程序的通用常规部署描述符，它遵守 Servlet 规范。展开 WEB-INF 文件夹或者 Configuration Files 文件夹，以原始 XML 视图方式打开文件，注意 servlet 的定义：

    WicketApplication

    wicket.protocol.http.WicketServlet

        applicationClassName

        com.myapp.wicket.WicketApplication

        debug

        2

        detail

        2

    2

注意应用程序类名称的值。在下一步骤中，我们将打开应用程序类文件并查看其内容。

　　2．打开 Source Package 文件夹中的 com.myapp.wicket 包，然后打开 WicketApplication.java 文件。它看起来如下：

package com.myapp.wicket;

import 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 文件查看其内容。

　　3．打开 Home.java 文件。它看起来如下：

package com.myapp.wicket;

public class Home extends WicketExamplePage {

    public Home() {

    }

}

此文件是空的。呈现此文件中创建的 Wicket 窗口小部件的是同一源结构中的同名文件，它只能是 Home.html，它通常看起来如下：

3C//DTD HTML 4.01 Transitional//EN">

注意在 Home.java 中，我们正在展开 WicketExamplePage。在 Home.html 中有一个 wicket:id 属性，它告诉我们这是某个 Java 文件在某处所创建内容的占位符。并且，我们也会和 IDE 为我们创建的 CSS 样式表相关联。您可以在 Web Pages 文件夹中的 Projects 窗口发现它。在下一步骤中，我们会打开 WicketExamplePage并检查其内容。

    4．打开 WicketExamplePage.java 。它看起来如下：

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, '.')));

    }

}

这就是我们希望所有的 web 页都进行扩展的类。例如，注意上面的粗体字行。每一个扩展 WicketExamplePage 的类都将继承一个 WicketExampleHeader 的实例。Wicket 的 ID 是“mainNavigation”，这也是我们在上一步骤在 Home.html 文件中看到的 Wicket ID 。我们可以在所有 HTML 页面的顶部引用“mainNavigation” Wicket ID。这确保了我们所有的 web 页面都拥有相同的标题。在下一步骤中，我们将打开 WicketExampleHeader.java 并查看其内容。

    5．打开 WicketExampleHeader.java 。它看起来如下：

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));

    }

}

6. 注意上面的粗体字行。这里，我们创建一个 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"));

   7．打开 WicketExampleHeader.html。注意它与我们刚才介绍的 Java 文件同名。您可以在同一个包结构下找到它。它看起来如下：

    
Wicket Example

        Start of

        Example Title Goes Here

注意上面的粗体字行。您通过这一行指定在一个 web 页面的 HTML 端呈现窗口小部件的地方。按住 Ctrl 键并将鼠标移动到 span 标记中 wicket:id 的值上。注意此值会变成一个超链接：

单击超链接，注意 web 页面的 Java 端会打开，并且指针会落在 Wicket 标识符的起始引号的左侧：

现在单击 Source Editor 顶部的左箭头返回 HTML 页面。用这种方法，您可以在 Wicket 组件的两端之间快速高效地导航。

    8．右键单击项目并选择 Run Project。IDE会编译应用程序，创建一个 WAR 文件，将它发送到部署服务器，打开 IDE 的默认浏览器，并展示应用程序。