Air でのレイアウトを学ぶ

Air

今回はAirアプリのレイアウトについて学習してみたいと思います

とはいっても私はAirまるっきり素人な為、例によって今回も参考サイトに沿って
作成したいと思います。

以下参考サイト
Flex／AIRウィジェットのデザインをCSSでカッコよく (1/4)：作って学ぶAIRウィジェットの基礎→応用（2） - ＠IT

また@ITです・・・
いつもお世話になっています!!

基本は上記サイトを参考にすれば問題ないと思うので、ここでは気になったことと
覚書をまとめておこうと思います。

○MXMLによる画面レイアウトの作成

  • ウィンドウ全体のサイズ設定

　　WindowedApplicationにサイズ属性を追加し調整する
　　layout="absolute" width="800" height="600"
　　意味：絶対値指定　横800 縦600

　　横にコンポーネントを整列させるレイアウトコンポーネント

　　縦にコンポーネントを整列させるレイアウトコンポーネント

　　ボタンやテキストボックスなどをさまざまに配置していく際の基盤コンポーネント
　　タイトル属性に値を設定するとコンポーネント上部にラベルが表示される

　　コンポーネントサイズはそれぞれ画面全体に対してコンポーネントがしめるサイズの
　　割合を%にて設定することにより、起動時にコンポーネント毎に幅を調整したり、
　　ウィンドウのリサイズに対応する事が可能となる
　　また、MXMLではコンポーネントの位置を左上から座標からだけでなく上下左右どの
　　方向からの座標でも取れる(リサイズ時にレイアウトが崩れない)

※有益な情報源
フォーラム - Flex User Group

○一覧の作成
　リスト（一覧）の表示にはListコンポーネントを利用
　Panel内に追加するなどして利用する

○サンプルデータの表示
　Modelを利用すると一覧内容の一時的なデザイン確認などに便利

  • Modelタグ

　データモデルを表す

  <mx:Model id="rssInfoList">
    <rssinfolist>
      <rssinfo name="@IT" 
        url="http://rss.rssad.jp/rss/itmatmarkit/rss.xml"/>
      <rssinfo name="TEST" 
        url="http://xxxxx.jp/rss/rss.xml"/>
    </rssinfolist>
  </mx:Model>
  • Listタグ属性

　dataProvider:「データを提供するオブジェクトの名前」を設定する
　※下記のように.でXMLを表現する技術を E4X（ECMAScript for XML)という
　　E4Xは、JavaScript／ECMAScriptに対して、直接XMLを扱う機能

　labelField:dataProviderで指定されたデータ（1件1件）の要素で
　どの要素をラベル（＝リスト上にテキストとして表示されるもの）として表示するかを表す

    <mx:List id="rssList" width="100%" height="100%" 
        dataProvider="{rssInfoList.rssinfo}" labelField="name" />

※残念ながら流石にリストにバインド？されたデータ内容はデザインビューでは確認できない
　プログラム実行時に割り当てられるから？

○ボタンなどの配置
　ControlBarでボタンをまとめて配置するとレイアウト調整が楽
　ControlBar属性horizontalAlignを設定してControlBar内のコントロール位置を
　整列することができる

○データ一覧の表示
　PanelにDataGridを作成することで表状にデータを表示できる

      <mx:Panel width="100%" height="30%" title="記事一覧">
        <mx:DataGrid id="feedList" width="100%" height="100%">
        <mx:columns>
          <mx:DataGridColumn headerText="日付" width="120" />
          <mx:DataGridColumn headerText="タイトル" />
          <mx:DataGridColumn headerText="リンク" />
        </mx:columns>
        </mx:DataGrid>
      </mx:Panel>


　デフォルトで幅の調整、列の入れ替え、ソートなどが可能(メッチャ便利!!)
※Flex 2 Style Explorer というAdobeのサービスにてDataGridのデザインの確認ができる
　　http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html