UPDATE:in order to understand AMF objects and/results please refer to this post written a while ago (
http://www.flash-db.com/Board/index.php?topic=11954.0)
Flex 2 Guestbook V.2 by Andres Santos (so easy even birds can program)
Starting with flex is just as easy as creating a web page, although flex can be compiled “on the fly” which means it can be compiled from a web server when a user request a swf file;or can be compiled or “packaged” in a swf file and deliver it as a stand alone swf application, and this is our case, we will be delivering our Flex guestbook as standalone swf of course embedded in a web page.
Highlighted points of this tutorial
Get started
Get in touch with flex and comonents
Use AS as JS
Use AMFPHP1.9 with flex
The Flex 2 GuestbookFILES HERE (files contain main mxml,amfphp xml and mxml component read below)
(in order to run the files, you need to create a new project called “guestbook” and replace the main mxml for the one in the zip, also copy all the files into the project folder A working example with files can be found here:
http://www.asb-labs.com/blog/flex-2-guestbook/)
So What the heck I need?Good question! What is needed to get started right now and with no knowledge of Flex 2?, first download and install the latest version of flex 2 (current 2.0.1); once you downloaded be sure of installing it (lol).
Get startedAs I mentioned before, Flex is as easy as creating a webpage, in order to “understand in a Christian way” flex instead of strange flow charts just compare it against a web page, how serious web pages are made?, they use the following schema (yep I know schemas wack but this one is easy):
<html>
<head>
<script language="JavaScript" type="text/javascript">
<![CDATA[
//something of JS here
]]></script>
</head>
</html>
The only difficult part to interpret are the JavaScript tags, the rest is as easy as turning on the TV, you have a TV right?
It is all the same with flex, in a plain html page you have only one <html> tag that tells the browser where starts and finishes the page the head is used to store metadata and code (remember a page is not ‘code’ are just tags) The same code from the previous example can be easily translated into flex as:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
</mx:Application>
As you can see both codes share its structure, the flex version of the code adds an xml tag but that must go in all flex documents so it can be considered as useless, the <mx:Application> tag is the same as <html> and just one is allowed across the entire project, and the script tag extends as in a page its capabilities so you can perform a “low-level” control using instead of JS, ActionScript 3.
Get in touch with flex
Well I already introduced you to the basic knowledge of flex now open up flex and:
• Create a new PROJECT not file nor component, Project.
• In the wizard dialog choose the first option, it is called Basic (this will be the option almost for any purpose)
• Give it a name and press finish
Flex will automatically show you the “design view” or “code view”. If you are not in the code view then change tothis view from the upper-left bottom on the corner of the project.
Once you get the code view you will be able to edit,remove,control or add new code hints, as an example add this code:
<mx:Button label="Button"/>
That will force to the design view to create a new component called Button, and as you can see the syntax is very similar to an html button, now switch to the design view and you will see a button that is the same as dragging it into your stage or workarea.
Play with the components adding them to the stage and also Seeing its corresponding tag.
You can access properties of each component or each tag just by bar-spacing once andit will popup some properties you can use.
Use AS seamless as JS
JS is a great tool for web pages because you access properties of any element on screen and perform certain actions with those properties;in Flex instead of using JS you use the AS3 language (yes flash language) to extend Flex behaviours. In order to do that you need to have the <mx:Script> tag if you do not have it then the AS code you write will be ignored and will output errors at compile-time.
Now write the Script tag and write this code:
<mx:Script>
<![CDATA[
Import mx.controls.Alert;
Public function createAlert():void{
Alert.show(“Andres says hi”,”Helloworld”);
}
]]>
</mx:Script>
When using AS functions you need to tell whether they are public or private and if they return something (use void if no returning data is sent). With the code we wrote we can say we have finally integrated Flex “with” flash BUT we need to call that “createAlert” function, and that can be called from our first button by adding the “click” handler
<mx:Button label="Button" click=”createAlert()”/>
If you added more buttons then lets define its “unique name”, remember the flash old school? When you had to give an instance name? well in flex happens the same, you have to give an instance name by adding “id”:
<mx:Button label="Button" click=”createAlert()” id=”fbtn”/>
YOU ARE DONE, now you can publish your work and see that it actually does something(press CTRL+F11)
Use AMFPHP1.9 with flex
(for more information about AMFPHP check jorge’s tutorials about this, I did not add how to call a method for that plz check the mxml so you can easily understand that part, about handling roles check my blog:
http://www.asb-labs.com/blog/2007/05/19/amfphp-19-beta-2-using-roles/)
ALERT:this new release of amfphp doesn’t use tableMethod (in case you think I missed it)
AMFPHP is a great tool for sending and requesting data easily and fast, and flash wouldn’t be the same without it nor Flex. In order to get and send data to AMFPHP you have to copy this code in your application:
<mx:RemoteObject id="lservice" source="userLogin" destination="amfphp" fault="{onServiceFault(event)}" showBusyCursor="true" >
<!-- here goes the methods of the AMFPHPclass expressed in flex -->
<mx:method name="loguser" result="{onMethodResult(event)}">
</mx:method>
<mx:method name="logitout" result="{onMethodResult(event)}" >
</mx:method>
</mx:RemoteObject>
Source means the name of the service in the AMPFPHP “services” folder and loguser and logitout are public or remote methods inside the service. The “onMethodResult(event)” means the function to call when AMFPHP returns data after calling any of the methods in the service (look that bothhavethe same function withinflex, but you can have different functions).
Then add an xml file to the root folder of your project usually:
Documents and Settings\<user>\My Documents\Flex Builder 2\<project name>
This xml is:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="amfphp">
<channels>
<channel ref="amfphpId"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="amfphpId" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://www.your_site_url.com/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>
Save this file as “services-config.xml”, finally right click on your project name (in the navigator panel, on your left) and click on properties, then in the dialog click on “Flex compiler” (the left column) and where it says:
-locale en_US
Add this:
-locale en_US –services services-config.xml
And apply changes, now YOU ARE DONE setting up AMFPHP with flex!!
*The Flex 2 Guestbook*
If you followed the entire tutorial you are now ready to understand everything I will say from now on and of course you are now a certified Flex member (lol), but I’m talking serious guys if you followed the tutorial you will discover that using flex will be easier as programming a page or an entire site.
The only thing I didn’t mention is that the guestbook is using a compenent extension, in flex you can extend components just by opening a File|New|mxml Component, instead of creating an AS class extending the component. This component extensions are considered by flex as MovieClips (not really but for you to understand the concept) you call it as you named the file as easy as that, so the guestbook uses “commentForm.mxml” that is a component extension of the “TitleWindow” component (yes it is extended using tags and using AS3 too).
NOTE FOR FLASH PROGRAMMERS: The root is not available in flex, so how can you work with levels? If you want to access the <Application/> level (the root level) use a reference to it (is like a constant) mx.core.Application.application.your_function_or_tag
And that has been all guys, if you reached till this part then you can modify the guestbook with no problem at all, hope you have enjoy this tutorial and if you have any doubts please post them in the flex forum and surely someone will try to help you.
Andres Santos
Author
