How to Apply Blend Modes in Adobe Flex

Image by Charles Williams via Flickr

Blends allow you to blend color layer within Flex application to produce some interesting visual effects.

Watch this video to learn about how to Apply Blends in Adobe Flex Labels

More DIY videos at 5min.com

Watch this video to Learn about Different Blends Available in Adobe Flex

More DIY videos at 5min.com

How to Use the Filter Properties in Adobe Flex

More DIY videos at 5min.com

Create Glow and Apply Shadow Filter using Adobe Flex

More DIY videos at 5min.com

Lifecycle of a flex component

Image by alexdecarvalho via Flickr

What this video to understand in depth exactly what happens every time a component is created and rendered in Flex.

Write text here...

Fundamentals: Data Binding in Flex

Data binding enables a property to watch another property for changes in value.

{} are used for denoting/specifying data binding in flex. Below is the code example which show how to generate email address using Flex data binding

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3:             xmlns:s="library://ns.adobe.com/flex/spark"   
4:             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
5:     <s:Form x="11" y="5"   
6:           width="313"   
7:           backgroundColor="#FFFFFF"   
8:           contentBackgroundColor="#DADADA">  
9:        <s:FormItem width="290" label="First Name:">  
10:           <s:TextInput id="firstName"   
11:                     width="196"/>  
12:        </s:FormItem>  
13:        <s:FormItem width="290" label="Last Name:">  
14:           <s:TextInput id="lastName"   
15:                     width="196"/>  
16:        </s:FormItem>  
17:        <s:FormItem width="290" label="Email:">  
18:           <s:TextInput text="{firstName.text}.{lastName.text}@xyzcompany.com"   
19:                     width="196"/>  
20:        </s:FormItem>  
21:        <s:FormItem width="290">  
22:           <s:Button label="Submit"/>  
23:        </s:FormItem>  
24:     </s:Form>  
25:  </s:Application>  

The code above builds up dynamically the email address by watching the change in the First Name and Last Name property of the form.

text="{firstName.text}.{lastName.text}@xyzcompany.com" is the code specifing the data binding.
The above binding is one-way binding, that means incase changes are made to the Email id field the texts in First Name and Last Name field will not be affected.

Dispatching Events

The best practice for defining components that return information back to the main application is to design the component to dispatch an event that contains the return data.

the main application can define an event listener to handle the event and take appropriate action.

ChangeWatcher - it watches a variable for changes and when somthing happens fires an event. There are 3 ways to specify the paramters that chain.

ChangeWatcher.watch(this."myvar, header)


ChangeWater.watch(name:"myvar", getter: function():String{return "something"}}, handler);

BindingUtils.bindProperty


package mx.binding.util
// requires framework.swc
// immediately bind two properties one-way.
BindingUtils.bindProperty(this, "var1", this, "var2");

Data Binding in Flex Application

More DIY videos at 5min.com

How to create custom MXML components with Flex Builder 3.0

Image by Geoff S. via Flickr

Watch the video below to learn How to creating an MXML custom component:

More DIY videos at 5min.com

How to add properties and methods to a MXML custom component.

More DIY videos at 5min.com