Archive for June, 2007

How to use AMFphp 1.9 beta with Flex

One of the main reasons for using Flex is web application development, let’s take out the whole Apollo / AIR thing for a moment, so let’s have a look at fetching dynamic data from your Database. This could be done via SOAP, REST or a thousand different ways but my personal favorite is remoting best through using AMFphp. For all those of you who never heard of that take a look at their homepage an give yourself a quick start of the idea. Most important thing to know is – it is damn fast, works with php4 and 5 and is very very easy to learn. So let’s get it on …

Step 1: Get the files

First thing to do is downloading all the files you’ll need for AMFphp – get them from 5 1/2 blog.

Good, if you haven’t found them for some reason – go and get them from somewhere else damn it ! This tutorial is, like mentioned in the heading, for AMFphp 1.9 beta – if you’re working with another version don’t blame me if you can’t do exactly the same to get it running.

Step 2: Set it up

Now have a look at the zip folder, it should look like that:

Folder structure of AMFphp 1.9 beta

Step 3: Your first Service

Extract the files in a folder of your choice – now you’ll have to create a new service. A service is basically a php class containing functions to catch data from your database – but it’s not limited to that. Services go into the services folder, naming follows php class naming so the filename has to match the class name and should start capitalized. So the filename might be Products.php and it could like this:


<span style="color: #000000;"><?php

class Products
{</span>

<span style="color: #000000;">	//For people from earlier amfphp - the method table is gone finally :)</span>

<span style="color: #000000;">    	//Database connect helper function - if you don't have php5 take out the private</span>

<span style="color: #000000;">	private function connect(){</span>

<span style="color: #000000;">		//Insert your credentials here</span>

<span style="color: #000000;">		$mysql = mysql_connect(your_db_host, your_db_user, your_db_password);</span>

<span style="color: #000000;">		mysql_select_db( your_db_name );

	}

	function getProducts(){

		 //Connect to the desired database

		$this->connect();

		//Fetch Products from the database

		$query  = "SELECT * FROM products ";

		$res    = mysql_query($query);

		$products = array();

		//Put them into an Array

 		while($obj = mysql_fetch_object($res)){

			$products[]  = $obj;

		}

		//Now return the array to Flex

		<strong>return</strong> $products;

	}

}
?></span>

<span style="color: #000000;">

 

Now this is what you have to do on the server side, setup classes an services. Upload the altered amfphp directory onto your web server. You can do far more with amfphp but for now let’s head further.

Step 4: Setup your Flex project

Open up a new Project if you haven’t done so yet, what you’ll need is this source – this is the RemotingConnection Class, ok you don’t implicitly need it – but this is my way so goddamn do it.


package{
    import flash.net.NetConnection;
    import flash.net.ObjectEncoding;
    public class RemotingConnection extends NetConnection
    {
   public function RemotingConnection( sURL:String )
        {
            objectEncoding = ObjectEncoding.AMF0;
            if(sURL) connect( sURL );
        }
        public function AppendToGatewayUrl( s : String ) : void
        {
            //
        }
    }
}

Copy this into a file named RemotingConnection.as in of your flex project source folders. This is an extended NetConnection class which I will not describe any further, use it – it works 🙂

Step 5: Do some magic

This is an example how it could be done very simple to connect to the amf gateway you’ll need to do the following:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" width="100%" height="100%">
	<mx:Script>
		<!&#91;CDATA&#91;

			import mx.collections.ArrayCollection;
			import mx.controls.Alert;

			//Binding for the test Datagrid
			Bindable&#93;
			private var products:ArrayCollection

			//Since the gateway doesn't have te be initialized on every call
			//Define it as class variable
			private var gateway:RemotingConnection;

			//on Application initialize
			private function init():void{

				//Connect to the gateway
				gateway = new RemotingConnection("http://yourserver.com/amf/gateway.php");
				//Call the service defined before
				gateway.call("Products.getProducts", new Responder(onProducts, onFault));

			}

			//When products arrive from database
			private function onProducts(arr:Array):void{
				products = new ArrayCollection(arr);
			}

			//Event if loading process failed
       			public function onFault( fault : Object ) : void
       			{
       				Alert.show(fault.description);
     				//trace(fault);
      			}
		&#93;&#93;>
	</mx:Script>
	<mx:DataGrid dataProvider="{products}" width="100%" height="100%" />
</mx:Application>

 

Now do it, test your flex application – this should work in a local environment. You could also deploy it on your web server and use a relative url for connecting to the gateway. If you have done everything right the DataGrid should show the result from the database, using the field names as column headers.

From here on start reading everything you find about it and try yourself. There’s lots of documentation on the net – I started with the adobe articles on it. There’s also a lot on the amfphp site So have fun with amfPHP !

Mouse Capture

I wrote a simple Mouse Capture component for Flex 2.0.1 – this will save the mouse position every N seconds and on every click. After capturing it is able to draw the path the mouse has gone as well as any clicks. This is very simple and will be a lot of more a tutorial on how to use timers an events. Be sure to check it out if you are new to Flex but also if you like the idea

Features

  • Set time interval for storage
  • Capture clicks only
  • Only import the class and use it
  • Comes with full flex builder project and all sources

Downloads

You can get the file here.

Example Usage

Download the package and put it in one of your Source Folders – then import the class via: import de.aggro.display.MouseCapture

Just press start, click a few times into the White Canvas, then press stop and after that show to test the drawing method.

Example

Coming soon…

License

This component is licensed under the MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Welcome on myFlex

Hi Folks,

Since blogging is cool and the hottest you can do as a developer I’m starting out this Blog for all my Flex regarding stuff. Since I’m German please excuse weird grammar from time to time.

So let’s start out, yesterday Marc Hughes released his new version of the Object Handles Component for Flex – I did most of the code for the rotational support so go and get it. Primary Changes are:

Changes include:

– Initial rotation support added (still needs some tweaks) – my part 😉 .
– Metadata for events added. (Thanks Thomas Jakobi!)
– Bug fix for making ObjectHandles dynamically through actionscript
instead of in an MXML document.
– Ability to turn mouse cursor support off (since they are ugly right
now).

See the full blog post here and the components main page here with a demo to try it. There’s also a google code project if you want to particiate something. Marc has a lot of nice components and several other things so go and check it out.