Click Framework

概要（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実行結果

テンプレート機能を利用

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：テンプレートエンジン利用結果

コントロール

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：画面初期表示

図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()
イベントハンドラが破棄されるときに実行される。クリーンアップ用コード等を記述する。

リンク

ショートカット

・634トップページ
・このカテゴリのトップページに戻る
・634ラボ

ショートカット・634トップページ・このカテゴリのトップページに戻る・634ラボ	他サイト・Googleガジェット・SourceForge.JP ・Y!プロフィール・Y!ウィジェット	このサイトについて 634では、Java・.NET・オブジェクト指向・XML・パターンなど、プログラムやアーキテクチャに関するいろいろな情報を公開しています。 >>続きを読む
634の適当日記・やけどのはなし・AERAのはなし・連休最後の日のはなし・昨日と今日の2連休のはなし・3605サンエーインタ＆最近の相場観のはなし	634 Incubator (Pukiwiki) ・Google/GoogleChartAPI/Maps ・Google/GoogleChartAPI ・金融/債権・金融/債権/モノライン・金融/ディフィーザンス	メッセージ：お気軽にどうぞ！お名前　　　　：メールアドレス：メッセージ：

Click Framework

Advertisement

概要（ClickFrameworkとは）

特長

QuickStart

1.Click APIの入手

2.Click用のweb.xmlを作成

3.click.xmlの作成

4.HomePageクラスの作成

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

6.実行

テンプレート機能を利用

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

コントロール

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

他のコントロール

イベント

リンク

Advertisement

ショートカット

サイト検索

Y!ログール

ショートカット

他サイト

このサイトについて

634の適当日記

634 Incubator (Pukiwiki)

メッセージ：お気軽にどうぞ！