Dynamically creating and adding components in your application

Hello Everyone!

This post is mostly for the people who are new to Adobe Flex and have only been working with mxml till now.
Today , we would be talking about how to create and add visual elements , like buttons, panels, html components etc onto you application and how to handle clicks, double clicks in short any kind of mouse events.

Creating Components

Every component in mxml file is actually a class in itself.So all you really need to do is create a new object of this class , and every property ,event , and method of the component you see in mxml can be accessed and used using ActionScript 3.0.

Lets say we want to create a button:
so the code for the same is as following:

var myButton:Button = new Button();//creating a new object
myButton.x=10;//setting the x of the button
myButton.y=15;//setting the y coordinate of the button
myButton.label="I am a button";//the text that appears on the button
myButton.addEventListener(MouseEvent.CLICK,onClick);
//above line is almost like

So you see how easy was it to create and modify the attributes of the button.
Lets go on to the step where we would add it to the application.

Adding the button to the application UI

You can think of the whole as one big class where everything stays.This class has a default place called stage where it adds all the elements to be shown to the user as a part of the UI.
So all you need now is to instruct this class to add the newly created button onto its stage.To do this there is a function called addChild();

So what you would be doing is in the script tag of the mxml you would be using this function and pass the button as a parameter to this function , to finally add the button on the UI.
So the code now will look something like:


[{CData...


public function init():void
{
//code here to initiliaze the button with id myButton.

this.addChild(myButton);//this line is like the final mark saying that yes I want the button to be shown to the user on the specified x and y coordinates

}

{]


Passing the stage to other classes
Using the above code you can add the button to the stage only in the same class as the windowed application.What if you want to add the button to the stage in some other class?
For that you can pass the stage to other classes and in those classes add the button.
Lets say we have a class called MyClass which has the following constructor

public function MyClass(stage:Object):void
{
//code to initialize the button
stage.addChild(myButton);
}

and in the script tag you would do

var myObj:MyClass=new MyClass(this);

The above code is passing the object of WindowedApplication to the object of MyClass and in the constructor , a new button is being created and being added to the WindwedApplication.

With some more experiments you can try some pretty cool stuff by passing the stage and adding or removing elements form the stage from other classes.

Keep Flexing Ppl!

Editing properties of a component using actionscript

I am sure people have wanted to use /edit properties of a display object using AS 3.
Let me assure you guys that you are minutes away from doing just that, and its really easy and intuitive.

There are two set of properties you would see in any object:
1: Those which are under the section properties in the API documentation
2: Those which are under style under the style section in the API reference

For the ones which are under properties a simple
onjectID.proprtyname=newvalue;
will suffice.

But for the styles, you need to do the following:
objectID.setStyle("propertyname","newvalue");

For example:

Lets say we have a Panel by the ID mypanel , then we can change the properties like
width, height, alpha and all the attributes under properties section using mypanel.width=500, mypanel.height=800, mypanel.alpha=0.4 etc.
But lets say you need to change the backgroundColor, paddingTop, paddingBotton, etc then you need to use commands like mypanel.setStyle("backgroundColor","ff0000") then the backgroundColor of the panel would change to red, you can use the command as shown above for all the possible styles given in the styles section.

The code below shows you an example:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button x="195" y="218" label="Button" click="changeWidth()"/>
<mx:Panel x="10" id="panel" y="10" width="250" height="200" layout="absolute">
</mx:Panel>
<mx:Script>
<![CDATA[


public function changeWidth():void
{

this.panel.setStyle("backgroundColor","ff0000");
this.panel.width=500;
}

]]>
</mx:Script>
</mx:WindowedApplication>


I hope this tutorial was useful to ppl.
Awaiting comments.

Fetching data from the microhpone and recording sound.

Hello All,

This tutorial will b short and maybe not fairly complete , but i will be talkin about the major functions and datastructures you would need to fetch data from the microhpne and store it on your system.

The following is ta brief code snippet:

protected function startRecording():void
{
microphone = Microphone.getMicrophone();
microphone.rate = 44;
microphone.gain = 100;
soundClip = new ByteArray();
microphone.addEventListener(SampleDataEvent.SAMPLE_DATA,
microphone_sampleDataHandler);
}

The line microphone = Microphone.getMicrophone(); gets an object by the name microphone which allows you to handle and control the data from the microphone attached on your system.This will return a null if no microphone is detected on your system.The rate , is the rate of data fetch and the gain is the amount of amplification to the sound input.The soundClip object is simply put an array.

The method microphone.addEventListener(SampleDataEvent.SAMPLE_DATA,
microphone_sampleDataHandler);
is the major function for fetching data from the microphone, this says that whenever the sampling is done by the soundcard and the data is being fed to the OS, an event is triggered, and the function microphone_sampleDataHandler() is called.

protected function microphone_sampleDataHandler(event:SampleDataEvent):void
{
while(event.data.bytesAvailable)
{
var sample:Number = event.data.readFloat();
soundClip.writeFloat(sample);
}
}

In the function above , the data being fetched from sample , i.e event.data.readFloat() is being written into the array.
protected function stopRecording():void
{
microphone.removeEventListener(SampleDataEvent.SAMPLE_DATA,
microphone_sampleDataHandler);
saveNote();
subject.text = "";
}

In the function saveNote() you can write the soundClip array into a file, or a database, or any kind of saving you need to do.


Lets hope this tute was helpfule.

Keep Flexing!

Using the Open document API in AIR 2.0

I am back as promised ppl.Within 48 hours of my first tutorial in a series of many to come.
Today we will be talking about how to launch a file with the default appliacation using AIR 2.0 SDK.
Now I am pretty sure that you guys are well aware of how rich and powerful this functionality is.For starters ,you can create a full fledged interoperable file browser.You can let your imagination go wild.;)
So lets get to the code:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
creationComplete="windowedapplication1_creationCompleteHandler(event)"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import flash.events.Event;

import mx.events.FlexEvent;

public var file:File=new File();


protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
this.file.browseForOpen("Selec any application you want to run");
this.file.addEventListener(Event.SELECT,runFile);
}

public function runFile(event:Event):void
{
this.file.openWithDefaultApplication();
}


]]>
</fx:Script>
</s:WindowedApplication>


I am pretty sure that the code is self explanatory to you even if you know the meager basics of using Flex.For the people who aren't so used to yet the following is the description:
The function windowedapplication1_creationCompleteHandler(event:FlexEvent) is called whenever the application is started.In this function the application will open a browser window for a user to select a file.

The function runFile(event:Event) is called whenever the user selects the file from the broswer window.We instructed the application to listen for this event using the code his.file.addEventListener(Event.SELECT,runFile);
The moment the file is selected the runFile function is called in which we have called the function file.openWithDefaultApplication();
I am sure I do not need to explain what the function will do.

So try running this code on your new flash builder.

Keep Flexing!

Stay tuned for next tutorial on FilePromise objects in AIR 2.0 which allows the usage of remote files as if its on the local file system.