8月17日の技術勉強会 - Flexレイアウト手書き勉強会

g:hatena:id:hatenatech

8月17日の技術勉強会 - Flexレイアウト手書き勉強会

8月17日に行われました技術発表会の内容を撮影した動画ファイル/資料を公開いたしました。内容は以下のとおりです。

テーマ Flexレイアウト手書き勉強会
発表者 d:id:secondlife

勉強会動画

ダウンロード用動画

070816secondlife.mp4

音声

Download

Flex mxml レイアウト手書き勉強会

vim!vim!

Flex Builder でのレイアウト

Flex Builder を使わないレイアウト配置

  • 直接レイアウトを弄った方が楽じゃない？
  • 相対的な指定(%)のほうが綺麗
  • 慣れるまでコツが
  • その Tips を紹介

mxml についておさらい

ソースを見ながら説明

レイアウトのポイント・その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 がからんでくると、どうやって表示されるかは実装を見るまで解らない。