ActionScript créant un composant personnalisé pour contenir deux autres composants spark

Question

Je suis relativement nouveau dans ActionScript/Flex, je ne suis donc pas entièrement sûr que cela soit possible.

Fondamentalement, j'ai le bloc suivant répéter à plusieurs reprises dans mon code:

<s:TextInput .. \> 
<s:BitmapImage .. \> 

Ce que je suis en train de faire est de créer un composant personnalisé ActionScript pour que je puisse remplacer le bloc au-dessus partout dans mon code avec:

<MyBlock\> 

Ma meilleure estimation est que je dois le faire en étendant spark.application?

Ce que j'ai jusqu'à présent:

package MyPackage 
{ 
    import spark.components.Application; 

    public class MyBlock extends Application 
    { 
    .. 
    } 
.. 
} 

Je suis tout à fait à une perte sur la façon de combiner deux composants existants dans une personnalisée, s'il est même possible.

Comment exactement dois-je procéder? Toute aide serait appréciée.

Merci,

Answer 1

Il est tellement plus facile que cela: pour ce cas d'utilisation, vous devez simplement étendre Group. Et pour faciliter les choses, écrivez votre composant composé en MXML.

Créer un nouveau fichier MyBlock.mxml (par exemple dans com/mydomain/components) et ajoutez le code suivant:

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

    <s:TextInput .. /> 
    <s:BitmapImage .. /> 
</s:Group> 

Maintenant, il suffit d'utiliser ce composant:

<c:MyBlock /> 

où l'espace de noms c est défini comme xmlns:c="com.mydomain.components.*" à le noeud racine de votre document utilisant cette classe. Par exemple:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:c="com.mydomain.components.*"> 
    <c:MyBlock /> 
</s:Application> 

---

Supposons maintenant que vous voulez avoir un texte différent dans chaque bloc, vous devrez exposer une propriété. Pour ce faire, permet d'ajouter une label propriété à MyBlock:

<fx:Declarations> 
    <fx:String id="label" /> 
</fx:Declarations> 

Pour faire la TextInput montrer ce qui est dans cette variable chaque fois qu'elle change, nous utilisons la liaison comme ceci:

<s:TextInput text="{label}" /> 

Le dernier élément regarderait quelque chose comme ceci:

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

    <fx:Declarations> 
     <fx:String id="label" /> 
    </fx:Declarations> 

    <s:TextInput text="{label}" .. /> 
    <s:BitmapImage .. /> 
</s:Group> 

maintenant, vous pouvez créer plusieurs instances MyBlock avec des textes différents:

<c:MyBlock label="hello" /> 
<c:MyBlock label="world" /> 

---

Notez que si votre utilisation régulière de myBlock est plus d'une façon de type liste, vous voudrez peut-être envisager d'utiliser un composant List avec une coutume ItemRenderer, plutôt que d'utiliser MyBlock encore et encore.