(名古屋1人反省会)スキンを変える＆CSSでどの程度まで出来るのか？
「Flex2のデフォルトのスキンでは満足しない」という声は、第二回寺子屋(仮)でも挙ってましたが、
今回もでましたので少し調べました。
まず、Flexのデフォルトのスキンについて、
Adobeの上条さんという方が詳しく書かれてましたので、それを読みます。
http://weblogs.macromedia.com/akamijo/archives/2007/01/halo_aeon.cfm
次にSaqooshaに個人的に教えてもらった、スキンを変える方法について書かれたサイトを読みます。
上記サイトのサンプル
http://www.thebetterside.com/scrawl/ScrawlExample1.html
http://www.thebetterside.com/scrawl/ScrawlExample2.html
http://www.thebetterside.com/scrawl/ScrawlExample3.html
http://www.thebetterside.com/scrawl/ScrawlExample4.html
ちょっと読んでみたので、簡単に内容を紹介します。
Flexアプリケーションのスキンをイジる方法を実験したらしく、3ステージに分けて説明しています。
最初のステージでは、アプリケーションにCSS stylesとgraphicalスキンを追加する方法。
次のステージでは、プログラマティックな方法。
３つ目のステージでは、FlexFramework classesのサブクラスとして作成する方法。
を紹介しています。全てソース付きサンプルが用意されています。
ソースを読む
ScrawlExample1.mxmlは、無加工の素のmxml
ScrawlExample2.mxmlは、
Firstステージで説明されてる方法。
scrawl2.cssでは、フォントや色の指定がCSSで記述されている。画像はEmbedで指定されている。
ScrawlExample3.mxmlは、
次のステージのプログラマティックな方法。
mxml上では
scrawl3.cssでは、
ClassReference("hoge");が記述されている。"hoge"の部分にはパッケージ付きクラス名が指定されている。
そのクラスを見てみる。
全てのクラスが、mx.skins.Borderなど、mx.skins系のクラスをextendsしている。
overrideして、再定義している模様。
ScrawlExample4.mxmlは、
最後のステージの、コンポーネントを継承する方法。
mxml上では、
Applicationタグ内のxmlnsに作成したコンポーネントのパッケージを指定している事と
タグが自作コンポーネントに変わっている。
前のステージのClassReference()も使用しているが、ComboBoxやList,DataGridを継承したクラスを実装している。
・・・とこんな感じです。
スキンについてlivedocsでも見つけました
パッと見のイメージが大きく変わっていますが、
よく見ると、ComboboxもDataGridも外枠やスクロールバーは標準と同じ形をしています。
mxmlベースでの限界はこのあたりなのかも。。
