Adobe Flex 3初心者向けアーキテクチャ

ほとんどの戦闘状況でAdobe Flexに精通しなければなりませんでした。 突然、インターネットからの例と上級の仲間の助けを借りて、何か役に立つものを書く必要がありました。 近くにはFlexに関する本が1つもありませんでした。また、読む時間もなかったため、理論的基礎に大きな影響を与えました。 簡単なロシアの試行錯誤法によって、多くのことが行われました。 まあ、私はきちんと試さなければなりませんでした。 さて、振り返ってみると、何が何であるかを説明する簡単な紹介記事が手元にあれば、多くの熊手を避けることができることに気付きました。 猫の下では、3つの質問が収集されます。これは、私が最も頻繁に問題を抱えていたという誤解のためです。 それらに対する答えが、このフレームワークのコンポーネントを構築する複雑さを初心者が素早く理解するのに役立つことを願っています。

いつものように、誕生から始めましょう

質問： 裸の女性の写真にいくつかの内部インターフェイス要素を表示するコンポーネントを作成します。 それらを初期化する方が良いのはどこですか、このcreateChildrenは何ですか？



クラスコンストラクターでは、リソースを集中的に使用しないでください。 通常、変数の初期化とeventListenersの追加にのみ使用されます。

flexでネストされた要素を作成するために、特別な関数createChildren（）が提供されています。 コンポーネントがdisplayList'yに追加されると、自動的に呼び出されます。 したがって、内部に何かが必要な場合は、createChildrenを再定義し、内部要素を作成するコードをそこに配置する必要があります。 ここには微妙な点が1つあります。次のピクアント画像がすでに作成されているかどうかを確認してください。 これには2つの理由があります。 1つ目は、コンポーネントが1つのdisplayListaから別のdisplayListaに移動する場合、createChildrenを複数回呼び出すことができることです。 たとえば、頻繁に削除および再追加されるitemRenderer。 したがって、私たちは同じ裸の女性のコピーをたくさん手に入れることができますが、これはご存じのように面白くありません。 2番目の理由は、派生クラスの動作を変更する可能性です。 後継クラスが、アンジェリーナジョリーがパメラアンダーソンではなく左上隅にいると判断した場合、必要な形式でこの内部要素を作成し、super.createChildren（）を呼び出します。 親コンポーネントは、要素がすでに作成されていることを確認し、作業に煩わされません。



例：

保護された 関数 createChildren （）を オーバーライドします ： void

{

//コンポーネントが既に存在するかどうかを確認します

If （！ OurNestedComponent ）

{

//そうでない場合は、作成します

ourNestedComponent = new NestedComponent （）;

addChild （ ourNestedComponent ）;

}

// createChildrenを階層で呼び出すことを忘れないでください

スーパー 。 createChildren （）;

}

今、楽しい部分は人生とユーザーの相互作用です

質問：いくつかのプロパティを変更したいのですが、これにも魔法はありますか？



はい、非常に便利です。 遅延検証と呼ばれます。 「検証」という言葉に驚かないでください。このコンテキストでは、プロパティの適用、背景の再描画、内部要素の位置の変更など、コンポーネントの状態の変化を意味します。 どのように機能しますか？ プロパティセッターでプロパティを直接変更することはお勧めできません。 第一に、これはユーザーの操作中にインターフェイスの視覚的な滑らかさに悪影響を与える可能性があります。 特に、変更がリソースを集中的に使用する場合。 第二に、あるプロパティが別のプロパティに依存している場合、またはプロパティを特定の順序で適用する必要がある場合は、何らかの待機および同期メカニズムについて考える必要があります。 遅延検証は、このすべてを回避する方法です。 プロパティをすぐに適用するのではなく、延期され、画面をレンダリングする直前に変更が有効になります。



変更の検証は、次の3段階で行われます。

1. プロパティが変更された（commitProperties関数）
2. 優先寸法が計算されます（測定機能）
3. 内部要素の実際のサイズ、サイズ、および座標が計算され、描画する必要があるすべてのものが描画されます。 （関数updateDisplayList）
   
   

これらの各関数は、保留中のすべてのコンポーネントのレンダリングイベント中に自動的に呼び出されます。 コンポーネントを検証待ちとしてマークするには、commitPropertiesのinvalidateProperties（）、measureのinvalidateSize（）、updateDisplayListのinvalidateDisplayList（）のコンポーネントの特別な関数を呼び出す必要があります。

次に、実践に移り、検証の各ポイントについて詳しく説明します。

ステージ1-commitProperties関数

たとえば、「有名人」のギャラリーでは、写真自体に加えて、いくつかのコントロールがあります。 ユーザーはドロップダウンメニューを使用してセクションを変更し、スライダーでヌードの度合いを調整できます。また、いくつかの「フェイバリット」を通じてこれらのパラメーターを同時に変更できます。 したがって、「セクション」と「脱衣の程度」という2つのプロパティがあり、これらは個別にも同時にも変更できます。 セッターで変更を直接処理する場合、追加の作業が必要になる場合があります。 実際、ユーザーがお気に入りから「極端に恥知らず」のヌードの「パリスヒルトン」セクションから写真を選択した場合、最初にデフォルトのヌードの「パリスヒルトン」パーティションをダウンロードし、その後「極端に恥知らず」を適用して新しい写真をロードする必要があります。 これを回避するために、セッターでは新しい状態のみを保存し、変更自体はcommitProperties関数で実行されます。

例：



パブリック 関数 セットセクション（ value ： String ）： void

{

_section = value ; //新しい値をプライベート変数に保存します

_sectionChanged = true ; //何が変更されたかを正確に覚えてください

invalidateProperties （）; //次の反復でcommitProperties呼び出しにコンポーネントに署名します

}

パブリック 関数 セット nudeDegree （ value ： String ）： void

{

_nudeDegree = value ;

_nudeDegreeChanged = true ;

invalidateProperties （）;

}



保護された 関数の オーバーライド commitProperties （）： void

{

If （ _sectoinChanged || _nudeDegreeChanged ）

{

//ここで必要な写真をロードするすべての作業を行います

...



//変更に関するフラグを削除します

_sectionChanged = false ;

_nudeDegreeChanged = false ;

}



//他のプロパティを適用します

...



// commitPropertiesを階層で呼び出すことを忘れないでください

スーパー。 commitProperties （）;



}

commitPropertiesを使用すると、すべてのプロパティが必要な順序で一度適用されます。

次の検証手順は、メジャー（）関数です

この関数は、優先コンポーネントサイズ（measuredWidthおよびmeasuredHeight）および最小コンポーネント（measuredMinWidthおよびmeasuredMinHeight）の計算に使用されます。 親コンポーネントは、明示的に指定されていない場合、これらの値を使用して寸法を決定します。 たとえば、ギャラリー内の写真の数に応じてギャラリーのサイズを自動的に変更する場合、優先サイズを計算する必要があります。 これを行うには、すべての画像のサイズを加算するコードを測定関数に追加し、コントロールのサイズを考慮して、取得した値をmeasuredWidthおよびmeasuredHeightに割り当てます。



コンポーネントを測定関数にサブスクライブするには、invalidateSize（）関数を呼び出す必要があります。 測定機能は、コンポーネントの寸法が指定されていない場合にのみ実行され、デフォルト値が計算されます;そうでない場合は、指定されたサイズが使用されます。

そして最後に、検証の最終段階：関数updateDisplayList

内部要素のサイズ変更または座標に関連するすべてのものは、ここに配置する必要があります。 updateDisplayListは、unscaledWidthとunscaledHeightの2つのパラメーターを受け入れます。 これらは親コンポーネントによって決定され、内部コンポーネントの座標とサイズの計算には（幅と高さではなく）使用する必要があります。

また、内部コンポーネントのプロパティを変更するための規則に従う必要があります。

1. 特定の値を設定するのではなく、setActualSize（幅、高さ）関数を使用してサイズを変更します。
2. 特定のx値とy値を指定して、直線ではなくmove（x、y）関数を使用して座標を変更します
3. ほとんどの場合、これらのルールは、コンポーネントの不適切な動作に関する問題を排除します。

コンポーネント寸法

質問：フレックスには、寸法を示す非常に多くの異なるプロパティがあります。 なぜ彼らはすべてですか？



寸法はいくつかの方法で設定されます。

1. 推奨サイズ（measuredWidth、measuredHeight）。 それらはコンポーネント自体によって決定されます。 これらのサイズは、特に指定がない限り、コンポーネントがこの場所に十分である場合に使用されます。 たとえば、MXMLを介してボタンを配置し、寸法を指定しない場合、メジャー関数を使用して決定したサイズとまったく同じサイズになります
   
   
2. 最小寸法（measuredMinWidthおよびmeasuredMinHeight）。 また、コンポーネント自体によっても決定されます。 寸法が指定されていない場合（measuredWidthおよびmeasuredHeightが使用されている場合）、優先サイズが親コンポーネントの寸法よりも大きい場合、コンポーネントをそれ自体に収めるためにサイズを縮小しようとします。 最小サイズは、これらの試行の下限を設定するだけです
   
   
3. パーセント寸法（percentageWidthおよびpercentageHeight）は、親コンポーネントの寸法のパーセンテージです
   
   
4. 明示的に指定された寸法（explicitWidthおよびexplicitHeight）は、ピクセル単位のコンポーネントの寸法です。 また、幅と高さを直接設定します
   
   

パーセント単位のサイズとピクセル単位のサイズは、優先および最小に依存せず、任意の値を取ることができます。



トピックを読む：

www.slideshare.net/Constantiner/flex-component-lifecycle-overview-残念ながら音声なしで、Pavel Kozhinによる素晴らしいプレゼンテーションのスライド。 これは私がロシアのインターネットのトピックで見つけたほとんどすべてです。

コンポーネント [ENG]の実装 -Adobe自体のlivedox。 詳細ですが、少しドライで英語です。 ただし、読む必要があります。