Flex 4 Panel Skinning | Elemente ansprechen

[aDoubleSo]

hallo zusammen,
ich habe die suchfunktion bereits genutzt, konnte allerdings nur einen passenden beitrag finden, welche allerdings keine praktikable lösung beinhaltet.

zu meinem problem:
ich möchte ein spark panel für meine bedüfnisse skinnen, dieser skin beinhaltet unter anderem einen button.
wie ist es mir möglich, nachdem das panel mit meinem skin intialisiert wurde, das clickevent des buttons einer funktion in meiner mainapplikation zu zuweisen?
vergebe ich eine id für den button, so kann ich auf diese variable nicht zugreifen.

vielen dank im vorraus
adoublso

[Martin Kraft]

Zitat von aDoubleSo

wie ist es mir möglich, nachdem das panel mit meinem skin intialisiert wurde, das clickevent des buttons einer funktion in meiner mainapplikation zu zuweisen?

Was hat denn ein Klick-Event mit dem Skin zu tun

Hast Du in dem MXML bzw. der Klasse, in der der Button liegt, eine Referenz auf die Main? Wenn ja benutz doch einfach diese.

Generell ist es aber nicht so geschickt untergeordnete Elemente auf übergeordnete zugreifen zu lassen. Besser wäre es beim Button-Klick eine eigenes (bubbleing) Event zu erzeugen, auf das in der Main ein Listener registriert wurde, der dann die weiteren Aktionen ausführt...

[aDoubleSo]

erstmal danke für deine antwort!
das klick event hat soviel mit dem skin zu tun, dass der button im skin gesetzt wurde, also garnichts
ich möchte nichts anderes, als den im skinn definierten button, in der applikation nutzen zu können und dazu brauche ich events!

mit FlexGlobals.topLevelApplication habe ich jederzeit eine referenz in die main, oder sehe ich das falsch?

wäre es "richtig", im style das event zu definieren und dann das bubbling event in der main zu fangen? ich war der meinung es wäre sinnvoll, keine logik in den skin zu packen...

danke

[Martin Kraft]

Zitat von aDoubleSo

wäre es "richtig", im style das event zu definieren und dann das bubbling event in der main zu fangen? ich war der meinung es wäre sinnvoll, keine logik in den skin zu packen...

Das ist auch so - weshalb ich nicht verstehe, warum Du dort irgendwelche konkreten Buttons und Klick-Events erzeugen möchtest? Oder meinst Du mit "Skin" eine komplette Komponente?

Ich bin was Flex angeht aber selbst noch ziemlich grün hinter den Ohren. Vielleicht hat ja eine der hießigen Flex-Pros was dazu zu sagen?!

[Omega Psi]

Das Panel muss einen SkinPart besitzen, der required sein muss. Als MouseEvent bubbled das Event automatisch, besser ist es aber, einen Handler auf den Event in der HostComponent zu setzen und dann einen CloseEvent.CLOSE zu dispatchen. Der kann bubblen, je nach Architekturkonzept kann oder muss es es gar.

Ich würde dir empfehlen, dir einen Mediator zu bauen, der das PopUp (?) steuert.

[aDoubleSo]

@ martin:
ich möchte meinen button im skin definieren, d.h. nicht, dass ich in irgend einer weise logik in die skindefinition packe. ist für mich absolut logisch, denn wenn ich zb einen button im panel haben möchte, mit welchem sich das panel schließt, so soll dieser button für jedes panel zur verfügung stehen und deshalb ist er teil meines skins.

@psi:
erstmal vielen dank, ich setze mich mal mit deinem ratschlag auseinander und komme dann gegebenfalls auf dich zurück

danke euch!

[Omega Psi]

Yupp, mach das.

[aDoubleSo]

ich habe das clickevent des buttons in der skinklasse folgendermaßen gesetzt:

<s:Button includeIn="normal" y="12" label="expand / close" right="50" click="this.dispatchEvent(new Event('expandPanel',true));"/>

in meiner custompanelklasse welche den skin benutzt habe ich dann nurnoch den passenden eventlistener angehängt:

this.addEventListener('expandPanel', expandPanel);

jetzt habe ich prinzipiell das was ich wollte...
ich glaube nur, dass dies nicht die feine englische ist!?

[Omega Psi]

Ja, das ist falsch, denn die Skin wird das Event dispatchen, nicht die HostComponent. So ist es besser:

package fs.components
{
	import flash.events.MouseEvent;

	import spark.components.Panel;
	import spark.components.supportClasses.ButtonBase;

	[SkinState("closed")]

	[SkinState("disabled")]

	[SkinState("normal")]

	[SkinState("closedWithControlBar")]

	[SkinState("disabledWithControlBar")]

	[SkinState("normalWithControlBar")]

	[Event(name="close", type="mx.events.CloseEvent")]

	public class Panel extends spark.components.Panel
	{

		[SkinPart(required="true")]
		public var closeButton:ButtonBase;

		private var _closed:Boolean;

		public function get closed():Boolean
		{
			return _closed;
		}

		public function set closed(value:Boolean):void
		{
			_closed = value;

			if (_closed)
			{
				dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
			}
			invalidateSkinState();
		}

		public function Panel()
		{
		}

		private function closeButton_clickHandler(event:MouseEvent):void
		{
			closed = !closed;
		}

		override protected function getCurrentSkinState():String
		{
			if (closed)
			{
				return "closed";
			}

			return super.getCurrentSkinState();
		}

		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);

			if (instance == closeButton)
			{
				closeButton.addEventListener(MouseEvent.CLICK, closeButton_clickHandler);
			}
		}

		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);

			if (instance == closeButton)
			{
				closeButton.removeEventListener(MouseEvent.CLICK, closeButton_clickHandler);
			}
		}
	}
}

[aDoubleSo]

Tausend Dank Psi!!