Click Framework

1月 1, 2003 · Posted in Click Framework, Java · Comment 

概要（ClickFrameworkとは）

Clickはイベントベースなプログラミングモデルに基づいたWEBアプリケーションフレームワークです。
http://click.sourceforge.net/
ライセンスはApacheライセンスです。

特長

  • 学習が容易
  • コンポーネント＆ページ指向
  • JSPを利用したMVCモデルではない
  • Velocityを利用している

QuickStart

1.Click APIの入手

ClickFrameworkのサイトからClickのバイナリをダウンロードし、clickX.X.jar(X.Xはバージョン番号)にパスを通す。

2.Click用のweb.xmlを作成

WEB-INF/web.xmlにClickServletの定義を記述する。

例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems,
  Inc.//DTD Web Application 2.3//EN"
  "http://java.sun.com/dtd/web-app_2_3.dtd">
<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>*.html</url-pattern>
  </servlet-mapping>
</web-app>

3.click.xmlの作成

WEB-INF/click.xmlファイルを作成する。

例

<?xml version="1.0" encoding="UTF-8"?>
<click-app>
  <pages package="sample" automapping="true"/>
</click-app>

4.HomePageクラスの作成

package sample;
import net.sf.click.Page;
public class HomePage extends Page {
}

パッケージは3.click.xmlの作成で作成したclick.xmlのpagesで指定した場所を利用

5.テンプレートファイルの作成

home.html

<html>
<head>
<title>Hello</title>
</head>
<body>
Hello ClickFramework!
</body>
</html>

6.実行

http://localhost:8080/click/home.html

にアクセスして、画面が表示されれば成功。
図１：QuickStart実行結果
図１：QuickStart実行結果

テンプレート機能を利用

Clickはビューの描画にVelocityを利用している。Velocityの記法や動作は
http://634.ayumu-baby.com/velocity/index.html
を参照

テンプレートエンジン利用例

home.html

<html>
<head>
<title>${title}</title>
</head>
<body>
${title} ClickFramework!
</body>
</html>

HomePage.java

package sample;

import net.sf.click.Page;

public class HomePage extends Page {
    public String title = "Helooooooo!!!";
}

結果
タイトルとボディ部分にどちらもHelooooooo!!! ClickFrameworkが表示される。
図2：テンプレートエンジン利用結果
図2：テンプレートエンジン利用結果

コントロール

Clickには様々なコントロールを描画、制御するためのクラス
Package net.sf.click.control.Control
が用意されている。

これにより、部品の組み立てをプログラム側で行い、描画をレンダリングエンジンに任せるといった明確な役割分担が可能となる。

サンプルアプリケーション

Control.java

package page.control;

import net.sf.click.Page;
import net.sf.click.control.Form;
import net.sf.click.control.PasswordField;
import net.sf.click.control.Submit;
import net.sf.click.control.TextField;
import page.sample.Home;

public class Control extends Page {
    public Form form = new Form();

    public Control() {
        form.add(new TextField("username", true));
        form.add(new PasswordField("password", true));
        form.add(new Submit("ok", "  OK  ",
                 this, "onOkClick"));
        form.add(new Submit("cancel", this, "onCancelClick"));
    }

    public boolean onOkClick() {
        return true;
    }

    public boolean onCancelClick() {
        setRedirect(Home.class);
        return false;
    }
}

control.html

<html>
<head>
<title>control</title>
<link rel="stylesheet"
    type="text/css"
    href="click/control.css"
    title="Style"/>
<script language="javascript"
    src="click/control.js"></script>
</head>
<body>
$form
</body>
</html>

click.xml

<?xml version="1.0" encoding="UTF-8"?>
<click-app>
  <pages>
    <page path="control.html" classname="page.control.Control"/>
  </pages>
</click-app>

結果
図3：画面初期表示
図3：画面初期表示

図4：エラーチェック
図4：エラーチェック

他のコントロール

コントロール一覧

クラス名 説明 出力HTML
AbstractLink リンクコントロールの抽象クラス <a href=""></a>
ActionButton アクションボタン <input type="button"/>
ActionLink アクションリンク <a href=""></a>
Button ボタン <input type="button"/>
Checkbox チェックボックス <input type="checkbox">
Column テーブルのカラム <td>,<th>
Field フォームフィールド（いろいろな部品の親クラス）  
FieldSet フィールドセット <fieldset>
FileField ファイル <input type="file">
Form フォーム <form method="POST">
HiddenField 隠しフィールド <input type="hidden">
ImageSubmit フォーム送信用イメージ <input type="image" src="edit.gif">
Label ラベル  
Option オプション <option></option>
OptionGroup オプショングループ <optgroup></optgroup>
PageLink ページ内リンク <a href=""></a>
Panel パネル（枠）  
PasswordField パスワードフィールド <input type="password">
Radio ラジオボタン <input type="radio">
RadioGroup ラジオボタンのグループ化  
Reset リセットボタン <input type="reset">
Select セレクト <select></select>
Submit 送信ボタン <input type="submit">
Table テーブル <table>
TextArea テキストエリア <textarea></textarea>
TextField テキストフィールド <input type="text">

これらの関係を表すクラス図はこちら
http://click.sourceforge.net/docs/controls.html#control-class

イベント

Clickはイベント駆動フレームワークとして設計されているため、複数のメソッドがPageクラスに定義されていて、
対応したイベントが発生するたびにそのメソッドが実行される。

onInit()
イベントハンドラの初期化時に実行される

onSecurityCheck()
セキュリティーチェックイベントが発生すると実行される

onGet()
Getメソッドが実行されると発生する。

onPost()
Postメソッドが

onRender()
ページの描画が開始されるときに実行される

onDestroy()
イベントハンドラが破棄されるときに実行される。クリーンアップ用コード等を記述する。

リンク

Tags: ,