SkinnableComponent

[aDoubleSo]

Hi,
mein Ziel ist es eine selbst geskinnte Komponente zu schreiben, mit der entsprechenden Skinnklasse versteht sich. Zu diesem Zweck habe ich eine SkinnableComponent.mxml geschrieben, welche meine Skin.mxml verwendet.
Dies klappt soweit hervorragend. Da ich im Skin Buttons, Images und Label definieren greife ich mehrere male im Skin auf die HostComponent zu. Desweiteren habe ich in der SkinnableComponent einige Funktionen definiert welche ich ebenfalls mit HostComponent.function() ansprechen kann.
Die initialisierung der SkinnableComponent findet in der Main.mxml statt, hier definiere ich dann Labels, Bitmap-Source.

Nun zu meinem Verständnissproblem:
Ich möchte aus der Main.mxml in meiner SkinnableComponent ein Group-Objekt initialisieren, in etwa so:

<container:Component_DataContainer id="pnl_distance"
			width="100%" height="40" 
		        containerTitle="Distanz" 
			resizeTo="600" 
			resizeFrom="40" 
			animationDuration="500" 
			iconSource="@Embed('/flex_src/ContainerModules/gfx/icon_distance.png')"
			skinClass="Skins.Skin_DataContainer">
		<container:ModulSessions id="modul_distance" width="100%" height="100%"/>
</container:Component_DataContainer>

Dies geht nicht, mit folgender Fehlermeldung: Komponentendeklaration nicht zulässig.

Wenn ich aus der SkinnableComponent einen SkinnableContainer mache, kann ich folgende Deklaration in der Skinklasse nicht verwenden:

[HostComponent("ContainerModules.Component_DataContainer")]

Fehler: Das erforderliche Skinteil "" fehlt.

Ich hoffe ich habe mich verständlich ausgedrückt und wäre euch sehr dankbar, wenn mir jemand zu einem besseren Verständniss der SkinnableComponen-Klasse verhelfen kann.

Liebe Grüße,
euer aDoubleSo

[Omega Psi]

1. Packages beginnen mit Kleinbuchstaben
2. Eine Skin greift nicht auf die HostComponent zu, um Funktionlitäten auszuführen
3. Ohne Sourcen muss man raten, was das Problem ist und das Feature is bei mir disabled.

[aDoubleSo]

moin,

zu 1. : packages check!

zu 2. :



Ok, der Zugriff auf die HostComponente darf lediglich bei Daten passieren... der Aufruf der Funktion der HostComponente erfüllt seinen Zweck und wenn ich hier "nur" gegen ein Paradigma verstoße, nehme ich das vorerst in Kauf werde mich da aber nochmals drum kümmern

zu 3. :

<s:SkinnableComponent xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx"
		width="100%"
		height="100%"
		skinClass="skins.Skin_DataContainer">
	
	<fx:Script>
		<![CDATA[	
			import mx.effects.Resize;
			
			import spark.primitives.Rect;
			
			// CUSTOM PROPERTIES //////////////
			[Bindable]
			public var containerTitle 		: String;
			public var animationDuration	: int;
			public var resizeTo 			: int;
			public var resizeFrom			: int;
			[Bindable]
			public var iconSource			: Object;
			
			public function expandDataContainer() : void
			{
				var resize : Resize = new Resize();
				resize.heightTo = resizeTo;
				resize.duration = animationDuration;
				resize.target = this;
				resize.play();
			}
			
			public function contractDataContainer() : void
			{
				var resize : Resize = new Resize();
				resize.heightTo = resizeFrom;
				resize.duration = animationDuration;
				resize.target = this;
				resize.play();
			}
			
		]]>
	</fx:Script>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx"
		width="1024"
		height="1024">
	
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("containerModules.Component_DataContainer")]
		
		[SkinSate("closed")]
	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			import adobe.utils.CustomActions;
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:Fade id="arrow_fadeOut" alphaFrom="1" alphaTo="0" target="{arrow}" duration="900"/>
		<s:Fade id="arrow_fadeIn" alphaFrom="0" alphaTo="1" target="{arrow}" duration="900"/>
		
		<s:Fade id="innerShadow_fadeOut" alphaFrom="1" alphaTo="0" target="{innerShadow}" duration="300"/>
	</fx:Declarations>
	
	<s:states>
		<s:State name="closed" />
		<s:State name="open" />
		<s:State name="over" />
	</s:states>
	
	<s:Rect top="0" bottom="0" right="0" left="0" includeIn="closed">
		<s:fill>
			<s:SolidColor color="white"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="black" weight="1"/>
		</s:stroke>
	</s:Rect>
	
	<s:Rect top="0" bottom="0" right="0" left="0" includeIn="open, over">
		<s:fill>
			<s:BitmapFill id="innerShadow" source="@Embed('/SingleUser_Alpha/flex_src/ContainerModules/gfx/inner_shadow.png')" fillMode="clip" alpha="0" alpha.open="1" alpha.over="1"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="black" weight="1"/>
		</s:stroke>
	</s:Rect>
	
	<s:Label x="0" y="0" text="{hostComponent.containerTitle}" width="100%" height="40" height.over="42" verticalAlign="middle"
			 fontFamily="DaxLine"
			 fontSize="18"
			 fontSize.open="18"
			 buttonMode.closed="true" 
			 buttonMode.over="true"
			 mouseOut.closed="{setCurrentState('closed')}"
			 mouseOut.over="{setCurrentState('closed')}"
			 mouseOver.closed="{setCurrentState('over')}" 
			 click.over="{hostComponent.expandDataContainer(), setCurrentState('open'), arrow_fadeIn.play()}"/>
	
	<s:Button buttonMode.open="true" id="arrow" 
			  right="20" top="12" 
			  alpha="0" 
			  skinClass="Skins.Skin_ArrowButton" 
			  click="{hostComponent.contractDataContainer(), setCurrentState('closed'), arrow_fadeOut.play(), innerShadow_fadeOut.play()}"/>
	
	<s:BitmapImage id="icon" source="{hostComponent.iconSource}" left="20" top="5" alpha="1"/>
	
</s:Skin>

Grüße und vielen Dank,
aDouble

[aDoubleSo]

Problem ist folgendes:

Der Fehler "Das erforderliche Skinteil "" fehlt." wird durch die fehlenden States ausgelöst.

In meinem Fall waren das:
<s:State name="normal" />
<s:State name="disabled" />

Nun kann ich unter Verwendung des SkinnableContainers, hervorragend mit der SkinnKlasse arbeiten.

Der Sinn der SkinnableComponent enzieht sich mir weiterhin.

Gruß,
aDouble

[Omega Psi]

Die SkinnableComponent ist die Basisklasse. Ohne die hättest du gar keine Skinning Funktionalität, bzw. die Hooks...

[aDoubleSo]

In diesem Fall war es ja kein Fehler diese zu verwenden!?
Lag es an der fehlenden definition der contenGroup im Skin, das ich keinen Komponentendeklaration durchführen konnte, oder hat dies einen anderen Hintergrund.

Wie dem auch sei, nutze nun den SkinnableContainer...

Merci