Skip navigation
Ling\'s
Currently Being Moderated

Flex4 How to set background image in Vgroup..?

Apr 9, 2010 2:08 AM

Hi.,

 

        I have using v flex 4 vgroup to set background image., but image was not display.. any change my code.,

 

<fx:Style>

      .backgroundImage
        {
            color:#808080;
            fontWeight:bold;
            fontSize:18;
            fontStyle:italic;
            contentBackgroundColor : #FFFFFF ;
            backgroundImage:Embed("assets/Green Apple.jpeg");
          
        }

</fx:Style>

<s:VGroup paddingBottom="10" width="100%"  height="600" paddingTop="10"  styleName="backgroundImage">
   
    <s:Label text="hai hai hai">
         </s:Label>
       </s:VGroup>

 

any solution to solve this....

 

With Regards.,

LinFlex-

 
Replies
  • Currently Being Moderated
    Apr 9, 2010 2:51 AM   in reply to Ling\'s

    Hi,

     

    Groups are not skinnable containers so don't have the ability to set a background image(you could always extend group if you wanted to). You would be better of using a skinnable container and set its layout to vertical. To set a background image modify the skin and add the image.

     

    The code below gives you a container skin with background and vertical layout

     

     

    David

     

     

    <?xml version="1.0" encoding="utf-8"?>
    <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    
        <fx:Metadata>
        <![CDATA[ 
            [HostComponent("spark.components.SkinnableContainer")]
        ]]>
        </fx:Metadata> 
        
        <s:states>
            <s:State name="normal" />
            <s:State name="disabled" />
        </s:states>
        
         <s:BitmapImage id="img"
                     source="@Embed('image.jpg')"
                     fillMode="scale"
                     left="0" right="0"
                     top="0" bottom="0" />
        
         <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
        </s:Group>
    </s:Skin>
    

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2010 9:16 AM   in reply to David_F57

    Or you can probably just use a BorderContainer instead:

     

    <?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">
        
        <fx:Style>
            .backgroundImage {
                color: #808080;
                fontWeight: bold;
                fontSize: 18;
                fontStyle: italic;
                contentBackgroundColor: #FFFFFF ;
                backgroundImage: Embed(pattern_143.gif);
                backgroundImageFillMode: repeat;
                
            }
            
        </fx:Style>
        
        <s:BorderContainer width="100%" height="600" styleName="backgroundImage">
            <s:Label text="hai hai hai" />
        </s:BorderContainer>
        
    </s:Application>
    

     

    Peter

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2010 12:32 PM   in reply to Ling\'s

    Peter's BorderContainer method works for me.  Its disconcerting as its not visible in Design Mode, just when you run it.

     

    I guess BorderContainer is the Flex 4 equivalent to mx:Canvas.

     

    I tried this with what looked like legal inline properties with no result, this doesnt work:

     

    <s:BorderContainer width="100%" height="100%"
          backgroundImage="images/bkg/grey_grid.gif"
          backgroundImageFillMode="repeat"  >

    - Alan

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2010 12:06 PM   in reply to Alan Gruskoff

    @Alan,

     

    Try embedding the image instead.

     

    Peter

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2010 12:40 PM   in reply to Peter deHaan

    @Peter

     

    Yes! This works well now. Now I can get repeating background images directly in the code as well as in my CSS style sheets.  This looks good and helps me a lot as there are lots of occasions for me using this. I've gotten used to having repeating image backgrounds in HTML and missed that in Flex 3. This feature alone makes moving to Flex 4 worthwhile.

     

    This works fine for me:

     

    <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">

     

      <!--make a background for the whole page  -->
        <s:BorderContainer width="100%" height="100%"
             backgroundImage="@Embed('images/bkg/grey_grid.gif')"
             backgroundImageFillMode="repeat"
    >

     

      <!--make an inner area with a graphic background  -->
            <s:BitmapImage id="legalPad"
                  source="@Embed('images/bkg/legalPad.gif')"
                  fillMode="repeat"

                  left="40" top="100"
                  width="825" height="200" />
       
        </s:BorderContainer>
    </s:Application>

     


    Here are the images I used:

     

    grey_grid.gif

     

    grey_grid.gif

     

    legalPad.gif

     

    legalPad.gif

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2010 3:04 AM   in reply to Alan Gruskoff

    nice pics, got any more images like that?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 11, 2010 9:46 AM   in reply to nikos101

    Sure, I collect background images that I think might be useful.

     

    A few are attached.

     

    Alan Gruskoff

    626-768-2648

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2010 1:05 PM   in reply to Peter deHaan

    Peter deHaan (Adobe) wrote:

     

    @Alan,

     

    Try embedding the image instead.

     

    Peter

     

    Am I right that this implies Design View does display embedded images correctly?  Because I've never been able to get it to work despite trying more than one method.  Can't get "embedded" fonts to display correctly either, in design view (but they work perfectly fine in the app).  Of course I am using Halo components with the 4.1 SDK...

     

    All this makes design view border on "useless".  Design view needs a complete re-write IMO.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points