iliad or seaside
DESCRIPTION
TRANSCRIPT
Smalltalk勉強会 - Iliad
吉田 翔2010-05-272010-06-01 改良版
Iliad or Seaside ?
12010年6月3日木曜日
Smalltalk勉強会 - Iliad
Iliadのインストール
• iliad-8.1-Squeak4.1-ja-all-in-one.zip
iliad-8.1, 日本語パッチ適用済み
• iliad-8.1-Squeak4.1-ja-all-in-one-Demo.zip
iliad-8.1, 日本語パッチ適用済み, サンプルコード
22010年6月3日木曜日
Smalltalk勉強会 - Iliad
このスライド補足
MyTestApplication.st
iliad-8.1-Squeak4.1-ja-all-in-one-Demo.zip内の./demosource/ にソースコードがあります
32010年6月3日木曜日
Smalltalk勉強会 - Iliad
Iliadチュートリアル
SwazooIliad startOn: 9090.サーバの起動
SwazooIliad stop.サーバの停止
Workspaceで以下のコードをdo it
42010年6月3日木曜日
Smalltalk勉強会 - Iliad
Iliad起動確認
Webブラウザで http://localhost:9090/browseにアクセス
52010年6月3日木曜日
Smalltalk勉強会 - Iliad
IliadでHello World
Hello Worldと表示するWeb Appを作成する
62010年6月3日木曜日
Smalltalk勉強会 - Iliad
IliadのXHTMLレンダリング
•テンプレート方式ではない
•レンダラオブジェクトにメッセージを送ることでXHTMLが生成される
72010年6月3日木曜日
Smalltalk勉強会 - Iliad
コントローラーの作成
コントローラであるILApplicationのサブクラスを作成(MyTestApplicationとして定義)
MyTestApplication>>(class)path! ^'myTestApp'
アプリケーションを呼び出すためのパスを指定する
Webブラウザで http://localhost:9090/myTestAppにアクセス真っ白な画面が表示される
82010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLレンダリング
index ^ [:e | ! ! e text: 'Hello World'. ].
MyTestApplication
メソッドカテゴリはcontrollersにすること
デフォルトコントローラとして呼び出されるindexに以下のコードを記述
e はILXHTMLElementのインスタンスMyTestApplication.st
92010年6月3日木曜日
Smalltalk勉強会 - Iliad
IliadとSeasideの比較
•Seasideとの違い•どちらを選択すべきか
SmalltalkのWeb Framework
102010年6月3日木曜日
Smalltalk勉強会 - Iliad
IliadとSeasideの比較項目
•XHTMLのレンダリング
•CSS, JavaScript
•フロー制御
•SessionとResponse(参考)
•開発環境と対応Smalltalk
112010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング (1)
見出し <h1>I love Squeak</h1>
122010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング (1)
見出し <h1>I love Squeak</h1>
index ^ [:e | ! ! e h1: 'I love Squeak'. ].
renderContentOn:html html heading:'I love Squeak.' level:1.
ILApplication subclass
WAComponent subclass
132010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング (2)
リスト
<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li></ul>
142010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング (2)
リスト <ul><li>...</li></ul>
index ^ [:e | | ul |! ! ul := e ul.! ! #('Apple' 'Banana' 'Orange') do:[:v | | li |! ! ! li := ul li. ! ! ! li text: v ]].
DomによるXML処理と同じイメージ
152010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング (2)
リスト <ul><li>...</li></ul>
renderContentOn:html! html unorderedList:[! ! #('Apple' 'Banana' 'Orange') do:[:v |! ! html listItem:v ]].
162010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング (3)
テーブル<table border="1"> <tr> <td>Apple</td> <td>Banana</td> <td>Orange</td> </tr></table>
172010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング (3)
テーブル
index! ^ [:e | | table row |! ! table := e table border:1.! ! row := table tr.! ! #('Apple' 'Banana' 'Orange') do:[:v | | td |! ! ! td := row td. ! ! ! td text: v ]].
ILApplication subclass
182010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング (3)
テーブル
renderContentOn:html! html table border:1; with:[! ! html tableRow:[! ! #('Apple' 'Banana' 'Orange') do:[:v |! ! html tableData:v ]]].
WAComponent subclass
192010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLレンダリング
Raw data
index ^ [:e | ! ! e html: '<h1>aaa</h1>'. ].
renderContentOn:html html html:'<h1>aaa</h1>'.
WAComponent subclass
ILApplication subclass
HTMLをそのまま出力
202010年6月3日木曜日
Smalltalk勉強会 - Iliad
XHTMLのレンダリング違い
Blockをreturnする記述方法
tagをそのままイメージで利用できる
tagの正式名を知らないとメッセージを送れない
212010年6月3日木曜日
Smalltalk勉強会 - Iliad
JavaScript,CSSの導入
1.Iliad, SeasideともにSqueak imageにソースを読み込み
2.アプリケーション側でライブラリの選択
以下の手順が必要
222010年6月3日木曜日
Smalltalk勉強会 - Iliad
外部ソース(CSS,JavaScirpt)の読み込み
ILMemoryDirectoryのsubclassを作成
MyMemoryDirectory addFileAt:'./css/main.css'
MyMemoryDirectory addAllFilesIn:'./css/'
または
Workspace上で以下のコードを実行
232010年6月3日木曜日
Smalltalk勉強会 - Iliad
CSS,JavaScriptの導入準備
MyMemoryDirectory >> path! ^'stylesheets'
MyMemoryDirectory(class)>>initialize! "self initialize"! ILFileHandler addDirectory: self new
MyMemoryDirectory.st
Library.ws
アプリケーションを呼び出すためのパスを指定する
ILFileHandlerに登録
242010年6月3日木曜日
Smalltalk勉強会 - Iliad
CSS,JavaScriptの導入
imageに読み込んだCSS
252010年6月3日木曜日
Smalltalk勉強会 - Iliad
ライブラリの選択
styles ! ^#('/stylesheets/main.css')
updatePage: aPage! super updatePage: aPage.! aPage head stylesheet href: '/stylesheet/main.css'
ILApplication subclass
ILWidget subclass
262010年6月3日木曜日
Smalltalk勉強会 - Iliad
ILWidgetとは
•ILApplicationの子要素になるクラス
•インターフェースの構成と値の保持が可能
sample http://localhost:9090/examples/counters/
272010年6月3日木曜日
Smalltalk勉強会 - Iliad
JavaScript
HTMLレンダリングにメッセージを送るだけで生成されるJavaScript
contents! ^[:e |! ! e p onClick:(...); text:'1+1?'.].
ILWidget subclass
282010年6月3日木曜日
Smalltalk勉強会 - Iliad
JavaScript,CSSの導入準備
WAFileLibraryのsubclassを作成
MyFileLibrary addFileAt:'./css/main.css'.
MyFileLibrary addAllFilesIn: './css/'.
または
Workspace上で以下のコードを実行
292010年6月3日木曜日
Smalltalk勉強会 - Iliad
JavaScript,CSSの導入方法
>>updateRoot:anHtmlRoot super updateRoot: anHtmlRoot. anHtmlRoot stylesheet url: MyFileLibrary / #mainCss.
>>(class) initialize! |app|! app := (WAAdmin register: self asApplicationAt: '...')! ! addLibrary: MyFileLibrary.
WAComponent subclass
WAComponent subclass
ライブラリの選択
302010年6月3日木曜日
Smalltalk勉強会 - Iliad
Ajax
JQuery
script.aculo.us
JQuery(Seaside 3.0より利用可能)
標準Ajaxライブラリ
312010年6月3日木曜日
Smalltalk勉強会 - Iliad
フロー制御
例: ログイン時のフロー
Web開発で悩む処理
認証成功
登録
認証失敗Login
main page
User register
322010年6月3日木曜日
Smalltalk勉強会 - Iliad
login
user register
main
認証成功
登録
認証失敗
332010年6月3日木曜日
Smalltalk勉強会 - Iliad
フロー制御
MyTask>>go! | user |! loginAnswer:= self call:(MyLoginComponent new).
! loginAnswer = #registerUser! ! ifTrue:[ user := self call:
(MyUserRegisterComponent new) ] ifFalse:[ user := loginAnswer ].
! user ifNotNil:[! ! self session login: user.].
self call:(MyMainComponent new).
WATask subclass:#MyTask
342010年6月3日木曜日
Smalltalk勉強会 - Iliad
フロー制御(Seaside)
WATask>>goでフロー全体を記述
MyLoginComponent
MyUserRegisterComponent
MyMainComponent
MyTask
call:
answer:
認証失敗
認証成功
柔軟なフロー制御が記述可能
352010年6月3日木曜日
Smalltalk勉強会 - Iliad
フロー制御
MyIliad-Login.st
ControllerであるILApplicationでフローを管理
一般的なWeb Frameworkと同様な考え方
Ruby on Rails, Zend Framework
MyIliad-Login.stをfile inして確認してください
362010年6月3日木曜日
Smalltalk勉強会 - Iliad
フロー制御(Iliad - 1)
ILApplication subclass: #MyFlowApplication! instanceVariableNames: 'flow'! classVariableNames: ''! poolDictionaries: ''! category: 'MyIliad-Login'
MyIliad-Login.st
index! ^ [:e | ! ! e build: self flow.]
login! flow := MyLoginWidget new
main! flow := MyMainWidget new.
register! flow := MyUserRegisterWidget new.
flow! ^ flow ifNil:[ flow := MyLoginWidget new ]
flow: anObject! flow := anObject
コントローラが子要素(Widget)を置き換える
372010年6月3日木曜日
Smalltalk勉強会 - Iliad
フロー制御(Iliad - 2)ILWidget subclass: #MyLoginWidget! instanceVariableNames: 'user'! classVariableNames: ''! poolDictionaries: ''! category: 'MyIliad-Login'
login! ((user user = 'admin') and:[ user password = 'admin']) ! ! ifTrue:[ self application main. ]! ! ifFalse:[! ! ! self application register. ]. MyIliad-Login.st
コントローラに任せる
contents ^[:e | e form build: [:form | form text:'User ID'. form input action:[:v | user user: v. ]. form text:'Password'. form password action:[:v | user password: v. ]. form button text: 'create'; action: [ self login ]]]
382010年6月3日木曜日
Smalltalk勉強会 - Iliad
フロー制御(Iliad - 3)
ILWidget subclass: #MyUserRegisterWidget! instanceVariableNames: 'user'! classVariableNames: ''! poolDictionaries: ''! category: 'MyIliad-Login'
addUser! "ここにユーザ追加処理"! self application main.
MyIliad-Login.st
contents ^[:e | e form build: [:form | form text:'User ID'. form input action:[:v | user user: v. ]. form text:'Password'. form password action:[:v | user password: v. ]. form button text: 'create'; action: [ self addUser ]]]
コントローラに任せる
392010年6月3日木曜日
Smalltalk勉強会 - Iliad
フロー制御
•Controllerが遷移処理を行なわなければならない
•Seasideとは違いブラウザのバックボタンを実行されると整合性が取れない(従来のWeb Frameworkと同じ)
•IliadはILWidgetが利用できる点で従来より良い
402010年6月3日木曜日
Smalltalk勉強会 - Iliad
Advance
•Session
•Response
参考SmalltalkでWebサイトを作りたい人へ
412010年6月3日木曜日
Smalltalk勉強会 - Iliad
Session
SessionManager sessionClass: MySession
現時点で分かった方法
ILSessionのサブクラスを作成
422010年6月3日木曜日
Smalltalk勉強会 - Iliad
Session
>>(class) initialize app := MyTask registerAsApplication: 'myTask'. app preferenceAt: #sessionClass put: MySession.
WASessionのサブクラスを作成
WAComponent subclass
432010年6月3日木曜日
Smalltalk勉強会 - Iliad
Response (1)
自動生成されるXHMTML以外の情報の出力
XML, RSS,SVG...
画像ファイル等のダウンローダ
442010年6月3日木曜日
Smalltalk勉強会 - Iliad
Response (2)
respondOn: aResponse aResponse contentType:'text/xml'; contents: self svg.
ILApplication subclass
MySVGApplication.st
self svg はSVGのテキストを返すメソッド
respondOn:をオーバライドする
452010年6月3日木曜日
Smalltalk勉強会 - Iliad
Response (3)
2.8系
renderContentOn:html self session returnResponse: (WAResponse new !! contentType: 'text/xml'; ! ! nextPutAll: self makeSVG;! ! yourself)
WAComponent subclass
462010年6月3日木曜日
Smalltalk勉強会 - Iliad
Response (4)
renderContentOn: html! self requestContext respond: [:response |! ! response ! ! initializeOn: self svg ;
contentType: 'text/xml']
3.0系
WAComponent subclass
472010年6月3日木曜日
Smalltalk勉強会 - Iliad
Response (5)
Responseを用いたsvgの出力
482010年6月3日木曜日
Smalltalk勉強会 - Iliad
開発環境
ブラウザ上での開発
日本語 Documents
少ない
多い
492010年6月3日木曜日
Smalltalk勉強会 - Iliad
ブラウザ上での開発
•Browser
•Halo
•Stylesheet
•Debugger
Iliadには実装されていない
502010年6月3日木曜日
Smalltalk勉強会 - Iliad
日本語への対応方法
梅澤さんより日本語化パッチ提供 (Pharoでも利用可能)
GRUtf8SqCodec.st
ILSite default codec: (GRUtf8SqCodec new).
GRUtf8SqCodec.st をfile inする
Workspaceで以下のコードをdo it
512010年6月3日木曜日
Smalltalk勉強会 - Iliad
対応Smalltalk
SqueakPharo
VisualWorks
GNU Smalltalk
GemStoneDolphin Smalltalk
VASmalltalk
SqueakPharoGNU Smalltalk
VisualWorks(対応予定)
522010年6月3日木曜日
Smalltalk勉強会 - Iliad
Iliadの個人的感想
•Smalltalk以外のWebプログラマが移行するにはいいかも
•まだまだDocumentsが足りない
•Web上での開発ができるとよい
•非常に軽量で探索しやすい
532010年6月3日木曜日
Smalltalk勉強会 - Iliad
参考情報
• Iliad http://www.iliadproject.org/index
• Seaside http://www.seaside.st/
• GNU Smalltalk http://smalltalk.gnu.org/
Iliad メーリングリストhttp://groups.google.fr/group/iliad
542010年6月3日木曜日
Smalltalk勉強会 - Iliad
みなさんはどう思いましたか?
552010年6月3日木曜日