Mjcprasad's Blog

IFrame Demo

•July 29, 2009 • Leave a Comment

http://rrao.host.adobe.com/kannan/FlexiFrame/IFrameDemo.html

http://rrao.host.adobe.com/kannan/FlexiFrame/srcview/index.html

Posted in Flex

RollOver Image

•July 24, 2009 • Leave a Comment

Main.MXML

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:com=”com.*”>
<com:RollOverComp UpImage=”@Embed(source=’assets/UpImage.png’)” OverImage=”@Embed(source=’assets/OverImage.png’)”
ImageLink=”http://www.google.com”/>
</mx:Application>

RollOverComp.MXML

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
creationComplete=”init()” creationPolicy=”all” >
<mx:Script>
<![CDATA[
public var UpImage:Class;
public var OverImage:Class;
public var ImageLink:String;
private function init():void{
up.source = UpImage;
addEventListener(MouseEvent.ROLL_OVER, mouseOver);
addEventListener(MouseEvent.ROLL_OUT, mouseOut);
addEventListener(MouseEvent.CLICK, mouseClick);
}
private function mouseOver(e:MouseEvent):void{
currentState = ‘overState’;
}
private function mouseOut(e:MouseEvent):void{
currentState = ”;
}
private function mouseClick(e:MouseEvent):void{
navigateToURL(new URLRequest(ImageLink),”_blank”);
}
]]>
</mx:Script>
<mx:states>
<mx:State name=”overState”>
<mx:RemoveChild target=”{up}”/>
<mx:AddChild relativeTo=”{this}”>
<mx:Image source=”{OverImage}” id=”over”/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState=”*” toState=”overState”>
<mx:Fade duration=”800″ alphaFrom=”0″ alphaTo=”1″ target=”{over}”/>
</mx:Transition>
<mx:Transition fromState=”overState” toState=”*”>
<mx:Fade duration=”500″ alphaFrom=”0″ alphaTo=”1″ target=”{up}”/>
</mx:Transition>
</mx:transitions>
<mx:Image id=”up”/>
</mx:Canvas>

Posted in Flex

Steps using SWC files in your Flex projects

•July 22, 2009 • Leave a Comment

To use SWC files in your Flex projects, you add them to the project’s library path. The SWC files can be located in the project, in a Flex library project, in a shared folder within the workspace, or any other location that has been linked to the project (using a shared folder that was added to the project’s source path, for example).

When you use SWC files in applications, there are configuration options that determine whether they are statically or dynamically linked to the application, merged into the application SWF file, or external to it and accessed separately at run time.

Add an SWC file to the library path

With a project selected in the Flex Navigator view, select Project > Properties > Flex Build Path.
Click on the Library Path tab.
Select any of these options to add SWC files:

Add Project Adds a Flex library project.

Add SWC Folder Lets you add a folder that contain SWC files.

Add SWC Adds a compiled SWC file.

Add Flex SDK Lets you add other Flex SDKs. If your project already has a Flex SDK in its library path, this button is disabled. If you remove the existing Flex SDK from your library path, the button is enabled. When you click this button, a Flex SDK node is added, but you are not prompted which one is added. To control which Flex SDK to use, select Project > Properties > Flex Compiler.

Enter or browse to and select the location of the SWC file, project, or folder. Click OK.

The SWC file, library project, or folder is added to the library path.

Merge the SWC file into the application SWF file when compiled

With a project selected in the Flex Navigator view, select Project > Properties > Flex Build Path.
Click on the Library Path tab, and then select and expand the SWC file entry to display the SWC options.
Double-click the Link Type option. The Library Path Items Options dialog box appears.
Select the Merged into Code option, and click OK.

This procedure is the equivalent of using the library-path compiler option.

Set the SWC file as an external library file

With a project selected in the Flex Navigator view, select Project > Properties > Flex Build Path.
Select the Library Path tab, and then select and expand the SWC file entry to display the SWC options.
Double-click the Link Type option. The Library Path Items Options dialog box appears.
Select the External option, and click OK.

This procedure is the equivalent of using the external-library-path compiler option.

Use the SWC file as an RSL

With a project selected in the Flex Navigator view, select Project > Properties > Flex Build Path.
Select the Library Path tab, and then select and expand the SWC file entry to display the SWC options.
Double-click the Link Type option. The Library Path Items Options dialog box appears.
Select the Run-time Shared Library (RSL) option.
Enter the URL where the SWC library will reside when the application is deployed.
(Optional) To extract the SWF file in the SWC file when it is placed in the deploy location, select the Automatically extract swf to deployment path option.
Click OK.

Using the SWC files as an RSL simplifies the process for using RSLs manually. To do this, you extract the SWF file from the SWC file and set the values of the runtime-shared-library-path compiler option.

For more information about using SWC files as an RSL, see Using Runtime Shared Libraries in Building and Deploying Adobe Flex 3 Applications.

Posted in Flex

Resize the controls using ResizeManager Class

•July 21, 2009 • 3 Comments

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” initialize=”initApp();”>

<mx:Script>
<![CDATA[
import mx.events.DropdownEvent;
import flash.display.*;
import flash.utils.*;
import mx.controls.*;
import mx.containers.*;
import mx.core.UIComponent;
import mx.containers.Panel
import sjd.managers.*;
import mx.managers.PopUpManager;

[Bindable]
public var cards: Array = [{label:”mx.controls.ComboBox”, data:”mx.controls.ComboBox”},
{label:”mx.containers.Panel”, data:”mx.containers.Panel”},
{label:”mx.containers.Canvas”, data:”mx.containers.Canvas”},
{label:”mx.containers.TitleWindow”, data:”mx.containers.TitleWindow”},
{label:”mx.controls.TextArea”, data:”mx.controls.TextArea”},
{label:”mx.controls.Button”, data:”mx.controls.Button”}];

private function initApp():void{
var window:TitleWindow = TitleWindow(PopUpManager.createPopUp( this, TitleWindow , false));
window.x = 100;
window.y = 100;
window.width = 200;
window.height = 200;
window.title = “PopUp Window”
ResizeManager.enableResize(window, 50);
}
private function creatObj():void{
var itemName:String = c1.selectedItem[“data”];
var obj:UIComponent;
switch(itemName){
case “mx.controls.ComboBox”:
obj = new ComboBox();
break;
case “mx.containers.Panel”:
obj = new Panel();
obj.width = Math.random() * this.width / 2;
obj.height = Math.random() * this.height / 2;
break;
case “mx.containers.TitleWindow”:
obj = new TitleWindow();
obj.width = Math.random() * this.width / 2;
obj.height = Math.random() * this.height / 2;
break;
case “mx.controls.TextArea”:
obj = new TextArea();
break;
case “mx.controls.Button”:
obj = new Button();
break;
case “mx.containers.Canvas”:
obj = new Canvas();
obj.width = Math.random() * this.width / 2;
obj.height = Math.random() * this.height / 2;
obj.setStyle(“borderStyle”, “solid”);
obj.setStyle(“backgroundColor”, “#FFFF00″);
break;
}
obj.x = Math.random() * this.width – obj.width;
obj.y = Math.random() * this.height – obj.height + 50;
this.addChild(obj);
ResizeManager.enableResize(obj, 50);
}
]]>
</mx:Script>
<mx:ComboBox id=”c1″ x=”0″ dataProvider=”{cards}” width=”200″ />
<mx:Button id=”b1″ label=”Create” x=”210″ click=”creatObj();” />
</mx:Application>

ResizeManager.as

package sjd.managers{

import flash.events.MouseEvent;
import flash.geom.Point;
import mx.containers.Panel;
import mx.core.Application;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.managers.CursorManager;
import mx.managers.CursorManagerPriority;

/**
* @class ResizeManager
* @brief Enable any UIComponent to resize
* @author Jove
* @version 1.1
*/
public class ResizeManager{

[Embed(source=”/sjd/assets/mouseMove.gif”)]
private static const CURSOR_MOVE:Class;
[Embed(source=”/sjd/assets/verticalSize.gif”)]
private static const VERTICAL_SIZE:Class;
[Embed(source=”/sjd/assets/horizontalSize.gif”)]
private static const HORIZONTAL_SIZE:Class;
[Embed(source=”/sjd/assets/leftObliqueSize.gif”)]
private static const LEFT_OBLIQUE_SIZE:Class;
[Embed(source=”/sjd/assets/rightObliqueSize.gif”)]
private static const RIGHT_OBLIQUE_SIZE:Class;

private static const RESIZE_OLD_POINT:String = “oldPoint”;
private static const RESIZE_OLD_HEIGHT:String = “oldHeight”;
private static const RESIZE_OLD_WIDTH:String = “oldWidth”;
private static const RESIZE_OLD_X:String = “oldX”;
private static const RESIZE_OLD_Y:String = “oldY”;
private static const RESIZE_MIN_SIZE:String = “minSize”;
private static const RESIZE_IS_POPUPE:String = “isPopup”;

private static const SIDE_OTHER:Number = 0;
private static const SIDE_TOP:Number = 1;
private static const SIDE_BOTTOM:Number = 2;
private static const SIDE_LEFT:Number = 4;
private static const SIDE_RIGHT:Number = 8;

private static var resizeObj:UIComponent;
private static var mouseState:Number = 0;

public static var isResizing:Boolean = false;
public static var mouseMargin:Number = 4;
public static var defaultCursor:Class = null;
public static var defaultCursorOffX:Number = 0;
public static var defaultCursorOffY:Number = 0;

public static function setDefaultCursor(cursor:Class = null, offX:Number = 0, offY:Number = 0):void{
defaultCursor = cursor;
defaultCursorOffX = offX;
defaultCursorOffY = offY;
}

/**
* Enable the UIComponent to have resize capability.
* @param targetObj The UIComponent to be enabled resize capability
* @param minSize The min size of the UIComponent when resizing
*/
public static function enableResize(targetObj:UIComponent, minSize:Number):void{
//Application.application.parent:SystemManager
Application.application.parent.addEventListener(MouseEvent.MOUSE_UP, doMouseUp);
Application.application.parent.addEventListener(MouseEvent.MOUSE_MOVE, doResize);

initPosition(targetObj);

targetObj.setStyle(RESIZE_OLD_POINT, new Point());
targetObj.setStyle(RESIZE_MIN_SIZE, minSize);
targetObj.setStyle(RESIZE_IS_POPUPE, targetObj.isPopUp);

targetObj.addEventListener(MouseEvent.MOUSE_DOWN, doMouseDown);
//targetObj.addEventListener(MouseEvent.MOUSE_UP, doMouseUp);
targetObj.addEventListener(MouseEvent.MOUSE_MOVE, doMouseMove);
targetObj.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
}

/**
* Disable the UIComponent to have resize capability.
* @param targetObj The UIComponent to be disabled resize capability
*/
public static function disableResize(targetObj:UIComponent):void{
targetObj.removeEventListener(MouseEvent.MOUSE_DOWN, doMouseDown);
//targetObj.removeEventListener(MouseEvent.MOUSE_UP, doMouseUp);
targetObj.removeEventListener(MouseEvent.MOUSE_MOVE, doMouseMove);
targetObj.removeEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
}

private static function initPosition(obj:Object):void{
obj.setStyle(RESIZE_OLD_HEIGHT, obj.height);
obj.setStyle(RESIZE_OLD_WIDTH, obj.width);
obj.setStyle(RESIZE_OLD_X, obj.x);
obj.setStyle(RESIZE_OLD_Y, obj.y);
}

/**
* Set the first global point that mouse down on the resizeObj.
* @param The MouseEvent.MOUSE_DOWN
*/
private static function doMouseDown(event:MouseEvent):void{

if(mouseState != SIDE_OTHER){

resizeObj = UIComponent(event.currentTarget);

initPosition(resizeObj);

var point:Point = new Point();
point.x = resizeObj.mouseX;
point.y = resizeObj.mouseY;

point = resizeObj.localToGlobal(point);
resizeObj.setStyle(RESIZE_OLD_POINT, point);
}
}

/**
* Clear the resizeObj and also set the latest position.
* @param The MouseEvent.MOUSE_UP
*/
private static function doMouseUp(event:MouseEvent):void{
isResizing = false;
if(resizeObj != null){
initPosition(resizeObj);
}
resizeObj = null;
}

/**
* Show the mouse arrow when not draging.
* Call doResize(event) to resize resizeObj when mouse is inside the resizeObj area.
* @param The MouseEvent.MOUSE_MOVE
*/
private static function doMouseMove(event:MouseEvent):void

{
var thisObj:UIComponent = UIComponent(event.currentTarget);
var point:Point = new Point();
point = thisObj.localToGlobal(point);
isResizing = true;
if(resizeObj == null)

{
var xPosition:Number = Application.application.parent.mouseX;
var yPosition:Number = Application.application.parent.mouseY;
if(xPosition >= (point.x + thisObj.width – mouseMargin) && yPosition >= (point.y + thisObj.height – mouseMargin)){
changeCursor(LEFT_OBLIQUE_SIZE, -6, -6);
mouseState = SIDE_RIGHT | SIDE_BOTTOM;
}else if(xPosition <= (point.x + mouseMargin) && yPosition <= (point.y + mouseMargin)){
changeCursor(LEFT_OBLIQUE_SIZE, -6, -6);
mouseState = SIDE_LEFT | SIDE_TOP;
}else if(xPosition <= (point.x + mouseMargin) && yPosition >= (point.y + thisObj.height – mouseMargin)){
changeCursor(RIGHT_OBLIQUE_SIZE, -6, -6);
mouseState = SIDE_LEFT | SIDE_BOTTOM;
}else if(xPosition >= (point.x + thisObj.width – mouseMargin) && yPosition <= (point.y + mouseMargin)){
changeCursor(RIGHT_OBLIQUE_SIZE, -6, -6);
mouseState = SIDE_RIGHT | SIDE_TOP;
}else if(xPosition >= (point.x + thisObj.width – mouseMargin)){
changeCursor(HORIZONTAL_SIZE, -9, -9);
mouseState = SIDE_RIGHT;
}else if(xPosition <= (point.x + mouseMargin)){
changeCursor(HORIZONTAL_SIZE, -9, -9);
mouseState = SIDE_LEFT;
}else if(yPosition >= (point.y + thisObj.height – mouseMargin)){
changeCursor(VERTICAL_SIZE, -9, -9);
mouseState = SIDE_BOTTOM;
}else if(yPosition <= (point.y + mouseMargin)){
changeCursor(VERTICAL_SIZE, -9, -9);
mouseState = SIDE_TOP;
}else{
changeCursor(defaultCursor, defaultCursorOffX, defaultCursorOffY);
mouseState = SIDE_OTHER;
isResizing = false;
}

if(thisObj.getStyle(RESIZE_IS_POPUPE)){
//When cursor is move arrow, disable popup
if(mouseState != SIDE_OTHER){
thisObj.isPopUp = false;
}else{
thisObj.isPopUp = true;
}
}
}
//Use SystemManager to listen the mouse reize event, so we needn’t handle the event at the current object.
//doResize(event);
}

/*** Hide the arrow when not draging and moving out the resizeObj.
* @param The MouseEvent.MOUSE_MOVE*/
private static function doMouseOut(event:MouseEvent):void{
if(resizeObj == null)

{
changeCursor(defaultCursor, defaultCursorOffX, defaultCursorOffY);
mouseState = SIDE_OTHER;
}
}

/*** Resize when the draging resizeObj, resizeObj is not null.
* @param The MouseEvent.MOUSE_MOVE*/

private static function doResize(event:MouseEvent):void

{
if(resizeObj != null){
var point:Point = Point(resizeObj.getStyle(RESIZE_OLD_POINT));
var xPlus:Number = Application.application.parent.mouseX – point.x;
var yPlus:Number = Application.application.parent.mouseY – point.y;
var windowMinSize:Number = Number(resizeObj.getStyle(RESIZE_MIN_SIZE));
var ow:Number = Number(resizeObj.getStyle(RESIZE_OLD_WIDTH));
var oh:Number = Number(resizeObj.getStyle(RESIZE_OLD_HEIGHT));
var oX:Number = Number(resizeObj.getStyle(RESIZE_OLD_X));
var oY:Number = Number(resizeObj.getStyle(RESIZE_OLD_Y))
switch(mouseState)

{
case SIDE_RIGHT | SIDE_BOTTOM:
resizeObj.width = ow + xPlus > windowMinSize ? ow + xPlus : windowMinSize;
resizeObj.height = oh + yPlus > windowMinSize ? oh + yPlus : windowMinSize;
break;
case SIDE_LEFT | SIDE_TOP:
resizeObj.width = ow – xPlus > windowMinSize ? ow – xPlus : windowMinSize;
resizeObj.height = oh – yPlus > windowMinSize ? oh – yPlus : windowMinSize;
resizeObj.x = xPlus < ow – windowMinSize ? oX + xPlus: resizeObj.x;
resizeObj.y = yPlus < oh – windowMinSize ? oY + yPlus : resizeObj.y;
break;
case SIDE_LEFT | SIDE_BOTTOM:
resizeObj.width = ow – xPlus > windowMinSize ? ow – xPlus : windowMinSize;
resizeObj.height = oh + yPlus > windowMinSize ? oh + yPlus : windowMinSize;
resizeObj.x = xPlus < ow – windowMinSize ? oX + xPlus: resizeObj.x;
break;
case SIDE_RIGHT | SIDE_TOP:
resizeObj.width = ow + xPlus > windowMinSize ? ow + xPlus : windowMinSize;
resizeObj.height = oh – yPlus > windowMinSize ? oh – yPlus : windowMinSize;
resizeObj.y = yPlus < oh – windowMinSize ? oY + yPlus : resizeObj.y;
break;
case SIDE_RIGHT:
resizeObj.width = ow + xPlus > windowMinSize ? ow + xPlus : windowMinSize;
break;
case SIDE_LEFT:
resizeObj.width = ow – xPlus > windowMinSize ? ow – xPlus : windowMinSize;
resizeObj.x = xPlus < ow – windowMinSize ? oX + xPlus: resizeObj.x;
break;
case SIDE_BOTTOM:
resizeObj.height = oh + yPlus > windowMinSize ? oh + yPlus : windowMinSize;
break;
case SIDE_TOP:
resizeObj.height = oh – yPlus > windowMinSize ? oh – yPlus : windowMinSize;
resizeObj.y = yPlus < oh – windowMinSize ? oY + yPlus : resizeObj.y;
break;
}
}
}

private static var currentType:Class = null;
/*** Remove the current cursor and set an image.
* @param type The image class
* @param xOffset The xOffset of the cursorimage
* @param yOffset The yOffset of the cursor image*/

private static function changeCursor(type:Class, xOffset:Number = 0, yOffset:Number = 0):void

{
if(currentType != type)

{
currentType = type;
CursorManager.removeCursor(CursorManager.currentCursorID);
if(type != null)

{
CursorManager.setCursor(type, CursorManagerPriority.MEDIUM, xOffset, yOffset);
}
}
}
}
}

Posted in Flex

Binding of properties between sub components

•July 21, 2009 • Leave a Comment

In the process of testing what he outlined, I created a simple example, which I have posted here.

The point of this example is to show how you can declare “public” variables in a component, and then access those variables as properties form the component that uses it…

The example consists of 2 files:

FormExample.mxml (Application File)

Code:

<?xml version=“1.0” encoding=“utf-8”?>
<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml“ layout=“absolute” >

<mx:Panel>
<!– call in the MyForm component –>
<local:MyForm
id=“myForm”
title=“My Form”
xmlns:local=“*”
/>

<!–
a button with the “enabled” property bound to the “formValid” property of the myForm component above
–>
<mx:Button
id=“myButton”
label=“My Button: enabled is ‘{myButton.enabled.toString()}'”
enabled=“{myForm.formValid}”
/>

</mx:Panel>

</mx:Application>

MyForm.mxml (in the root folder of the project)

Code:

<?xml version=“1.0” encoding=“utf-8”?>
<mx:Panel xmlns:mx=“http://www.adobe.com/2006/mxml“ layout=“vertical”>

<mx:Script>
<![CDATA[
/*
Create property and expose it by declaring it as “public”,
and let the compiler know to make if bindable using the [Bindable] meta tag
*/
[Bindable] public var formValid:Boolean = false;
]]>
</mx:Script>
<!– Something to let us know if the ‘form’ is currently Valid or Invalid –>
<mx:Text text=“Form is Currently {formValid == true ? ‘Valid’ : ‘Invalid’}” />

<!– simple button to toggle the formValid status –>
<mx:Button label=“Toggle Form Valid” click=“formValid = !formValid;” />

</mx:Panel>

Result:

Posted in Flex

AutoComplete

•July 21, 2009 • 2 Comments

POSTED BY: hillelcoren

While there are a number of other Flex AutoComplete components out there, I wasn’t able to find one which fit my needs. After struggling for a while I ended up creating my own.

Important Info

License: The component is freeware with the source code available. You can use it any way you like, I just ask that if you make any improvements or fix any bugs that you send them back to me so I can include them in the component.
Support: I try as hard as possible to respond to any questions posted on the blog within a day. I’ve been using the component for a while now and am pretty confident that it works well. If you’d like to extend it I’m happy to work with you to get your feature working.
What’s next: I’m currently working on improving the documentation and starting to test it under Flex 4.

Version History

http://web.me.com/hillelcoren/Site/Demo.html

viewSource:

Posted in Flex

Importing Contacts from Mail Server

•July 21, 2009 • Leave a Comment

One of the requirements called for importing contacts from their email addresses. With the number of websites implementing contact importers these days, I figured there would be plenty of Flex components out there to import your contacts.

After googling for about half an hour, I was quite frustrated not finding any. I started looking for PHP solutions that I could port to Flex. I found OpenInviter.

As of now, it allows you to import contacts from 62 different email and social network providers.

So I started working on a Flex component that imports contacts via OpenInviter.

What the component does

Enter your email address and password and the component will attempt to retrieve contacts from your email provider and display it in a datagrid. Also, that component will attempt to detect your provider from email address you’ve entered. Feel free to extend it to your liking.

Note: The component is still very basic. If you’ve got suggestions on how it can be improved upon or simplified, feel free to comment on this page. I’ll be listening and updating as time allows.

Disclaimer: I happened to have come across some claims that OpenInviter may be storing email addresses and passwords you inpuy while accessing their APIs. Although those were only comments at some blog post, I feel compelled to distance myself from OpenInviter’s team. I take no responsibility for OpenInviter’s actions. The component mentioned in this tutorial uses OpenInviter’s API. If you’re not comfortable with OpenInviter’s handling of your personal information, do not use any information or content on this tutorial.

If anyone has any sort of information on this, please share it with us.

By clicking on the links below, you agree to have read and understood the disclaimer above.

Implementation from Source files

If you’ve got the source files, these are the steps you’ll need to take before the component can be used.

Register for a private key at http://openinviter.com/register.php
If you download the OpenInviter class from their website, it comes pre-filled with your username and private key. If you are using the openinviter class included in the source, enter your username and private_key in the config.php file.
Upload the OpenInviter class and FlexInviter.php on your server. Make sure they’re both on the same folder.
Import the Flex Project file (if you’ve downloaded application source). Otherwise add the com folder to your project. The component is called FlexOpenInviter.
Open the FlexOpenInviter component and fill in the importerGatewayURL string pointing to the url of the FlexInviter.php file that you just uploaded.
That should be it… test the application!

Code Review

MXML

^?View Code XML

	<mx:HTTPService id="svc"
		method="POST"
		url="{importerGatewayURL}"
		resultFormat="e4x"
		result="svcResult_handler( event )" />

	<mx:Form>
		<mx:FormItem label="Email address">
			<mx:TextInput id="txtEmail"
				change="emailInput_handler( event )" />
		</mx:FormItem>
		<mx:FormItem label="Password">
			<mx:TextInput id="txtPassword"
				displayAsPassword="true" />
		</mx:FormItem>
		<mx:FormItem label="Provider">
			<mx:ComboBox id="cmbProvider" 
				dataProvider="{xmlProviders.email..name}" />
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button id="btnSubmit" 
				label="Submit"
				click="sumbitClick_handler( event )" />
		</mx:FormItem>		
	</mx:Form>

	<mx:DataGrid id="dg" 
		dataProvider="{xmlContacts.contact}" 
		width="400" height="80%"
		allowMultipleSelection="true"  >
		<mx:columns>
			<mx:DataGridColumn dataField="name" />
			<mx:DataGridColumn dataField="email" />
		</mx:columns>
	</mx:DataGrid>

For those familiar with MXML, the above code should be self-explanatory. I will get to the XML Schema soon.

PHP File (FlexInviter.php)

^?View Code PHP

<?php
include( 'OpenInviter/openinviter.php' );
$inviter = new OpenInviter();
$plugins = $inviter->getPlugins();

if ( $_POST[ 'action' ] == "get_plugins" )
{
	echo arrayToXMLProviders( $plugins );	
}
else if ( $_POST[ 'action' ] == "get_contacts" )
{
	$inviter->startPlugin( $_POST[ 'provider' ] );
	$inviter->login( $_POST[ 'user_username' ], $_POST[ 'user_userpwd' ] );

	echo arrayToXMLContacts( $inviter->getMyContacts() );
}

function arrayToXMLContacts( $paramxml )
{
	$xml = new XmlWriter();
	$xml->openMemory();
	$xml->startDocument('1.0', 'UTF-8');
	$xml->startElement('root');

	function write(XMLWriter $xml, $param){
	    foreach($param as $key => $value){
		/*if(is_array($value)){
	            $xml->startElement("contact");
	            write($xml, $value);
	            $xml->endElement();
	            continue;
	        }*/
	        $splitKey = split( "@", $key );
	        $key = $splitKey[0];
	        $xml->startElement('contact');
	        $xml->writeElement( "name", $key );
	        $xml->writeElement( "email", $value );
		$xml->endElement();

	    }
	}
	write($xml, $paramxml);

	$xml->endElement();
	return $xml->outputMemory(true);	
}

function arrayToXMLProviders( $paramxml )
{
	$xml = new XmlWriter();
	$xml->openMemory();
	$xml->startDocument('1.0', 'UTF-8');
	$xml->startElement('root');

	function write(XMLWriter $xml, $param){
	    foreach($param as $key => $value){
		if(is_array($value)){
	            $xml->startElement($key);
	            write($xml, $value);
	            $xml->endElement();
	            continue;
	        }

	        $xml->writeElement( $key, $value );	        
	    }
	}
	write($xml, $paramxml);

	$xml->endElement();
	return $xml->outputMemory(true);	
}
?>

Note: The PHP script is lacking and so is the XML schema it generates. Comments and suggestions are welcomed!

Before we look at the ActionScript code, let’s look at how the provider and contact data is being received.

Includes the OpenInviter class (openinviter.php)
Instantiates an object of that class ($inviter)
Gets plugin list. Plugins are used synonymous with providers here. For example… Gmail, Hotmail, Yahoo are plugins.
If Flex sends in action parameter as get_plugins, convert plugin list (array by default) to XML and return to Flex. I had some issues returning the array. So it’s XML for now!
If Flex sends in action parameter as get_contacts, call the OpenInviter class method startPlugin passing in the provider. Meaning, connect to the provider (Gmail, Hotmail, Yahoo, etc ). Then, login with the username and password provided by Flex as parameters. And finally, convert contact list (array by default) to XML and return to Flex.
arrayToXMLContacts and arrayToXMLProviders functions do what their names imply. Converts provider and contact arrays to XML.

XML Schema

Sample Provider

^?View Code XML

<root>
  <email>
    <name>Abv</name>
    <version>1.0.0</version>
    <description>Get the contacts from a Abv account</description>
    <base_version>1.6.5</base_version>	
    <type>email</type>
    <check_url>http://www.abv.bg/</check_url>
  </email>
</root>

Sample Contact

^?View Code XML

<root>
  <contact>
    <name>PersonName</name>
    <email>person@gmail.com</email>
  </contact>
</root>

ActionScript

^?View Code ACTIONSCRIPT

importerGatewayURL should point to the FlexInviter.php file
init() called on component’s creationComplete event
getContacts() – providerXMLString, xmlSplitArray and providerString basically drill down to the name of the selected provider, so it can be sent to the php code alongwith the username and password.
emailInput_handler() – this function basically tries to match the domain of the email address to the provider. So, if you type your email address as myemailaddress@gmail.com, this function will switch your provider to Gmail.

Known Bugs

Contact name and email may be switched depending on the provider
Provider detector is basic. Doesn’t work with all providers
No fault handler

Posted in Flex

Awesome 3D Text with VectorVision

•July 20, 2009 • Leave a Comment

I love 3D in Flash, but till now I’d never been very happy with the quality of text rendering in my Papervision3D projects. Papervision is a bitmap based 3D engine and because of that not very good at rendering text.

Yesterday, I found VectorVision, which is an extension of Paperviosn3D that enables rendering vectors inside of Papervision3D. The authors Mark Barcinski & Adrien Jeanjean, have ported some of the work Mathieu Badimon did for his vector based 3D engine, Five3D, to enable vector fonts inside of Papervision. And to top that they added support for rendering any SVG in Papervision .. super cool !!

Here’s a quick example I cooked up, notice the crisp font ..

View Example

View Source of Example

Check out VectorVision

Posted in ActionScript

Compile Flex applications using ANT

•July 20, 2009 • Leave a Comment

A quick setup and example of how to compile a Flex application using ANT. This example will show the basics of how to run the ANT script to compile your flex application, I will walk through more complex examples in later posts but to get started look through the script and properties files below or download the attached project files at the bottom of this post.

ANT is a very powerful tool that, once you get into using it, will make your development, deployment and automation a lot simpler as well a lot less prone to error. If you are new to ANT there are a lot of resources out on the web that will help you get up to speed. This post and others to follow will focus specifically on the uses of ANT with Flex in a CI build process.

Ant Script

<?xml version=”1.0″ encoding=”utf-8″?>
<project name=”FlexANTBuildSample” default=”build” basedir=”.”>

<!–
DEFINE import our build properties file and define our tasks
–>
<property file=”./build.properties” />

<!–
TARGETS
–>
<target name=”build” depends=”init, clean, makeWrapper, compile”/>

<!–
INITIALIZE
–>
<target name=”init” description=”Initializes the build”>
<condition property=”environment.display” value=”:1″>
<os name=”Linux”/>
</condition>
<tstamp/>
<echo message=”=============================================”/>
<echo message=”${project.name}-${project.version} [${TODAY}]”/>
<echo message=”Copyright (c) ${project.year} ${project.owner}”/>
<echo message=”OS : ${os.name}” />
<echo message=”Author: ${author}” />
<echo message=”==============================================”/>
</target>

<!–
CLEAN the existing output folder and files and then re-generate the output folder
–>
<target name=”clean” description=”deletes and recreates the metadata destination directory”>
<delete verbose=”${verbose}” dir=”${deploy.dir}”/>
<mkdir dir=”${deploy.dir}”/>
<echo message=”Deploy directory created” />
</target>

<!–
COMPILE
–>
<target name=”compile” description=”compiles the Main app” >
<mxmlc context-root=”main”
file=”${mainApp.src}”
output=”${mainApp.swf}”
actionscript-file-encoding=”${encoding}”
keep-generated-actionscript=”false”
incremental=”false”
locale=”${locale}”>

<load-config filename=”${FLEX_HOME}/frameworks/flex-config.xml”/>

<compiler.source-path path-element=”${FLEX_HOME}/frameworks”/>
<compiler.source-path path-element=”${srcpath.dir}”/>
<compiler.library-path dir=”${FLEX_HOME}/frameworks” append=”true”>
<include name=”libs” />
</compiler.library-path>
<compiler.library-path dir=”${basedir}” append=”true”>
<include name=”libs” />
</compiler.library-path>
</mxmlc>
</target>

<!–
MAKE WRAPPER
–>
<target name=”copyTemplates”>
<copy todir=”${deploy.dir}”>
<fileset dir=”${htmltemplate.dir}”>
<exclude name=”**/index.template.html” />
</fileset>
</copy>
</target>

</project>

Build.properties

######################################
## Author information
######################################
author           =   Kenneth Lejnieks
project.owner       =   Lejnieks Consulting
project.owner.url   =   http://www.lejnieks.com
project.fullname       =   Build CI POC 1
project.version       =   1.0.0 alpha # major.minor[.revision[.build]]
project.name       =   POC Sample 1
project.year       =   2009
application.name   =   POC

######################################
## Path information
######################################
FLEX_HOME = sdks/flex-3.2-sdk

htmltemplate.dir   =   ../html-template
srcpath.dir       =   ../src
libs.dir         =   ../libs
tools.dir       =   tools

deploy.dir = ../deploy

######################################
## Build arguments
######################################
verbose = true

######################################
## Application information
######################################
mainApp.name       =   FlexCISample1
mainApp.src       =   ${srcpath.dir}/${mainApp.name}.mxml
mainApp.swf       =   ${deploy.dir}/${mainApp.name}.swf
mainApp.bgColor       =   #f6f6f6
locale           =   en_US
encoding       =   UTF-8

######################################
## Build Tools
######################################
flexTasks.jar       =   ${FLEX_HOME}/ant/lib/flexTasks.jar
flexAntTasks.jar   =   ${tools.dir}/FlexAntTasks.jar
ant-contrib.jar       =   ${tools.dir}/ant-contrib.jar

Project source files including necessary jars can be found here

<!– –>posted by klejnieks

Related Posts:

Compile ASDocs with ANT

Using Resource Bundles in MXML for simple strings

Skinning Checkbox with Error State

Skinning ComboBox with Error State

Overriding Menu to include stage height bounds

Posted in Flex - Ant

Step by Step process to start with TOMCAT

•July 17, 2009 • Leave a Comment

first u need to install java into your system..

then u can install tomcat. when installing tomcat it will ask for java
jre path which u r installed in u r system. By default it will take..
at the end it will ask user name and pass word.u can type it as admin
admin.give port number as 8080 in tomcat .

and you can post your application into
in tomcat you fine web apps directory like this C:Program Files\Apache
software foundation\tomcat 5.5\webapps

after installing java u need set class path and path .
for class path

Goto My computer —>right click on it u will fine properties—
>advanced tab —>Environment Variables–> then u will find User
variables –>
click on New Button

variable name:PATH
variable value:C:\Program Files\Java\jdk1.5.0_13\bin
then click on OK.
then click on NEW again

variable name:CLASSPATH
variable value: .;C:\Program Files\Java\jdk1.5.0_13\jre\

lib\rt.jar(put
dot and semicolon first then write the path)

then click on OK.
then click on NEW again

variable name:JAVA_HOME
variable value:C:\Program Files\Java\jdk1.5.0_13

i hope this will ok for you .any issues let me know..

Posted in Flex, Tomcat

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

	Dennis Du Krøger on Resize the controls using Resi…
	mjcprasad2000 on Resize the controls using Resi…
	Monic on Installing and Deploying Red5…
	Kevin on CheckBox in DataGrid
	Dennis Du Krøger on Resize the controls using Resi…

Mjcprasad’s Blog

IFrame Demo

RollOver Image

Steps using SWC files in your Flex projects

Resize the controls using ResizeManager Class

Binding of properties between sub components

AutoComplete

Important Info

Version History

Importing Contacts from Mail Server

What the component does

Implementation from Source files

Code Review

MXML

PHP File (FlexInviter.php)

XML Schema

ActionScript

Known Bugs

Awesome 3D Text with VectorVision

Compile Flex applications using ANT

Step by Step process to start with TOMCAT

Calendar

Category

Months

Recent Posts

Top Posts

Page

Flickr Photos

Blog Stats

Meta

Jagan Mady’s

Recent Comments

Top Clicks