3

これは質問というよりは世論調査のようなものかもしれませんが、ここに行きます。多くの異なるコンポーネントを使用するかなり複雑なFlexアプリケーションがあります。アプリケーションでカスタムスタイリングやスキニングを実行できるようにしたい。また、スタイリングアプローチがシステムリソース(メモリ、CPU、ネットワーク)を最も効率的に使用し、パフォーマンスに悪影響を与えないことを確認したいと思います。

現在、CSSとCS3で作成されたFlashスキンの両方を使用するアプリケーションのスタイリングにハイブリッドアプローチを使用しています。アプリケーションのスタイリングに2つのアプローチをとるのは奇妙に思えますが、理想的にはどちらかのアプローチを採用したいと考えています。CSSまたはFlashスキンのみを使用することの長所と短所を誰かが概説できますか?同じアプリ内で両方を使用する理由はありますか?

CSSを排他的に使用することは、CSSの他の使用法を基本的に理解している人なら誰でも、特にFlex 2スタイルエクスプローラーを使用するときに親しみやすいため、有利に思えます。一方、使用するCS3スキンは、これらの状態が必要な各コンポーネントに対して上/上/下/無効/押されたスキンを宣言し、各状態が(非)アクティブ化されると、Flexが適切なスキンへの遷移を管理することを知っています。ただし、CS3でFlexスキンを作成するには、ある程度専門的なスキルとツールが必要だという印象があります。

では、パフォーマンス、カスタマイズ、および効率的なリソース使用率が優先事項である場合、Flexアプリケーションのスタイリングには何をお勧めしますか?

4

3 に答える 3

4

まず、まだ開始していない場合は、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だけではそれほど多くのことはできません。

お役に立てば幸いです。ランス

于 2010-02-03T10:28:30.377 に答える
0

私はいつもCSSだけを使ってきました。あなたはそれが誰にでも親しみやすいと最もよく言いました。アクションスクリプトでコーディングする方法がわからず、cssとスタイルエクスプローラー(http://examples.adobe.com/flex3/consulting/styleexplorerでflex 3用に更新)を使用しても問題がない人にデザインを委任できます。 /Flex3StyleExplorer.html、flex 2バージョンとの違いを見つけるためにあまり比較していません)。

于 2010-02-02T20:25:13.260 に答える
0

パフォーマンスと柔軟性がスキンの2つの最も重要な考慮事項である場合は、プログラマティックスキンを検討する必要があります。

参照:プログラムによるスキニング-クイックスタート

アドビを引用するには:

「プログラムによるスキニングの利点の1つは、スタイルを大幅に制御できることです。たとえば、スタイルシートやグラフィカルスキンではボタンコントロールの角の半径を制御できませんが、プログラムによるスキンを使用することで制御できます。また、Adobe®Flash®などのグラフィックツールを使用せずに、Flexオーサリング環境またはテキストエディターで直接プログラマティックスキンを開発します。プログラマティックスキンには、外部画像ファイルが含まれていないため、メモリの使用量も少なくなる傾向があります。」

詳細については、AdobeLiveDocsヘルプドキュメントの「プログラマティックスキンの作成」を参照してください。

于 2010-02-03T00:39:10.017 に答える