nodぶろぐRIAFlex-AIR-Flash

FlashやFlex,(Ajax),S2Flex2,ActionScript3,yui-frameworks,Akabanaプロジェクトなどのメモ

Flex4の LayoutsクラスとCustomLayout

Adobe TVにFlex4(Gumbo)のLayoutに関するインタビューと、サンプルの説明があるビデオが公開されていました。

インタビューは、RyanさんがEvitimさんにFlex4のLayoutについて聞いています。EvitimさんはFlex 4 のLayout部分担当だそうです。

これまで(Flex3まで)はLayoutの指定がApplicationの属性でした。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

Flex4では、Layoutの指定がクラスの指定になります。
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:layout>
<s:VerticalLayout/>
</s:layout>

Flex4のSpark Componentsでは以下の5つが提供されています。

  • Basic Layout
  • Horizontal
  • Vertical
  • TileLayout
  • ButtonBarHorizontalLayout

レイアウトを自分で作成するときには、spark.layouts.supportClasses.LayoutBase.as
を拡張して以下のメソッドをoverrideすればよいみたい。

  • measure():void
  • updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

CutomLayoutを実装するとこんなLayoutもできます。

上記のカスタムレイアウト(WheelLayout)はFlex SDKSVNあります

インタビューとCumtomLayoutのコードはこのビデオで見ることができます。


#Gumbo(Flex 4)の仕様に関するDocumentがいっぱい
Gumbo - Flex SDK - Confluence
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo#Gumbo-DocumentsandSpecifications

#Sparkの Layoutに関するドキュメント

Spark Layout - Flex SDK - Confluence
http://opensource.adobe.com/wiki/display/flexsdk/Spark+Layout

Spark Basic Layout - Flex SDK - Confluence
http://opensource.adobe.com/wiki/display/flexsdk/Spark+Basic+Layout

Spark Horizontal and Vertical Layout - Flex SDK - Confluence
http://opensource.adobe.com/wiki/display/flexsdk/Spark+Horizontal+and+Vertical+Layout

Spark TileLayout - Flex SDK - Confluence
http://opensource.adobe.com/wiki/display/flexsdk/Spark+TileLayout

#Flex SDK TeamでLayout部分を担当しているevitimさんのblog
Easy Flex » FlowLayout - a Spark Custom Layout Example
http://evtimmy.com/?p=3

#Cynagy Systems Andrew TriceによるCircularLayout という、円を描くようなCustomレイアウトがコード付きで解説されています。
Flex 4 & Custom Layouts InsideRIA
http://www.insideria.com/2009/05/flex-4-custom-layouts.html

Adobe TVのビデオ中で使われているWheelLayoutについては以下にコードがあります。
http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/development/eclipse/flex/flex4test/src/layouts/WheelLayout.as

#Adobe TVでevitimさんとryanさんのインタビュー&customLayout(WheelLayout)のサンプルについてのデモ
Flex 4 Layouts on Tech Talk with Ryan Stewart Ryan Stewart - Rich Internet Application Mountaineer
http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/

#RyanさんによるEvtimさんのblog紹介
Evtim is Blogging All About Flex 4 Layouts Ryan Stewart - Rich Internet Application Mountaineer
http://blog.digitalbackcountry.com/2009/06/evtim-is-blogging-all-about-flex-4-layouts/

Posted by nod at 2009年06月09日 02:07 | コメント (2) | Clip!! | Clip!! | このエントリーを含むはてなブックマーク |digg it! |del.icio.us it!

この記事に対するコメント

うおお、これすごいですね!
めちゃ参考になりました!

Posted by: c9katayama at 2009年06月12日 01:40

ナイスアーティクル。

こうやってまとめられてると
すごく有り難いです。

Posted by: {eL_e3電気を大切に at 2009年11月18日 17:41

コメントを投稿する




保存しますか?



Flex.org - The Directory for Flex Get Adobe Flash Player Made with dreamweaverMade with fireworksPowered by Movable Type 3.36Powered by Wandering Wind
Copyright : [Articles] (C) nodぶろぐRIAFlex-AIR-Flash All Rights Reserved.
[Comments/Trackbacks] ... Authors of those have rights.