*WebデザイナーにもわかるFlex画面デザイン(1) [#r2982611]
 
 **はじめに [#t4b85a13]
 
  せつめいするひと:
  Webデザイナー。女。Flashは5で止まっている。
  HTMLは手打ち。FireWorks派。Windows。
  AS、JSはコピペで奮闘。がよくわかってない。プログラム入門の本でいつも挫折。だれか教えてください。
 
 そんなWebデザイナーがFlexをやってみたよ!
 
 //-----------------------------------------
 
 **Flexとは? [#g4d021e1]
 
 - いわゆるRIA(Rich Internet Application)統合開発環境。
 - Flash上、AIR上で動作する
 -「タイムラインのないFlash」?
 -コンポーネントと呼ばれるパーツがあらかじめ用意されている
 
 - デザイン…mxml(Flex用のXML)
 - プログラム…ActionScript
 に分かれている。
 
 **つくりかた [#z5b739f6]
 
 #blikimore
 
 ***開発環境 [#rd76da63]
 -FlexBuilder
 --ドリみたいなもん?Javaの人に便利な統合開発環境らしい
 -Flex SDK(無償)
 --黒い画面で使えるコンパイラとデバッガ
 --http://www.adobe.com/jp/products/flex/sdk/
 
 ***必要なファイル [#a163d096]
 
 - mxml
 - as
 - css
 - 画像(gif/jpg/png)、swf
 
 これだけ。
 なので、Flex SDKを使えば、秀丸とFireworks(Photoshop)でいますぐFlexアプリがつくれます。
 
 これらのファイルをコンパイルすると、swfのできあがり。
 
 ***rascutが便利 [#y2f122bc]
 コンパイルにはSDKのコンパイラより rascutが早いし自動コンパイルしてくれるので便利!
 rascutのインストールについては、こちらで。
 http://www.ark-web.jp/sandbox/wiki/?Flex%2Frascut
 
 デザイナーでも黒い画面でやってみよう。rascutをインストールできたら、
 SSHの使用できるアプリ(winならputty、macならターミナルでOK)を起動して、
 
  cd public_html/flex(mxmlのあるディレクトリまで移動)
 
  rascut sample.mxml(ファイル名を指定してrascut実行)
 
 これでOK。
 あとは勝手に更新を察知して自動コンパイルしてくれます。
 
 //-----------------------------------------
 
 **中身をみてみる [#qbd50e73]
 
 MXMLの中身
 
  <?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Style source="stylesheets/sample.css" />
  
      <mx:Button label="Hello World!" width="150" height="18" />
  
  </mx:Application>
 
 これを黒い画面でコンパイルすると、こうなる
 #flash( /sandbox/design/data/flex/sample01.swf, 240x180, version=9)
 
 - ボタンもマウスオーバー、マウスダウンに反応します
 - ちなみにこの時点でCSSの中身は空なので、デフォルトスタイルです。
 - <mx:Application>が最上位のコンポーネント。<HTML>タグみたいなもんですね。この中に要素をどかどか入れていきます。
 - XMLなので、タグはきちんと閉じましょう。
 
 
 ***コンポーネントの種類 [#tcfe0565]
 - コンテナ(レイアウトにつかう)
 - コントロール(ボタン、リスト)
 
 などビジュアル系のコンポーネントのほか、エフェクトやバリデータなどのコンポーネントもある。
 
 ''代表的なコンポーネント''
 
 -Box
 #flash( /sandbox/design/data/flex/sample02.swf, 360x270, version=9)
 
 --Boxは、divみたいに中にほかのコンポーネントを入れられる矩形。レイアウトに使用します。
 ---HBoxは、内容物を横にならべる。
 ---VBoxは、内容物を縦にならべる。
  <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" >
      <mx:Button label="Boo" width="100" height="18" />
      <mx:Button label="Hoo" width="100" height="18" />
      <mx:Button label="Wooooo" width="100" height="18" />
  </mx:HBox>
 
 -TabBar
 #flash( /sandbox/design/data/flex/sample03.swf, 360x270, version=9)
 
 --メニューに使えますね。
  <mx:TabBar>
     <mx:dataProvider>
 		<mx:Array>
 			<mx:Object label="About" />
 			<mx:Object label="Download" />
 			<mx:Object label="Download" />
 			<mx:Object label="Help" />
 		</mx:Array>
      </mx:dataProvider>
  </mx:TabBar>
 
 -DateField
 #flash( /sandbox/design/data/flex/sample04.swf, 360x270, version=9)
 --Webアプリで使えるカレンダーUI。
  <mx:DateField formatString="YYYY/MM/DD" />
 
 -DateField
 #flash( /sandbox/design/data/flex/sample06.swf, 360x270, version=9)
 --Webアプリで使えるカラーピッカー。
  <mx:DateField formatString="YYYY/MM/DD" />
 
 
 -DataGrid
 #flash( /sandbox/design/data/flex/sample05.swf, 360x270, version=9)
 
  <mx:DataGrid  width="100%" height="100%"
 	dataProvider="{services}">
 	<mx:columns>
 		<mx:DataGridColumn dataField="name" headerText="サービス名"/>
 		<mx:DataGridColumn dataField="URL" headerText="URL"/>
 		<mx:DataGridColumn dataField="description" headerText="説明"/>
 	</mx:columns>
  </mx:DataGrid>
  
  <mx:XMLList id="services">
 	<service>
 		<name>ecoったー</name>
 		<URL>http://eco.tter.jp/</URL>
 		<description>eco*Twitter</description>
 	</service>
 	<service>
 		<name>necoったー</name>
 		<URL>http://neco.tter.jp/</URL>
 		<description>=^..^=</description>
 	</service>
 	<service>
 		<name>miqqle</name>
 		<URL>http://miqqle.jp/</URL>
 		<description>これは便利!</description>
 	</service>
  </mx:XMLList>
 
 
 
 などなど、HTMLならjsなどでいろいろ記述しないといけところを、
 たったこれだけの記述でできちゃいます!
 コンポーネント化されているって便利。
 
 ***その他のコンポーネント [#s07c0110]
 -これを見たほうが早いね!
 -- ComponentExplorer
 -- http://examples.adobe.com/flex3/componentexplorer/explorer.html
 
 
 **スタイルの設定 [#f2e5f457]
 デザインの調整はどうするの?
 スタイルシートを使います。
 
 (→[[WebデザイナーにもわかるFlex画面デザイン(2)]]につづきます)
 
 
 #blikifooter(小森)
 tag: [[Flex>tag/Flex]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら