8 Replies Latest reply: Dec 12, 2010 1:05 PM by Ansury RSS

    Flex4 How to set background image in Vgroup..?

    Ling's Community Member

      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-

        • 1. Re: Flex4 How to set background image in Vgroup..?
          David_F57 CommunityMVP

          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>
          

          • 2. Re: Flex4 How to set background image in Vgroup..?
            Peter deHaan Community Member

            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

            • 3. Re: Flex4 How to set background image in Vgroup..?
              Alan Gruskoff Community Member

              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

              • 4. Re: Flex4 How to set background image in Vgroup..?
                Peter deHaan Community Member

                @Alan,

                 

                Try embedding the image instead.

                 

                Peter

                • 5. Re: Flex4 How to set background image in Vgroup..?
                  Alan Gruskoff Community Member

                  @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

                  • 6. Re: Flex4 How to set background image in Vgroup..?
                    nikos101 Community Member

                    nice pics, got any more images like that?

                    • 7. Re: Flex4 How to set background image in Vgroup..?
                      Alan Gruskoff Community Member

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

                       

                      A few are attached.

                       

                      Alan Gruskoff

                      626-768-2648

                      • 8. Re: Flex4 How to set background image in Vgroup..?
                        Ansury Community Member

                        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.