WebデザイナーにもわかるFlex画面デザイン（1）のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
WebデザイナーにもわかるFlex画面デザイン（1）へ行く。
- 1 (2008-08-01 (金) 15:00:08)
- 2 (2008-08-01 (金) 17:17:46)
- 3 (2008-09-02 (火) 12:49:18)
- 4 (2008-09-04 (木) 16:42:57)

WebデザイナーにもわかるFlex画面デザイン(1) †

はじめに †

せつめいするひと：
Webデザイナー。女。Flashは5で止まっている。
HTMLは手打ち。FireWorks派。Windows。
AS、JSはコピペで奮闘。がよくわかってない。プログラム入門の本でいつも挫折。だれか教えてください。

そんなWebデザイナーがFlexをやってみたよ！

↑

[edit]

Flexとは？ †

いわゆるRIA（Rich Internet Application）統合開発環境。
Flash上、AIR上で動作する
「タイムラインのないFlash」？
コンポーネントと呼ばれるパーツがあらかじめ用意されている

デザイン…mxml(Flex用のXML)
プログラム…ActionScript?
に分かれている。

↑

[edit]

つくりかた †

↑

[edit]

開発環境 †

FlexBuilder?
- ドリみたいなもん？Javaの人にはいいらしい？？
Flex SDK（無償）
- 黒い画面で使えるコンパイラとデバッガ
- http://www.adobe.com/jp/products/flex/sdk/

↑

[edit]

必要なファイル †

mxml
as
css
画像（gif/jpg/png）、swf

これだけ。
なので、Flex SDKを使えば、秀丸とFireworks（Photoshop）でいますぐFlexアプリがつくれます。

これらのファイルをコンパイルすると、swfのできあがり。

↑

[edit]

rascutが便利 †

コンパイルには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。
あとは勝手に更新を察知して自動コンパイルしてくれます。

↑

[edit]

中身をみてみる †

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>

これを黒い画面でコンパイルすると、こうなる

ボタンもマウスオーバー、マウスダウンに反応します
ちなみにこの時点でCSSの中身は空なので、デフォルトスタイルです。
<mx:Application>が最上位のコンポーネント。<HTML>タグみたいなもんですね。この中に要素をどかどか入れていきます。
XMLなので、タグはきちんと閉じましょう。

↑

[edit]

コンポーネントの種類 †

コンテナ（レイアウトにつかう）
コントロール（ボタン、リスト）

などビジュアル系のコンポーネントのほか、エフェクトやバリデータなどのコンポーネントもある。

代表的なコンポーネント

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?

メニューに使えますね。

<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?
- Webアプリで使えるカレンダーUI。
```
<mx:DateField formatString="YYYY/MM/DD" />
```

DataGrid?

<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などでいろいろ記述しないといけところを、
たったこれだけの記述でできちゃいます！
コンポーネント化されているって便利。

↑

[edit]