Пользовательский компонент Flex исчезает - PullRequest
Новая
       18

Пользовательский компонент Flex исчезает

1 голос
/ 28 ноября 2011

У меня проблема с пользовательским компонентом на основе группы. На самом деле я хочу создать компонент раздела (контейнер с рамкой и заголовком). Я создал путь, чтобы граница не скрывала метку (заголовок): 

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>
        <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            [Bindable]
            public var title:String;
        ]]>
    </fx:Script>

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

    <!-- border --> 
    <s:Path id="border" left="3" right="3" top="5" bottom="5"
            data="M 5 0
            L {this.titleDisplay.left-7} 0
            M {this.titleDisplay.left+this.titleDisplay.width} 0
            L {this.width-5} 0
            C {this.width} 0 {this.width} 0 {this.width} 5
            L {this.width} {this.height-5}
            C {this.width} {this.height} {this.width} {this.height} {this.width-5} {this.height}
            L 5 {this.height}
            C 0 {this.height} 0 {this.height} 0 {this.height-5}
            L 0 5
            C 0 0 0 0 5 0
            ">
        <s:filters>
            <s:GlowFilter alpha="0.5" blurX="10" blurY="10" color="0xffffff"
                          quality="5" strength="6"/>
        </s:filters>
        <s:stroke>     
            <s:SolidColorStroke id="borderStroke" weight="1" color="#ffffff" alpha="0.5"/>
        </s:stroke>
    </s:Path>


    <s:Label id="titleDisplay" maxDisplayedLines="1"
             left="{this.width*0.08}" top="0" bottom="0" minHeight="30"
             verticalAlign="top" textAlign="left" fontWeight="bold"
             text="{title}">
        <s:filters>
            <s:GlowFilter alpha="0.5" blurX="10" blurY="10" color="0xffffff"
                          quality="5" strength="6"/>
        </s:filters>
    </s:Label>

    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" width="95%" height="95%" minWidth="0" minHeight="0">
    </s:Group>

</s:Group>

Мой компонент отлично смотрится без детей. Но когда я попробовал что-то вроде: 

<component:MySectionComponent>
   <s:Button id="mybtn"/>
</component:MySectionComponent>

Ничего, кроме кнопки не отображается. Я попытался изменить свой модифицированный Группой компонент на SkinnableContainer, но сделал то же самое. Кроме того, если я добавлю кнопку непосредственно в группу содержимого MySectionComponent, она будет работать нормально. Я просто не знаю, что может быть причиной этого.

1 Ответ

2 голосов
/ 28 ноября 2011

Поместив эту кнопку в тег MySectionComponent, вы фактически переопределяете значение свойства 'mxmlChildren' экземпляра MySectionComponent.Следовательно, все дочерние элементы, которые были в базовом классе, исчезают и заменяются одной кнопкой.

Что нужно сделать, чтобы решить эту проблему:

  • расширить SkinnableContainer вместо группы
  • создайте класс скина (например, MySectionComponentSkin), в который вы скопируете код, который сейчас находится в вашей группе.
  • назначьте скин для вашего SkinnableContainer

Как это: 

<component:MySectionComponent skinClass="MySectionComponentSkin">
    <s:Button id="mybtn"/>
</component:MySectionComponent>

В данном случае отличается то, что при использовании SkinnableContainer все, что вы назначаете для его свойства 'mxmlChildren', будет передано свойству 'mxmlChildren' в 'contentGroup' в его оболочке.

Если у вашего MySectionComponent теперь нет дополнительного кода, вы можете вообще пропустить его и использовать SkinnableContainer напрямую: 

<s:SkinnableContainer skinClass="MySectionComponentSkin">
    <s:Button id="mybtn"/>
</s:SkinnableContainer>

Но я вижу, что у вас есть «заголовок» в компоненте, поэтому выпотребуется дополнительное кодирование.Ваш MySectionComponent должен выглядеть примерно так: 

public class MySectionComponent extends SkinnableContainer {
    [Bindable] public var title;
}

И теперь вы можете получить доступ к этому свойству из оболочки.Сначала убедитесь, что обложка знает свой хост-компонент: 

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Metadata>
    [HostComponent("MySectionComponent")]
</fx:Metadata>

...

Затем получите доступ к свойству title следующим образом: 

<s:Label text="{hostComponent.title}" />

и удалите свойство title из класса обложки (как вы, вероятно, скопировали / вставили его вместе с другим кодом).

...