Flexair - Mayur Rami » Flex 3

Flex : Cotainer class – backgroundAttachment

Mayur Rami — Sat, 04 Oct 2008 10:25:47 +0000

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 “.

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 (”fixed”)

or scrolls along with the content (”scroll”).

[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




            pageTitle="Mayur
: BG Experiment"

            width="550"
height="330"

            backgroundImage="assets/main_gradient.png">

                                    x="52"
y="104"

                        paddingLeft="5"

                        themeColor="haloBlue"

                        borderStyle="solid"
borderThickness="2"

                        toolTip="Scroll
- default value"

                        backgroundImage="assets/main_bg.png"

                        backgroundAttachment="scroll">

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

            

                                    x="334"
y="104"

                        paddingLeft="5"

                        themeColor="haloBlue"

                        borderStyle="solid"
borderThickness="2"

                        toolTip="fixed
- changed value"

                        backgroundImage="assets/main_bg.png"

                        backgroundAttachment="fixed">

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

                        

            

            

                        

                                                                                    borderStyle="solid"
borderThickness="1">

                                                

                                    

                                                                                    borderStyle="solid"
borderThickness="1">

                                                

                                    

                        

                        

                                                                                    borderStyle="solid"
borderThickness="1">

                                                

                                    

                                                                                    borderStyle="solid"
borderThickness="1">

                                                

                                    

                        

            

                                    text="mx.core.Container-[Style(name="backgroundAttachment",
type="String", inherit="no")]"

                        width="500"/>

Please let me know your views / comments.

Happy Felxing . . .

Posted in Actionscript 3, Flex 3 Tagged: Actionscript 3, Flex 3

Flex Video Tutorials

Mayur Rami — Tue, 29 Jul 2008 17:19:42 +0000

Folks,

Be happy, Adobe has announced an entire week for Flex Video Tutorials.

There are some exercises too given, to dirty your hands with and to brighten your skills.

Initially first Three days videos are listed. Schedule for other days will be declared later on.

So, Enjoy Flexing…

Mayur Rami

Solve Flex Bugs and get Flex Books : Amazing

Mayur Rami — Wed, 02 Jul 2008 07:27:32 +0000

Flex is really going Innovative ways.

Now you can be a, Flex 3 Contributor. Solve 3 Bugs from Flex Bugs list JIRA and you will get a Flex Book of your wish from Amazon by Adobe Flex Team. Isn’t it amazing…!!

This is rally a very innovative way to make community more aware and to understand the details of the SDK of Flex 3 (Flex frame work) with ActionScrpt 3, as well as AIR.

Even you can get MAX 2008 registration.

For the first two contributors to have 10 patches committed, we’ll pay for your MAX 2008 registration (any region).

One more thing which like, too is :

Incentive Program Rules (subject to adjustment at any time)

You must follow our Coding Conventions
You must be a citizen of Earth (no proof required)
You must be helpful in providing book options in your wish list that won’t get the Flex team fired if we buy it
You must not deluge the system with silly bugs in an attempt to provide fixes

Flex is in real mean an Open Source.

Enjoy flexing . . .

Mayur Rami

Close PopUps, TitleWindow, Panel etc by clicking the modal in Flex

Mayur Rami — Tue, 01 Jul 2008 09:20:11 +0000

I got one query, how to close Popups ( TitleWindow, Panel etc. ) just by clicking on Modal.

A functionality which we found in HTML / Javascript based modal (with lightbox ), some thing we can see now a days in Yahoo Mails, when we see images attached in our mails.

See, Modal is actually a FlexSprite instance in Flex frame work (same as well for AIR ). The Modal is created by SystemManager in Flex.

So, if we want to just close ( or to perform any business logic ), it is very easy, just listen for an Event.

The event is : ‘ mouseDownOutside ‘ .
A simple example is as below…
There are two files : 1) ModalTitleWindow.mxml 2) ModalClose.mxml

This same even useful for AIR, too.

Due to this kind of ease, I really love Actionscript 3.
Try this and fell free to know me your comments.

Enjoy Flexing . . .

Mayur Rami

AIR SDK settings for ADT & ADL

Mayur Rami — Fri, 02 May 2008 08:33:41 +0000

We all know that AIR based applications run in two different flavors

swf
html

As a flex developer, I generally use FlexBuilder IDE to create Flex based AIR applications.
But few days back I did some experiment and try to develop an AIR base application through
pure HTML and JavaScript combination.

Though Flex and Acitonscript are my pet technologies but this time I tried a different combination.

To run AIR Applications two command line tools available.

The ADT tool is used to create packaged Installer of application ( which need to be installed first to work on application. ) and

The ADL tool is used to launch AIR application without installing it. ( This tool is mainly useful while developing the application. )

So, will have to configure these tools first and it’s very simple ( It remembers me of my initial days as a Java Programmer, in those day, we had to configure java / javac commads for compilation and run ). Let’s go…

Note : The steps are for Windows platform.

You can download from AIR SDK or here
Unzip the .zip file and save it on your disk. ( we will refer this path as [SDK_PATH] e.g. c:\airsdk_v1).
The point is, you should have at least the following three directories: /bin, /lib and /runtime. (By default they are in same .zip file and you need not to copy/paste them at one place.

But for, those user who, already, have Flex 3 SDK and if they want to set this — without download the separate .zip file. Then just copy these three directories i.e. ‘bin’, ‘ lib’ and ‘runtime’ copy and paste them in a one single directory so as they maintain their corresponding relative path.

) The ADL and ADT command-line tools are located in the bin directory.

Now, we have to just set the system ‘ PATH ‘ to execute the commandline application from anywhere on the system
1. Open the System Properties dialog box and click the Advanced tab. You can find this in the System
  settings in the Control Panel.
2. Click the Environment Variables button.
3. Select the PATH entry and then click the Edit button. Add the path to the bin directory to the end of the
  current variable value, separating it from previous values with a semicolon:
  ; [SDK_PATH]/bin
4. Click OK to close the panels.

To test the installation, open a new Windows command prompt (Start -> Run -> command), and type adt.

and if everything is correctly done you will get outcome like :

usage:
adt -package SIGNING_OPTIONS FILE_ARGS
adt -prepare FILE_ARGS
adt -sign SIGNING_OPTIONS
adt -checkstore SIGNING_OPTIONS
adt -certificate -cn ( -ou )?
( -o )? ( -c )?

adt -help

SIGNING_OPTIONS: -storetype ( -keystore )?
( -storepass )? ( -keypass )? ( -providerName
)? ( -tsa )?
FILE_ARGS: * (( -C

+ ) |
( -e ))* -C dir

Enjoy AIR