使用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 IDEWicket 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 POJOPOJO Wicket 中的通用工件。这里,您可以令 IDE 为您生成一个简单的、空的 JavaBeans 文件。

¡      Main PackageIDE 用来放置所有生成工件的 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">
    

   
     
   

    
    
    
        
    
         rel='stylesheet' type='text/css' href='style.css'/>
    
    
    
    
    
        
    

   
     
   
    
    

    

注意在 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 ProjectIDE会编译应用程序,创建一个 WAR 文件,将它发送到部署服务器,打开 IDE 的默认浏览器,并展示应用程序。




  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

目录 1.简介 2.如何使用示例代码 3.我为什么要学习Wicket? 3.1。我们都喜欢意大利面:-) ... 3.2。面向组件的框架 - 概述 3.3。面向组件Web开发框架的优点 3.4。Wicket与其他面向组件的框架相比 威克特说“你好世界!” 4.1。Wicket分发和模块 4.2。Wicket应用程序的配置 4.3。HomePage类 4.4。Wicket链接 4.5。摘要 5. Wicket作为页面布局管理器 5.1。页眉,页脚,左侧菜单,内容等... 5.2。这是继承! 5.3。划分et impera! 5.4。使用wicket标记继承:扩展标记 5.5。摘要 6.保持对HTML的控制 6.1。隐藏或禁用组件 6.2。修改标签属性 6.3。生成标记属性“id” 6.4。使用WebMarkupContainer创建内嵌面板 6.5。使用标记片段 6.6。将标题内容添加到最终页面 6.7。在我们的页面/面板中使用存根标记 6.8。如何仅渲染组件主体 6.9。用wicket隐藏装饰元素:enclosure标签 6.10。使用Border包围现有标记 6.11。摘要 7.组件生命周期 7.1。组件的生命周期阶段 7.2。组件生命周期的钩子方法 7.3。初始化阶段 7.4。渲染阶段 7.5。删除阶段 7.6。独立舞台 7.7。摘要 8.页面版本控制和缓存 8.1。有状态页面与无状态页面 8.2。有状态页面 8.3。无状态页面 8.4。摘要 9.在请求处理的引擎盖下 9.1。类应用和请求处理 9.2。请求和响应类 9.3。请求处理的“主管” - RequestCycle 9.4。会话类 9.5。异常处理 9.6。摘要 10. Wicket链接和URL生成 10.1。PageParameters 10.2。可收藏的链接 10.3。使用标记wicket自动创建可收藏的链接:链接 10.4。外部链接 10.5。无状态链接 10.6。生成结构清晰的URL 10.7。摘要 11. Wicket模型和表格 11.1。什么是模特? 11.2。IModel和Lambda 11.3。模型和JavaBeans 11.4。Wicket形式 11.5。组件DropDownChoice 11.6。模型链 11.7。可拆卸型号 11.8。在组件使用多个模型 11.9。使用型号! 11.10。摘要 12. Wicket详细说明 12.1。默认表单处理 12.2。表单验证和反馈消息 12.3。输入值转换 12.4。使用JSR 303验证 12.5。使用IFormSubmittingComponent提交表单 12.6。嵌套表格 12.7。多行文字输入 12.8。上传文件 12.9。使用FormComponentPanel创建复杂的表单组件 12.10。无国籍形式 12.11。使用单选按钮和复选框 12.12。使用ListMultipleChoices和Palette选择多个值 12.13。摘要 13.使用中继器显示多个项目 13.1。RepeatingView组件 13.2。ListView组件 13.3。RefreshingView组件 13.4。可分页的中继器 13.5。摘要 14.组件排队 14.1。标记层次结构和代码 14.2。改进了汽车组件 14.3。组件什么时候出列? 14.4。排队的限制 14.5。摘要 15.与Wicket的国际化 15.1。本土化 15.2。Wicket的本地化 15.3。捆绑查找算法 15.4。组件选择的本地化 15.5。国际化和模型 15.6。摘要 16. Wicket的资源管理 16.1。静态与动态资源 16.2。资源参考 16.3。包资源 16.4。向页眉部分添加资源 16.5。上下文相关资源 16.6。资源依赖性 16.7。使用资源包聚合多个资源 16.8。将JavaScript放在页面正文中 16.9。标题贡献者定位 16.10。自定义资源 16.11。安装资源 16.12。Lambda支持 16.13。共享资源 16.14。自定义资源加载 16.15。CssHeaderItem和JavaScriptHeaderItem压缩 16.16。NIO资源 16.17。资源通过模型得出 16.18。摘要 17.与JavaScript集成的示例 17.1。我们想做什么...... 17.2。......以及我们将如何做到这一点 17.3。摘要 18. Wicket高级主题 18.1。通过行为丰富组件 19.使用AJAX 19.1。如何使用AJAX组件和行为 19.2。内置AJAX组件 19.3。内置的AJAX行为 19.4。使用活动指示器 19.5。AJAX请求属性和调用侦听器 19.6。创建自定义AJAX调用侦
参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

chenguoda

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值