1

個々のボタンのようなタブを、各ボタンの間にスペースを空けて配置したいと思います。通常のタブ ナビゲーター タブとして機能する必要があります。

そこで、spark ButtonBar コンポーネントを取得し、ButtonBarSkin に変更を加えて、上で述べたようにしました。ButtonBar のデフォルトの動作は、ButtonBar コントロール内の 1 つのボタンのみが選択状態になることができます。つまり、ButtonBar コントロールでボタンを選択すると、別のボタンを選択するまで、ボタンは選択された状態のままになります。

しかし、すでに選択されているボタンをクリックすると、選択が解除されます。私はそのような振る舞いを必要としません。タブバーコントロールのようにもう一度クリックしてもボタンを選択状態にしたい。

ボタンバー スキンを調べているうちに、ボタンバー コントロールのカスタム アイテム レンダラーを定義するために、ボタンバーボタンが使用されていることがわかりました。ButtonBarButton コンポーネントには " allowDeselection " プロパティがあり、デフォルトでは true です。これは、ボタンバーで選択されたボタンを再度クリックすることで選択を解除できることを意味します。false に設定した場合、ユーザーは別のボタンを選択して、現在選択されているボタンの選択を解除する必要があります。

したがって、ButtonBarSkin で buttonbarbutton コンポーネントを宣言するときに、allowDeselectionプロパティを false に設定します。それでも、値は true として設定されています。コードをデバッグしているときに、私が奇妙なことに気付いたのは、宣言された値、つまりfalseが最初に設定され、ボタンバーのすべての firstbutton、middlebutton、および lastbutton に対して true として設定されていることです。ボタンバースキンで定義しているときにプロパティを false に設定していても、プロパティがどのように true に設定されているのかわかりません。

コード スニペットは次のとおりです。

ボタンバー コントロール

   <s:ButtonBar skinClass="skin.ButtonBarSkinCopy">
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:ButtonBar>

ButtonBarSkinCopy.mxml

<?xml version="1.0" encoding="utf-8"?>


<fx:Metadata>
<![CDATA[ 
   /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.ButtonBar")]
]]>
</fx:Metadata> 

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<fx:Declarations>
    <!--- 
        @copy spark.components.ButtonBar#firstButton
        @default spark.skins.spark.ButtonBarFirstButtonSkin
        @see spark.skins.spark.ButtonBarFirstButtonSkin
    -->
    <fx:Component id="firstButton">
        <s:ButtonBarButton allowDeselection="false" skinClass="skin.CustomButtonBarButtonSkin" />
    </fx:Component>

    <!--- 
        @copy spark.components.ButtonBar#middleButton
        @default spark.skins.spark.ButtonBarMiddleButtonSkin
        @see spark.skins.spark.ButtonBarMiddleButtonSkin
    -->
    <fx:Component id="middleButton" >
        <s:ButtonBarButton allowDeselection="false" skinClass="skin.CustomButtonBarButtonSkin" />
    </fx:Component>

    <!--- 
        @copy spark.components.ButtonBar#lastButton
        @default spark.skins.spark.ButtonBarLastButtonSkin
        @see spark.skins.spark.ButtonBarLastButtonSkin
    -->
    <fx:Component id="lastButton" >
        <s:ButtonBarButton allowDeselection="false" skinClass="skin.CustomButtonBarButtonSkin"/>
    </fx:Component>

</fx:Declarations>

<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" width="100%" height="100%">
    <s:layout>
        <s:ButtonBarHorizontalLayout gap="2"/>
    </s:layout>
</s:DataGroup>

また、CustomButtonBarButtonSkin.mxml は、ButtonBarButtonSkin の単なるコピーです。ButtonBarButtonSkin.mxml は変更されません。

ご意見をお聞かせください。

4

1 に答える 1