Powered by SmartDoc

コンポーネント

コンポーネントはWebページに相当するものです。クライアントからリクエストが来ると、CGIKitはコンポーネントをHTMLに変換してWebページを表示します。複数のコンポーネントを使って1つのWebページを組み立てることもできます。

構成

コンポーネントは「テンプレート (.html)、バインディング (.ckd)、コード (.rb)」の3つのファイルで構成します。テンプレートはHTMLファイル、コードはRubyソースファイルです。バインディングとは、テンプレートとコードの内容を結び付けるファイルです。エレメントの定義を行います。

また、コンポーネントのファイルは3つとも同じディレクトリに置きます。コンポーネント名のディレクトリを作り、拡張子のみが異なる3つのファイルを置きます。

HelloWorld.cgi
/MainPage
  MainPage.html
  MainPage.ckd
  MainPage.rb

テンプレート(.html)

HTMLの記述と、エレメントの配置をします。エレメントは CGIKIT要素を用いて配置します。CGIKIT要素は大文字小文字を問いません。

<html>
<head>
<title>Hello World</title>
</head>
<body>

<h1>
<cgikit name="HelloWorld"></cgikit>
</h1>

</body>
</html>

CGIKIT要素の属性は、name属性1つだけです。ここで指定した名前は、次の定義ファイルで使用します。name属性のデータはダブルクォーテーション("")もしくはシングルクォーテーション('')で囲むことができます(囲まなくても構いません)。また、内容の必要ないエレメントは空要素タグにすることもできます。CKStringやCKSubmitButtonなどのエレメントは内容を必要としませんから、空要素タグで書くと簡単です。

<cgikit name="HelloWorld"/>

コメント

CGIKIT要素を無効にしたいときや、実行時に残したくないコメントを書きたいときは<!--- ... --->を使用します。HTMLのコメント(<!-- ... -->)と違い、ハイフンを3つ並べます。このタグは実行時にはすべて削除されます。

HTMLのコメント中のCGIKIT要素は通常通り変換されるので、スタイルシートやJavaScriptにもエレメントを使うことができます。

国際化

テンプレートを用意することで、コンポーネントを複数のロケール(言語)に対応させることができます。ロケールごとのテンプレートのファイル名は、「テンプレート + "_" + ロケール名」です。ロケールはブラウザの言語設定によって自動的に判断されます(国際化の仕様は今後のバージョンで変更する可能性があります)。

バインディング(.ckd)

このファイルでエレメントの内容を定義します。 バインディングファイルの文法はHTMLやRubyと異なるので注意してください。エレメントの属性全体を大カッコ({})で囲み、各属性を1行に書くか、セミコロン(;)で区切ります。シャープ(#)から行末まで コメントになります。

定義名
 : 種類
 {
  # コメント

  属性
 = 値


  # セミコロンで区切る

  属性
 = 値
; 属性
 = 値
;
}

値には、メソッドまたは文字列を指定します。文字列を定義するには、ダブルクォーテーション(")もしくはシングルクォーテーション(')で囲みます。エレメントの中にはtrue/falseを指定する属性もありますが、これらはダブルクォーテーションで囲む必要はありません。

HelloWorld : CKString {
  value = sayHello;
}

このバインディングでは、 CKStringというエレメントを定義しています。value属性にsayHello()メソッドを指定しています。sayHello()HelloWorldクラスのメソッドです。

リテラル

バインディングファイルでは、属性の値に以下のリテラルを使うことができます。

リテラル
リテラル 書式例
文字列 'abc', "string", ...
数字 1, 2, 3, 4, 5, ...
true/false, nil true, false, nil, ...
配列 [array], [0], [1], ...
ハッシュ [key], ['abc'], ["string"], [0], [1], ...

コード(.rb)

Rubyソースファイルです。クラス名はコンポーネント名と同じ名前にし、必ずCKComponentクラスを継承します。また、インスタンス変数をバインディングするには、アクセサを定義しておきます。

class MainPage < CKComponent
  def sayHello
    "Hello World!"
  end
end

コード内で 初期化を行う場合、通常のinitialize()ではなくinit()メソッドを使用します。init()は引数のいらない初期化用メソッドです。initialize()をオーバーライドしても初期化はできますが、引数が多いこととsuper()をすぐに呼ぶ必要があるなど、多少面倒になります。

バインディングの流れ

CGIKitは実行時にテンプレート内のエレメントをコードと結びつけ、実行結果をHTMLに変換して表示します。コンポーネントは以下の順序でHTMLを出力します。

<番号リスト-1->テンプレートを読み込む

  1. CGIKIT要素を見つけたら、バインディングから該当する定義を取得する
  2. 定義されたエレメントをコードとバインディングする
  3. エレメントをHTMLに変換し、出力する

アクセサ

エレメントにバインディングしたインスタンス変数のアクセサメソッドを定義する必要はありません。CGIKitは定義されていればアクセサを使って操作しますが、そうでなければインスタンス変数を直接操作します。

フォームデータ

フォームのテキストフィールドやボタンにバインディングしたインスタンス変数には、自動的にフォームデータが代入されます。