You may want to put some text here

Flex custom component content area

Ik heb nu al een tijdje zitten testen met custom componenten maar vandaag liep ik tegen het probleem dat ik dynamisch, content in een custom component wou plaatsen.  Bijvoorbeeld op deze manier.

<app:CustomComponent>
<s:Label text="Inhoud van het Custom component" />
</app:CustomComponent>

Om ervoor te zorgen dat het label in bovenstaande voorbeeld op de juiste plaats in ons component geplaatst wordt  kan je de volgende code gebruiken.

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

	<fx:Metadata>
		[DefaultProperty("content")]
	</fx:Metadata>

	<fx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			private var _contentChildren:Array;

			public function set content(c:*) : void {
				_contentChildren = (c as Array) || [c];
			}

			override protected function createChildren() : void {
				super.createChildren();
				for each (var child:UIComponent in _contentChildren) {
					contentBox.addElement(child);
				}
			}
		]]>
	</fx:Script>

	<s:Group id="contentBox"/>
</s:Border>

Wat uitleg ter verduildelijking van bovenstaande code.

  • Het toevoegen van de default property metadata gaat ervoor zorgen dat als we iets toevoegen aan ons custom component, dat de set method content aangeroepen wordt.
  • De ene regel in set content method zorgt ervoor dat er één of meerdere user interface componenten toegevoegd kunnen worden aan deze custom component.
  • CreateChildren gaat eerst door super aan te roepen ervoor zorgen dat de elementen van de custom component worden aangemaakt zoals de group contentBox. Vervolgens lopen we door al de elementen die toegevoegd zijn aan custom componenten en plaatsen we deze in contentBox.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

Leave a Comment