- 追加された行はこの色です。
- 削除された行はこの色です。
*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]
*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]
***開発環境 [#rd76da63]
-FlexBuilder
--ドリみたいなもん?Javaの人にはいいらしい??
--ドリみたいなもん?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" />
-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]
デザインの調整はどうするの?
スタイルシートを使います。
(まだ書き途中)
***必要なファイル [#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" />
-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]
デザインの調整はどうするの?
スタイルシートを使います。
(まだ書き途中)