Seaside チュートリアル（その１）
Seaside は Squeak上で動作する継続ベースの Webアプリケーションフレームワーク です。
WWW はステートレスな世界なので、Webアプリケーションの作成には情報の永続化に関する悩みがつきものです。しかし継続(Continuation)を使うことでプログラマ側にはステートフルな顔を見せる一方、クライアント側には相変わらずステートレスなアプリケーションの構築が可能です。
Seaside はプログラマにとっては HTTPリクエスト/レスポンス をいくら跨ろうと継続された処理を提供するので、Webアプリケーションの作成がコレまでの常識を覆すほどサクサクできます。
このシリーズは、A Seaside tutorialさんを元に進めた、猫自身のチュートリアル・メモになります。
Hello world と表示してみる。
それでは、まず単純に Hello, world と表示する Webアプリケーションを作ってみましょう。Seaside でWebアプリケーションを作るには、WAComponant のサブクラスを作るところから始めます。
WAComponent subclass: #HelloComponent
instanceVariableNames: ''
classVariableNames: ''
poolDictionaries: ''
category: 'MySeasideTutorial'こうして作った WAComponent のサブクラスは VisualComponent になります。このコンポーネントは Seaside から #renderContentOn: メッセージが送られたときに引数で渡された WAHtmlRenderer を使って 画面を表示する責務を持ちます。
この renderer を使うと、XHTMLでのレンダリングが可能ですが、今回はシンプルにプレーンテキストで 'Hello, world' と表示するだけにしておきましょう。というわけで実装してみましょう。プレーンテキストのレンダリングには text: メッセージを送ります。
renderContentOn: html
html text: 'Hello, world'これでHello, world コンポーネントは完成です。しかしまだ、Seasideにアプリケーションとして登録されていません。登録には #registerAsApplication メッセージを使います。Workspace で
HelloComponent registerAsApplication: 'helloweb'
を実行しましょう。これで コンフィグページ http://localhost:9090/seaside/config に helloweb というリンクが出来たハズです。ここをクリックすれば晴れてWebApplicationとしてHelloComponentが公開されたというわけです。
少しHTMLらしくする
プレーンテキストでは何なので、すこしHTMLらしくしてみます。 HelloComponent >> #renderContentOn: メソッドをちょっと書き換えます。
renderContentOn: html
html heading: 'Hello, World' level:1.
html paragraph:
'ようこそ！ この Hello, World は
Squeak上の継続サーバ Seaside で作られています。'コードから想像されるそのまんまの通り、<h1>要素と <p>要素 がレンダリングされます。HTML要素をネストさせたいときは、ブロックを使います。例えば、
<h1>Hello, World</h1> <p>ようこそ、Seaside の世界へ！ この Hello, World は <em>Squeak</em> 上の継続サーバ <em>Seaside</em>で作られています。</p>
と言う HTML が欲しい時はこんな感じにします。
renderContentOn: html
html heading: 'Hello, World' level:1.
html paragraph:[
html text: 'ようこそ！ この Hello, World は '.
html emphasis: 'Squeak'.
html text: ' 上の継続サーバ '.
html emphasis: 'Seaside'.
html text: ' で作られています。']
もっとディープにHTMLレンダリング
もう少しだけ HTMLレンダリングについて。今度はテーブルを
renderContentOn: html
html heading: 'Hello, World' level:1.
html paragraph:
[html text: 'ようこそ！ この Hello, World は '.
html emphasis: 'Squeak'.
html text: ' 上の継続サーバ '.
html emphasis: 'Seaside'.
html text: ' で作られています。'].
html heading: '三猫の他のWebサイト' level:2.
html paragraph: 'あちこちにへんなのを作っています'.
html table:
[html tableRow:
[html tableHeading: 'サイト名'.
html tableHeading: 'URL'.
html tableHeading: '概要'].
html tableRow:
[html tableData: '三猫OnLine'.
html tableData: 'http://mineko.fc2web.com/'.
html tableData: '本家で元祖！サブコンテンツも充実'].
html tableRow:
[html tableData: 'mixi'.
html tableData: 'http://mixi.jp/show_friend.pl?id=1090949'.
html tableData: 'あたしの引きこもり先です'].
html tableRow:
[html tableData: 'みねこあ'.
html tableData: 'http://d.hatena.ne.jp/minekoa/'.
html tableData: 'このブログです。']].
アトリビュートの付与
TABLE要素の使い方は特に驚くべき所はないと思います。（まんまです）でも、これではボーダーが表示されないので一寸見にくいです。HTMLであれば
<table border=1>
とすべき所ですが、Seaside ではどうすればよいでしょう。この場合は、#attributeAt:put: を使います。
renderContentOn: html
html heading: 'Hello, World' level:1.
・
・
・
html paragraph: 'あちこちにへんなのを作っています'.
html attributeAt: 'border' put: 1.
html table:
[html tableRow:
・
・
・#attributeAt:put: でストアされた HTMLタグ属性は、直後の要素のレンダリングに利用されます。
なお div 要素や span 要素の class 属性のように、頻繁に使う属性は #spanClass:with: の様なメソッドが定義されているのでそちらを使う方がスマートでしょう。
スタイルシート
CSSを書き出すには #style メソッドを定義します。
style
^
'h1{
color:#333;
font-family:"ＭＳ Ｐ明朝",serif;
}
h1:first-letter{
font-size:150%;
}
table{
border:1px solid #5555FF;
border-collapse: collapse;
empty-cels:show;
margin-left:2em;
}
th{
text-align:center;
border:1px solid #1111FF;
color:#FFF;
background-color:#5555FF;
}
'以上、今回は Seaside アプリケーションの基本的な生成法と、静的な HTMLレンダリングについて説明しました。今回の内容は、A Seaside tutorial のRendering basics を参考にしました。（と言うかそのまんまです）。
どのようなHTML要素がレンダリング出来るかは、WAHtmlRendererやそのスーパークラスWAAbstractHtmlBuilderを参考にしてください。
