yuiを使ったFlexアプリを作って、便利さを体感しよう（2/4）

yuiを使ったFlexアプリを作って、
便利さを体感しよう

特集：デザイナとプログラマを“結”ぶオープンソース（後編）

クラスメソッド株式会社
渡邊佳一
2008/10/30

- PR -

■ プロパティファイルの作成

　これを修正するために、log4yui.propertiesファイルを作成します。以下のように作成してください。

「src」フォルダ上で右クリックして表示された［メニュー］から［新規］→［ファイル］を選択
［New File］のダイアログで［File name:］のテキストフィールドに「log4yui.properties」と入力して［Finish］ボタンを押下する

図7　新規ファイル作成画面
「src/log4yui.properties」を作成できたことを確認して、内容を以下のように変更

log4yui.properties

             log4yui.category.org.seasar=DEBUG, C

             log4yui.category.yui.example=DEBUG, C

             

             log4yui.appender.C=org.seasar.akabana.yui.logging.appender.SimpleAppender

             log4yui.appender.C.layout=org.seasar.akabana.yui.logging.layout.PatternLayout

             log4yui.appender.C.layout.pattern=%d [%c] %l - %m%t

             

             log4yui.rootLogger=INFO, A1

             log4yui.appender.A1=org.seasar.akabana.yui.logging.appender.SimpleAppender

             log4yui.appender.A1.layout=org.seasar.akabana.yui.logging.layout.PatternLayout

             log4yui.appender.A1.layout.pattern=%d [%c] %l - %m

　propertiesファイルの名前は変更できません。必ず「log4yui.properties」という名前で作成します。SVNからライブラリプロジェクトを取得した場合、yui-loggingライブラリプロジェクトのsrc/main/resourcesフォルダの中にひな型となるlog4yui.propertiesファイルがあるので、それをコピーすると楽です。

図8　yui-loggingライブラリプロジェクト内のlog4yui.properties

　下準備はこれで完了です。ここからは、各レイヤオブジェクトを作成していきたいと思います。

まずは、デザイナが画面を作成

　Viewがなくては何も始まりません。Flex/AIR開発のプロトタインピングで最初に取り掛かるのは画面作成です。ここの担当はデザイナとなります。

図9　サンプルアプリケーションのパッケージ構成

　yui/example/datavisualization/に「view」というフォルダを作成して、その下に「ExampleView.mxml」を作成します。ソースコードの内容は以下になります。

　ExampleViewをApplicationに配置しています。ExampleViewの構成は、最上部にButtonを、次にChart、次にDataGridのコンポーネントをそれぞれ配置し、idを付けています。

　Viewでは、コンポーネントに対して、idを付けているというところがポイントです。yuiの機能の1つであるCustomizerは内部的にコンポーネントのidを利用しています。idに命名規則はありませんが、Viewに配置したコンポーネントにidを付けるということを意識してください。

main.mxml

<?xml version="1.0" encoding="utf-8"?>

                   <mx:Application 
                   xmlns:mx="http://www.adobe.com/2006/mxml" 

                     xmlns:akabana="http://akabana.seasar.org/yui/mxml" 

                     xmlns:dv="yui.example.datavisualization.view.*" 

                     layout="vertical">

                   

                     <dv:ExampleView />

                   

                     <akabana:YuiFrameworkMixin >

                       <akabana:conventions>

                         yui.example.datavisualization

                       </akabana:conventions>

                     </akabana:YuiFrameworkMixin>

                   

                   </mx:Application>

ExampleView.mxml

<?xml version="1.0"?>

                   <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"

                     height="100%" 
                   width="100%"
                   paddingBottom="10"
                   paddingLeft="10"

                     paddingTop="10"
                   paddingRight="10" title="yui-Application Examples" 
                   layout="vertical" >

                   

                     <mx:Box horizontalAlign="right">

                       <mx:Button id="printButton" label="印刷" />

                     </mx:Box>

                     <mx:HBox width="100%">

                   

                       <mx:LineChart id="linechart" 
                   height="100%" width="100%"

                         paddingLeft="5" paddingRight="5" 
                   showDataTips="false" >

                   

                         <mx:horizontalAxis>

                           <mx:CategoryAxis categoryField="month" />

                         </mx:horizontalAxis>

                   

                         <mx:series>

                           <mx:LineSeries
                   id="profitLineSeries"
                   yField="profit displayName="profit"

                             itemRenderer="yui.example.common.controls.renderer.CircleItemRenderer" >

                           </mx:LineSeries>

                           <mx:LineSeries
                   id="expensesLineSeries"
                   yField="expenses"
                   displayName="expenses"

                             itemRenderer="yui.example.common.controls.renderer.CircleItemRenderer" >

                           </mx:LineSeries>

                           <mx:LineSeries
                   id="amountLineSeries"
                   yField="amount"
                   displayName="amount"

                             itemRenderer="yui.example.common.controls.renderer.CircleItemRenderer" >

                           </mx:LineSeries>

                         </mx:series>

                   

                       </mx:LineChart>

                       <mx:Legend dataProvider="{ linechart }" />

                     </mx:HBox>

                   

                     <mx:VBox width="100%"> 

                       <mx:DataGrid id="datagrid" editable="true" width="100%" >

                         <mx:columns>

                           <mx:DataGridColumn dataField="month" headerText="Month" editable="false" />

                           <mx:DataGridColumn dataField="profit" headerText="Profit" />

                           <mx:DataGridColumn dataField="expenses" headerText="Expenses" />

                           <mx:DataGridColumn dataField="amount" headerText="Amount" />

                         </mx:columns> 

                       </mx:DataGrid>

                     </mx:VBox>

                   

                   </mx:Panel>

命名規則を利用したAction・Helper・Logicの作成

図10　パッケージ構成

　次に、このViewに対して機能を付加していきます。Flexアプリケーションはイベント駆動なので、Viewをユーザーが操作すると内部的にはイベントが送出されます。そのイベントを受け取ってロジックにつないでいくのがActionです。画面を作成したら、Actionを作成します。ここからの担当はプログラマです。

　ActionはNaming Convention（命名規則）によって、役割を与えられます。そのため、yuiの規約に従って作成する必要があります。src/yui/example/datavisualization/に「action」というフォルダを作成して、その下に「ExampleAction.as」（ActionScriptクラス）を作成します。

　また、このサンプルではほかのレイヤオブジェクトであるHelperとLogicも利用するので、それぞれこの時点で作成だけしたいと思います。各レイヤオブジェクトはsrc/yui/example/datavisualization/helper/に「ExampleHelper.as」を、src/yui/example/datavisualization/logic/に「ExampleLogic.as」を作成します。各レイヤオブジェクトの作成が完了すると、図10のような構成になっていると思います。それぞれのソースコードの内容は、以下のようになります。

ExampleAction.as

package yui.example.datavisualization.action{

                   public class ExampleAction {

                       public function ExampleAction() {}

                   }}

ExampleLogic.as

package yui.example.datavisualization.logic {

                   public class ExampleLogic {

                       public function ExampleLogic() { }

                   }}

ExampleHelper.as

package yui.example.datavisualization.helper {

                   public class ExampleHelper {

                       public function ExampleHelper() { }

                   }}

　次ページからは、上記3ファイルについて詳細な処理を追加していきます。

1-2-3-4

INDEX
特集：デザイナとプログラマを“結”ぶオープンソース（後編）　 yuiを使ったFlexアプリを作って、便利さを体感しよう
	Page1 yuiの便利さは体感しないと分からない！ yuiを使ってデザイナと協業するための環境作り yuiを利用するまえに
	Page2 まずは、デザイナが画面を作成命名規則を利用したAction・Helper・Logicの作成
	Page3 自動イベントハンドリング機能の利用ロギングAPIも使ってみよう
	Page4 ActionクラスからLogicを利用する HelperでUIの更新人がお互い助け合うように

デザイナとプログラマを“結”ぶオープンソースバックナンバー

第1回 Flex/AIR開発でデザイナとの協業を楽にする「yui」
最終回 yuiを使ったFlexアプリを作って、便利さを体感しよう

TechTargetジャパン

リッチクライアント & 帳票フォーラム新着記事

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial

＠IT Special ヘ

ソリューションFLASH

＠ITトップ｜リッチクライアント＆帳票フォーラムトップ｜会議室｜利用規約｜プライバシーポリシー｜サイトマップ

Copyright(c) 2000-2012 ITmedia Inc.
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。