BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Archive for the ‘Flex 4’ Category

Lot of excellent features with AIR 3.4

Posted by Shardul Singh Bartwal on July 17, 2012

Nice to see the AIR 3.4,excellent features are here for the ios development.
For the detail information please visit:-

http://labs.adobe.com/technologies/flashplatformruntimes/air3-4/

Enjoy Flexing………

Posted in ActionScript 3.0, AIR, Flex 4, Mobile Applications with Adobe AIR, Mobile Applications with Flex | Tagged: , | Leave a Comment »

Official Flex User Group Tour date announcement started by Adobe

Posted by Shardul Singh Bartwal on January 29, 2012

Its nice to see that adobe has started their International Flex User Group Tour
to discuss their last year ends announcements about Flex and Flash Platform.They
have announced the dates for the North America.

Schedule can be checked at:-

http://blogs.adobe.com/flex/2012/01/announcing-flex-user-group-2012-tour-north-america-dates.html

Waiting for the turn of Asia including India.

Enjoy Flexing…….
Shardul

Posted in ActionScript 3.0, AIR, Flex, Flex 3.0, Flex 4 | Leave a Comment »

Unit Testing in Flex 4 application Using Flash-Builder 4

Posted by Shardul Singh Bartwal on June 30, 2011

Inside the Flash builder 4 simply create a new Flex project,I am naming it as UnitTestingDemo.
1)I have created a class with name MyMath.as under the folder the utils,I am putting it inside the utils just for practice.
Which is as below:-

package utils
{
public class MyMath
{
public function MyMath()
{
}

public function add(num1 : Number,num2 : Number) : Number
{
return num1 + num2;
}

public function multiply(num1 : Number,num2 : Number) : Number
{
return num1 * num2;
}
}
}

2)Now go to File>New>Test Case Class

1

3)Now I am createing a class with name MyTestCase1. See below:-
2

Click on the Browser button.

4)It will look as :-
3
Select the MyMath and click OK as below:-

Now it should look like:-
4

click on Next button.You will see like below:-
5

Click Finish.

5)Now on the Package Explorer on the left you will MyTestCase1.as under the folder flexUnitTests.You will see there a method with name testAdd() inside this class.

Now I am going to check for my expected positive result from this method.As we know that 5+6=11.So I have written like this inside this method:-

var myMath : MyMath = new MyMath();
Assert.assertEquals(myMath.add(5,6),11);

6)Now Click on the MyTestCase1.as and select it on the left side Package Explorer.Right Mouse click on this.You will see there a menu with title ‘Execute Flex UnitTests’ click on this.If every thing goes well you will see like below in your browser:-

6

Except this inside flash builder you will see a tab with title ‘FlexUnit Results’ Explore this for detail investigation.

Enjoy Flexing………….. 🙂

Posted in ActionScript 3.0, Flex, Flex 4 | Leave a Comment »

Understanding and Uses of index.template.html in Flex Application

Posted by Shardul Singh Bartwal on February 20, 2011

I have seen multiple developers writing the required java-script code if required in their Application~Name.html (means the application html). And if they require using some java script or embedding related stuffs then they are doing in this file. Later on when they build their application the things get lost.
This is more important when you are going to create a flex application in which you have to not put your swf on any another .html or other page of any language by embedding. Means you are going to always use your .html file created by the flex. Then index.template.html is the place where you have to write all these things which you want to be persistent after every build.

Enjoy Flexing………..

Posted in Flex 3.0, Flex 4 | 1 Comment »

Mobile Application Development with Flex 4.5 ‘Burrito’

Posted by Shardul Singh Bartwal on February 13, 2011

After the release of the Flex Hero sdk I created andorid application many times with Adobe AIR.But this task was never so simple as it is with ‘Burrito’. With Burrito its totally on the clicks of Mouse instead of earlier command line based compilation etc. But now the thing are very very simple. Thanks to Adobe Flash Builder “Burrito” the new Flash builder version.
Now you are having the facility of crating the separate project type for the Mobile.In the File menu you can find a new type of projects i.e ‘Flex Mobile Project ’. Click on this and move ahead. You will also find Application settings for Automatic reorients and Fullscreen mode.
Also after creating your application you can directly launch the application on the device, or you can check with the preexisting list of the Different Device after selection. So you can get the proper idea that how your application will look like on any particular devices. Hence the thing are very simple and straight forward now enjoy creting mobile application with Flex without any extra efforts.
Download Flash Builder Burrito from :-

http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder_burrito

and enjoy mobile application development.
Please don’t forgot to explore
http://opensource.adobe.com/wiki/display/flexsdk/View+and+ViewNavigator
for the detail of the mobile application development using Flex.

Posted in Flex 4, Mobile Applications with Flex | Leave a Comment »

Using old Flex 3 Component’s Properties in Flex 4

Posted by Shardul Singh Bartwal on December 26, 2010

Some time we wants to create the flex 4 application which requires the
same set of properties etc which were there in flex 3 based component e.g.
backgroundAlpha with TextInput .In other words we can say that one wants
to update flex 3 application to flex 4 without using the spark or new flex 4
based components.The things are clear that in that case you are simply looking
for the all mxml library of the flex 3.Because the mxml based components of flex 4
are lacking many old properties of flex 3.If you are looking for those all properties
of flex 3 then to achieve it is very simple.Simply go to the properties of your project.
Then go to the ‘Flex Build Path’,there you will see tab with heading ‘Library Path’,select
the Radio button ‘Mx only’ and click OK.You have done it,you will get all the properties
of all flex 3 based components in flex 4,e.g. ‘backgroundAlpha’ of ””.
Hope you will like this………

Enjoy Flexing……..

Posted in ActionScript 3.0, Flex 4 | Tagged: , , , , , , , , , , , , , , , , , , , , | 2 Comments »

Datagrid with multiLine variable height text Item Renderer in Flex

Posted by Shardul Singh Bartwal on December 15, 2010

I was trying to get the multiline text inside the item renderer of a column and I tried a lot for this with multiple controls like TextInput, Textarea, Label etc by using the item render but was not getting the proper output.The thing which I was getting was that every item rendererer was taking the same height which was for the maximum height item renderer,and was not based on the content inside it.
The reason was only that earlier I was putting my these controls inside a Container and
there was sizing related issue for the container as I was not able to make different item renderes of different heights depending upon the text of the field inside it. But later I created my item render directly from the Text component and got the perfect result.

Main Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF" 
	layout="vertical">
	<mx:Script>
		 <![CDATA[
       	import mx.controls.Alert;
           import mx.collections.ArrayCollection;
           
           [Bindable]
           public var arrayCollection:ArrayCollection = new ArrayCollection([
               {indexNo : '1',description:'Shardul just trying for multiline text item Renderer'},
               {indexNo : '2',description:'This text should appear on more then one line of text and it will definetly appear lets try.'},
               {indexNo : '3',description:'Cool its working fine without any prolbem hope you all will like this.'},
           ]);
           
       ]]>
	</mx:Script>   

   
 	 <mx:DataGrid width="300" height="200"
                variableRowHeight="true"
                dataProvider="{arrayCollection}">
        <mx:columns>
        	<mx:DataGridColumn headerText="IndexNo" dataField="indexNo"/>
            <mx:DataGridColumn headerText="Label Check" dataField="description" itemRenderer="VariableHeightItemRenderer"/>
        </mx:columns>
    </mx:DataGrid>
    
</mx:Application>

VariableHeightItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml"  text="{data.description}"
	 buttonMode="true" useHandCursor="true" mouseChildren="false" >
	<mx:Script>
		<![CDATA[
			override public function set data(value:Object):void
			{
				if(value != null)
				super.data = value;
			}
		]]>
	</mx:Script>
</mx:Text>

Hope you will enjoy this.
Keep rocking………..Happy flexing….

Posted in ActionScript 3.0, Flash Builder 4.6, Flex, Flex 4 | Tagged: , , , , , , , , , , , , , , , , , , , , | 2 Comments »

Byte Array to BitmapData and BitmapData to Byte array in Flex 3.

Posted by Shardul Singh Bartwal on October 14, 2010

In the code below I am initially getting the byte array of my canvas with the increased size. Converting it into Bitmap data.And again converting that Bitmap data into ByteArray. So that you can use the particular step which one you require.

</pre>
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
import mx.controls.Alert;

import mx.graphics.ImageSnapshot;
import mx.graphics.codec.JPEGEncoder;

private var imageSnapshot:ImageSnapshot
private function inLargeImage():void
{
var jPEGEncoder:JPEGEncoder = new JPEGEncoder(90);
imageSnapshot = ImageSnapshot.captureImage(imgCanvas,500, jPEGEncoder,true);

//imageSnapshot.data is ByteArray.
byteArrayToBitmapData(imageSnapshot.data);
}

private var loader : Loader = new Loader();
private function byteArrayToBitmapData(byteArray : ByteArray):void
{
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData);
loader.loadBytes(byteArray);
}
private var bitmapData:BitmapData
private function getBitmapData(e:Event):void {
var content:* = loader.content;
bitmapData = new BitmapData(content.width,content.height,true,0x00000000);

var matrix:Matrix = new Matrix();
bitmapData.draw(content, matrix,null,null,null,true);
targetImage.source = new Bitmap( bitmapData );

}

private function saveInLargeImage() : void
{
if(bitmapData == null)
{
Alert.show("InLarge Image first,and then try again.")
return;
}

var encoder:JPEGEncoder = new JPEGEncoder(90);
var byteArray:ByteArray = encoder.encode(bitmapData);
var fr : FileReference= new FileReference();
fr.save(byteArray,'abcd.jpg');
}

]]>
</mx:Script>

<mx:VBox horizontalAlign="center" verticalAlign="middle" width="100%" height="100%">
<mx:VBox id="imgCanvas" width="600" height="450" horizontalAlign="center"
verticalAlign="middle" backgroundColor="0x0000FF">
<mx:Image source="image1.jpg"/>
</mx:VBox>

<mx:Image id="targetImage"/>

<mx:Button click="inLargeImage()" label="Inlarge Image"/>
<mx:Button label="Save To Your Computer" click="saveInLargeImage()"/>
</mx:VBox>

</mx:Application>
<pre>

Hope you will enjoy this……..

Posted in ActionScript 3.0, AIR, Flash Builder 4.6, Flex, Flex 3.0, Flex 4, Uncategorized | Tagged: , , , , , , , , , , , , , , , , , , , , | 2 Comments »

Using Background image in flex 4 components

Posted by Shardul Singh Bartwal on September 5, 2010

Flex 4 components are not having any property like backgroundImage.
Now showing image in the background of any component like canvas, vbox etc is not so simple as it was in flex 3.0.
Below is the example for achieving this.

Main Application

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
>

<fx:Script>
<![CDATA[
protected function btn_click(evt:MouseEvent):void {
this.setStyle("skinClass", MySkinClass);
}

]]>
</fx:Script>

<s:Button label="Change Back Ground Image" click="btn_click(event);"/>

</s:Application>

MySkinClass.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
[HostComponent("spark.components.supportClasses.SkinnableComponent")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>

<s:BitmapImage source="@Embed('image1.jpg')"  smooth="true" left="0" right="0"  top="0" bottom="0"  />

</s:Skin>

enjoy flexing……..


Posted in Flex 4 | 3 Comments »

Saving Image to File System Using Flex 4

Posted by Shardul Singh Bartwal on July 4, 2010

It is possible for us to saving any image to our computer from flex application( without any server code).Below is
the demo application.Please not that this is the feature of the flash player 10. So It will not work if your flash player is
older than flash player 10.


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <fx:Script>
 <![CDATA[

 import mx.graphics.ImageSnapshot;
 import mx.graphics.codec.JPEGEncoder;
 private function saveImageToFileSystem():void
 {
 var jPEGEncoder:JPEGEncoder = new JPEGEncoder(500);
 var imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(imgCanvas, 0, jPEGEncoder);
 var fileReference:FileReference = new FileReference();
 fileReference.save(imageSnapshot.data, "img123.jpg");
 }
 ]]>
 </fx:Script>

<mx:VBox horizontalAlign="center" verticalAlign="middle">
<mx:Canvas id="imgCanvas">
<mx:Image source="images/image1.jpg"/>
</mx:Canvas>
 <s:Button click="saveImageToFileSystem()" label="Save Image"/>
</mx:VBox>


</s:Application>




Posted in Flex, Flex 4 | 4 Comments »