Flex. mdiWindow background image..?

Hi.,
         In my question., How to set background image in mdiwindow.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    xmlns:flexmdi="http://flexmdi.googlecode.com/">
<flexmdi:MDICanvas    id="mdiCanvas" horizontalScrollPolicy="off" verticalScrollPolicy="off"
      width="100%" height="100%"   backgroundColor="#FFFFFF" backgroundAlpha="0">
    <flexmdi:MDIWindow id="window1"     title="Window 1" x="30" y="30" width="200" height="200">
      <mx:Label text="Label in the first window" />
    </flexmdi:MDIWindow>
</flexmdi:MDICanvas>
</mx:Application>
possible ? ..
With Regards.
LinFlex-

Hi,
Try this:
<flexmdi:MDIWindow id="window1"
            title="Window 1"
            x="30"
            y="30"
            width="200"
            height="200"
            backgroundImage="assets/img.jpg">
Regards,
Adrian

Similar Messages

How to insert a background image in VGroup in Flex Mobile

I want to insert a background image for this VGroup. Help me out. I'm new to Flex !!
I'm using this code in Flex Mobile Application
<s:VGroup height="100%" width="100%"
          paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
    <s:List id="homeList" height="100%"
            labelField="title"
            dataProvider="{homeNews}">
        <s:layout>
            <s:TileLayout requestedColumnCount="1"
                          verticalGap="5"/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:VGroup>
                        <s:BitmapImage source="{data.source}"/>
                        <s:Label text="{data.title}" />
                    </s:VGroup>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:VGroup>

I don't think you can add a background image to a VGroup directly, nor can VGroup be skinned.
As far as I am aware there are probably 2 solutions
1) use a SkinnableContainer instead skin the container to have a background image and set its layout to VerticalLayout
2) enclose the VGroup in a Group with a BasicLayout. you can then add a background image to the Group and overlay the VGroup

Flex 4 Mdi canvass, how to set background image..?

Hi.,
     Now i try to use mdi canvass background image,how to set background image in mdi canvass in flex 4..
With Regards
LinFlex-

In the past flex 3 version, there is an attribute call <flexlib:MDICanvas backgroundImage="@Embed(source='/imgFolder/imgFile.png')/>
to set it. However it has problem in Flex 4 because of 'halo' and 'spark' theme library changed.
The following is my post that still haven't found the answer.
Dear all,
We have a project that doing migration from flex 3 to flex 4. We use flexlib the latest version of
flexlib - 2.5 - flex4.zip.
However we confronted problems that several of attributes that flex 4 doesn't support:
Constraints are listed as follows:
1) <flexlib:MDICanvas backgroundImage="@Embed(source='/imgFolder/imgFile.png')/>
2) <flexlib:MDICanvas backgroundSize="auto"/>
3) <mx:ApplicationControlBar barColor="#000000">
original error message:
====================================================
Description     Resource    Path    Location    Type
The style 'backgroundImage' is only supported by type 'flexlib.mdi.containers.MDICanvas' with the theme(s) 'halo'.    MainView.mxml     /osss/flex_src/hk/gov/labour/osss/view    line 242    Flex Problem
Description    Resource    Path     Location    Type
The style 'backgroundSize' is only supported by type 'flexlib.mdi.containers.MDICanvas' with the theme(s) 'halo'.     MainView.mxml    /osss/flex_src/hk/gov/labour/osss/view    line 242     Flex Problem
Description     Resource    Path    Location    Type
The style 'barColor' is only supported by type 'mx.containers.ApplicationControlBar' with the theme(s) 'halo'.    MainView.mxml     /osss/flex_src/hk/gov/labour/osss/view    line 227    Flex Problem
Regards,
Man Pak Hong, Dave
manpakhong
[email protected]

How to set a background image to fill the entire screen on any device in a spark mobile application

Hi,
I started developing a mobile application with Flex.
I'm trying to set a background image to fill the whole screen. I've been stucked at this point for days now. I tried everything and no solution seems to work for me.
I'm using a TabbedViewNavigatorApplication and i need to set some background images on views.
I need my image to fill the entire screen on any device. i don't need to mantain image aspect ratio, just need it to be fullscreen. This seemed to work when setting a custom skin on the TabbedViewNavigatorApplication, however this blocked all my views for some reason and all components contained in view became invisible.
Can you please tell me how can i achieve this?
Kind regards,
Dan

Basically you need a larger image which can accommodate any device. The trick is to show only what each device can display, so therefore some clipping will occur based on device. Have something centered and towards margins have a gradient or just plane colors that way the stuff in the middle will be visible on every device while nobody will care if you are clipping from the color fill.
C

How to create a background image for each item in a List object

Hello.
I am trying to create a background image that displays whenever a user posts something to a list. For example when a user posts text it would appear in a list. The new item in the list would contain a specific background image with the users text appearing on top of the background image. I do not want a background image for the entire list, rather each item within the list.
I am not sure how clear this is so I added an image below. When a user enters text in and clicks the "post-it" button their text would appear below with the sticky note background.
I am not sure which list type would be best for this problem or how to create insert the image, so I am open to suggestions.
Thank you for your help. Any advice or guidance will be greatly appreciated!

Hi
the easiest way would be with itemRenderer.
You have to do two things:
1. In your list declaration use a item renderer: <mx:List itemRenderer="myRenderer"/>
2. create a flex component myRenderer that will be the single item. This can be a canvas with a background image and a text field on it.
When you add a new item to the list, a new myRenderer item will be created and the data property will be passed to it. So you have to put "data" in your textField.
If you need more help try looking at Tour de Flex samples, they're pretty easy.
Andrei

Best practice for Spark repeating background image in a SkinnableContainer?

In my old Flex 3.5 code I would accomplish this by dropping an Image into a Canvas and hitting the Canvas with some css style stuff to get the repeat. The Image tag had a source property that would take a web address so I could dynamically grab different images from the web based on some conditions. Little bit more trouble with Flex 4.5 and Spark but I'm trying to get there.
Here Adobe docs explain how to *embed* a background image:
http://help.adobe.com/en_US/flex/using/WS422719A4-7849-4921-AF39-57FF567B483B.html#WS063B0 491-B7AB-4b00-A39F-E44310BCB0E0
They use a BitmapFill object in the skin.

    <s:Rect id="background" left="3" top="3" right="3" bottom="3" alpha=".25">
        <s:fill>
            <s:BitmapFill source="@Embed(source='../../assets/myImage.jpg')"/>
        </s:fill>
    </s:Rect>
Problem is I need to do this without embedding the image. In my old code I grabbed the image from web (set source property on Image tag to web address). What's the best practice for achieving this with a skinnable container? The BitmapFill object used above won't take a web address for a source.
Thanks in advance.

Use BitmapImage with a fillMode of repeat:
<s:BitmapImage source="http://www.google.com/intl/en_com/images/srpr/logo2w.png" width="100%" height="100%" scaleMode="stretch" fillMode="repeat" />

How to change background images in s:application

hello!
i want to make a webside by flex4 as this web http://www.templatemonster.com/flash-cms-templates/29930.html
But i don't know how to make change background images by click and make sound when load page.
Can u help me ,please. sorry i write E not well.
Thanks so much
BUI THI PHUONG THANH- FROM VIETNAM

Hi,
please create a sink for your application inside that put your image.And apply that skin to your application on any click.
Below is the code.
Main Application
<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/halo" xmlns:mx1="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            protected function btn_click(evt:MouseEvent):void {
                this.setStyle("skinClass", MySkinClass);
        ]]>
    </fx:Script>
    <s:Button label="Change BackGroundImage" click="btn_click(event);"/>
</s:Application>
MySkinClass
<?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:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Metadata>
        [HostComponent("spark.components.supportClasses.SkinnableComponent")]
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage source="@Embed('image1.jpg')" smooth="true" left="0" right="0" top="0" bottom="0" />
</s:Skin>
with Regards,
Shardul Singh Bartwal

Background image instead of color

Hi, I have a Flex 4 application with this code:
<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"
               backgroundColor="#000000"
               applicationComplete="appComp()"
               width="1600" height="900"
public function appComp():void{
    stage.scaleMode = StageScaleMode.SHOW_ALL;
    stage.align = StageAlign.TOP;
    //stage.align = StageAlign.LEFT;
NOTE: In the index.template.html I have change all width and heights from the default "${width}" and "${height}" to "100%"
The documentation says of SHOW_ALL : "Borders can appear on two sides of the application."
I can change the color of these borders with backgroundColor in Application tag, but.... How can I put an image (or swf) instead of these Borders?
THANKS.
Raúl.

Hi There,
In my knowledge, there are two ways to do that.
1) Create a skin for your application(I guess this option is only for advanced users) and choose the background colour there
2) A trick which I found is take a border container and use a background image for this border container.
e.g.:-
<s:BorderContainer
width="100%" height="100%" x="0" y="2" backgroundImage="@Embed(source='assets/images/nameofimage.jpg')">
//other components
</s:BorderContainer>
Hope, it helped>>>>

Background image for a KM Navigation iView

Hi Friends,
I would like to put an image, that is a part of the KM repository (/documents/myPic/abc.jpg) as a background image to my KM Navigation iView. Could you please let me know all the available solutions to achieve this?
EP/KMC 04s (7.0 SP06).
Thanks in advance,
Debasis

Hi Debasis,
This is a general Flex UI collection renderer setting
for the Collection Renderer Settings Group:
rndBgImagePath
Look here:
http://help.sap.com/saphelp_nw04/helpdata/en/87/3d48475ee8bd448c4031aa98d90524/frameset.htm
For a specific folder you could even set this using
the folder's details under Presentation Settings >
Additional Parameters.
Regards,
Darin

How to put the background image in Title Window?

Hi,
I'm newbie in flex. I 'm using Flex 4.
Can anyone give me some guidelines on how to put the background image in Title Window?
Is it possible to do this?
Thanks.

Hi,
Check the below sample code
<?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" minWidth="955" minHeight="600">
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|BorderContainer {
            background-image:Embed(source="image/wheres_the_green_rez.jpg");
            background-image-fill-mode:clip;
    </fx:Style>
    <s:TitleWindow width="100%" height="100%">
        <s:BorderContainer width="100%" height="100%"/>
    </s:TitleWindow>
</s:Application>
Regards,
Anitha

Help needed to create a Background Image

I have a mobile project and want to create a background image which is visible below some text.
My firstview file is as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"
                    skinClass="skins.mySkin" backgroundAlpha="0">
<fx:Declarations>

</fx:Declarations>
          <s:Label x="2" y="86" text="Here's some Text" />
</s:View>
With mySkin (in the skins folder) as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
                    <![CDATA[
                    [HostComponent("spark.components.View")]
                    ]]>
</fx:Metadata>
<s:states>
                    <s:State name="normal" />
                    <s:State name="disabled" />
</s:states>
<s:BitmapImage width="10%" height="10%" source="@Embed('/images/myImage.jpg')"/>
          <s:Group id="contentGroup" width="10%" height="10%" minWidth="0" minHeight="0" />
          <s:ViewNavigator id="navigator" width="10%" height="10%" />
</s:Skin>
When I run the project, I cannot see the Label text (although the backgroundAlpha is set to zero).
First time I've tried a skin, so help would be appreciated and hopefully.
Thanks in Advance

A small change to the mySkin file as follws wored:
          <s:BitmapImage width="100%" height="100%" scaleMode="letterbox" horizontalAlign="center"
                 verticalAlign="middle" source="@Embed('/images/myImage.jpg')"/>
          <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
I took the ViewNavigator line out.

Background image + scaleGrid

I want my entire application to have a png image as the background image, and I don't want parts of it to stretch when the application container stretches. I think I need to use a scaleGrid for this, but I don't know how to do it. Here is the css for my Application tag:
Application {
background-color: undefined;
background-image: Embed(source="assets/background.png", scaleGridBottom="80", scaleGridLeft="0", scaleGridRight="356", scaleGridTop="40");
The overall dimensions of background.png are 356x176. I want 16 pixels on the left and right unscaled. The top 44 and bottom 16 should remain unscaled as well. I read on the net that there is a Design view in Flex Builder that can help with this, but when I open it, I don't see the actual image, just a blurry placeholder, and I can't find any scale 9 grid tool either. Is there a way to do it just by knowing the numbers I provided?

Hello jsd99,
I tried you're code example and it works, you just have the wrong values in the scaleGrid attributes:
scaleGrid values are always calculated from the upper left corner, so you're code should be als follows:
I assume you're image is width x height 356 x 176:
scaleGridTop="44" (the 44 you want as top)
scaleGridBottom="160" (176 - 16 as you're bottom margin)
scaleGridLeft="16"
scaleGridRight = 340 (356 - 16)
background-image: Embed(source="assets/background.png", scaleGridBottom="160", scaleGridLeft="16", scaleGridRight="340", scaleGridTop="44");
Hope this helps
Johan Velthuis

Align in background image

hello
i have a background image in flex 4 by i skinclass to project skin i make.
but when i run that image dont stay center desktop.
it in left
how do i work it??
can u help me please.thanks

Why are you hacking?
.img-shadow-wrapper { /* Drop Shadow */
*background: none;
_background: url(/themes/ocp/images/shadow.gif) no-repeat
bottom right;
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Spencer Hill" <[email protected]> wrote in
message
news:f1vvuk$b3p$[email protected]..
> Heya,
> I am working on a website that is using the following
CSS to display
> a
> shadow effect for an image. It's calling a background
image and using
> margins
> to align it properly but IE7 refuses to render it yet
Safari, FF and even
> IE6
> display it properly no problems.
>
> .img-shadow-wrapper { /* Drop Shadow */
> *background: none;
> _background: url(/themes/ocp/images/shadow.gif)
no-repeat bottom right;
> }
> .img-shadow-wrapper img { /*Drop Shadow Positioning */
> border: 1px solid #777;
> padding: 1px;
> margin: 0px 5px 5px 0px;
> }
>
> HTML
> <div class="img-shadow-wrapper">
> <img src="
http://web.ocp.org/products/12244_t.jpg"/>
> </div>
>
> Can anyone help me find the solution?? Thanks
>

Flex4 How to set background image in Vgroup..?

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-

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

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

        <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
legalPad.gif

How to edit background image in center destop??

hello
i have a background image in flex 4 by i skinclass to project skin i make.
but when i run that image dont stay center desktop.
it in left
how do i work it??
can u help me please.thanks

Hi
Thank you for response
I want upload to TransparentContainer Image in background
I change the design to Plain
I Try Upload by the browse in the theme
but The image is not upload
even if i delete the chace serever
i'ts not working

Flex. mdiWindow background image..?

Similar Messages

Maybe you are looking for