Flex : Cotainer class – backgroundAttachment

Note : Same post as previous one.

Folks,

Today, I come to know another one Gem of Flex.

A need arise in my one project, while my development,

I have to create same functionality as done in HTML.

i.e. HTML – Body tag we provide backGround image with size ” fixed “.

<body style=”background:url(images/background.png) fixed”>

So, when ever we scroll the contents,

the background image will not be scrolling, only contents will scroll.

Same type functionality, I need to achieve in flex.

So I dwell deep into Flex frame work and got one more Pearl…!!! Oh, that’s consistent.

That’s why I like flex more than oteher tech.

This time, the pearl is, style property : backgroundAttachment

The ” backgroundAttachment ” is of mx.core.Container class style property.

If a background image is specified, this style specifies

whether it is fixed with regard to the viewport (<code>”fixed”</code>)

or scrolls along with the content (<code>”scroll”</code>).

[Style(name=”backgroundAttachment”, type=”String”, inherit=”no”)]

My sample is as below :

I have shown an exmple with two VBox all propertis and contets are same.

Except one propety :

backgroundAttachment=”scroll

backgroundAttachment=”fiexed”

the code is as below


<?xml version="1.0"
encoding="utf-8"?>

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

<span>            </span>pageTitle="Mayur
: BG Experiment"

<span>            </span>width="550"
height="330"

<span>            </span>backgroundImage="assets/main_gradient.png">

<span>            </span><mx:VBox
width="160" height="170" verticalGap="10"

<span>                        </span>x="52"
y="104"

<span>                        </span>paddingLeft="5"

<span>                        </span>themeColor="haloBlue"

<span>                        </span>borderStyle="solid"
borderThickness="2"

<span>                        </span>toolTip="Scroll
- default value"

<span>                        </span>backgroundImage="assets/main_bg.png"

<span>                        </span>backgroundAttachment="scroll">

<span>                        </span><mx:Text
text="One Long line 1" />

<span>                        </span><mx:Text
text="One Long line 2" />

<span>                        </span><mx:Text
text="One Long line 3" />

<span>                        </span><mx:Text
text="One Long line 4" />

<span>                        </span><mx:Text
text="One Long line 5" />

<span>                        </span><mx:Text
text="One Long line 6" />

<span>                        </span><mx:Text
text="One Long line 7" />

<span>                        </span><mx:Text
text="One Long line 8" />

<span>                        </span><mx:Text
text="One Long line 9" />

<span>                        </span><mx:Text
text="One Long line 10" />

<span>                        </span><mx:Text
text="One Long line 11" />

<span>                        </span><mx:Text
text="One Long line 12" />

<span>                        </span><mx:Text
text="One Long line 13" />

<span>                        </span><mx:Text
text="One Long line 14" />

<span>                        </span><mx:Text
text="One Long line 15" />

<span>            </span></mx:VBox>

<span>            </span><mx:VBox
width="160" height="170" verticalGap="10"

<span>                        </span>x="334"
y="104"

<span>                        </span>paddingLeft="5"

<span>                        </span>themeColor="haloBlue"

<span>                        </span>borderStyle="solid"
borderThickness="2"

<span>                        </span>toolTip="fixed
- changed value"

<span>                        </span>backgroundImage="assets/main_bg.png"

<span>                        </span>backgroundAttachment="fixed">

<span>                        </span><mx:Text
text="One Long line 1" />

<span>                        </span><mx:Text
text="One Long line 2" />

<span>                        </span><mx:Text
text="One Long line 3" />

<span>                        </span><mx:Text
text="One Long line 4" />

<span>                        </span><mx:Text
text="One Long line 5" />

<span>                        </span><mx:Text
text="One Long line 6" />

<span>                        </span><mx:Text
text="One Long line 7" />

<span>                        </span><mx:Text
text="One Long line 8" />

<span>                        </span><mx:Text
text="One Long line 9" />

<span>                        </span><mx:Text
text="One Long line 10" />

<span>                        </span><mx:Text
text="One Long line 11" />

<span>                        </span><mx:Text
text="One Long line 12" />

<span>                        </span><mx:Text
text="One Long line 13" />

<span>                        </span><mx:Text
text="One Long line 14" />

<span>                        </span><mx:Text
text="One Long line 15" />

<span>            </span></mx:VBox>

<span>            </span><mx:Grid
x="52" y="54" width="440" >

<span>                        </span><mx:GridRow
width="100%" height="100%">

<span>                                    </span><mx:GridItem
width="100%" height="100%"

<span>                                                </span>borderStyle="solid"
borderThickness="1">

<span>                                                </span><mx:Label
text="backgroundImage=&quot;main_bg.png&quot;"
width="205"/>

<span>                                    </span></mx:GridItem>

<span>                                    </span><mx:GridItem
width="100%" height="100%"

<span>                                                </span>borderStyle="solid"
borderThickness="1">

<span>                                                </span><mx:Label
text="backgroundImage=&quot;main_bg.png&quot;"
width="100%"/>

<span>                                    </span></mx:GridItem>

<span>                        </span></mx:GridRow>

<span>                        </span><mx:GridRow
width="100%" height="100%">

<span>                                    </span><mx:GridItem
width="100%" height="100%"

<span>                                                </span>borderStyle="solid"
borderThickness="1">

<span>                                                </span><mx:Label
text="backgroundAttachment=&quot;scroll&quot;"
width="205"/>

<span>                                    </span></mx:GridItem>

<span>                                    </span><mx:GridItem
width="100%" height="100%"

<span>                                                </span>borderStyle="solid"
borderThickness="1">

<span>                                                </span><mx:Label
text="backgroundAttachment=&quot;fixed&quot;"
width="100%"/>

<span>                                    </span></mx:GridItem>

<span>                        </span></mx:GridRow>

<span>            </span></mx:Grid>

<span>            </span><mx:Label
x="20" y="25"

<span>                        </span>text="mx.core.Container-[Style(name=&quot;backgroundAttachment&quot;,
type=&quot;String&quot;, inherit=&quot;no&quot;)]"

<span>                        </span>width="500"/>

</mx:Application>

Please let me know your views / comments.

Happy Felxing . . . )

Advertisements

4 Responses

  1. thanks a lot.

  2. hi
    thank u for the information, i personallay prefer flex and i like its background-attachment property.

    .containerVBox {
    …………..
    ……

    🙂

  3. hi
    a good information. Note 1 thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: