Page 1 of 1

Beginning Flex 3 Tutorial Flex 3 Rate Topic: -----

#1 spullen  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 10
  • View blog
  • Posts: 356
  • Joined: 22-March 07

Posted 28 May 2009 - 01:45 PM

Flex 3 Tutorial
By spullen

Background:

This tutorial (hopefully one of many) serves two purposes. The first purpose is to help people learn how to use
and get excited about flex. The second purpose is to help me better understand this framework (as I am just
learning how to use it myself).

Why flex? I got interested in flex because I wanted to learn some sort of RIA (Rich Internet Application) technology.
RIAs seem to be the wave of the future for internet applications, and it seems to have been picking up more in the
past year. Alternatives to flex are Java FX, and Microsoft Silverlight. Java FX looks cool, but I don't care for
java that much, and silverlight idk, I tried running a application on my computer and it apparently doesn't work
on linux (Moonlight didn't work either) so that's an instant fail. Flex on the other hand worked fine, I was able to
go through all of the sample applications on the adobe website (http://flex.org/showcase/). Flex is built on top of
flash and actionscript, so it has a pretty big stakehold on the web (can you think of anyone that doesn't have the
flash vm installed on their browser?). Flex is opensource, another plus. So why should you care? Coming from a web
development standpoint html, css, and javascript are a pain to get working cross browser, flash applications will be
the same from one browser to the next, which is great, let me just develop! Plus you can pretty much use whatever
backend you want Java, PHP, Rails, whatever..., just as long as your flex application knows how to communicate with
your service. So with this in mind let's get started.

Setup:

So I run Linux, so I'll explain how to set everything up on that. I'm sure it's not too different on a Mac or Windows
machine either, I've just never tried and nor do I care too. There is IDE by Adobe called Flex Builder which is built
on the Eclipse IDE, it cost somewhere in the $200 range. I've never used it but if you want to dish out some dough it
might be a good tool to have. I'll explain everything using the command line.

Download the Flex SDK:
http://www.adobe.com....cfm?e=flex3sdk
and unzip it.

In my case I unzipped it to /opt, but you can give it a home anywhere.

Next I created a symbolic link from the flex_sdk_3 to a directory named flex.
The reason I did this was just in case a new version came up I could point the
symbolic link to the new version easier without having to update my PATH.

The next thing is to update your PATH variable. This requires that you update your
bashrc file in your home directory (As noted above this is for unix like systems so
this step might be different).

%> emacs ~/.bashrc


* You can use any file editor you like

Once you have your editor open just add this line:
export PATH=/path/to/flex/bin:$PATH



Save and exit.

Then in the command line:
%> source .bashrc



And you should be ready to go.
To test that it is installed properly type this in the command line:
%> mxmlc -version


You should see the Version number.

Your First Application:

Like all (or almost all) tutorials, I'm going to demonstrate hello, world!.
Make a new file called Hello.mxml. mxml is the extension for all of the "view"
files. You can also use actionscript files to build a Flex application. mxml
files get turned into actionscript code during the compile stage (using mxmlc).

Open the file and put the xml content type on the first line. And create a new
tag called mx:Application, with the xml namespace for mx set to http://www.adobe.com/2006/mxml.
<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>



If you compiled this now and ran it you would get a blank screen (well except for the
default gradient provided).
To compile the mxml file type this into your command line:
%> mxmlc Hello.mxml


This should produce a file call Hello.swf

Okay, now let's add Hello, World to the screen
<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Panel>
		<mx:Text text="Hello, World!" id="hello" />
	</mx:Panel>
</mx:Application>



If you compile this now you should get a box in the center of the screen with the text of "Hello, World!".
This adds two components to the mix, the first is the Panel component. This is one of the layout containers
in flex. The other component is a Text field, this is pretty self explanatory all it does it display some
text that is non-editable. We also give the text field an id called "hello" which we will use in the next
example.

Let's make this a little bit more interesting, how about adding a button and let's have the button do something.

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
	
		function showHello():void {
			if(hello.visible == true) {
				hello.visible = false;
				firstbutton.label = "Show Hello";
				helloPanel.title = "Hello Not Visible";
			}
			else {
				hello.visible = true;
				firstbutton.label = "Hide Hello";
				helloPanel.title = "Hello Visible";
			}
		}
	
	]]>
	</mx:Script>
	<mx:Panel title="Hello Not Visible" id="helloPanel" paddingTop="10" paddingBottom="10">
		<mx:HBox>
			<mx:Button label="Show Hello" id="firstbutton" click="showHello()" />
			<mx:Spacer width="100" />
			<mx:Text text="Hello, World!" id="hello" visible="false" />
		</mx:HBox>
	</mx:Panel>
</mx:Application>



In this version we actually have some actionscript code embedded inside the mxml file.
To do this you need to wrap it with the Script tag. A CDATA tag will also be wrapped
around the code as well. This is so the xml will not be parsed. In the script tag
there is one function that returns nothing (void). And if the hello text field is visible
then we hide it otherwise we show it. Some other attributes are also updated. As you can
see the components can be manipulated using their id attribute, this is because the components
are compiled into objects (so the id is like a variable (object) name.). To the panel container
we add an id as well as a title, and some style (the padding). Then inside the panel we now have
a HBox container, which is a horizontal box. Then we add our button object. As you can see
we have a click attribute. This triggers an event when you click on the button and calls
the showHello function. Then we have a spacer between the button and the text.
If you compile it now you should have something slightly more interesting.

Well that's it for now. I am open for comments and corrections. If anyone is interested I can
produce more tutorials and get into some cooler stuff.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1