使用 Click 框架進行 Java Web 應用程式開發/快速入門

本節討論如何快速啟動 Click Web 應用程式。本節將不討論如何配置構建系統或 IDE，而是重點介紹執行 Click 應用程式所需的全部基本要素。

涵蓋以下主題

Web 應用程式結構
JAR 檔案
歡迎檔案
主頁
邊框模板
日誌記錄
下一步是什麼？

Web 應用程式結構

首先新增一個click.xml和web.xml配置檔案到您的應用程式WEB-INF目錄

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://: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 檔案

現在，如果您的 Web 應用程式部署到上下文路徑 quickstart，您現在應該能夠發出請求

https://: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 檔案

現在，如果您對更新後的主頁發出瀏覽器請求，您應該看到渲染的 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://: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://:8080/quickstart/home.htm?user=malcolm&password=secret

我們將看到請求引數被記錄。這對於調試表單提交非常方便。

[Click] [debug] GET https://: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

下一步是什麼

快速入門應用程式啟動並執行後，您可能會想知道，下一步該怎麼辦？有許多優秀的程式碼示例和模式可以應用到您的應用程式中

將 Menu 控制元件新增到您的border-template.htm以提供應用程式範圍內的導航。
將 J2EE 安全性整合到您的應用程式中。

使用 Menu 的$menu.isUserInRoles()方法在您的選單渲染宏中，只顯示使用者授權的選單選項。