3 Replies Latest reply on Oct 29, 2010 2:08 PM by Peter deHaan

    <MX:IMAGE> Source via CSS?

    rwmorey71

      Hi --

       

      I have what, I think, should be a simple problem but I can't find a solution.

       

      We have an application with a set of icons. Currently, these icons are set inside the MXML with something like this:

       

      <mx:Image source="assets/icon1.png">

       

      However, we have some customers who have requested customization of the icons. What we would like to be able to do is specify the image via CSS so that we can easily update the application look and feel by just updating the style CSS (that we compile to a SWF).

       

      However, I've played around with various options and not had any luck.

       

      I even tried something like this:

       

          .customAssetsTest {
                  source:Embed(source="assets/iconChangeDevice.png");
          }

       

           <mx:Image source="{StyleManager.getStyleDeclaration(".customAssetsTest ").getStyle("source")}" />

       

      but that didn't work.

       

      I've tried doing ths programatically as well but when I look at StyleManager.getStyleDeclaration(".customAssetsTest ").getStyle("source") it appears to be null.

       

      Any ideas / solutions?

       

      Thanks

       

      Rich

        • 1. Re: <MX:IMAGE> Source via CSS?
          rwmorey71 Level 1

          Hi Again --

           

          Ok, I should have maybe played with this more before posting but..

           

          I changed the <mx:Image> to <mx:Canvas> and set the backgroundImage property on the style and it works..

           

          <mx:Style>
              .customAssetsTest {
                      backgroundImage:Embed(source='assets/cell_phone.png');
              }
                 
          </mx:Style>

           

          <mx:Canvas styleName="customAssetsTest" x="100" y="200" width="128" height="128"/>

           

           

          The only problem now is that if I don't set the height/width correctly the image doesn't display (or gets cut off). So I know what I want to do is "sort of" possible.

           

          Is there any way to get a bitmap that is loaded via CSS so I can check / set the height and width?

           

          Thanks

           

          Rich

          • 2. Re: <MX:IMAGE> Source via CSS?
            Jason Szeto Level 3

            Image.source is a property, so it can't be set via CSS. However, you could subclass Image and add your own style called "sourceAsStyle" or something like that. You would then override the styleChanged function in your Image subclass to listen for when the "sourceAsStyle" style has been set and then assign that value to the source property.

             

            - Jason

            • 3. Re: <MX:IMAGE> Source via CSS?
              Peter deHaan Level 4

              @Rich,

               

              This code worked for me in Flex 4.x:

               

              <?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">
                  <s:layout>
                      <s:VerticalLayout paddingLeft="20" paddingTop="20" gap="20"/>
                  </s:layout>
              
                  <fx:Style>
                      .customStylr {
                          source: Embed("0531caruso.jpg");
                      }
                  </fx:Style>
              
                  <fx:Script>
                      <![CDATA[
                          protected function grabImageSource(selector:String):void {
                              var cssObj:CSSStyleDeclaration = styleManager.getStyleDeclaration(selector);
                              img.source = cssObj.getStyle("source");
                          }
                      ]]>
                  </fx:Script>
              
                  <mx:Image id="img" initialize="grabImageSource('.customStylr');" />
                  <s:Label text="YYYYYYYEEEEEEEEEAAAAAAAAAAAHHHHHHH" />
              
              </s:Application>
              
              
              Peter