まず、まだ開始していない場合は、Flex4を使用することをお勧めします。 Flex4がリリースされようとしています。
Flex 4では、まったく新しいスキニングアーキテクチャが採用されています。これは、プログラマティックスキンを二度と使用しないことを意味します。さらに、高度なCSSセレクターを備えているため、Flex 4のCSSでさらに多くのことができます。プログラマティックスキンは、とにかく動的にするのが非常に困難です。最終的に、プログラマティックスキンのロジックを抽象化しようとすると、Flex4Sparkスキンのようなアーキテクチャを作成することになります。
カスタマイズ
Flex4スキンとスタイリングを可能な限り動的にするために行っていることは次のとおりです。
- スタイルパレット:静的クラスまたはXMLファイルのいずれか
- カスタムスキン
- CSS
スタイルパレット:これらは、CSSまたはスキンのいずれかで使用するすべての変数を保持する静的クラスです。たとえば、ColorPalette
すべての色public static const ColorPalette.BRIGHT_RED:uint = 0xff0000;
を含むことができます:など。その後、これらをFlex4スキンでバインディングを介して使用できます<mx:Button color="{ColorPalette.RED}"/>
。静的クラスの唯一の問題は、それらが動的ではないことです(それらに任意の数の色を定義することはできませんでした)。XMLと同じです。スキンで使用するには、特定のXML構造を(最終的には)ハードコーディングする必要があります。XMLにColorPalette値を定義ColorPalette.ACCENT_COLOR
させることもできます(したがって、XML(ゴールド、ブライトブルー、または任意のアクセント)から任意に設定できます)。楽しいもの。
カスタムスキン:Flex 4を使用すると、すべてのFlex 4およびFlex3(データグリッド、アコーディオンなど)を簡単にスキンできます。したがって、パネルにドロップシャドウが1つだけでグラデーションがない方法が気に入らない場合は、4つのグラデーションと2つのドロップシャドウ(2つの光の角度用)を使用して背景を追加し、ロールオーバー効果を追加することもできます。そして、あなたはあなたColorPalette.BRIGHT_RED
を影(または輝き:))に適用することができます。また、XMLでColorPalette設定を構成することもできます。これがクールなカスタムFlex4スキンです
CSS:次に、CSSで、ColorPalette値(たとえば)をCSSに適用する非常に単純なパレットパーサーを作成できます。いくつかのコード例については、 DegrafaCSSスキンを確認してください。
パフォーマンス
パレットとCSSの唯一の問題はパフォーマンスです。定義上、静的クラスとバインディングはパフォーマンスを低下させます。バインドすると、バックグラウンドで多くのイベントディスパッチが発生するため、<mx:Button color="{ColorPalette.RED}"/>
パフォーマンスが低下するなどの問題が発生します(もちろん、組み込みのAdobe Tweenを使用するなど、はるかに悪いアプリケーションがあるため、目立ちません)が、ある程度は発生します。
CSSと同じです。Flexでは、すべてのCSSセレクター(Panel { properties:values... }
オブジェクトに変換されます。したがって、100個のセレクターがある場合、アプリケーションには100個の追加オブジェクトだけでなく、少なくとも100個の追加クラスが含まれます。これにより、swfサイズが確実に増加します。それらのプロパティの一部は動的であり、定義上、動的クラスは非動的クラスよりも低速です。さらに、スタイルの設定(setStyle(property, value)
Flexでは、すべての子をループする必要があるため、非常に低速です。管理システム(またはあなたが提案したようなFlexスタイルエクスプローラーのようなもの)なら、あなたは本当に気にしません。しかし、彼らはを使用しているので、setStyle()
スタイルを変更するときにまともなパフォーマンスヒットを見ることができます。
したがって、パフォーマンスが非常に大きな問題である場合、最良のオプションは、実行時にスタイルを変更するのではなく、すべてのスタイル値をハードコーディングすることです(とにかく(管理セクションにいる場合を除いて)誰がそれを行う必要がありますか?)。アジャイルを維持しながら、どのようにスタイルをハードコーディングしますか?Palletes( )などを使用ColorPalette.BRIGHT_RED
し、バインディング式(<mx:Button color="{ColorPalette.RED}"/>
)をプリプロセッサを介して静的宣言に変換します(私はrubyを使用してswfsをコンパイルするので、パターンを一致させて置き換えるだけです)。したがって、に変換<mx:Button color="{ColorPalette.RED}"/>
され<mx:Button color="0xff0000"/>
、パフォーマンスが向上します。
ただし、最終的には、次のいずれかを使用して、カスタムスキンを作成し、そこでスタイルを定義するのが最善です。
- 静的宣言
<mx:Button color="0xff0000"/>
- パレット宣言
<mx:Button color="{ColorPalette.RED}"/>
- xml宣言
<mx:Button color="{myxml.@button_color}"/>
次に、いくつかの非常にクールで高度なスキンを定義し、それらをパレットまたはxmlファイルに接続して、ユーザーに編集してもらうことができます。組み込みのものを使用してFlashまたはFlexで非常にクールでモジュール式のスキン/スタイリングシステムを構築しようとするのは簡単ではありません(望ましくありません)。だからそれは最高です
- スキンのセットを作成します(そしてそれらをテーマとしてパッケージ化します)
- スキンをxmlにワイヤリングする
- ユーザーにxmlを変更させます
CSSは避けてください。HTMLで使用するような高度なセレクターが必要な場合を除いて、プロセッサーに負担がかかりすぎます。ただし、モジュール性とカスタマイズ性(およびパフォーマンス)のために、スキンを作成してXMLに接続します。
私自身、すべてのクライアントプロジェクトで使用できる基本的なテーマを作成します。これは、自分のスタイルを定義するものです。これは3つのパッケージ(myskins、mx、spark)で構成されています。そこで、デフォルトのFlex 3/4スキンをすべてコピーして貼り付け、カスタマイズを開始します。スケール9スキンプロジェクトをダウンロードできますほとんどのコンポーネントを無料でスキンしてテストする準備ができています。次に、自分のデザイン(フォトショップなど)をFlexにマージします。再利用するすべての色について、それらをパレットに追加し、最終的にXMLに追加します。次に、少し異なるスキンが必要で、それを複数回使用する場合は、CSSを使用してスキンの新しいスタイルを定義します(背景色や境界線のないリストなど)。私のCSSは非常にスリムです。次に、テーマ/パレット/ cssをコピーして新しいプロジェクトに貼り付け、必要に応じて変更し、ユーザーがxml(または管理インターフェイス)を介して色と位置を編集できるようにするだけで、準備が整います。
CSSだけではそれほど多くのことはできません。
お役に立てば幸いです。ランス