Friday, February 29, 2008

Flex cookbook beta - Chromeless AIR Application (Apple Shaped Application)

Flex cookbook beta - Chromeless AIR Application (Apple Shaped Application)

Problem Summary Many developers have expressed interest in how to create applications which do not have system chrome. It is a bit trickier than it would appear. This simple tutorial will build an application that looks like an apple and add AS3 code to allow the app to be moved and closed.

Solution Summary A chromeless (no system window) application that demonstrates how to use custom chrome for Flex Builder 3 Beta 3.

Explanation To make this project, you will need to use a *.gif file with a transparency. YOu can use the apple in the downloadable file below.

1. Make a new Flex project (type AIR).

2. In the /src folder, place your transparent GIF file.

3. in the first line of MXML, add the following attributes in bold below:


4. In the /src folder, open the XML file named "-app.xml" and modify the two lines of code below:


changed to:
none

and:


changed to:
true

Do this by removing the commenting characters.


5. Save and close the application descriptor file you modified in step 4.

6. Add the following style block to your project under the first line:


Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}


Note that without this, you would still have the AIR chrome.

7. Add the main panel and rest of the visual elements of the application. The code should now look like this:




Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}


source="assets/apple.gif" scaleContent="true" autoLoad="true"/>
fontFamily="Verdana" fontWeight="bold" fontSize="20" textAlign="center"/>



8. You can now build your application. Note that you cannot move it or close it by interacting with it. To close it, you have to right click or ctrl click on the dock icon and select "quit".

9. Add the new lines of code (in bold) to add these behaviors.




Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}



import flash.display.Bitmap;
import mx.events.CloseEvent;

public function init():void {
// Move the app when the panelis dragged
mainPanel.addEventListener( MouseEvent.MOUSE_DOWN, startMove );

}
public function startMove(event:MouseEvent):void {
stage.nativeWindow.startMove();
}
]]>

source="assets/apple.gif" scaleContent="true" autoLoad="true"/>
height="21"/>
fontFamily="Verdana" fontWeight="bold" fontSize="20" textAlign="center"/>



10. Run your application! Voila!

Flex cookbook beta - Taking screenshots of the display list in Flex 3 using the static ImageSnapshot.captureBitmapData() method

Flex cookbook beta - Taking screenshots of the display list in Flex 3 using the static ImageSnapshot.captureBitmapData() method

just looking for this from a long time .....

here i got it
Problem Summary
You want to take a snapshot of a Flex container or control at runtime and save it as a BitmapData object.

Solution Summary
The following example shows how you can take a snapshot of an item on the display list using the static ImageSnapshot.captureBitmapData() method, which returns a BitmapData object, as seen in the following snippet: var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(source); swfLoader.source = new Bitmap(imageBitmapData);

Explanation
In the following example, clicking the “Take snapshot of DataGrid” button uses the static ImageSnapshot.captureBitmapData() method to return a BitmapData object which in turn is converted into a Bitmap object that is loaded into a SWFLoader control:




import mx.graphics.ImageSnapshot;



private function takeSnapshot(source:IBitmapDrawable):void {

var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(source);

swfLoader.source = new Bitmap(imageBitmapData);

}

]]>


























click="takeSnapshot(dataGrid);" />





















NOTE: The ability to load a ByteArray object directly into a SWFLoader control was added in Flex 3 build 187814.

For more information, see http://blog.flexexamples.com/2007/11/17/taking-screenshots-in-flex-3-using-the-imagesnapshotcapturebitmapdata-method/ and http://blog.flexexamples.com/tag/imagesnapshot/.

Flex cookbook beta - How to use BlazeDS Remoting

Flex cookbook beta - How to use BlazeDS Remoting

Problem Summary You need to improve your data transfer performance. You also want to be able to directly invoke methods of Java objects deployed in your application server.

Solution Summary Using the BlazeDS RemoteObject, you can directly invoke methods of Java objects deployed in your application server, and consume the return value. The return value can be a value of a primitive data type, an object, a collection of objects, an object graph, etc.

Freelance