Next Generation Web Applications

Custom Alert in Flex 3

osurikiran — Wed, 18 Nov 2009 11:33:41 +0000

Usually ‘Alert’ can`t have its default skin class, If you extend ProgrammaticSkin class and add this skin to Alert, It’s lose its original dimensions, because Alert, TitleWindow, Panel , components default skin is PanelSkin class. The solution is extending PanelSkin and applying it as a ‘border-skin’ in style declaration. The mx.skins.halo package contains PanelSkin Class which will be extended and draw our own skin programmatically. Here is custom skin defined in action script 3.0 ‘ CustomeAlertSkin.as’ .

package

{

import mx.skins.halo.PanelSkin;

public class CustomeAlertSkin extends PanelSkin

{

public function CustomeAlert()

{

super();

}

override protected function updateDisplayList(unscaledWidth:Number, scaledHeight:Number):void

{

super.updateDisplayList(unscaledWidth,scaledHeight );

graphics.clear();

graphics.lineStyle(2,0xFFFF00,1);

graphics.beginFill(0x80aad4,1);

graphics.drawRoundRect(0,0,unscaledWidth, unscaledHeight,50, 50);

graphics.endFill();

}

}

}

Defining CustomeAlertSkin in style declaration

 Alert
    {
        border-skin : ClassReference("CustomeAlert");
        color : #FFFFFF;
    }

Now in application define a Alert component and test it. you find different Alert popup,

Flex SharedObject

osurikiran — Sat, 24 Oct 2009 06:03:03 +0000

Flex is client side application that runs on the browser . Usually Every server side technologies store client related and session related data in user computer known as cookies . Like other server programs flex also allows to store data in user computer as (.sol) files. Known as SharedObject. These files you can find in your file system the path is

C:\Documents and Settings\{user name}\Application Data\Macromedia\Flash Player\#SharedObjects\

The file is not editable , can be deleted. it is a encrypted file format.

Flex 4 Features

osurikiran — Tue, 20 Oct 2009 04:18:43 +0000

Adobe recently released beta version of Flex4 with new features and developer friendly tools. Wich enables fast and automated features . Some of the new features add-on are.

Integrated with Adobe Catalyst

The Flex IDE is integrated with the Adobe Catalyst. witch is formally known as Adobe Thermo. Which inter operates with adobe products such as Photoshop, CS,Illustrator, etc.. and generates the corresponding mxml code.

The Graphic element generated in Adobe Creative Suite can directly be used in Flex IDE using the Catalyst. Supports to draw graphic objects , It’s behavior with respect to states and events and import then into IDE . With this design, art and grahic oriented code need not to be type very much.

Text Layout Framework

It is open source framework for rich text rendering. It has capable of rendering text in columns, Text flow control, support for multi languages including some Indian languages , Vertical text flow, Right to Left text flow, Text wrapping around image and inserting image in textcontrol, etc.. It also support text to export to xml, html and plain text formats and importing too. TLF can also be used in Flex 3.3 and above , AIR 1.5 . know more about it

Support for FXG

FXG is a XML based graphics interchange format. FXG contains hight level graphics primitives enables to create, combine, group, modify, transform basic vector and bitmap graphics.One of the major benefits of FXG is that it will make it much easier to build visual tooling around working with and designing Flex applications (such as Thermo and all of the Adobe CS tools).

Designers can create graphics using tools such as Adobe Photoshop CS4, Illustrator CS4 and Fireworks CS4 and export them into the FXG format. You can use tools such as Flash Builder with the FXG file to develop rich Internet applications. These applications run in a web browser using the Flash Player or on the desktop as an AIR application.

Component Architecture:

In flex4 new components are introduced known as ‘Spark Components’ .The ‘Spark’ components are implemented over the ‘Halo’ components. In Flex 3 component architecture is totaly besed on ‘Halo Components’, But Flex 4 allows to use both Spark and Halo components. In addition FXG componets are supported the xml assembly prefix are used to differentiate the components kind.

like, ‘mx’ for Halo, ‘s’ for Spark and ‘fxg’ for FXG coponents.

Halo ()

Spark ()

Fxg ()

MXML 2009 Languages

The MXML 2006 wich is used in Flex3 was extended to support for spark and FXG components . The syntaxt and XML assembly were changed in MXML 2009. Were you should specify all declarations in on seperate block

such as . All nonvisual components should be declared in , like HTTPService, WebServices, URLRequest, URLLoader, XML, Model, ArrayColletion, ect

Flex 4 Language changes

Halo – xmlns:mx=”library://ns.adobe.com/flex/halo”

Included in previous releases of Flex

Spark – xmlns:s=”library://ns.adobe.com/flex/spark”>

New architecture for skinning and have other advantages/components

Flash XML Graphics – for workflow hand off between Flash

Catalyst and Flash Builder 4

xmlns:fx=http://ns.adobe.com/mxml/2009

Support for Flash Catalyst (Thermo) Exports

Adobe Flex and JavaScript Interaction

osurikiran — Mon, 19 Oct 2009 13:54:00 +0000

The Flex Application can communicate with the JavaScript running on the browser asynchronously. The Flex can call a function in JavaScript meanwhile JavaScript can call a function in Flex. Let us see how it can be achieved.

The Action Script interface ‘ExternalInterface’ provides methods to communicate with the JavaScript

In your flex IDE create a new flex project,

Case 1: Calling JavaScript form Flex

JavaScript side:

Under the project root directory some subdirectories are exist.

Such as

bin-debug
html-template
libs
src

Now open the ‘html-template’ subdirectory under this open the ‘index.template.html’ file to edit. Within tags define a function that that is called from the Flex application.

Flex side:

Now open ’ .mxml’ file type the code below that calls the function in JavaScript.

import mx.controls.Alert;

import flash.external.ExternalInterface;

private function accessJavaScipt():void

{

if(ExternalInterface.available)

{

ExternalInterface.call("jsFunction",”Hii a message to you”);

}

}

]]>

Case 2: Calling Flex from JavaScript

Flex side:

The Action Script API ExternalInterface interface allows to register call back functions that are called from the JavaScript. Define all callback functions that are called from the javascript in flex application creationComplete event.

private function creationCompleteHandler():void

{

if(ExternalInterface.available)

{

ExternalInterface.addCallback(“flexFunction”, javascriptEventsHandler);

}

}

private function javascriptEventsHandler():void

{

Alert.show(“Flex : Hi JavaScript”);

}

JavaScript Side

open the index.template.html file and define a html button tag as below.

In script block define handler function ‘callFlex()’ like below