検証特集：結局、RIAはどれを使うべきなのか？（最終回）

FlexとSilverlightで同じアプリを作って比較してみた

クラスメソッド株式会社
福田寅成
2009/2/24

□ サンプルのアーキテクチャ

　今回利用したアプリケーションのアーキテクチャは前述のFlexの記事で利用した簡単なアーキテクチャを少し改造したものです。アーキテクチャの図は以下のようになります。

図　サンプルアプリケーションのアーキテクチャ図（画像をクリックすると拡大します）

□ 処理の流れ

　処理の流れは以下のようになっています。以後、「○/□」と、「/」で区切る単語があった場合○はFlex用語、□はSilverlight用語を表すことにします。

ViewHelper/コードビハインドでは、アプリケーションの初期化時にユーザー一覧取得処理をDAOに依頼。その際のリクエストパラメータはリクエストDTOに詰める
- DAO：Data Access Object。データアクセスをカプセル化
- DTO：Data Transfer Object。データを送受信する際の入れ物。宅配の小包
- 今回のリクエストDTOの中身は空。すなわち、ユーザー全件取得を依頼
DAOでは、XML形式でアプリケーションに埋め込んであるユーザー一覧データを取り出す

この部分をサーバへのリクエストに書き換えると、本格的なものに変身

XML形式のデータをオブジェクト形式に変換

データはオブジェクト形式が一番使いやすく、パフォーマンスも良いので変換する

ユーザー一覧データをレスポンスDTOに詰めてViewHelper/コードビハインドに返す
ViewHelper/コードビハインドは、画面のデータグリッドのデータプロバイダ/データソースにユーザー一覧データをセット

　そのほか、以下は作る際に注意したことです（コーディングのテクニックなので、読み飛ばしてもらってかまいません）。

※全体で注意したこと
- 命名規則をできるだけ合わせる
- コメントに同じものを書く
- 変数やメソッドなどの役者の数も処理の流れも同じになっている必要がある
- Flexでは、『諸悪の根源であるバインディング』は使わない
- Silverlightでも使わないようにした
※Viewで注意したこと
- XAMLでは、StackPanelを使う
- FlexにおけるBox。箱に詰めれば、勝手に整列してくれるので使いやすい
- Silverlightのみマージンや背景色などをスタイル設定（Flexに見た目を似せるため）
※DAOで注意すること
- DAOではサーバに処理をリクエストしていないが、そうしているかのような作りにする

ソースコードはどれぐらい違うのか？

　それでは、見た目は同じになったFlexアプリとSilverlightアプリのソースコードを比較していきましょう。

□ XMLベースの画面定義

　FlexのMXMLとSilverlightのXAMLは、それぞれタグを記述して画面をレイアウトしていきます。基本的にMXML/XAML内にロジックは書かないので、画面のレイアウトに専念します。

　画面の「レイアウト」には、FlexではBox、SilverlightではStackPanelを利用しましました。どちらも内部の要素を縦か横に自動的に整列してくれるので、業務系の画面作成には向いているレイアウトコンポーネント/レイアウトコントロールだと思います。

　重要な部品であるデータグリッド（コンポーネント/コントロール）ですが、ほとんど同じ感じでコードが書けてびっくりです。

Flex版データグリッド（実際のデモのソースコードから一部を抜粋）

<!-- ユーザー一覧データグリッドです。 -->

          <mx:DataGrid id="userListDataGrid" width="300" height="200">

            <mx:columns>

              <mx:DataGridColumn headerText="名前" dataField="name" 

                width="100"/>

              <mx:DataGridColumn headerText="住所" dataField="address" 

                width="200"/>

           </mx:columns>

          </mx:DataGrid>

Silverlight版データグリッド（実際のデモのソースコードから一部を抜粋）

<data:DataGrid x:Name="UserListDataGrid" AutoGenerateColumns="False"

            Width="300" Height="200">

            <data:DataGrid.Columns>

              <data:DataGridTextColumn Header="名前"

                Binding="{Binding Path=Name}" Width="100"/>

              <data:DataGridTextColumn Header="住所"

                Binding="{Binding Path=Address}" Width="200"/>

            </data:DataGrid.Columns>

          </data:DataGrid>

　データグリッドの列を定義するオブジェクト（DataGridColumn/DataGridTextColumn）で、ヘッダーのテキスト文字やデータグリッドに設定された配列データの各要素のどのプロパティを表示するかを指定しています。このデータグリッド部分のみならず、MXML/XAMLで記述した全体のコードがすごく似ていてびっくりしています。

□ 画面ロジック

　ViewHelper/コードビハインドで記述する内容は、例えば以下のようなものです。

画面要素などにイベントハンドラを設定
画面要素で発生したイベントに関するイベントハンドラの処理を行う
DAOにリクエストを投げてデータを取得
画面に値をセット
画面の見た目を切り替え
権限によってボタンを出すとか出さないとか
画面を入れ替え

　さすがにFlexとSilverlightでは、このロジック部分の記述は違ってくるだろうと思っていましたが、これまたほとんど同じようにできました。

　DAOにユーザー一覧取得をリクエストする部分の処理を見てみましょう。

Flex版ユーザー一覧取得処理（SampleViewHelper#getUserList）

/**

          * ユーザー一覧を取得します。

          */

          private function getUserList():void {

              // 空のリクエストDTOを作成します。

              // ユーザー一覧取得には特に取得条件は不要なので

              // リクエストDTOは空です。

              var dto:UserRequestDto = new UserRequestDto();

          

              // ユーザー一覧を取得します。

              dao = new UserDao();

              dao.addEventListener(ResultEvent.RESULT, 

                  getUserListResultHandler);

              dao.getUserList(dto);

          }

Silverlight版ユーザー一覧取得処理（Sample.xaml.cs#GetUserList）

/// <summary>

          /// ユーザー一覧を取得します。

          /// </summary>

          private void GetUserList()

          {

              // 空のリクエストDTOを作成します。

              // ユーザー一覧取得には特に取得条件は不要なので

              // リクエストDTOは空です。

              UserRequestDto dto = new UserRequestDto();

          

              // ユーザー一覧を取得します。

              Dao = new UserDao();

              Dao.Result += new UserDao.ResultEventHandler(

                  GetUserListResultHandler);

              Dao.GetUserList(dto);

          }

　それぞれ今回作成したシンプルなアーキテクチャに基づいて処理しています。

リクエストDTOを作成
必要に応じてリクエストパラメータをリクエストDTOに設定（今回は空）
DAOを新規作成
DAOの結果イベント（ユーザー一覧成功したよイベント）にイベントハンドラを設定
DAOのメソッドを呼び出す（リクエストDTOを引数に）

　DAO内では、HTTPによるサーバリクエストやソケット接続による通信処理は非同期に行われ、レスポンスは結果イベントで受けることになります。この部分の流れを同じにするために、ViewHelper/コードビハインドでもDAOを呼び出す際はイベントハンドラを用意して呼び出します。

　次ページでは、比較した結果をまとめ、最後に筆者がこれまで3年近く業務用RIAを開発して培った“マナー”を示します。これは、Flex/Silverlight以外でも応用できると考えますので、ぜひご覧ください。

1-2-3

INDEX
検証特集：結局、RIAはどれを使うべきなのか？（最終回） FlexとSilverlightで同じアプリを作って比較してみた
	Page1 異なるRIA技術で同じアプリを作ってみよう検証サンプル「マスタメンテナンスアプリ」
	Page2 ソースコードはどれぐらい違うのか？
	Page3 FlexとSilverlightは似ている？標準“マナー”を作り、多くのRIA技術に触れよう

リッチクライアント＆帳票全記事一覧へ

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する