6 Replies Latest reply on Nov 30, 2011 10:14 AM by Flex harUI

    How to set s:BorderContainer backgroundImage from URL

    RafaelMCunha

      Hi,

       

      I've read many examples on web showing how to set a background image on s:BorderContainer using @Embed("image.xxx"), however, how can I load a background image from an URL ?

       

      Example:

       

      <s:BorderContainer
          id="bc"
          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="150"
          height="150"
          cornerRadius="25"
          borderColor="#1E84E8"
          borderWeight="5"
          backgroundImage="http://mydomain/myimage.jpg"
          >

      </s:BorderContainer>

       

      Thanks.

      []'s.

        • 1. Re: How to set s:BorderContainer backgroundImage from URL
          _spoboyle Level 4
          <?xml version="1.0" encoding="utf-8"?>
          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                      xmlns:s="library://ns.adobe.com/flex/spark" 
                                      xmlns:mx="library://ns.adobe.com/flex/mx"
                                      creationComplete="init()">
               
               <fx:Script>
                    <![CDATA[
                         import spark.primitives.BitmapImage;
                         
                         public function init():void
                         {
                              var loader:Loader = new Loader();
                              loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoad);
                              var request:URLRequest = new URLRequest("http://www.loscavio.com/downloads/blog/images/Fx.png");
                              loader.load(request);
                         }
                         
                         private function onLoad(e:Event):void
                         {
                              trace("image loaded");
                              var info:LoaderInfo = e.target as LoaderInfo;
                              var loader:Loader = info.loader;
                              var bitmap:BitmapImage = new BitmapImage();
                              bitmap.source = loader;
                              bitmap.width = container.width;
                              bitmap.height = container.height;
                              container.addElement(bitmap);
                         }
                    ]]>
               </fx:Script>
               
               <s:BorderContainer
                    id="container"
                    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="150"
                    height="150"
                    cornerRadius="25"
                    borderColor="#1E84E8"
                    borderWeight="5">
                    
               </s:BorderContainer>
               
          </s:WindowedApplication>
          


          There may be a better way of doing it and its certainly possible to tidy up the code I've written but this shows the basic premise of how you could go about it.

          Although to get it to work as the background image you ar probably going to have to use this technique in a custom skin

           

          you could also try lokoing at http://polygeek.com/2452_flex_extending-spark-bitmapimage

          • 2. Re: How to set s:BorderContainer backgroundImage from URL
            RafaelMCunha Level 1

            Thanks.

             

            However I am not using AIR. It is just a web app using Flex 4. So, I do not have s:WindowedApplication.

            • 3. Re: How to set s:BorderContainer backgroundImage from URL
              _spoboyle Level 4

              ok here is a version for web and note I have set the background image properly rather than just adding an image to the displalist

               

              <?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"
              
                             creationComplete="init()">
              
                  
              
                  <fx:Script>
              
                      <![CDATA[
              
                          public function init():void
              
                          {
              
                              var loader:Loader = new Loader();
              
                              loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoad);
              
                              var request:URLRequest = new URLRequest('http://www.loscavio.com/downloads/blog/images/Fx.png');
              
                              loader.load(request);
              
                          }
              
                          
              
                          private function onLoad(e:Event):void
              
                          {
                              var info:LoaderInfo = e.target as LoaderInfo;
              
                              var loader:Loader = info.loader;
              
                              container.setStyle('backgroundImage', loader.content);
              
                          }
              
                      ]]>
              
                  </fx:Script>
              
                  
              
                  <s:BorderContainer
              
                      id="container"
              
                      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="150"
              
                      height="150"
              
                      cornerRadius="25"
              
                      borderColor="#1E84E8"
              
                      borderWeight="5">
              
                      
              
                  </s:BorderContainer>
              
                  
              
              </s:Application>
              
              • 4. Re: How to set s:BorderContainer backgroundImage from URL
                RafaelMCunha Level 1

                Correct answer. Thank you.

                 

                []'s.

                • 5. Re: How to set s:BorderContainer backgroundImage from URL
                  adqsdfqsdf

                  This doesn't seem to work any more? All I get is a white background.

                  • 6. Re: How to set s:BorderContainer backgroundImage from URL
                    Flex harUI Adobe Employee

                    BackgroundImage doesn’t support loading external images.