Apache Flex

Monday, September 21, 2009

How to Apply Blend Modes in Adobe Flex

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

Friday, September 11, 2009

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

Wednesday, September 9, 2009

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

Saturday, September 5, 2009

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

Friday, August 28, 2009

Flash Player Security Model

Flash cross domain request security prompt

You make asynchronous HTTP Service Requests in Adobe Flex.

Synchronous HTTP Service Requests could be made using JavaScript XMLHTTPRequest with the following parameters:

xmlHTTPRequest.open("GET", "http://anyurl.com/", false)

RequestType: GET or POST
URL of the service
Comunication Type: true - asynchronous, false for synchronous

important configuration files used in Adobe Flex
1. crossdomain.xml
2. services-config.xml - used for Flex Data SErices

Data Push can be implemented in Adobe Flex using BlazeDS Server or LiveCycleDataServices

How to Make HTTP Request to a Different Domains

More DIY videos at 5min.com

How to connect to HTTP Service using Adobe Flex 3

Part 1: Introduction

More DIY videos at 5min.com

Part 2: Getting the code work

More DIY videos at 5min.com

Handling Result Event

More DIY videos at 5min.com

Handling Fault Event

More DIY videos at 5min.com

Thursday, August 27, 2009

Building Simple Application with Flex

EBA AJAX Grid + Flex Charting Component (Photo credit: Andre Charland)

Working with Containers

Lets now learn about the most important MXML tag in Flex.

Applicaiton
Description: root container for an Flex application

Properties:

layout, define lay out for its child components, possible values for this property are:

vertical - automatic top to bottom in order layout
horizontal - automatic left to right in order layout
absolute - no automatic layout, (x,y) location based layout

Note: The default layout, BasicLayout renderer doesn't respect the transformations that occur in the object's width/height/position during rotation. It still tries to layout the objects as if they were not rotated. However, if you use any other layout, like VerticalLayout or HorizontalLayout, the objects new dimensions after rotation is used.

style, defines formatting for the child components