Posts Tagged ‘Flex’

Using AMF and RemoteObject without services-config.xml

Saturday, January 23rd, 2010

This article will be very short but I hope it will be very useful. The goal of this article is to show you how to use a RemoteObject without service-config.xml. The example in this post will be very simple, we will connect to a AMFPHP service and get a hello message from it.

First let’s see the service:

1
2
3
4
5
6
7
8
9
10
11
<?php
// hello.php
class Hello
{
	public function sayHello()
	{
		return "Hello back!";
	}
}
 
?>

Now in Flex all we have to do is to load a XML file ( channel.xml ) and read the channel from it:

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
protected function addedToStageHandler( event :Event ) :void
{
 
	var loader :URLLoader = new URLLoader();
	loader.addEventListener( Event.COMPLETE, completeHandler );
	loader.addEventListener( IOErrorEvent.IO_ERROR, ioErrorHandler );
	loader.load( new URLRequest( "channel.xml" ));
 
}
 
protected function completeHandler( event :Event ) :void
{
 
	// Load info from XML
	var xml :XML = new XML( event.target.data );
	var amfEndpoint :String = xml..channel.( @id == "my-amfphp" ).@endpoint;
 
 
	// Create a AMF channel
	var channel :AMFChannel = new AMFChannel( "my-amf", amfEndpoint );
 
 
	// Add channel to our RemoteObject
	rmtObj.channelSet = new ChannelSet();
	rmtObj.channelSet.addChannel( channel );
 
}

Now if you use the loaded channel for all your RemoteObjects you don’t have to compile again your application if you decide to change your AMF endpoint, all you have to do is to edit the channel.xml file.

This is very useful when you upload your application to a server, you don’t have to compile again the application to work on different servers all you have to do is to use different channel.xml.

You can download the code here ( click to download ).

And this is all. If you have any questions post them here.

Adobe Community Professionals 2010

Tuesday, January 19th, 2010

I’m happy to announce that from 2010 I am an Adobe Community Professional in Flex. I really appreciate the recognition from the Adobe and I will try to contribute  more this year for the development of the community.

Formerly known and recognised as an A.C.E (Adobe Community Expert), the name has been changed to A.C.P to ensure that the Adobe Certified Experts and Adobe Community Professionals are recognised separately.

This year, 300 developers and community members were awarded the ACP title, 59 of which were from
the Flex programme.

As you know, the Adobe Community Experts Program is a community based program made up of Adobe customers who share their product expertise with the world-wide Adobe community. The Adobe Community Experts’ mission is to provide high caliber peer-to-peer communication educating and improving the product skills of Adobe customers worldwide.

A full list of 2010 Community Professionals can be found here:
http://lizfrederick.blogspot.com/2010/01/new-acps-for-2010.html

I’d like to thank to my friends for the support.

And this is the badge :D :

acp_logo

A Custom Drag-n-Drop List Control for Flex

Sunday, April 12th, 2009

Recently I have work on a custom component that extend the List class and add more functionalities to that class.The class do a lot of stuff but I decided to write a simple example for the blog that show just one functionality. The problem that this example solve is very simple:

“Make a list control that allow to drag only some of the list items”

The final result looks like this:

 

The steps to this are:

1) Create a list control and enable drag and drop

<mx:List
        id=”plList”
        width=”300″
        height=”300″
        dragEnabled=”true”
        dragMoveEnabled=”true”
        dropEnabled=”true”
        dragOver=”listDragOverHandler(event)” />

2) Create a XML that we will use as a dataProvider

<mx:XML id=”playlists”>
     <root>
          <pl name=”Playlist1″ icon=”myIcon” canMove=”1″ />
          <pl name=”Radio” icon=”myIcon2″ canMove=”0″ />
          <pl name=”Random” icon=”myIcon” canMove=”1″ />
          <pl name=”Best 90″ icon=”myIcon” canMove=”1″ />
          <pl name=”Custom” icon=”myIcon2″ canMove=”0″ />
     </root>
</mx:XML>

if you look at the XML you will see that a playlist contains 3 attributes. The name, icon and canMove. The canMove is the important attribute for us because this attribut will tell us if a item can move or not. Now that we have the XML let’s tell our list that we want to use this XML as a dataProvider and the name attribute as label:

<mx:List
        id=”usersList”
        width=”300″
        height=”300″
        dragEnabled=”true”
        labelField=”@name”
        iconField=”@icon”
        dataProvider=”{playlists.pl}”
        dragMoveEnabled=”true”
        dropEnabled=”true”
        dragOver=”listDragOverHandler(event)” />

3) Create a function that will be called when a list item is drag

private function listDragOverHandler( event:DragEvent ):void
{
        // with this call we are telling that we will
        // handle the drag
        event.preventDefault();

        // check to see if selected item can move
        var selectedItem :XML = XML(plList.selectedItem);
        var move :Number = Number(selectedItem.attribute(’canMove’));

        // if drag item can move
        if (event.dragSource.hasFormat(”items”) && move)
        {
                // Drag allowed
                event.currentTarget.showDropFeedback(event);
                DragManager.showFeedback(DragManager.MOVE);

                return;
        }

        // Drag not allowed.
        event.currentTarget.hideDropFeedback(event);
        DragManager.showFeedback(DragManager.NONE);
}

And this is all. If you have any questions post them here.

View the exampleView Source