Verschiedene Anbieter-CSS handeln ...

[blue]

Gegeben:
Basisanwendung, die aus mehreren Modulen und Komponenten besteht. Für diese wird eine eigene CSSStyleDeclaration (CSS.swf) geladen.


Innerhalb eine Konfigurators können sich Benutzer eigene Artikel konfektionieren. Die Konfiguratortemplates müssen mit Stylesheets der einzelnen Hersteller 'gebrandet' werden, mittels eigener CSS-Files (... können auch als *.swf vorkompiliert werden).


Wie muss ich das anlegen bzw. wie kann ich innerhalb der Anwendung zwischen den einzelnen Stylesheets 'toggeln'?

[Omega Psi]

Mach doch ein CSS Template, das die einzelnen Hersteller dann implementieren (eine Art Protokoll). So musst du dann nie was im Code ändern.

[blue]

Hi Omega,

anbei etwas Code zum Veranschaulichen:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	
	<s:layout>
		<s:VerticalLayout gap="40"/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import mx.events.StyleEvent;
			
			protected function b0_clickHandler(n:String):void
			{
				var style:CSSStyleDeclaration;
				
				style = new CSSStyleDeclaration( 
					configurator.styleManager.loadStyleDeclarations2( 
						'hersteller' + n + 'CSS.swf' ) );
				style.addEventListener(StyleEvent.COMPLETE, onComplete);
				
			}
			
			protected function onComplete(event:StyleEvent):void
			{
				trace( 'bing' );
			}
			
			
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Platzieren Sie nichtvisuelle Elemente (z.*B. Dienste, Wertobjekte) hier -->
	</fx:Declarations>
	
	<s:HGroup>
		<s:Button id="b0" label="Hersteller 1" click="b0_clickHandler('1')"/>
		<s:Button id="b1" label="Hersteller 2" click="b0_clickHandler('2')"/>
		<s:Button id="b2" label="Hersteller 3" click="b0_clickHandler('3')"/>
	</s:HGroup>
	
	<s:Panel>
		<s:HGroup id="configurator">
			<s:Button id="h0" label="Farbe" click="{trace( 'Farbe' )}"/>
			<s:Button id="h1" label="Grösse" click="{trace( 'Grösse' )}"/>
			<s:Button id="h2" label="Material" click="{trace( 'Material' )}"/>
		</s:HGroup>
	</s:Panel>
	
</s:Application>

/* CSS file hersteller1CSS.css */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button {
	
	color: #990000;
	corner-radius: 2;
	
}

/* CSS file hersteller2CSS.css */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button {
	
	color: #FF0088;
	corner-radius: 6;
	
}

/* CSS file hersteller3CSS.css */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button {
	
	color: #9900FF;
	corner-radius: 10;
	
}

Die Buttons 'Hersteller1' , 'Hersteller2' und 'Hersteller3' sollen ihre Optik aber nicht verändern, wenn die CSS geladen wurden

[Omega Psi]

Mal anders herum: was ist gleich und was ist unterschiedlich?

Im einfachsten Fall hast du ja eine fixe Menge von Herstellern und Controls. Da müsstest du nur styleNames fixieren. Bei n Herstellern und m Controls wird das ganze schon interessanter.

[blue]

Die Basisanwendung und das Modul bleiben gleich. Nur das Stylesheet innerhalb der

<s:HGroup id="configurator">

ändert sich, je nach Hersteller. Beispiel Button-Form und -Farbe usw.

Anzahl der Hersteller unbekannt.

[Omega Psi]

Es sollen nur die Buttons gestyled werden? Verstehe ich das Richtig?

[blue]

Buttons, Textfelder, weitere Panels und und und - also das volle Komponentenprogramm

aber nur innerhalb

<s:HGroup id="configurator">

[Omega Psi]

Und das ist alles in miteinander vermengt? Oder gibt es dann eine Gruppe/Hierarchie pro Hersteller?

[blue]

/<?xml version="1.0" encoding="utf-8"?>
<!-- Konfigurator.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
	
	<s:layout>
		<s:VerticalLayout gap="40"/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import mx.events.StyleEvent;
			
			private var _currentStylesheet:CSSStyleDeclaration;
			
			[Bindable('currentStylesheetChanged')]
			public function get currentStylesheet():CSSStyleDeclaration
			{
				return _currentStylesheet;
			}
			public function set currentStylesheet( value:CSSStyleDeclaration ):void
			{
				if ( _currentStylesheet == value )
					return;
				
				_currentStylesheet = value;
				dispatchEvent( new Event('currentStylesheet') );
			}
			
			protected function b0_clickHandler(n:String):void
			{
				currentStylesheet = new CSSStyleDeclaration( 
					styleManager.loadStyleDeclarations2( 'hersteller' + n + 'CSS.swf' ) );
				currentStylesheet.addEventListener(StyleEvent.COMPLETE, onComplete);
				
			}
			
			protected function onComplete(event:StyleEvent):void
			{
				trace( 'bing' );
			}
			
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Platzieren Sie nichtvisuelle Elemente (z.*B. Dienste, Wertobjekte) hier -->
	</fx:Declarations>
	
	<s:HGroup>
		<s:Button id="b0" label="Hersteller 1" click="b0_clickHandler('1')"/>
		<s:Button id="b1" label="Hersteller 2" click="b0_clickHandler('2')"/>
		<s:Button id="b2" label="Hersteller 3" click="b0_clickHandler('3')"/>
	</s:HGroup>
	
	<local:ConfTemplate id="configurator" stylesheet="{currentStylesheet}"/>
	
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- ConfTemplate.mxml * -->
<s:Panel 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="400" height="300"
		 title="KONFIGURATOR PANEL">
	
	<fx:Script>
		<![CDATA[
			
			public var stylesheet:CSSStyleDeclaration;
			
		]]>
	</fx:Script>
	
	<s:VGroup>
		
		<s:HGroup>
			<s:Button id="h0" label="Farbe" click="{trace( 'Farbe' )}"/>
			<s:Button id="h1" label="Grösse" click="{trace( 'Grösse' )}"/>
			<s:Button id="h2" label="Material" click="{trace( 'Material' )}"/>
		</s:HGroup>
		
		<mx:Image id="Artikelabbildung" width="379" height="128" x="9" y="129"/>
		
		<s:RichText id="Artikelbeschreibung" width="377" height="120" x="11"/>
	
	</s:VGroup>
	
</s:Panel>

/* CSS file hersteller1.css */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button {
	color: #990000;
	corner-radius: 2;
}

s|RichText {
	color: #0066AA;
}

/* CSS file hersteller2.css */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button {
	color: #FF0088;
	corner-radius: 6;
}

s|RichText {
	color: #AA0088;
}

/* CSS file hersteller3.css */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button {
	color: #9900FF;
	corner-radius: 10;
}

s|RichText {
	color: #99FF66;
}

[Omega Psi]

Es existeren dann pro Hersteller jeweils ein Panel?

[blue]

Stell dir vor, das Panel ist ein Schuhkonfigurator. Schuh bleibt Schuh. Aber Hersteller Püppistraum will alles in einem rosalalapink-Style und BuffaloBillBoots wollen das Ganze in edler Wildwestromantik-Optik haben ...


das Template als solches ändert sich ja nicht ...

[Omega Psi]

Ja, das war die Frage, wenn jeder sein eigenes Panel bekommt, kann man das via StyleSheets ändern.

@namespace local "*"; /* You want to stuff the components it in a namespace. */

/* Style the child with the id h0 */
local|ConfTemplate #h0 {

}

So als Anhaltspunkt. Einfach mal hier stöbern: CSS Advanced Selectors - Flex SDK - Adobe Open Source

[blue]

Danke vorab, du hast mich gerade auf eine Idee gebracht. Werd's morgen mal testen und reporten

schönen Feierabend

[blue]

/* CSS file hersteller1.css */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.hersteller1 {
	
}

.hersteller1 s|Button {
	color: #990000;
	corner-radius: 2;
}

.hersteller1 s|RichText {
	color: #0066AA;
}

ich setze per Button die styleName Eigenschaft des Panels auf 'hersteller1' - und dann geht's mit der neuen CSS