2

flex ダッシュボードのレプリカである flex で 1 つのダッシュボード アプリケーションを開発しています。ここには、異なるコンテンツを表示している複数のパネルがあります。私が望むのは、ユーザーが特定のパネルをクリックするたびに、たとえば「年間収益」と言うと、その特定のパネルを強調表示したいだけです。

したがって、基本的に、初期状態のすべてのパネルは「非アクティブ」状態になりますが、ユーザーがクリックするとすぐにアクティブになり、「xyz」パネルで作業していて残りが入ることをユーザーに知らせるためのより良いエクスペリエンスをユーザーに提供します非アクティブ状態。

したがって、「アクティブ」および「非アクティブ」状態とは、HTML ページでハイパーリンクにカーソルを合わせると「青」になる (たとえば) ため、それ以外の場合はアクティブおよび非アクティブと呼びます。

さて、パネルの話。

パネルには、そのレイアウトを定義するスキンがあります。私の要件を満たすために、私が試したのはパネルに「css」を適用することです。今、私はこの方法でcssを適用しました

 public class Pod extends Panel
    {
      ...properties
         public function init():void
         {
             setStyle('styleName',"panelOff"); 
         }
    }

さて、このクラス自体で、パネルの「クリック」を処理しています。クリックイベントで私が基本的にやっていることは、

setStyle('styleName',"panelOn");

パネルにはスキンが適用されているため、スキンに含まれるコンポーネントのプロパティを変更する必要があります。そのため、スキンの css プロパティにアクセスできる必要があります。

スキンファイルで私はこのようなことをしています

override protected function updateDisplayList(unscaledWidth:Number,
                                                        unscaledHeight:Number):void
{                     
    setStyle('border-alpha', hostComponent.getStyle('border-alpha'));
}

だから私の質問は、私の要件を満たす正しい方法ですか?

スキン クラスのホスト コンポーネントの css プロパティにアクセスするにはどうすればよいですか?

ここで main.mxml にスタイル ファイルを定義しました。スタイル ファイルに「panelOn」という名前のスタイル クラスが含まれている場合、そのクラスをパネルに指定すると、そのクラスに関連付けられたスタイルにアクセスできるようになりますか?

パネルの setStyle メソッドを使用してすべての css プロパティを配置するようにアドバイスしないでください。css ファイルを使用する利点がなく、css スタイリングが悪いためです。

他のより良い解決策がある場合は、意見を共有してください。私がはっきりしていることを願っています。あらゆる種類の助けをいただければ幸いです。

4

1 に答える 1

1

要件に最適な方法 - スパーク状態を使用します。パネル コンポーネントと Mxml スキンには、アクティブと非アクティブ (または新しい状態) の 2 つの状態があります。パネル コンポーネントには、現在のスキン状態を設定するロジックがあります。プロパティを保持するために css を使用する場合は、各状態がスキンに独自のスタイル名を適用します。

主な用途:

<?xml version="1.0" encoding="utf-8"?>
<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/mx" minWidth="955" minHeight="600" 
               xmlns:classes="classes.*">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace classes "classes.*";

        classes|Pod
        {
            skinClass : ClassReference("skins.PodSkin");
        }

        .active
        {
            backgroundColor: #ff0000;
        }

        .inactive
        {
            backgroundColor: #00ff00;
        }

    </fx:Style>

    <classes:Pod x="800" width="300" height="300" />
</s:Application>

ポッド コンポーネント:

package classes
{
    import flash.events.MouseEvent;

    import spark.components.Panel;

    public class Pod extends Panel
    {

        private var _isActive:Boolean = false;

        public function Pod()
        {
            super();
        }

        override protected function childrenCreated():void 
        {
            super.childrenCreated();

            addEventListener(MouseEvent.CLICK, onClickHandler, false, 0, true);
        }

        protected function onClickHandler(event:MouseEvent):void
        {
            _isActive = !_isActive;

            invalidateSkinState();
        }

        override protected function getCurrentSkinState():String
        {
            if (_isActive)  return "active";

            return "inactive";
        }
    }
}

そして、各状態のスタイル名を設定する PodSkin mxml スキンの一部:

    <s:SparkSkin 
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
        blendMode="normal" mouseEnabled="false" 
        styleName.active="active" styleName.inactive="inactive"
        minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<s:states>
    <s:State name="normal" />
    <s:State name="active" />
    <s:State name="inactive" />
    <s:State name="disabled" />
    <s:State name="normalWithControlBar" stateGroups="withControls" />
    <s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>

フレックスを楽しむ

于 2013-02-28T16:11:39.367 に答える