Hatena::Grouphatena

はてな技術発表会日記 このページをアンテナに追加 RSSフィード

株式会社はてなでは日々、開発者が持ち回りでひとつの技術トピックについて発表を行っており、公開可能なものについては、その内容を音声と動画で公開しています。

2007-08-21

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

13:33 | 8月17日の技術勉強会 - Flexレイアウト手書き勉強会  - はてな技術発表会日記 を含むブックマーク はてなブックマーク - 8月17日の技術勉強会 - Flexレイアウト手書き勉強会  - はてな技術発表会日記

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

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

勉強会動画

ダウンロード動画

070816secondlife.mp4 filelist

音声

Download filelist

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

vim!vim!

Flex Builder でのレイアウト

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

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

mxml についておさらい

ソースを見ながら説明

<?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 がからんでくると、どうやって表示されるかは実装を見るまで解らない。