Hi All,

I have started this thread for flex tips and tricks. I have faced the problem of finding a specific functionality or keywork in a particular development environment in a particular thread. I dont find the tips and tricks in a particular thread. So I have started this thread which is going to have all the flex tips and tricks in a particular place. So that it will be easy to search in this thread for a particular thing. Hope it will be helpful for your flex development.

Ok, Here i am going to explain about a simple tricks how we can set the style of the flex application window.

STYLE

Flex defines styles for setting some of the characteristics of components, such as fonts, margins, and alignment. These are the same styles as defined and used with Cascading Style Sheets (CSS).
The UIObject and UIComponent classes define the global styles available for all components. In addition, each component can define its own styles.

You can set all styles in MXML as tag properties. Therefore, you can set the margins for a Box container using the following syntax:

<mx:VBox id="myVBox1" marginTop="12" marginBottom="12" />
<mx:Button label="Submit"/>
</mx:VBox>

You can also configure styles in MXML using the <mx:Style> tag, or in ActionScript using the setStyle() method. The <mx:Style> tag contains style declarations using CSS syntax or a reference to an external file that contains style declarations, as the following example shows:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Style>
.myClass { horizontalAlign: "left";}
Box { marginTop: "12"; marginBottom: "12";}
Tile { verticalGap: "10"; horizontalGap: "10";}
</mx:Style>
<mx:VBox id="myVBox1" />
<mx:Button label="Submit"/>
</mx:VBox>
<mx:VBox id="myVBox2" styleName="myClass" />
<mx:Button label="Submit"/>
</mx:VBox>
</mx:Application>

thanks

__________________
Karpagarajan. R
Necessity is the mother of invention

Hi guys,

Here is the tips for using Flash Media Server in flex. While trying to connect with the flex to FMS, I have faced the problem of connecting to the FMS server. Here I have given the solution for that. I just modified the connectivity string in flex action script.

see the below example...

nc = new NetConnection();
nc.objectEncoding = ObjectEncoding.AMF0;
//Note that the above statement to intimate the FMS to use action script Message format ver 1.0
//Because the FMS will not support for AMF2 or AMF3
nc.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler );
nc.connect( "rtmp:/flex_videoconference:1935/testvideo");

Please note the above connection statement, you need to specify the FMS server name and the FMS port number(1935), after that you need to give the FMS server application name where the shared objects will be used.

Hope it will be useful for your video streaming flex application

__________________
Karpagarajan. R
Necessity is the mother of invention

Hi All,
Here is the tips to apply the swf skin for your flex applications. First you need to create your skin in the flash. Create symbols in the name of your skin objects.
Then you need to specify those objects name in the style sheet(CSS)

.playBtn {
upSkin: Embed(source="../assets/blueSky.swf", 'playNormal');
overSkin: Embed(source="../assets/blueSky.swf", 'playOver');
downSkin: Embed(source="../assets/blueSky.swf", 'playPressed');
}

Note that the playBtn is the name of the flex application object. Do the same thing for your applications. Then

apply the CSS to your flex application(main mxml file)

<mx:Style source="style/blueSky.css"/>

Now your application skin will be automatically changed.

Hope this will help you to apply the flash swf skinning objects to your flex application

thanks

__________________
Karpagarajan. R
Necessity is the mother of invention

behavior

A behavior is a combination of a trigger paired with an effect. A trigger is an action, much like an event, such as a mouse click on a component, a component getting focus, or a component becoming visible. An effect is a visible or audible change to the component occurring over a period of time, measured in milliseconds. Examples of effects are fading, resizing, or moving a component. You can define multiple effects for a single trigger.

Behaviors let you add animation, motion, and sound to your application in response to some user or programmatic action. For example, you can use behaviors to cause a dialog box to bounce slightly when it receives focus, or to play a sound when the user enters an invalid value. Flex uses a Cascading Style Sheet (CSS) to define behavior properties. You can reference the style properties as tag properties in MXML, within the <mx:Style> tag, or in an ActionScript function. For example, to configure the effect for the show trigger within an <mx:Image> tag, you use the following MXML syntax:

<mx:Image showEffect="Fade" source="first.jpeg" />

In this example, the Image control fades in over 500 milliseconds, the default time interval for a Fade effect.

thanks

__________________
Karpagarajan. R
Necessity is the mother of invention

About the Data Provider

Several Flex components, such as the DataGrid, Tree, and ComboBox controls, take input data from a data provider. A data provider is a collection of objects, similar to an array. For example, a Tree control reads data from the data provider to define the structure of the tree and any associated data assigned to each tree node.
The data provider creates a level of abstraction between Flex components and the data that you use to populate them. You can populate multiple components from the same data provider, switch data providers for a component at runtime, and modify the data provider so that changes are reflected by all components using the data provider.
You can think of the data provider as the model, and the Flex components as the view onto the
model. By separating the model from the view, you can change one without changing the other.

<!-- MyComboBox.mxml -->
<?xml version="1.0"?>
<mx:ComboBox xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:dataProvider>
<mx:Array>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
...
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>

Thanks

__________________
Karpagarajan. R
Necessity is the mother of invention

Using event listeners
An event listener listens for events that objects dispatch. Listeners can be objects, functions, or classes.You declare an event listener as an object and define the events that the listener listens for and subsequently handles. You then call the addEventListener() method to register an event with the listener.

Use the following syntax when defining an event listener:

var listenerName = new Object();
listenerName.eventName = function([eventObject]) {
// Handle the event. Optionally access the event object.
}
instanceName.addEventListener("eventName", listenerName);

You can call the addEventListener() method from any component instance. The syntax for the addEventListener() method is as follows:

componentInstance.addEventListener(eventName:Strin g, listenerName:Object);

The following example defines a new listener object called myListener. It then defines the click function of the listener, and registers the click event of the Button control with that listener. When the user clicks the button, Flex calls the myListener.click() function.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
initialize="createListener()" >
<mx:Script><![CDATA[
function createListener() {
var myListener = new Object();
myListener.click = function() {
// Handle the event.
}
b1.addEventListener("click", myListener);
}
]]></mx:Script>
<mx:Button label="Click Me" id="b1" />
<mx:TextArea id="forNotes" width="350" />
</mx:Application>

Thanks

__________________
Karpagarajan. R
Necessity is the mother of invention

Hi All,

here i have given the tips for doing rotation in flex using matrix method. Using matrix you can center rotate the image.

I have given the function for rotating the object from center.

override public function onTweenUpdate(value:Object):void
{
var val:Number= value as Number;
var rot:Number = (val - target.rotation) * Math.PI / 180;
var offsetX:Number = target.width / 2;
var offsetY:Number = target.height / 2;
var mat:Matrix = target.transform.matrix;
mat.translate(-offsetX,-offsetY);
mat.rotate(rot);
mat.translate(+offsetX,+offsetY);
target.transform.matrix = mat;
}

Note: In this is code target is image and val is number of angle image is rotated

thanks

__________________
Karpagarajan. R
Necessity is the mother of invention