Flex Scale9Grid image Skinning in CSS funktioniert nicht

[imo82]

Hallo Leute
Ich versuche vergebens meine Buttons mit einem skin zu versehen. Ich verstehe nicht was ich falsch mache. (Ich benutze den Flexbuilder 4.5 für mobile apps / android/iphone):
meine css sieht so aus :

PHP-Code:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button{
    fontSize: 23;
    color: #FFFFFF;
    fontWeight:bold;
    upSkin: Embed( source="/assets/labcalculator_btn.png",  scaleGridTop="3",  scaleGridLeft="8",  scaleGridBottom="25",  scaleGridRight="92" ); 
    downSkin: Embed( source="assets/labcalculator_btn.png",  scaleGridTop="3",  scaleGridLeft="8",  scaleGridBottom="25",  scaleGridRight="92" ); 
} 


Jeder Button erhält die Fonteigenschaften. Also findet er auf jeden Fall die CSS-datei. Die CSS-datei scheint auch fehlerfrei zu sein. Wenn ich den Pfad eines Bildes ändere, wird dies als Fehler angezeigt. Also ist der anscheined auch richtig.
Könnt ihr mir sagen was ich falsch mache?

Grüße
Simon

[Omega Psi]

Das geht auch mit Bitmaps. In Spark musst du aber über eine Skin gehen, nicht über die upSkin, downSkin etc.

[imo82]

Verstehe ich das richtig dass ich eine Sparkskin componente erstellen muss? Oder wie meinst du das mit "über eine skin" gehen? Vielleicht kannst du mir ein Beispiel geben, wie ich das in der CSS-Datei realisieren kann.

Eine Sparkskin Komponente habe ich bereits erstellt . Allerdings taucht hier das Problem auf, dass auf das das Image, dass ich hier einbinde doppelt dargestellt wird(was irgendwie nicht sein kann weil einfach nur ein einziges Bild sein Sollte). Den Grund dafür erkenne ich ebenfalls nicht.

PHP-Code:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/halo">
    
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
            [Embed(source="/assets/labcalculator_btn.png", 
                scaleGridTop="3", scaleGridBottom="26", 
                scaleGridLeft="8", scaleGridRight="92")]
            [Bindable]
            public var imgCls:Class; 
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="up"/>
        <s:State name="down"/>
        <s:State name="over"/>
        <s:State name="disabled"/>
    </s:states>

    
    <s:Image source=" {imgCls}"  width="100%" height="100%"/>
    <s:Label id="labelDisplay"
             left.disabled="10" right.disabled="10" top.disabled="10" bottom.disabled="10"
             left.down="10" right.down="10" top.down="10" bottom.down="10"
             left.over="10" right.over="10" top.over="10" bottom.over="10" color.over="0xFFFFFF"
             left.up="10" right.up="10" top.up="10" bottom.up="10" color.up="#FFFFFF"
             textAlign.up="center" verticalAlign.up="middle"/>
    
</s:SparkSkin>

ich hoffen du kannst mir vielleicht weiterhelfen. Für jeden buttontyp einen Sparkskin zu schreiben würde ich gern vermeiden und mich auf css beschränken.

[Omega Psi]

Ja, du kannst ja eine Skin schreiben, der du dann via CSS das Bild übergibst. Ich mache später am Tag ein Beispiel klar.

[imo82]

Hallo Omega PSI
so ich es geschreiben habe geht es doch. Hier noch mal zur Vollständigkeit:
Soweit ich verstanden habe kann man die Embed images in einer Datei auslagern und auf diese einfach verweißen( source="meineEmbedImageListClass.bild1"). Hast du das gemeint? Danke noch mal für deine schnelle Antwort.

PHP-Code:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/halo">
    
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
            [Embed(source="/assets/labcalculator_btn.png", 
                scaleGridTop="18", scaleGridBottom="50", 
                scaleGridLeft="58", scaleGridRight="180")]
            [Bindable]
            public var imgCls:Class; 
            [Embed(source="/assets/labcalculator_btn_down.png", 
                scaleGridTop="18", scaleGridBottom="50", 
                scaleGridLeft="58", scaleGridRight="180")]
            [Bindable]
            public var calcDownImg:Class; 
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="up"/>
        <s:State name="down"/>
        <s:State name="over"/>
        <s:State name="disabled"/>
    </s:states>
    <s:Group width="100%" height="100%">
        
        <s:Image  source="{imgCls}" source.down="{calcDownImg}" width="100%" height="100%" /> 

    </s:Group>
    
</s:SparkSkin>

[Omega Psi]

Ne, das meinte ich nicht. Schaue mal hier:

https://github.com/floriansalihovic/SkinningExample

Du kannst in CSS das Image setzen:

@namespace fs 'http://www.icodeapps.net';

fs|Component
{
  backgroundImage :Embed('/assets/ff.gif');
  skinClass       :ClassReference('fs.skins.Skin');
}

und in der Skin dann das Bild auslesen und erzeugen.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx" minHeight="100" minWidth="85">

  <fx:Metadata>
    <![CDATA[
    /**
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("fs.components.Component")]
    ]]>
  </fx:Metadata>

  <fx:Script>
    <![CDATA[
    import mx.core.BitmapAsset;

    private var _targetBitmapData:BitmapData;

    override public function styleChanged(styleProp:String):void
    {
      super.styleChanged(styleProp);

      const allStyles:Boolean = !styleProp || styleProp == 'styleName', styleName:String = 'backgroundImage';

      if (allStyles || styleProp == styleName)
      {
        // reset in any case
        if (_targetBitmapData) _targetBitmapData.dispose();
        backgroundImage.source = null;

        const ImageClass:Class = getStyle(styleName);
        if (ImageClass)
        {
          const asset:BitmapAsset = new ImageClass(), source:BitmapData = asset.bitmapData;
          _targetBitmapData = new BitmapData(source.width, source.height);
          _targetBitmapData.draw(source.clone());

          // clean the memory
          source.dispose();
          backgroundImage.source = _targetBitmapData;
        }
      }
    }
    ]]>
  </fx:Script>

  <s:states>
    <mx:State name="normal"/>
    <mx:State name="disabled"/>
  </s:states>

  <s:BitmapImage id="backgroundImage"/>

</s:SparkSkin>

Das Beipiel auf github kompiliert, viel Spaß damit

[imo82]

Danke OmegaPsi
das ist n cooler weg alles ins Css zu packen Danke für das Beispiel.