| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Wicket Web 框架简介 |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Wicket Web 框架简介 - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Wicket Web 框架简介 |
| |
| 本文档逐步向您介绍创建可重用组件并将其组合到 Web 应用程序的基础知识。每个组件均由一个 Java 类和一个 HTML 文件组成。允许您以这种方式开发应用程序的框架称为 Wicket。除了基于组件的方法,Wicket 的一个显著特征就是不需要 XML 配置文件。使用 Java 类进行应用程序范围的设置(例如主页标识),而不使用 XML 配置文件。 |
| |
| 在 Java 类中创建 Web 应用程序中的每个窗口部件并将其呈现在 HTML 页中。Java 类和 HTML 页必须具有相同的名称且存在于相同的源结构中。它们通过 Wicket 标识符彼此链接。将向您演示 IDE 如何支持 Wicket 应用程序开发,以便您可以快速有效地创建可重用组件,这样您无需执行太多操作即可生成外观一致的 Web 应用程序。 |
| |
| |
| image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0"] |
| |
| |
| *要学习本教程,您需要具备以下软件和资源。* |
| |
| |=== |
| |软件或资源 |要求的版本 |
| |
| |link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2、7.3、7.4、8.0、Java EE |
| |
| |Java 开发工具包 (JDK) |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+版本 7+] 或更高版本 |
| |
| |NetBeans IDE 的 Wicket 插件 |link:http://plugins.netbeans.org/plugin/3586/wicket-support[+NetBeans Wicket 插件页+] |
| |
| |GlassFish Server Open Source Edition |
| _或_ |
| Tomcat Servlet 容器 |3.1.x 或更高版本 |
| _和_ |
| 版本 7.x 或更高版本 |
| |=== |
| |
| *注:* |
| |
| * NetBeans 的 Wicket 支持插件包含以下模块: |
| * *org-netbeans-modules-web-wicket.nbm。*提供在本教程中使用的 Wicket 特定的功能。 |
| * *org-netbeans-modules-wicket-templates.nbm。*提供用于创建典型 Wicket 工件(例如,页面和面板)的 Wicket 文件级别模板。 |
| * *org-netbeans-modules-wicket-library.nbm。*提供 Wicket JAR,并将其安装在 IDE 的库管理器中。因此,您无需从 Wicket 站点下载 Wicket 发行版本,因为该插件提供了您需要的所有内容。 |
| * 要将 Wicket 支持插件安装到 IDE,请转到 "Plugin Manager"(插件管理器)(从主菜单中选择 "Tools"(工具)> "Plugins"(插件)),然后在 "Downloaded"(已下载)标签下安装该插件。有关如何将框架插件安装到 IDE 的更详细说明,请参见link:framework-adding-support.html[+添加对 Web 框架的支持+]。 |
| * 有关 Wicket 的更多信息,请访问 link:http://wicket.sourceforge.net/[+http://wicket.sourceforge.net/+]。有关 NetBeans IDE 中的 Wicket 支持的开发页,请访问 link:http://java.net/projects/NbWicketSupport[+http://java.net/projects/NbWicketSupport+]。如果您熟悉 Wicket,欢迎您为 NetBeans IDE 的 Wicket 插件贡献代码。 |
| |
| |
| == 设置环境 |
| |
| 在开始编写 Wicket 应用程序之前,您必须确保具有所有必需的软件并且您的项目设置正确。如上所述,安装 NetBeans IDE 的 Wicket 支持插件之后,您可以通过一个向导设置 Wicket 应用程序所需的所有基本文件。 |
| |
| |
| === 创建 Wicket 应用程序的源代码结构 |
| |
| 应用程序的源代码结构必须包含 Wicket JAR 文件、 ``web.xml`` 文件中的 Wicket servlet 注册,以及一些标准工件,例如应用程序类和主页。由于我们使用的是 IDE,因此应该不需要手动创建所有这些文件。而我们可以通过向导来执行操作。 |
| |
| 根据您的需求,选择以下某个适当的方案: |
| |
| * <<create-1,方案 1:从头开始创建基于 Ant 的 Wicket 应用程序>> |
| * <<create-2,方案 2:从头开始创建基于 Maven 的 Wicket 应用程序>> |
| * <<create-3,方案 3:根据原型创建基于 Maven 的 Wicket 应用程序>> |
| * <<create-4,方案 4:将 Wicket 支持添加到现有应用程序中>> |
| |
| |
| ==== 方案 1:从头开始创建基于 Ant 的 Wicket 应用程序 |
| |
| 在 IDE 中创建新的 Web 应用程序时,Web 应用程序向导的最终面板在 Wicket 应用程序的上下文中非常有用。 |
| |
| 1. 选择 "File"(文件)> "New Project"(新建项目)。在 "Categories"(类别)下,选择 "Web"。在 "Projects"(项目)下,选择 "Web Application"(Web 应用程序)。单击 "Next"(下一步)。 |
| 2. 在 "Name and Location"(名称和位置)面板的 "Project Name"(项目名称)中,键入 ``MyFirstWicketApp`` 。将项目位置更改为计算机上的任意目录。单击 "Next"(下一步)。 |
| 3. 保留所有设置不变。您也可以根据需要更改它们。Wicket 支持任何版本的 Java EE。可以将 Wicket 应用程序部署到任何服务器。单击 "Next"(下一步)。 |
| 4. |
| 在 "Frameworks"(框架)面板中,选择 "Wicket",如下所示: |
| |
| image::https://blogs.oracle.com/geertjan_images/resource/wicket-160-nb.png[] |
| |
| *注:*根据安装到 IDE 的模块不同,您可能会在以上屏幕快照所示的 "Frameworks"(框架)列表中看到更多或更少的项。 |
| |
| 在以上所示的面板中,保留所有默认值不变。以上面板提供以下字段: |
| |
| * *Wicket Filter Name*(Wicket 过滤器名称)。显示将在 ``web.xml`` 文件中定义的过滤器的名称。 |
| * *Wicket URL Pattern*(Wicket URL 模式)。将相对 URL 模式添加到 ``web.xml`` 文件中。 |
| * *Wicket Application Class*(Wicket 应用程序类)。指定设置应用程序范围设置(例如主页)的类的名称。 |
| * *Wicket Home Page*(Wicket 主页)。指定将包含称为 ``xxx.java`` 和 ``xxx.html`` 的文件的主页名称。 |
| * *Main Package*(主包)。IDE 将生成的所有工件放入的 Java 包。 |
| * *Version*(版本)。Wicket 版本。以上 "Version"(版本)下拉列表中将列出库管理器中名称以 "Wicket" 开头的所有库。默认情况下,唯一列出的版本是 1.6.0,因为这是插件所提供的版本。 |
| 5. 单击 "Finish"(完成)。 |
| |
| IDE 将创建 ``MyFirstWicketApp `` 项目。此项目包含所有源代码和项目元数据,例如项目的 Ant 构建脚本。此项目在 IDE 中打开。可以在 "Projects"(项目)窗口(Ctrl-1 组合键)中查看其逻辑结构: |
| |
| image::https://blogs.oracle.com/geertjan_images/resource/wicket-160-nb-2.png[] |
| |
| |
| ==== 方案 2:从头开始创建基于 Maven 的 Wicket 应用程序 |
| |
| 当您已有一个基于 Ant 的应用程序时,IDE 可帮助您添加 Wicket 支持。 |
| |
| 1. 选择 "File"(文件)> "New Project"(新建项目)。在 "Categories"(类别)下,选择 "Maven"。在 "Projects"(项目)下,选择 "Web Application"(Web 应用程序)。 |
| |
| image::images/maven-1.png[] |
| |
| 单击 "Next"(下一步)。 |
| |
| 2. 在 "Name and Location"(名称和位置)面板的 "Project Name"(项目名称)中,键入 ``MyFirstWicketApp`` 。根据您的需求更改 "Project Location"(项目位置)和默认 Maven 设置。 |
| |
| image::images/maven-3.png[] |
| |
| 单击 "Next"(下一步)。 |
| |
| 3. 根据您的需求选择适当的服务器,并选择 "Java EE 6 Web" 作为 "Java EE Version"(Java EE 版本)设置。 |
| |
| image::images/maven-4.png[] |
| |
| 单击 "Finish"(完成)。IDE 将创建下面显示的源代码结构: |
| |
| image::images/maven-5.png[] |
| |
| 4. 因为我们已添加对 Java EE 6 的支持,所以上一步中未创建 ``web.xml`` 文件。但是,Wicket 要求在 ``web.xml`` 文件中注册 Wicket 应用程序过滤器。因此,我们将在应用程序中添加新的 ``web.xml`` 文件,然后继续。 |
| |
| 右键单击应用程序,选择 "New"(新建)> "Other"(其他),然后选择 "Web" > "Standard Deployment Descriptor"(标准部署描述符)(web.xml)。单击 "Next"(下一步),然后单击 "Finish"(完成)。 |
| |
| 5. 此时我们即可将 Wicket 支持添加到应用程序中。右键单击项目节点,然后选择 "Properties"(属性)。在 "Project Properties"(项目属性)对话框中,选择 "Frameworks"(框架),然后单击 "Wicket"。使用前几部分中的描述在此对话框的 "Wicket Configuration"(Wicket 配置)部分中填写详细信息。单击 "OK"(确定)。 |
| |
| IDE 将创建入门所需的所有 Wicket 文件: |
| |
| image::images/maven-6.png[] |
| |
| |
| ==== 方案 3:根据原型创建基于 Maven 的 Wicket 应用程序 |
| |
| 原型存在于 Maven 资源库中,用于设置 Wicket 应用程序。 |
| |
| 1. 选择 "File"(文件)> "New Project"(新建项目)。在 "Categories"(类别)下,选择 "Maven"。在 "Projects"(项目)下,选择 "Project from Archetype"(基于原型的项目)。 |
| |
| image::images/maven-7.png[] |
| |
| 单击 "Next"(下一步)。 |
| |
| 2. 在 "Search"(搜索)字段中,键入 "wicket",然后选择要使用的原型。 |
| |
| image::images/maven-8.png[] |
| |
| 根据您的需求使用适当的值完成向导。单击 "Finish"(完成)。 |
| |
| IDE 将向根据原型创建的应用程序中添加 Wicket 支持。 |
| |
| |
| ==== 方案 4:将 Wicket 支持添加到现有应用程序中 |
| |
| 当您已有一个应用程序(无论是基于 Ant 还是基于 Maven 创建的)时,IDE 可帮助您添加 Wicket 支持。 |
| |
| 1. 右键单击应用程序,然后选择 "Properties"(属性)。 |
| 2. 在 "Project Properties"(项目属性)对话框中,选择 "Frameworks"(框架)面板,然后单击 "Add"(添加)。然后选择 "Wicket"。单击 "OK"(确定)。 |
| 3. 使用上一部分中的描述在 "Frameworks"(框架)面板中填写 "Wicket Configuration"(Wicket 配置)。 |
| 4. 单击确定以进行确认。 |
| |
| IDE 将向现有应用程序中添加 Wicket 支持。 |
| |
| 在下一部分,我们将详细了解生成的每个文件。 |
| |
| |
| === 提供对 Wicket 的替代版本的支持 |
| |
| NetBeans Wicket 插件中包含的 Wicket 版本可能不是您需要的版本。执行以下步骤以注册和使用 Wicket 的替代版本。 |
| |
| 1. 转到 "Tools"(工具)| "Ant Libraries"(Ant 库)。请注意,NetBeans Wicket 插件所注册的 Wicket JAR 可用: |
| |
| image::images/maven-9.png[] |
| |
| 2. 在上面显示的对话框中,单击 "New Library"(新建库),使用以 "Wicket" 开头的名称创建一个新库。将 JAR 添加到该库中,即,将 Wicket 的首选版本的 JAR 注册到您已创建的库中。 |
| 3. |
| 当您接下来创建新的 Web 应用程序时,或将 Wicket 支持添加到现有应用程序中时,"Frameworks"(框架)面板将显示新注册的库(如果其名称以 "Wicket" 一词开头): |
| |
| image::images/maven-91.png[] |
| |
| 完成向导后,在所选库中注册的 JAR 将放在应用程序的类路径上。 |
| |
| *注:*以上方法适用于基于 Ant 的 Wicket 应用程序。如果要在基于 Maven 的应用程序中使用 Wicket 的替代版本,请更改相关的 POM 文件。 |
| |
| |
| === 检查生成的 Wicket 应用程序的源代码结构 |
| |
| IDE 的 Web 应用程序向导已经为我们创建了许多文件。在此可查看这些文件并了解这些文件在 Wicket 开发的上下文内是如何彼此相关的。 |
| |
| 1. 让我们开始了解生成的文件。 |
| |
| * *Web Descriptor*(Web 描述符)。首先查看 ``web.xml`` 文件,该文件是符合 Servlet 规范的所有 Web 应用程序通用的一般部署描述符。展开 ``WEB-INF`` 文件夹或 "Configuration Files"(配置文件)文件夹,在原始 XML 视图中打开文件,然后查看 Wicket 过滤器的定义: |
| |
| |
| [source,xml] |
| ---- |
| |
| <?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> |
| ---- |
| |
| *注:*应用程序类名的值设置为 ``com.myapp.wicket.Application`` 。在下一步中,我们将打开应用程序类文件并检查其内容。 |
| |
| * *Wicket Application Class*(Wicket 应用程序类)。打开 "Source Packages"(源包)文件夹中的 ``com.myapp.wicket`` 包,然后打开 ``Application.java`` 文件。此文件如下所示: |
| |
| |
| [source,java] |
| ---- |
| |
| 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; |
| } |
| |
| } |
| ---- |
| |
| 这是提供应用程序范围设置的 Java 文件,可比较于 Struts 框架中的 ``struts-config.xml`` 和 JSF 框架中的 ``faces-config.xml`` 。注意 ``getHomePage()`` 方法的定义。此方法是应用程序范围类的最低要求。它指定部署应用程序时将显示的第一页(主页)。请注意,返回了 ``HomePage.class`` 。在下一步中,我们将打开 ``HomePage.java`` 文件并检查其内容。 |
| |
| * *Wicket Home Page*(Wicket 主页)。打开 ``HomePage.java`` 。此文件如下所示: |
| |
| |
| [source,java] |
| ---- |
| |
| package com.myapp.wicket; |
| |
| public class HomePage extends BasePage { |
| |
| public HomePage() { |
| add(new Label("message", "Hello, World!")); |
| } |
| |
| } |
| ---- |
| |
| 此文件将向主页中添加标签。呈现在此文件中创建的 Wicket 窗口部件是在具有相同源代码结构中的相同名称的文件中完成的,该文件只能是 ``HomePage.html`` ,目前看起来如下所示: |
| |
| |
| [source,xml] |
| ---- |
| |
| <!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> |
| ---- |
| |
| 请注意,我们在 ``HomePage.java`` 中扩展 ``BasePage`` 。在 ``HomePage.html`` 中具有一个 ``wicket:id`` 属性,该属性指示这是 Java 文件在某位置创建的某内容的占位符。另外,我们还引用了 IDE 生成的 CSS 样式表。您可以在 "Projects"(项目)窗口的 "Web Pages"(Web 页)文件夹中找到该样式表。在下一步中,我们将打开 ``BasePage`` 并检查其内容。 |
| |
| * *Base Page*(基本页)。打开 ``BasePage.java`` 。内容如下所示: |
| |
| |
| [source,java] |
| ---- |
| |
| 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")); |
| } |
| |
| } |
| ---- |
| |
| 这是我们希望所有 Web 页扩展的类。每个扩展 ``BasePage`` 的类都将继承 ``HeaderPanel`` 和 ``FooterPanel`` 的实例。这可确保所有 Web 页都将具有相同的页眉和页脚。基本页的 HTML 端如下所示: |
| |
| |
| [source,xml] |
| ---- |
| |
| <!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> |
| ---- |
| |
| 在下一步中,我们将打开 ``HeaderPanel.java`` 并检查其内容。 |
| |
| * *Header Panel*(页眉面板)。打开 ``HeaderPanel.java`` 。内容如下所示: |
| |
| |
| [source,java] |
| ---- |
| |
| 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));* |
| } |
| |
| } |
| ---- |
| |
| 请注意上面粗体显示的行。在此我们创建一个 Wicket 标签窗口部件。HeaderPanel 是可重用组件。这是创建了窗口部件的 Java 端。接下来,我们将查看预期呈现 Wicket 标签窗口部件的 HTML 端。在下一步中,我们将打开 ``HeaderPanel.html`` 文件并检查其内容。 |
| |
| 现在,将第二个参数更改为 "My Very First Component Based Application",以使标签的定义此时如下所示: |
| |
| |
| [source,java] |
| ---- |
| |
| add(new Label("exampleTitle", "My Very First Component Based Application")); |
| ---- |
| |
| 打开 ``HeaderPanel.html`` 。请注意,它的名称与我们刚刚查看的 Java 文件的名称相同。在相同的包结构内找到此文件。内容如下所示: |
| |
| |
| [source,xml] |
| ---- |
| |
| <!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> |
| ---- |
| |
| 请注意上面粗体显示的行。这是您指定应在 Web 页 HTML 端呈现窗口部件的位置的方式。按住 Ctrl 键并将鼠标移到 ``span`` 标记中的 ``wicket:id`` 属性值之上。请注意,此值将转变为超链接: |
| |
| image::images/hyperlink-1.png[] |
| |
| 单击该超链接,此时注意将打开 Java 端的 Web 页。 |
| |
| 现在,单击源代码编辑器顶部的左箭头以返回到 HTML 页: |
| |
| image::images/hyperlink-2.png[] |
| |
| 通过这种方式,可以在 Wicket 组件的两端之间快速有效地导航。 |
| |
| * *Footer Panel*(页脚面板)。页脚面板的结构与页眉面板相同,如上所示。 |
| 2. |
| 右键单击项目并运行该项目。IDE 将编译应用程序,创建 WAR 文件,将该文件发送到部署服务器,打开 IDE 的默认浏览器,并显示应用程序: |
| |
| image::images/deploy-1.png[] |
| |
| *注:*确保将 "/wicket" 附加到 URL(如上所示),以便将 URL 映射到 ``web.xml`` 文件中注册的 Wicket 过滤器。 |
| |
| |
| |
| == 使用 Wicket 功能 |
| |
| 在下面各个部分,您将了解三个关键的 Wicket 功能以及 NetBeans IDE 如何通过 NetBeans Wicket 插件支持这些功能: |
| |
| * <<widget,窗口部件>> |
| * <<component,可重用组件>> |
| * <<ajax,AJAX 支持>> |
| |
| 下面各个部分还向您介绍了 NetBeans Wicket 插件提供的各种支持的功能。 |
| |
| |
| === 添加窗口部件 |
| |
| 在此部分,我们将在 Wicket 中创建第一个窗口部件。就像 Wicket 中的其他大多数工件一样,窗口部件具有一个 Java 端和一个 HTML 端。在 Java 端创建窗口部件。在 HTML 端呈现窗口部件。如上所示,可通过超链接在两端之间导航。 |
| |
| 1. 打开 ``HomePage.html`` 。如果 "Palette"(组件面板)未自动打开,请通过 "Window"(窗口)> "Palette"(组件面板)(Ctrl-Shift-8 组合键)将其打开。 |
| |
| image::images/widget-2.png[] |
| |
| 2. 在 HTML 文件中的 H1 元素下方添加一行之后,将 "Label"(标签)项从 "Palette"(组件面板)拖放到 H1 元素下方。您会看到下面的对话框: |
| |
| image::images/widget-3.png[] |
| |
| 将此对话框中的值更改为以下值: |
| |
| image::images/widget-4.png[] |
| |
| 单击 "OK"(确定)。请注意,下面粗体显示的标记已添加到文件中: |
| |
| |
| [source,xml] |
| ---- |
| |
| <!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> |
| *<span wicket:id="message1">This gets replaced</span>* |
| </wicket:extend> |
| </body> |
| </html> |
| ---- |
| |
| 现在,您即可使用 H3 标记等为新添加的窗口部件添加样式: |
| |
| |
| [source,xml] |
| ---- |
| |
| <h3 wicket:id="message1">This gets replaced</h3> |
| ---- |
| |
| 接下来,打开 ``HomePage.java`` ,注意添加了一个标签,该标签具有 HTML 文件中的相同标识符(更改内容以*粗体*显示): |
| |
| |
| [source,java] |
| ---- |
| |
| public class HomePage extends BasePage { |
| |
| public HomePage() { |
| add(new Label("message", "Hello, World!")); |
| *add(new Label("message1", "Hello again, World!"));* |
| } |
| |
| } |
| ---- |
| 3. |
| 保存文件。刷新浏览器后,您将会看到在 ``HomePage.html`` 文件中呈现的 Wicket 标签: |
| |
| image::images/deploy-2.png[] |
| |
| 您可以创建占位符(就像在上面的 ``HomePage.html`` 文件中创建的标记一样),然后将 HTML 文件传递给 Web 设计者。当 Web 设计者设计 Web 页时,您可以在 Java 端完全独立地创建窗口部件。由于 HTML 标记未嵌入到 Java 文件中,因此您和 Web 设计者可以实现 Wicket 中心焦点的“关注分离”。 |
| |
| 打开 "Navigator"(导航器)("Window"(窗口)> "Navigating"(导航)> "Navigator"(导航器)),同时在编辑器中选定以上 HTML 文件,然后您即可查看导航器 "Wicket Tags"(Wicket 标记)列表中的标记概览: |
| |
| image::images/wicket-navigator.png[] |
| |
| 如果匹配的 HTML 页中不存在匹配的标记,您将会在 Java 文件中看到错误消息: |
| |
| image::images/widget-1.png[] |
| |
| |
| === 添加可重用组件 |
| |
| “可重用组件”概念是 Wicket 的优势之一。在此部分,我们将使用向导生成一个面板,该面板再次具有 Java 端和 HTML 端。我们将创建该面板,以便在 Web 页上重用我们具有的标帜,这样该标帜就会在 Web 站点之间保持一致。我们会看到将面板添加到 Web 页中是多么容易。 |
| |
| 1. 右键单击 ``com.myapp.wicket`` 包节点,然后选择 "New"(新建)> "Other"(其他)。在 "Categories"(类别)下,选择 "Web"。在 "File Types"(文件类型)下,注意以下模板: |
| |
| image::images/panel-1.png[] |
| |
| 选择 "Wicket Panel"(Wicket 面板)并单击 "Next"(下一步)。 |
| |
| 2. 在 "File Name"(文件名)中键入 ``BannerPanel`` 。您现在应该看到下面的屏幕: |
| |
| image::images/panel-2.png[] |
| |
| 单击 "Finish"(完成)。 |
| |
| 请注意,我们的包中现在包含 ``BannerPanel.html`` 和 ``BannerPanel.java`` 这两个新文件。 |
| |
| 3. 打开 ``BannerPanel.html`` ,注意此文件的内容如下: |
| |
| |
| [source,xml] |
| ---- |
| |
| <?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 |
| ---- |
| |
| 在 ``wicket:panel`` 标记之间找到 Wicket 占位符。删除 SPAN 标记上方和下方的行,以便不再注释掉带有 SPAN 标记的行。按住 Ctrl 键并将鼠标移到 Wicket ID 值上方,然后单击出现的超链接。 ``BannerPanel.java`` 文件将打开: |
| |
| |
| [source,java] |
| ---- |
| |
| package com.myapp.wicket; |
| |
| import org.apache.wicket.markup.html.panel.Panel; |
| |
| public final class BannerPanel extends Panel { |
| BannerPanel(String id) { |
| super (id); |
| } |
| } |
| ---- |
| |
| 如之前在 ``HomePage.java`` 文件中所做的那样,添加下面粗体显示的标签: |
| |
| |
| [source,java] |
| ---- |
| |
| package com.myapp.wicket; |
| |
| *import org.apache.wicket.markup.html.basic.Label;* |
| import org.apache.wicket.markup.html.panel.Panel; |
| |
| public final class BannerPanel extends Panel { |
| BannerPanel(String id) { |
| super (id); |
| *add(new Label("title","I am a reusable component!"));* |
| } |
| } |
| ---- |
| 4. 我们的面板虽然简单,但实际上已经完整。将该面板添加到主页中。打开 ``HomePage.java`` ,然后通过在构造函数结尾添加以下行来创建 BannerPanel 的新实例: |
| |
| |
| [source,java] |
| ---- |
| |
| add(new BannerPanel("bannerPanel")); |
| ---- |
| 5. 接下来,我们需要呈现面板。打开 ``HomePage.html`` ,然后在结束的 BODY 标记上方添加占位符标记,并确保使用 Java 文件中使用的相同 Wicket 标识符: |
| |
| |
| [source,java] |
| ---- |
| |
| <span wicket:id='bannerPanel'/> |
| ---- |
| 6. |
| 重新运行项目。请注意,面板的显示位置完全如 HTML 文件指定的: |
| |
| image::images/result-3.png[] |
| |
| 在 Wicket 术语中,面板是可重用组件。正如此部分所示,您可以任意频繁地重用该面板并且可以在任意多的 Web 页中使用。 |
| |
| |
| === 添加 AJAX 功能 |
| |
| 代替使用 JavaScript 将异步 Web 功能(通过 link:http://en.wikipedia.org/wiki/Ajax_(programming)[+AJAX 技术+])添加到 Wicket 应用程序中,Wicket 提供了一个封装 AJAX 功能的 Java 组件模型。下面,将向您演示如何更改 BannerPanel 以包含 AJAX 自动完成窗口部件,而不是之前创建的标签窗口部件。 |
| |
| 1. 在 ``BannerPanel`` 类的 HTML 端,从 "Palette"(组件面板)拖动 AJAX 文本输入项(Ctrl-Shift-8 组合键),如下所示: |
| |
| image::images/drag-1.png[] |
| |
| 将此项放在现有 Wicket 占位符下方,如下所示: |
| |
| |
| [source,xml] |
| ---- |
| |
| <?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> |
| |
| *<input type="text" wicket:id="countries" size="50"/>* |
| |
| </wicket:panel> |
| |
| </body> |
| |
| </html> |
| ---- |
| 2. 在匹配的 Java 端,注意已自动添加了以下内容: |
| |
| |
| [source,java] |
| ---- |
| |
| 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(); |
| } |
| }; |
| ---- |
| 3. 按 Ctrl-Shift-I 组合键,然后确保选择正确的 import 语句: |
| |
| image::images/imports-1.png[] |
| |
| 单击 "OK"(确定),然后确保 ``BannerPanel`` 类使用以下 import 语句: |
| |
| |
| [source,java] |
| ---- |
| |
| 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; |
| ---- |
| 4. |
| 再次刷新浏览器后,您将具有一个 AJAX 自动完成字段。当您键入时,该字段中将填充与输入的文本匹配的国家/地区。 |
| |
| image::images/result-4.png[] |
| |
| |
| == 后续步骤 |
| |
| NetBeans IDE 中的 Wicket 开发简介到此结束。建议您通过 David R.Heffelfinger 提供的 link:http://www.ensode.net/wicket_first_look.html[+Wicket 框架入门+]中描述的 Pizza 应用程序样例,继续了解 Wicket 框架。请注意,本教程的结果作为样例与其他样例一起在 "New Project"(新建项目)向导中提供,如下所示: |
| |
| image::images/samples.png[] |
| |
| link:/about/contact_form.html?to=3&subject=Feedback: Introduction to the Wicket Framework in 7.2[+请将您的反馈意见发送给我们+] |
| |
| |
| |
| == 另请参见 |
| |
| 有关相关或更高级的教程,请参见以下资源: |
| |
| * link:../../docs/web/quickstart-webapps.html[+Web 应用程序开发简介+] |
| * link:../../docs/web/quickstart-webapps-struts.html[+Struts Web 框架简介+] |
| * link:quickstart-webapps-spring.html[+Spring Web 框架简介+] |