8月17日に行われました技術発表会の内容を撮影した動画ファイル/資料を公開いたしました。内容は以下のとおりです。
| テーマ | Flexレイアウト手書き勉強会 |
|---|---|
| 発表者 | d:id:secondlife |
勉強会動画
ダウンロード用動画
音声
Flex mxml レイアウト手書き勉強会
vim!vim!
Flex Builder でのレイアウト
- Flex Builder でのレイアウトは表示確認しながら出来て便利
- しかしながら細かいレイアウトが難しい
- x, y 座標が固定になる
- ほとんどが絶対値指定
- 出力される mxml が汚い
- 配置されたコンポーネント順
- あとから編集するとき大変
Flex Builder を使わないレイアウト配置
- 直接レイアウトを弄った方が楽じゃない？
- 相対的な指定(%)のほうが綺麗
- 慣れるまでコツが
- その Tips を紹介
mxml についておさらい
- mxmlc コンパイラが mxml をパースして、一度 AS のコードを生成
- -keep オプション
- css は組み込み時コンパイル
- mxmlc がパースして云々
- html の css のように外部参照 CSS をブラウザリロードごとに読み込むことが出来ない
- ていうかレイアウト関係にないのでいいや…
ソースを見ながら説明
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx = "http://www.adobe.com/2006/mxml"
xmlns = "*"
width = "100%"
height = "100%"
paddingLeft = "0"
paddingRight = "0"
paddingTop = "0"
paddingBottom = "0"
horizontalScrollPolicy = "off"
verticalScrollPolicy = "off"
backgroundColor = "#333333"
backgroundImage = ""
layout = "absolute"
frameRate = "60"
>
<mx:Style>
<![CDATA[
]]>
</mx:Style>
<mx:VBox
width="100%"
height="100%"
>
<mx:HBox height="100%" width="100%">
<mx:TitleWindow width="100%" title="A" height="100%" backgroundColor="0xDDDDDD" />
<mx:HBox height="100%">
<mx:Spacer width="30" />
<mx:VBox height="100%">
<mx:Spacer height="100%" />
<mx:Button label="AA" />
<mx:Spacer height="30" />
<mx:Button label="BB" />
</mx:VBox>
<mx:Spacer width="30" />
</mx:HBox>
<mx:TitleWindow width="100%" title="B" height="100%" backgroundColor="0xDDDDDD" />
</mx:HBox>
<mx:VBox
paddingTop="5"
paddingBottom="5"
paddingRight="5"
paddingLeft="5"
width="100%">
<mx:HBox
width="100%">
<mx:Spacer width="100%" />
<mx:VBox
backgroundColor="0x333333"
>
<mx:HBox
width="100%">
<mx:Spacer width="100%" />
<mx:CheckBox label="auto shape size" color="0xDDDDDD" textRollOverColor="0xDDDDDD" textSelectedColor="0xDDDDDD" id="autoPairot" selected="true" />
<mx:CheckBox label="img" color="0xDDDDDD" textRollOverColor="0xDDDDDD" textSelectedColor="0xDDDDDD" id="layerVisible" />
<mx:CheckBox label="animation" color="0xDDDDDD" textRollOverColor="0xDDDDDD" textSelectedColor="0xDDDDDD" id="motion" selected="true" />
<mx:CheckBox label="stop" color="0xDDDDDD" textRollOverColor="0xDDDDDD" textSelectedColor="0xDDDDDD" id="stopped" />
</mx:HBox>
<mx:HBox
width="100%">
<mx:Spacer width="100%" />
<mx:ComboBox rowCount="20" id="currentRenderer" />
<mx:Label text="shape size" color="0xDDDDDD" />
<mx:NumericStepper id="shapeSize" disabledColor="#000000" value="10" stepSize="1" minimum="3" maximum="50" />
<mx:Label text="num" color="0xDDDDDD" />
<mx:NumericStepper id="objectNum" disabledColor="#000000" value="5" stepSize="1" minimum="3" maximum="100" />
<mx:Button id="saveImg" label="save image" />
</mx:HBox>
<mx:Form
paddingTop="0"
paddingBottom="0"
paddingRight="0"
paddingLeft="0"
width="100%"
defaultButton="{submit}">
<mx:HBox width="100%">
<mx:Spacer width="100%" />
<mx:TextInput id="imageUrl" text="" width="350" />
<mx:Button id="submit" label="load image" />
</mx:HBox>
</mx:Form>
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:VBox>
<mx:Canvas x="500" y="500" width="100" height="100">
<mx:TitleWindow width="100%" title="Canvas" height="100%" backgroundColor="0xDDDDDD" />
</mx:Canvas>
</mx:Application>
レイアウトのポイント・その1
最上位のコンテナ以外のコンテナは基本 height/width を100%に
- コンテナとは、子供を持つことのできるコンポーネント
- Box/VBox/HBox/TitleWindow/Panel/Canvas など
- 子は親コンテナのheight/width によってレイアウトが決まる
- 親のサイズを入れないと、子のサイズによって自動で親のサイズが決まる
レイアウトのポイント・その2
VBox(縦)、HBox(横) を使いこなす
- いわゆる Table ぽいレイアウト
- VBox だと縦配置
- HBox だと横配置
これを組み合わせることでほとんどのレイアウトを組める
レイアウトのポイント・その3
Spacer
- いわゆる spacer.gif
- 超便利
- width/height を可変させて使う
- Flex では 100% にすると、親コンテナのサイズによってよしなに調整される
自由なレイアウト
Canvas + layout="absolute" を使うと自由な場所に配置が可能
CSS について
CSS は超複雑。ProgrammaticSkin がからんでくると、どうやって表示されるかは実装を見るまで解らない。
- flex2/frameworks/defaults.css を見ながらコピペ
- http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html