Packaging a native extension (Example batch file with all the options necessary to make one)

There has been a lot of questions and confusion on actually writing your batch file to compile/package your ANE file. Well i have decided to create a prototype of the batch file and share it here on my blog.

Your .bat file contents are as below.

set adt_directory=C:Program FilesAdobeAdobe Flash Builder 4.6sdks4.6.0bin
set root_directory=C:Projects
set library_directory=%root_directory%NativeExtLibrary
set native_directory=%root_directory%NativeExt
set signing_options=-storetype pkcs12 -keystore "C:Projectsp12key.p12" -tsa none
set dest_ANE=%root_directory%nativeExtPackagingANE.ane
set extension_XML=%library_directory%srcextension.xml
set library_SWC=%library_directory%binNativeExtLibrary.swc
set SWF_directory=%library_directory%binNativeExtLibrary
"%adt_directory%"/adt -package %signing_options% -target ane "%dest_ANE%" "%extension_XML%" -swc "%library_SWC%" -platform Android-ARM -C "%SWF_directory%" library.swf -C "%native_directory%" NativeExt.jar

Below explaining the variables in your bat file.

root_directory – root folder of your flex projects.
library_directory – location of your Native extension wrapper Flex library project.
native_directory – location of your native extension project(for Android-ARM it will be android project location).
signing_options – signed certificate for your extension and its options (-tsa none option to discard timestamp).
dest_ANE – location to create your ane file.
extension_XML – location of Native extension wrapper Flex library project extension descriptor file.
library_SWC – location of your Native extension wrapper Flex library project compilation file.
SWF_directory – location of your library.swf file.
Android-ARM – packaging ane for Android

Image Cropping in Flex

Even though there are many posts on this particular topic still there are many ???, then i thought may be i can write about it, so lets get started.

Lets do things in steps.

1. Load Image in to Flex App
2. Convert it to Bitmap and BitmapData objects.
3. Crop Image using BitmapData object

1.Load Image in to Flex App

private var imageLoader:Loader = new Loader();

private function fnInit():void
{
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImageComplete);
imageLoader.load(new URLRequest(“assets/flower.png”));
}

2.Convert it to Bitmap and BitmapData objects

private var bitmapImage:Bitmap;
private var bitmapDataImage:BitmapData;

//Event.COMPLETE eventHandler for Loader

private function loadImageComplete(e:Event):void
{
bitmapImage = Bitmap(e.target.loader.content);
bitmapDataImage = Bitmap(bitmapImage).bitmapData.clone();
}

3.Crop Image using BitmapData object

Sorting Date’s on ArrayCollection in Flex

First things first, read about the mx.collections.Sort Class before going in to the code below.

About the Post,suppose i have a AC[ArrayCollection] like below;

[Bindable]
private var arrClldetails:ArrayCollection = new ArrayCollection([
{Fname:”Kranthi”, Lname:”Kata”, dob:”21 Sep 79″},
{Fname:”Vasanth”, Lname:”Lola”, dob:”11 Jun 80″},
{Fname:”Manoj”, Lname:”Pati”, dob:”16 July 81″},
{Fname:”John McClain”, Lname:”Mela”, dob:”15 Feb 72″},
{Fname:”Ross”, Lname:”Geller”, dob:”02 Jan 74″},
{Fname:”Chandler”, Lname:”Bing”, dob:”18 Oct 76″}
]);

Now i want to Sort the “dob” Date field in the AC.,so for this i need to
write a compareFunction for Sort which in turn is applied to the AC like below,

Tracing Childrens of a Container in Flex

A Container in Flex is one that controls the layout characteristics of child components and which extends the Container base Class like the famous Panel,Canvas,ViewStack,TabNavigator,…

Container contains childrens or Sub Components or Sub Containers[Container in a Container], and so on.Childrens/child components in a Container are all are created using the creationPolicy setting of that Container.In case of sub containers, outer Containers are created before the inner one’s.And creation can be altered by setting the creationPolicy.

So now we know some basics of Container its time for the Topic.

Tracing..
We can manage the child components of a Container by using its predefined methods,like below..
1.Container.getChildren() – returns an Array of child components.
var arr:Array=Container.getChildren();
2.Container.getChildAt(index:int) – returns an instance of the DisplayObject at that creation index,which we can cast to required.
var obj:Object=Container.getChildAt(0);
3.Container.removeChildAt(index:int) – removes child at that creation index
var disObj:DisplayObject=Container.removeChildAt(0);
4.Container.removeAllChildren() – as the name specifies
….so on

In the below download code i have implemented all these methods with a Panel.Enjoy the Post.

Download code.

Assign a menu item(on right click menu list) to DataGrid control in Flex.

OK, First thing to do, read about flash.ui.ContextMenu Class.
Some points..
->In SWF content, any object that inherits from InteractiveObject can be given a context menu by assigning a menu object to its contextMenu property.
->In Flex, only top-level components in the application can have context menus.
->Flash Player has three types of context menus:standard menu ,the edit menu and an error menu.Only the standard and edit menus can be modified with the ContextMenu class.
…
so first create a ContextMenu for the DataGrid like below..

private function fnDgContextMenu():ContextMenu
{
var newContextMenu:ContextMenu = new ContextMenu();
var newContextMenuItem:ContextMenuItem=new ContextMenuItem(“Sort”);
newContextMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,fnSortSelect);
newContextMenu.customItems.push(newContextMenuItem);
return newContextMenu;
}

now assign it to DataGrid.
dg.contextMenu=fnDgContextMenu(); // here dg is the “id” of the DataGrid.check the code below.

[showmyads]

Download code.

Enjoy the post.

Tips on MenuBar control and its dataProvider in flex

Suppose we have a MenuBar and its dataPovider as below.

<mx:MenuBar id=”myMenu” dataProvider=”{xmlLst}” labelField=”@label” itemClick=”fnItemClick(event)” />

<mx:XMLList id=”xmlLst”>
        <root label=”year”>
            <menuitem label=”2001″ enabled=”true”/>
            <menuitem label=”2002″ enabled=”false”/>
            <menuitem label=”2003″ enabled=”true”/>
            <menuitem label=”2004″ enabled=”false”/>
            <menuitem label=”2005″ enabled=”true”/>
        </root>
</mx:XMLList>

and the itemClick handler below
private function fnItemClick(event:MenuEvent):void
{
//code goes here on itemClick
}
Desc: The MenuBar displays the XMLList dataProvider with all the years as menuitems[because labelField=”@label”], and has a handler for itemClick “fnItemClick”.

Now the tips..

1.To set enabled=true for the year 2002.
xmlLst.menuitem.(@label==”2002″).@enabled=true;
//this is like traversing the XMLList.
//this will reflect changes both to XMLList and MenuBar
2.To set for all enabled=true.
//here we got to traverse the XMLList and change the data.
for each(var xml:XML in xmlLst.menuitem)
{
 xml.@enabled=true; 
}
3.To set enabled=false for selected Item.
//in the itemClick handler use the below code
event.item.@enabled=false;

Things to remember:- while accessing attributes of XML we got to use ‘@’ before the attribute name, not neccessary if it is an Object.

Download code.

Note:- Examples or code you have seen on this blog so far are related to Flex 3 SDK.

Custom Component: Indicator Label for download

As you all know that i made a custom component called Indicator Label from this post.Now its time for me to release the component, so follow this link and fill out the form and then i will send you the component through mail.I need this information only to keep track of my downloads, nothing less and nothing more.

Enjoy the component.

Tip on Formatting dates with the DateField Control in Flex.

We can specify a function to format the date displayed in the text field using labelFunction property of the DateField control. Function will take date and returns the string representation of the date, and in the function we can use the DateFormatter Class to format the date to our needs.

Now to parse the entered date as text we specify a parse function using the parseFunction property of the DateField control. Function takes two arguments, entered text and the formatString and returns a date object typically performing the reverse of the label function. DateField uses a default parse function DateField.stringToDate, but we can specify a custom one. If you don’t want to edit the DateField control then simply specify null to the property.

Example:

For example to represent dates in the editable DateField control in DD MMM YY [10 Feb 09] format, we make use of lableFunction, parseFunction properties of the DateField Control.

Solution:

Using two DateFormatters

<mx:DateFormatter id=”dtf1″ formatString=”DD MMM YY”/>
<mx:DateFormatter id=”dtf2″ formatString=”DD/MM/YY”/>

//the label function

Display ToolTips for Combobox List items in Flex.

Note:Hello Readers, This post has some Bugs,so i will solve them ASAP and will make an update.My apologies for a buggy post.Meanwhile if anyone of you find a trick or tip please share them on the post.I appreciate for your feedback.Having said that, i am not disabling the code and demo, you can still access them and contribute.Thanks.

One of the readers asked this question, Is it possible to show ToolTips for the Combobox List items [on mouse over on each item i would like to show a ToolTip]?, and my answer was “YES”.And this post tells about that.

The First thing we got to remember here is the ToolTipManager Class and its methods.Basic information on how to create tooltips using this Class.

Drag and Drop: From List Control to TextInput(Non-List) Control in Flex.

The list based controls in Flex has the built in support for the drag and drop.So to support the drag and drop operations for the non-list based components(here TextInput) we must handle the drag and drop events.
Go through the classes involded in the drag and drop operations,drag and drop events for a drag initiator,drag and drop events for a drop target to explicitly handle the drag and drop and to fully understand the drag and drop operations functionality.

For now enjoy the below demo and code.

 Run demo.

Download source code.

Multiple Selected Items in a Tree Control in Flex.

To Access the multiple selected items in a Tree control we got to enable the multiple selection in the Tree control like below.

allowMultipleSelection=”true”

Then we can access the selectedItems of the Tree control with the property “selectedItems” like below code.

for(var i:int=0;i<tree.selectedItems.length;i++)
{
trace(tree.selectedItems[i].@NAME);
}

Here tree is the id of the Tree control and NAME is the attribute name of the dataProvider of the Tree control.Check the code for clearance.

Run Demo App.

Download Code Example.

Using Regular Expressions to Filter Arraycollections.

Consider we have a requirement like filtering the DataGrid based on some inputs.  Like consider I have a DataGrid and have a DataGridColumn which contains Places list (Bangalore,Delhi,Tirupathi,Chennai…ets).Now that I want to filter this DataGrid upon Places DataGridColumn, based on some TextIput entry.so how am I gonna do this ??.

Here I will show two cases of filtering using the ArrayCollection with RegularExpressions.

I have a ArrayCollection With the Data Like below.

<mx:ArrayCollection id=”prods”>
<mx:Object Artist=”Pavement object killing” Price=”11.99″
Album=”Slanted and Enchanted” />
<mx:Object Artist=”kavement regular expression”
Album=”Brighten the Corners” Price=”11.99″ />
<mx:Object Artist=”Pavement hrule radio” Price=”11.99″
Album=”Slanted and Enchanted” />
<mx:Object Artist=”kavement”
Album=”Brighten the Corners” Price=”11.99″ />
<mx:Object Artist=”Pavement button checkbox” Price=”11.99″
Album=”Slanted and Enchanted” />
<mx:Object Artist=”kavement may be this is”
Album=”Brighten the Corners” Price=”11.99″ />
</mx:ArrayCollection>

Now I want to filter the Artist Column. And  I want 2 cases for filtering or conditions for filtering.

Case 1: The entered text should occur any where in the column data.

For this my Regular Expression would be like below.

new RegExp(sinput.text,”i”)

Here sinput is the id of my TextInput.

Case 2: The column data should start with the entered text.

For this my Regular Expression would be like below.

var strPatt:String=”^”+sinput.text+””;
var newRegEx:RegExp=new RegExp(strPatt,”i”);

Here sinput is the id of my TextInput.

Explore RegularExpression to learn more about them or how to write one.And the best source would the Help from the Flex Builder. And Explore about writing Filter Functions For Arraycollection.

Now Enjoy this Demo Application.

Comment For queries or Code. Enoy the Post. 🙂

Updated:

DownLoad source code

Basic info about “degrafa”.[pdf download]

If you can atleast go through this pdf file about degrafa Frameworks.Then you will know that they rock.

Download pdf

Generate XML Data dynamically in Flex :: Reloaded

Few months back i made a post on this “Generate XML Data dynamically in Flex” and it needed some improvements. so here i am with the improvements. [ As few readers suggested ]

First and simple AIR App for Download.

Few months back i have made a post relating to my first simple AIR App. And the download to that AIR App is here.

Description About AIR App:

Its a window App with simple three controls. A Textinput , A Button and a Html Component. The TextInput takes the text to search and on press of search Button it seands the search text to the GooGle server and gets the result and displays it on the below Html component. The use of this is ??, you can figure it out as per the need.

finally DownLoad it here.

Enjoy my first Simple AIR App. 🙂