跳转到内容

使用 Click 框架进行 Java Web 应用程序开发/快速入门

Add links
来自维基教科书，开放世界中的开放书籍

本节讨论如何快速启动 Click Web 应用程序。本节将不讨论如何配置构建系统或 IDE，而是重点介绍运行 Click 应用程序所需的全部基本要素。

涵盖以下主题

Web 应用程序结构

[编辑 | 编辑源代码]

首先添加一个click.xml和web.xml配置文件到您的应用程序WEB-INF目录

Click application configuration files
  • WEB-INF/click.xml - 应用程序配置
  • WEB-INF/web.xml - Servlet 配置

click.xml

[编辑 | 编辑源代码]

您的click.xml文件应包含

<?xml version="1.0" encoding="UTF-8"?>
<click-app>

  <pages package="com.quickstart.page"/>

</click-app>

web.xml

[编辑 | 编辑源代码]

您的web.xml文件应包含

<?xml version="1.0" encoding="UTF-8"?>
<web-app>

  <servlet>
    <servlet-name>click-servlet</servlet-name>
    <servlet-class>net.sf.click.ClickServlet</servlet-class>
    <load-on-startup>0</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>click-servlet</servlet-name>
    <url-pattern>*.htm</url-pattern>
  </servlet-mapping>

  <welcome-file-list>
    <welcome-file>redirect.html</welcome-file>
  </welcome-file-list>

</web-app>

JAR 文件

[编辑 | 编辑源代码]

将以下 JAR 文件添加到您的应用程序WEB-INF/lib:

  • click-1.x.jar
  • click-extras-1.x.jar

您可以从 Click 发行版的dist目录中获取这些文件。

欢迎文件

[编辑 | 编辑源代码]

为了确保默认应用程序请求（例如 https://127.0.0.1:8080/quickstart/）被发送到您的应用程序主页，我们将添加一个redirect.html文件到 Web 根目录。此文件应包含

<html>
<head><meta http-equiv="Refresh" content="0;URL=home.htm"></head>
</html>

此redirect.html文件在我们的web.xml中配置，所有默认请求都将使用此文件进行服务

当浏览器处理redirect.html时，它将重定向到应用程序的 home.htm 页面。

主页

[编辑 | 编辑源代码]

现在我们准备添加第一个 Click 页面，它将是我们的应用程序主页。

首先，我们定义一个HomePage类，并确保类文件发布到我们的 Web 应用程序的WEB-INF/classes目录

package com.quickstart.page;

import net.sf.click.Page;

public class HomePage extends Page 
{

}

接下来，我们在 Web 根目录中添加一个相应的 Home 页面 home.htm

<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="style.css" title="Style"/>
</head>

<body>

  <div id="header">
    <span id="title">Home</span>
  </div>

  <div id="container">
    <b>Welcome</b> to Home page your application starting point.
  </div>

</body>
</html>

接下来添加一个style.css文件到您的 Web 根目录

 body {
 	font-family: Arial;
 	font-size: 11pt;
 	margin: 0;
 	padding: 0;
 }
 
 #header {
 	background: #FDE3B5 url(/click-quickstart/assets/banner.png) top left no-repeat;
 	border-bottom: 1px solid black;
 	height: 51px;
 	position: relative;
 	width: 100%;
 }
 
 #title {
 	color: white;
 	font-size: 24px;
 	font-weight: bolder;
 	position: absolute;
 	left: 15px;
 	top: 10px;
 }
 
 #container {
 	padding-top: 1em;
 	padding-left: 1.5em;
 	position: relative;
 	z-index: 0;
 }
 
 h3.title {
 	margin-top: 0em;
 	margin-bottom: 1em;
 }

您现在应该拥有以下 Web 文件

Click application web files

现在，如果您的 Web 应用程序部署到上下文路径 quickstart，您现在应该能够发出请求

https://127.0.0.1:8080/quickstart/

您的浏览器应该被重定向到您的HomePage并且您应该看到您的页面被渲染为

主页

欢迎使用应用程序的起点 Home 页面。

在此示例中，Click 自动将home.htm请求映射到我们的HomePage类，并使用此类处理请求。

边框模板

[编辑 | 编辑源代码]

现在我们想创建一个页面边框模板，以便应用程序页面具有统一的外观。

首先创建一个border-template.htm文件在 Web 根目录中。在此文件中包含 HTML 内容

<html>
<head>
<title>Click Quickstart - $title</title>
<link rel="stylesheet" type="text/css" href="$context/assets/style.css" title="Style"/>
</head>

<body>

  <div id="header">
    <span class="title">Quick Start :: $title</span>
  </div>

  <div id="container">
    #parse($path)
  </div>

</body>
</html>

现在我们定义一个BorderPage类，它将模板指定为新的border-template.htm文件

package com.quickstart.page;

import net.sf.click.Page;

public class BorderPage extends Page 
{
   public String getTemplate() 
   {
      return "border-template.htm";
   }
 
}

请注意，我们为模板文件命名为border-template.htm，以便它不会被 Click 自动映射到我们的BorderPage类。

现在我们将修改我们的HomePage类以扩展BorderPage并定义 title 值。

package com.quickstart.page;

public class HomePage extends BorderPage 
{
    public String title = "Home";
}

接下来，我们修改我们的 home.htm 以删除页面边框，只包含特定的 Home 页面内容。

<b>Welcome</b> to Home page your application starting point.

您现在应该拥有以下 Web 文件

Click application web files

现在，如果您对更新后的主页发出浏览器请求，您应该看到渲染的 HTML 内容相同。

主页

欢迎使用应用程序的起点 Home 页面。

日志记录

[编辑 | 编辑源代码]

Click 有一些方便的日志记录功能，这些功能将向您展示页面模板是如何被自动映射到页面类的。要启用调试日志记录，请在您的click.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<click-app>

  <pages package="com.quickstart.page"/>

  <mode value="debug"/>

</click-app>

中添加一个模式值为“debug”。当 Click 应用程序启动时，它将写出以下日志消息

[Click] [debug] automapped pages:
[Click] [debug] /border-template.htm -> CLASS NOT FOUND
[Click] [debug] /home.htm -> com.quickstart.page.HomePage
[Click] [info ] initialized in debug mode

Click 在这里告诉我们border-template.htm模板没有映射到任何 Page 类，而home.htm模板映射到我们的HomePage类。我们还被告知 Click 正在debug模式下运行。

当向我们的主页发出请求时，我们可能会看到以下输出

[Click] [debug] GET https://127.0.0.1:8080/quickstart/home.htm
[Click] [info ] renderTemplate: /home.htm,border-template.htm - 46 ms
[Click] [info ] handleRequest:  /home.htm - 62 ms

这告诉我们 ClickServlet 收到的 HTTP 请求。然后我们可以看到它正在渲染页面路径home.htm和模板border-template.htm文件，耗时 46 毫秒。最后，我们可以看到处理此请求的总时间是 62 毫秒

如果您需要更详细的调试信息，请将应用程序模式更改为trace。现在，如果我们发出浏览器请求

https://127.0.0.1:8080/quickstart/home.htm?user=malcolm&password=secret

我们将看到请求参数被记录。这对于调试表单提交非常方便。

[Click] [debug] GET https://127.0.0.1:8080/quickstart/home.htm
[Click] [trace]    request param: password=secret
[Click] [trace]    request param: user=malcolm
[Click] [trace]    invoked: HomePage.<<init>>
[Click] [trace]    invoked: HomePage.onSecurityCheck() : true
[Click] [trace]    invoked: HomePage.onInit()
[Click] [trace]    invoked: HomePage.onGet()
[Click] [trace]    invoked: HomePage.onRender()
[Click] [info ]    renderTemplate: /user/home.htm,border-template.htm - 6 ms
[Click] [trace]    invoked: HomePage.onDestroy()
[Click] [info ] handleRequest:  /home.htm - 24 ms

下一步是什么

[编辑 | 编辑源代码]

快速入门应用程序启动并运行后，您可能会想知道，下一步该怎么办？有许多优秀的代码示例和模式可以应用到您的应用程序中

  1. 将 Menu 控件添加到您的border-template.htm以提供应用程序范围内的导航。
  2. 将 J2EE 安全性集成到您的应用程序中。

使用 Menu 的$menu.isUserInRoles()方法在您的菜单渲染宏中，只显示用户授权的菜单选项。

检索自 "https://wikibooks.cn/w/index.php?title=Java_Web_Application_Development_With_Click_Framework/Quick_Start&oldid=3677164"
华夏公益教科书