こんにちは！この講義では Seasideについて学びます。
Seaside の、特に HTML を生成する 部分について学びます。
Seaside のコンポーネントは全て
renderContentOn: メッセージに反応する ことを覚えていますね。
このメッセージがあることによって 適切な HTML コードを生成することができます。
このメソッドには引数 html があります。
この引数には WAHtmlCanvas クラスか そのサブクラスのインスタンスが渡されます。
正しい HTML を生成するための専用 API としてプログラマに提供されています。
カウンターのコードはこれです。
ここの html オブジェクトは、見出しや アンカーやスペース等を生成するために使われています。
今日の講義ではこの言語についてより 掘り下げていきます。
この専用言語は 複数のブラシでできています。
それぞれのブラシが特定の HTML タグを 生成するための専用になっています。
その API はオブジェクト指向的です。
オブジェクトへのメッセージ送信で構成され
HTML コードの正しさを保証します。
ただし、メッセージに誤りがあれば別ですが。
ここにこの専用言語の例があります。
html オブジェクトにメッセージ div を送ります。
すると 1 つのオブジェクトを描画します。
このオブジェクトは
html の div を生成する専用のブラシです。
ここには id: メッセージと
with: メッセージが含まれています。
これで id 属性が title となっている div 要素を生成します。
この文字列が title という id が付けられた div 要素の中身になります。
より複雑なものを生成することもできます。
最初は同じです。 html div id: 'list'.
これが div の行ですが
他に沢山のタグを div の内側に入れることができます。
with: に文字列を送る代わりに スクリプトを送ります。
そのスクリプトでは html オブジェクトを再利用して
他のブラシによって色々なタグを生成できます。
html span class: 'item' とすると
class 属性とその内容を持つ span 要素を生成します。
ここでループを使うことができます。
この DSL は Pharo と同じぐらい強力です。
ここで、順序なしリスト(unorderedList) を生成します。
ul 要素です。
id 属性を持っています。
順序なしリストには 複数のリストアイテムがあります。
ここにあります。
ループを使うだけで生成することができます。
ここに 1 to: 5 do: ループがあります。
Pharo の古典的なループです。 5 つのリストアイテムを生成します。
それぞれには class 属性として'item'が付いていて
名前が付けられています。
名前にはループ変数を末尾につけました。
Item 1、 Item 2、 Item 3、… という具合です。
さらに進めて
リストアイテムごとに
ループ変数が偶数か奇数かによって
CSS クラスを指定することができます。
典型的には、例のここにあるように class:if:メッセージを使います。
もし次の条件が true の場合には このクラス属性を付けなさい、という意味です。
ここに 偶数の場合の記述があります。
生成されたコードを見ると 1 つ目のリストアイテムには
CSS クラスが指定されていて
itemodd となっています。
2 つ目のアイテムは CSS クラスが itemeven になっています。
これは even、これは odd、という具合です。
この構文は簡潔明瞭です。
DSL で HTML を生成するために Pharo の力を結集させています。
この専用言語のもう 1 つの特徴は
拡張性です。
例えば Bootstrap のような 現代的な CSS フレームワークに
簡単に対応することができます。
この CSS フレームワークは CSS クラスを使って
魅力的な HTML 要素を生成します。
例えば 緑や青の背景など。
この専用言語を拡張するためには どうしたらいいのでしょう？
ここにあるような 特別なブラシがあります。
接頭辞 として tbs がついています。 「twitter bootstrap」を意味しています。
tbsAlert メッセージを html オブジェクトに送ると
Twitter Bootstrap フレームワークに適合した
HTML の要素を生成します。
TBS フレームワークを利用するための たくさんのブラシがあります。
tbsButton でツイッターボタンや
ボタングループをこのように 描画することができます。
見ての通り、これら 3 つのボタンは皆 1 つのグループに属しています。
前回やったカウンターの例に戻ります。
簡単なカウンターを定義しました。
ここで Twitter Bootstrap版を作ってみましょう。
とても簡単です。前に作ったカウンターの サブクラスを作ります。
WATwitterCounter クラスです。
このクラスの
クラス側へ行って
initialize メソッドを定義して
このコンポーネントは TBS 開発ライブラリを 使うと指定します。
ここに TBSDevelopmentLibrary と JQDevelopmentLibrary がありますが
これらは JavaScript や CSS 用の フレームワークです。
次に、このクラスのインスタンス側に戻って
renderContextOn: メソッドを
既存のものの上に再定義します。
ブラシの名前は tbs で始まります。
tbsButtonGroup や tbsButton などという具合に。
しかし通常のコードを変えることはありません。
self increase と
self decrease のコールバックから 成っています。
何も変わりません。
TBSを使う部分は HTML 描画ブラシだけです。
では、カウンターがどうなるか見てみましょう。
＋ボタンとーボタンが ボタングループになっています。
そしてカウンター値がバッジに表示されます。
これが Bootstrap 版です。
Bootstrap だけに留まりません。
自分のスタイルルールを 定義することができます。
例えば、ここで
奇数番目のエレメントは
奇数用の odd クラスにすることに 決めたとします。
カウンター値を TBS バッジとして描画するたびに
つまりカウンター値が表示されるわけですが
CSS の odd クラスを
値が奇数の場合にだけ追加します。
この CSS クラスはこの条件が true になる時にのみ追加されます。
CSS の odd クラスを定義するために
カウンターに style メソッドを定義しました。
このメソッドは文字列を CSS スタイルルールに応じて描画します。
.odd color: red とすると奇数の場合には
カウンターを赤くします。
まとめると
ウェブアプリケーションはルートのコンポーネントです。 Seaside はルートのコンポーネントです。
全てのコンポーネントは renderContentOn: によって HTML で描画されます。
そして強力で拡張性のある専用言語があります。
この専用言語では、ブラシを使って HTML を簡単に生成することができます。
そして既存の CSS フレームワーク用に 拡張することができます。
例えば、Bootstrap、JQuery、UI などです。
ループのような Pharo のスクリプトとしての表現力を有効に使って
一連の要素を簡単に生成することができます。