今日、地域の天気予報の取得から500人の親しい友人とのビデオファイルの共有まで、多数の情報タスクがWeb 2.0アプリケーションを使用して解決されています。 Web 2.0テクノロジーの拡大に伴い、IBMはWebSphere sMashをリリースしました。これは、動的開発、シンプルさ、RESTfulインターフェースなどの基本概念に基づいてアプリケーションを開発および実行するためのフレームワークです。 ほとんどのWebSphere sMashアプリケーションでは、ユーザーインターフェイスはAjax、HTML、またはDojo Toolkitを使用して実装されます。
この投稿では、単純な「トレーニング」アプリケーションの例を使用して、Adobe Flexで記述されたWeb 2.0ユーザーインターフェイスサポートを実装する方法を示します。 サーバー実装は、GroovyとPHPの2つの言語で提供されます。 「トレーニング」ファイルをダウンロードして、IBM担当者に質問することもできます。
はじめに
Web 2.0という用語は、広すぎる意味で使用されることがよくあります。 この用語は、おそらく、REST（REpresentational State Transfer）などの「高速」アプリケーションプログラミングインターフェイスを使用してコンシューマアプリケーションを作成することに基づくアーキテクチャスタイルとして最もよく定義されます。
アーキテクチャスタイルとして、Web 2.0はクライアント側（ブラウザ）またはサーバー側のいずれかで特定のテクノロジを使用する必要性を指示しません。 実際、Web 2.0アプリケーションの最も魅力的な機能は、クライアントテクノロジーとサーバーテクノロジーの明確な分離です。 この分離により、開発者は、すべての場面で単一のソリューションを必要とせずに、解決するタスクとの関連性に基づいてクライアントおよびサーバーテクノロジーを選択できます。
サーバー側では、WebSphere sMashフレームワークは、結果の迅速な取得（通常は動的スクリプト言語に関連付けられている）に焦点を当てているJava開発の経験を持つ専門家に特に適しています。 WebSphere sMash環境は、PHPおよびGroovy（Java構文を使用した動的スクリプト言語）をサポートしているため、幅広い開発者がアクセスできます。
WebSphere sMashは特定のクライアントテクノロジーを必要としませんが、ほとんどの場合、WebSphere sMashアプリケーションにはHTML / Ajaxベースのユーザーインターフェイスが装備されており、Dojo Toolkitを使用して拡張されることもあります。 これらの技術は多くのユーザーインターフェイスの要件を満たしていますが、一部のアプリケーションでは高度な対話性とより高度なフレームワークが必要です。 これはまさにAdobe Flex vのフレームワークの一種です。 3、いわゆるを作成するために広く使用されています RIAアプリケーション（リッチインターネットアプリケーション）。
この投稿では、シンプルなWebSphere sMashアプリケーションを使用して、WebSphere sMashとAdobe Flexの機能を組み合わせたいくつかのアプローチを検証します。 このアプリケーションは意図的に非常にシンプルにされているため、WebSphere sMashの機能をAdobe Flexに結合する技術をより明確に示すことができます。 WebSphere sMashの哲学によれば、ブラウザーとサーバー間のすべての通信はRESTfulインターフェースに基づいており、標準のデータエンコーディングを使用します。 この記事では、WebSphere sMashとAdobe Flexの柔軟な機能を実証するために、いくつかの種類のトレーニングアプリケーションを示します。
-GroovyまたはPHPを使用したWebSphere sMashアプリケーション。
-XMLまたはJSON形式を使用したWebSphere sMashコードとAdobe Flexコード間のデータ転送。
WebSphere sMashの使用
Project Zeroオープンインキュベーションプロジェクトの一部として作成されたWebSphere sMashは、シンプル、ダイナミズム、スピードの3つの基本原則に基づいています。 これらの属性のおかげで、この強力なフレームワークにより、再利用をサポートし、変更に適応するのに大きな労力を必要としないアプリケーションを簡単に作成できます。 WebSphere sMash環境は動的開発に重点を置いているため、新しいアプリケーションを緊急に作成する必要のある多くの企業は、今日この環境を使用して、安定したアプリケーションを迅速かつ簡単に開発します。 WebSphere sMash依存関係管理ツールは、アプリケーションのデプロイに対する多くの障壁を取り除きます。 これにより、さまざまな環境でのアプリケーションの展開が大幅に簡素化され、クラスパスの依存関係を解決する必要がなくなります。 他の多くのアプリケーション開発環境とは異なり、WebSphere sMashには本当に必要なモジュールのみが含まれているため、アプリケーション全体のサイズが大幅に削減され、迅速な初期化が保証されます。 したがって、WebSphere sMashは、動的開発のための本当に優れた環境です。
Web 2.0およびRESTスタイルのプログラミング
RESTという用語では、多くが誤って対応するアーキテクチャを意味します。 この場合、RESTは、Web 2.0アーキテクチャのベースとなるアプリケーションプログラミングインターフェースです。 RESTインターフェースは、標準のHTTPメソッドGET、POST、PUT、およびDELETEを使用した従来のリスト/作成/読み取り/更新/削除操作を表します。 これらの方法のいくつかの例は、次のセクションで説明されています。
Web 2.0テクノロジーは真の利点を提供します。これにより、企業は、ブラウザータイプのアプリケーション（ATOM、JSON、RSS、RESTfulインターフェイスを使用するなど）で使いやすい新しい形式でインターネット上の内部サービスとデータソースを提示できます。 GoogleやAmazonなどの企業は、Web 2.0 APIの分野で主導的な地位を占めています。これにより、開発者は既存の機能を使用して、それらに基づいてアプリケーションを作成できます。 最小限の労力で。
Appbuilder
AppBuilderは、WebSphere sMashでアプリケーションを開発するためのツールです（この記事に付属するzipファイルはAppBuilderを使用してパッケージ化されています）。 AppBuilderでは、構文強調ツールを備えたビルトインエディタ、サーバーの起動/停止機能、実行ログへのアクセス、コンソールを使用したトレース機能により、アプリケーションをすばやく構築できます。 AppBuilderは、Project Zero Webサイトからダウンロードできます。
図1.アプリケーションエディターで構文を強調表示するためのAppBuilderの機能
図2.ファイルエディターの[ランタイムログ]タブ
GroovyとPHP
フロントエンドをAdobe Flex環境で構築することにより、既存のアプリケーションのコンシューマー機能の拡張に焦点を当てたいため、この記事ではWebSphere sMashインフラストラクチャの特定の側面のみを取り上げます。
WebSphere sMash環境の属性の1つは、強力なGroovyおよびPHPスクリプト言語の使用に基づいて、アプリケーションを非常に迅速に作成できることです。
WebSphere sMashは、適切な組み込み規則を備えているため、アプリケーションでのリソースの作成を大幅に簡素化および合理化します。 app / resourcesという名前のWebSphere sMashアプリケーションディレクトリに配置されたGroovyまたはPHPスクリプトは、RESTfulリソースとして自動的にレンダリングされます。
表1. RESTfulリソースとして提示されるシナリオ
追加情報： Project Zero：プログラミングモデルとリソース契約（REST）
最初のタスクは、予定リストアプリケーション用のサーバーコンポーネントを作成することです。
Groovyを使用してTo Doサービスを作成する
Groovyは、Javaなしでは実行できないプログラマーを対象としたスクリプト言語です。 Groovyは既存のJavaコードおよびスクリプト機能と簡単に統合できるため、開発のスピードと容易さを保証します。
カスタムTo Doリストを保存するには、グローバルコンテキストでアプリゾーンを使用します。 次の方法が使用されます。
-onList：To Doアイテムのリストを作成します。
-onCreate：指定されたアイテムを追加して、To Doリストに新しいアイテムを作成します。
-onRetrieve：インデックスIDに基づいてリストにアイテムを配置します。
-onDelete：予定リストからアイテムを削除します
元のバージョンでは、問題のアプリケーションはXMLデータを返すことを期待して作成されました。 この記事に示されているコードは、Project Zero Webサイトの上記の記事の典型的なRESTリソースとほぼ同じです。 以下に示すフラグメントの完全なWebSphere sMashソースコード：CombiningThePowerOfWSWithAdobeFlex / src / TodoService-1.0.0 / TodoService / app / resources / todos_xml_grovy.groovy（以下のダウンロードセクションを参照）。
リスト1. onList（）イベントハンドラー
def onList（）{
logger.INFO {"onList（）：called"}
def todos = app.todosXML []
if（todos == null）{
todos = []
}
その他{
todos = todos.values（）
}
outputXML（todos）
logger.INFO {"onList（）：$ {todos}"}を返します
}
リスト2. onCreate（）イベントハンドラー
def onCreate（）{
logger.INFO {"onCreate（）：called"}
def item = request.params.item []
request.status = HttpURLConnection.HTTP_BAD_REQUEST
if（item！= null && item.length（）> 0）{
def todos = app.todosXML []
def index = app.index []
if（todos == null）{
todos = [：]
インデックス= 0
}
インデックス++
todos.put（インデックス、[id：インデックス、値：アイテム]）
app.todosXML = todos
app.index =インデックス
request.status = HttpURLConnection.HTTP_CREATED
request.headers.out.Location = request.uri [] + '/' +インデックス
logger.INFO {"onCreate（）：created id $ {index}-> $ {item}"}
}
}
リスト3. OnRetrieve（）イベントハンドラー
def onRetrieve（）{
logger.INFO {"onRetrieve（）：called"}
def id = request.params.todos_xml_groovyId []
if（id！= null）{
def todos = app.todosXML []
def値= todos.get（id.toInteger（））
if（value！= null）{
outputXML（値）
logger.INFO {"onRetrieve（）：$ {value}"を返します}
帰る
}
}
send404（）
}
リスト4. OnDelete（）イベントハンドラー
def onDelete（）{
logger.INFO {"onDelete（）：called"}
def id = request.params.todos_xml_groovyId []
if（id！= null）{
def todos = app.todosXML []
if（todos.remove（id.toInteger（）））{
app.todosXML = todos
logger.INFO {"onDelete（）：削除済み$ {id}"}
帰る
}
}
send404（）
}
リスト5. outputXMLメソッドでの応答のレンダリング
def outputXML（データ）{
logger.INFO {「$ {data}をXMLに変換」}
request.headers.out.'Content-Type '=' application / xml '
request.view = 'XML'
request.xml.output = data
レンダー（）
}
PHPを使用してTo Doサービスを作成する
PHPは、普遍的なスクリプト言語です。 このセクションに示すPHP実装は、上記のGroovy実装と機能的に同等です。 これら2つの実装の間には、わずかな構文上の違いしかありません。 シリアライズ可能なオブジェクトの複雑さに応じて、間接レンダリングはWebSphere sMashによって処理されます。
以下に示すフラグメントの完全なWebSphere sMashソースコード：CombiningThePowerOfWSWithAdobeFlex / src / TodoService-1.0.0 / TodoService / app / resources / todos_xml_php.php（以下のダウンロードセクションを参照）。
リスト6. onList（）メソッド）
関数onList（）{
$ todos = zget（ "/ app / todos_xml_php"）;
if（$ todos == null）{
$ todos = array（）;
}
zput（ '/ request / view'、 'XML'）;
zput（ '/ request / xml / output'、array_slice（$ todos、0））;
zput（ '/ request / xml / rootelement'、 'arraylist'）;
render_view（）;
}
リスト7. onCreate（）メソッド
関数onCreate（）{
$ item = zget（ "/ request / params / item"）;
zput（ "/リクエスト/ステータス"、400）;
if（$ item！= null && strlen（$ item）> 0）{
$ todos = zget（ "/ app / todos_xml_php"）;
$ index = zget（ "/ app / index"）;
if（$ todos == null）{
$ todos = array（）;
$インデックス= 0;
}
$インデックス++;
$ todos [$ index] = array（ 'id' => $ index、 'value' => $ item）;
zput（ "/ app / todos_xml_php"、$ todos）;
zput（ "/ app / index"、$ index）;
zput（ "/ request / status"、201）;
$ uri = zget（ "/ request / uri"）;
zput（ "/ request / headers / out / Location"、 "$ uri / $ index"）;
}
}
リスト8. onRetrieve（）メソッド
関数onRetrieve（）{
$ id = zget（ "/ request / params / todos_xml_phpId"）;
if（$ id！= null）{
$ todos = zget（ "/ app / todos_xml_php"）;
$値= $ todos [$ id];
if（$ value！= null）{
zput（ '/ request / view'、 'XML'）;
zput（ '/ request / xml / output'、$ value）;
render_view（）;
帰る
}
}
//エラー処理
zput（ "/ request / status"、404）;
echo "リクエストの処理中にエラーが発生しました";
}
リスト9. onDelete（）メソッド
関数onDelete（）{
$ id = zget（ "/ request / params / todos_xml_phpId"）;
if（$ id！= null）{
$ todos = zget（ "/ app / todos_xml_php"）;
設定解除（$ todos [$ id]）;
zput（ "/ app / todos_xml_php"、$ todos）;
帰る
}
//エラー処理
zput（ "/ request / status"、404）;
echo "リクエストの処理中にエラーが発生しました";
}
JSON形式
Web 2.0の性質に合わせて、WebSphere sMash環境はXMLに加えてJSON（JavaScript™Object Notation）をサポートしています（JSONの詳細については、「参考文献」を参照）。 Groovy言語の重要な利点の1つは、XMLおよびJSON形式を使用する場合の解析の単純さです。これにより、開発者は適切なコードの作成に費やす時間を大幅に節約できます。
WebSphere sMash環境は、APIを介した直接レンダリングまたは間接レンダリングを使用してHTTP応答をレンダリングできます。 XMLおよびJSON形式で出力を作成するために、この投稿では間接レンダリングのみを使用します。 一般に、レンダラーは次のように呼び出されます。
1.対応するレンダラーのグローバルコンテキストのグローバルコンテキストで値/リクエスト/ビューを設定します。
2.必要に応じて、GlobalContextグローバルコンテキストでこのレンダラーの追加の値を指定します。
3.レンダラーzero.core.views.ViewEngine.render（）を呼び出します。
上記の例では、XMLデータのみを使用しています。 次のセクションでは、GroovyおよびPHPコードを最小限に変更してJSONデータ出力を実装する方法について説明します。
JSON出力用の完全なWebSphere sMashソースは、次のとおりです。 （下記のダウンロードセクションをご覧ください）。
リスト10. Groovyを使用したJSON出力
def outputJson（データ）{
logger.INFO {「$ {data}をJSONに変換」}
request.headers.out.'Content-Type '=' application / json '
request.view = 'JSON'
request.json.output = data
レンダー（）
}
リスト11. PHPを使用したJSON出力
zput（ '/ request / view'、 'JSON'）;
zput（ '/ request / json / output'、$ todos）;
render_view（）;
Adobe Flexの使用
これまで、アプリケーションのサーバー側の構築について説明してきました。 次に、アプリケーションのブラウザー部分の構築を検討します。ブラウザー部分は、以前にWebSphere sMashを使用して作成されたサーバー部分と対話する必要があります。
Adobe Flex環境により、プラットフォームに依存しないRIAアプリケーション（リッチインターネットアプリケーション）を作成できます。これは、すべての主要なブラウザー、デスクトップ環境、およびオペレーティングシステムに均一に展開できます（「参考文献」を参照）。 これらのRIAアプリケーションは、Adobe Flash Playerを使用するブラウザーで、またはAdobe Integrated Runtime（AIR）ツールを使用するデスクトップ環境で実行できます。
コードスニペットの完全なAdobe Flexソースコード：CombiningThePowerOfWSWithAdobeFlex / src / todoJSON.mxmlおよびCombiningThePowerOfWSWithAdobeFlex / src / todoXML.mxml（ダウンロードを参照）。
Adobe Flexでのアプリケーションの構築は次のとおりです。
1. WebSphere sMash環境からのデータの取得
Adobe Flexは、HTTPServiceコンポーネントを使用して外部データを簡単にロードする方法を提供します（「参考文献」を参照）。 この記事では、HTTP要求を作成する2つの方法-XML用とJSON用をそれぞれ示します。 Adobe FlexにはXMLサポートが組み込まれている（つまり、ECMAScript for XML（e4x）テクノロジーを使用してデータを解析する）ため、この場合、開発者が記述するコードは少なくて済みます。 Adobe FlexでJSONデータのシリアル化をサポートするには、corelibライブラリをダウンロードする必要があります（「参考文献」を参照）。 リスト12に示すコード例では、HTTPServiceコンポーネントが作成され、アプリケーションで使用可能になります。 これにより、WebSphere sMashが提供するXMLデータを使用して、To Doリスト内のアイテムを削除、取得、作成できます。
リスト12のMXML MX Flexコードは、Adobe Flexバインディングメカニズム（中括弧で囲まれた変数名）を広範囲に使用して、リアルタイムでリクエストを送信するときにリソース名と識別子を動的に置き換えます。 WebSphere sMash環境は、<mx：HTTPService>エレメントで指定されたURLを、以前に作成されたGroovyまたはPHPスクリプトにマップします。 対応するリクエストを処理するために呼び出されるこれらのシナリオからのメソッド（関数）の選択は、メソッド（関数）の属性とURLに基づいています。
結果およびエラー属性は、それぞれ「正常終了」または「エラー」状態のイベントで実行されるコードを提供します。 リストおよび取得の呼び出しによって返されるデータの自動処理は、MXMLコード内の任意の場所にデータをリンクすることにより提供されます。 作成および削除の呼び出しが完了した後、表示されたデータを更新するには、次のリスト呼び出しを開始します。
リスト12. XMLを使用したHTTPServiceコンポーネントの作成
<mx：HTTPService id = "listTodosHS"
url = "/ resources / {resource}" method = "GET"
resultFormat = "e4x" />
<mx：HTTPService id = "retrieveTodoHS"
url = "/ resources / {resource} / {idToRetrieve}" method = "GET"
resultFormat = "e4x"
result = "detailsBox.visible = true" />
<mx：HTTPService id = "createTodoHS"
url = "/ resources / {resource}" method = "POST"
result = "listTodosHS.send（）"
fault = "listTodosHS.send（）">
<mx：リクエストxmlns = "">
{itemToAdd.text}
</ mx：request>
</ mx：HTTPService>
<mx：HTTPService id = "deleteTodoHS"
url = "/ resources / {resource} / {idToDelete}" method = "POST"
result = "listTodosHS.send（）"
fault = "listTodosHS.send（）" />
JSONライブラリーは、WebSphere sMashによって提供されるJSONデータを解析するための同様の機能を提供します（リスト13）。 リスト12のJSONコードとXMLコードの主な違いは、リストハンドラーと取得結果ハンドラーがJSONデータをデコードするための明示的な呼び出しを持っていることです。
リスト13. JSONを使用してHTTPServiceコンポーネントを作成する
<mx：HTTPService id = "listTodosHS"
url = "/ resources / {resource}" method = "GET"
resultFormat = "text"
result = "todoItems = JSON.decode（listTodosHS.lastResult as String）;" />
<mx：HTTPService id = "retrieveTodoHS"
url = "/ resources / {resource} / {idToRetrieve}" method = "GET"
resultFormat = "text"
result = "detailItem = JSON.decode（retrieveTodoHS.lastResult as String）;
detailsBox.visible = true; "/>
<mx：HTTPService id = "createTodoHS"
url = "/ resources / {resource}" method = "POST"
result = "listTodosHS.send（）"
fault = "listTodosHS.send（）">
<mx：リクエストxmlns = "">
{itemToAdd.text}
</ mx：request>
</ mx：HTTPService>
<mx：HTTPService id = "deleteTodoHS"
0 url = "/ resources / {resource} / {idToDelete}" method = "POST"
result = "listTodosHS.send（）"
fault = "listTodosHS.send（）" />
2.データの解析と表示
リスト14に示すように、Adobe FlexコンポーネントはHTTPServiceリクエストの結果の処理を簡素化します。
リスト14. HTTPServiceリクエストの結果を処理する
<mx：HBox left = "10" horizontalGap = "15">
<mx：VBox backgroundColor = "white"
paddingBottom = "5" paddingLeft = "5"
paddingRight = "5" paddingTop = "5"
cornerRadius = "5" borderThickness = "1"
borderStyle = "solid" borderColor = "black"
dropShadowEnabled = "true" shadowDistance = "3"
shadowDirection = "right">
<mx：テキストtext = "ToDoアイテム：" fontWeight = "bold" fontSize = "14" />
<mx：リピーターID = "todoItemsRp"
dataProvider = "{listTodosHS.lastResult.item}">
<mx：HBox width = "100％" verticalAlign = "middle"
paddingBottom = "3" paddingLeft = "3"
paddingRight = "3" paddingTop = "3"
rollOver = "event.currentTarget.setStyle
（ 'backgroundColor'、0xffff88）»
rollOut = "event.currentTarget.clearStyle
（ 'backgroundColor'）»>
<mx：CheckBox click = "deleteItem（event）"
toolTip = "クリックしてアイテムを削除" />
<mx：テキストtext = "{todoItemsRp.currentItem.value}" />
<mx：LinkButton label = "details"
fontSize = "8" textDecoration = "underline"
click = "getItemDetails（event）" />
</ mx：HBox>
</ mx：リピーター>
<mx：スペーサーの高さ= "10" />
<mx：HBox width = "100％" verticalAlign = "middle">
<mx：テキストtext = "追加：" />
<mx：TextInput id = "itemToAdd"
toolTip = "新しいアイテムを追加するにはEnterキーを押してください。"
enter = "createTodoHS.send（）; event.currentTarget.text = ''»/>
</ mx：HBox>
</ mx：VBox>
<mx：VBox id = "detailsBox" visible = "false" showEffect = "{fade}"
backgroundColor = "白"
paddingBottom = "5" paddingLeft = "5" paddingRight = "5" paddingTop = "5"
cornerRadius = "5" borderThickness = "1"
borderStyle = "solid" borderColor = "black"
dropShadowEnabled = "true" shadowDistance = "3"
shadowDirection = "right">
<mx：テキストtext = "アイテムの詳細：" fontWeight = "bold" fontSize = "14" />
<mx：テキストtext = "ID：{retrieveTodoHS.lastResult.id}" />
<mx：テキストtext = "Value：" />
<mx：TextArea text = "{retrieveTodoHS.lastResult.value}" />
</ mx：VBox>
</ mx：HBox>
Adobe Flexでのイベント処理
Adobe Flexは、ECMAScriptテクノロジー（参考文献を参照）に基づいたオブジェクト指向のスクリプト言語であるActionScriptを使用します。これにより、イベント管理などの対話型の動的ユーザーインターフェイスを作成できます（リスト15を参照）。 creationComplete（）関数には、Adobe sFlex環境でHTTP REST呼び出しがどのように生成されるかを、WebSphere sMashが期待する結果と調整するための追加手順が必要であることに注意してください。
リスト15. Adobe Flexコードのサンプル
/ **
* mx：アプリケーションの作成後に実行するロジック。
* /
内部関数creationComplete（）：void {
//リストの初期人口
listTodosHS.send（）;
// FlexはHTTP DELETEを生成する方法を知りません。
//幸いなことに、sMash / ZeroはHTTP POSTを解釈します。
// X-Method-Override：DELETEヘッダーをDELETEとして。
deleteTodoHS.headers ['X-Method-Override'] = 'DELETE';
// POSTにダミーのボディを設定して、Flexがそれを変更しないようにします
// GET
deleteTodoHS.request ['foo'] = '私は本当にPOSTが必要です';
}
/ **
*ユーザーがアイテムの詳細を要求すると呼び出されます。
* /
内部関数getItemDetails（イベント：MouseEvent）：void {
//削除するアイテムのIDを見つける
var lb：LinkButton = event.currentTarget as LinkButton;
var i：int = lb.parent.parent.getChildIndex（lb.parent）;
idToRetrieve = listTodosHS.lastResult.item [i-1] .id;
//詳細を取得中は詳細ボックスを非表示にします
detailsBox.visible = false;
//サーバーに詳細を尋ねます
retrieveTodoHS.send（）;
}
/ **
*ユーザーがボックスをチェックしてアイテムを削除するときに呼び出されます
* /
内部関数deleteItem（イベント：MouseEvent）：void {
//削除するアイテムのIDを見つける
var cb：CheckBox = event.currentTarget as CheckBox;
var i：int = cb.parent.parent.getChildIndex（cb.parent）;
idToDelete = listTodosHS.lastResult.item [i-1] .id;
//同じアイテムを削除する場合、詳細を非表示にします
if（retrieveTodoHS.lastResult！= null &&
idToDelete == retrieveTodoHS.lastResult.id）
detailsBox.visible = false;
//アイテムを削除するようサーバーに指示し、リストは次の場合に更新されます
//終了を削除します
deleteTodoHS.send（）;
}
ダウンロードファイル（ダウンロードを参照）には、このトレーニングプログラムの完全なソースコードが含まれています。
以前の推論の一般化
Adobe Flexには、JSONデータのシリアル化に対する既製のサポートがありません。 このサポートを実装するには、Adobe Webサイトからcorelibライブラリーをダウンロードし、WebSphere sMashアプリケーションのlibsディレクトリーに配置する必要があります（「参考文献」を参照）。 Adobe Flexアプリケーションをデプロイするには、アプリケーション（.swf）がWebSphere sMashアプリケーションのパブリックディレクトリに存在する必要があります。 この記事に含まれるソースコードには、Adobe Flexアプリケーションの2つのバージョンが含まれています。最初のバージョンはXML形式を使用し、2番目のバージョンはJSON形式を使用します。 WebSphere sMashサーバーが実行されている場合、これらのアプリケーションには、それぞれlocalhost ：8080 / todoXML.htmlまたはlocalhost ：8080 / todoJSON.htmlのリンクを使用してアクセスできます。
次の図の説明。
-onList（）メソッドを呼び出した後のロードされたアプリケーションのビュー（図3）。
-Adobe Flexブラウザーパーツは、HTTP POST要求を送信して、新しい項目をTo Doリストに追加します（図4）。
-Adobe Flexインターフェースは、onclickイベント（コントロールウィンドウでチェックボックスがオンになっているときに発生します）を制御して、To Doリストからアイテムを削除します（図5）。
-ユーザーがto-doリスト要素をクリックすると、onRetrieve（）メソッドが呼び出されます（図6および図7）。
-このアプリケーションは、GroovyとPHPの実装間の切り替えをサポートしています（図8）。
図3. onList（）メソッドを呼び出した後のアプリケーションビュー
図4.予定リストへのアイテムの追加
図5.予定リストからアイテムを削除する
図6.ユーザーがTo Doリストで項目を選択した
図7. onRetrieve（）メソッドを呼び出した後のアプリビュー
図8.アプリケーションはGroovyとPHPを切り替えることができます
おわりに
WebSphere sMashは、Webアプリケーションを迅速に構築するためのシンプルだが強力なフレームワークです。 2つの動的スクリプト言語（GroovyとPHP）のサポートにより、WebSphere sMashを使用すると、Web 2.0アプリケーションの開発を迅速に開始できます。 この記事では、WebSphere sMashサーバーのロジックを、Adobe Flexで作成されたリッチでインタラクティブなユーザーインターフェースと組み合わせるために使用できる、標準化されたRESTfulテクニックを紹介します。 この記事で取り上げたトピックの詳細については、「参考文献」セクションを参照してください。
読み込み中
ダウンロード可能なダウンロードファイル： smash-flex-sample.zip
資源
IBMの記事
IBM WebSphere sMash。 製品情報
Project Zero開発者コミュニティ
Project Zero：REST（プログラミングモデルとリソース契約）
Project Zero：JSONサポート
Project Zero：応答のレンダリング