Compiling a Simple RIA (without Flex Builder)
Flex is a very powerful SDK capable of many awesome things, but taking advantage of Flex will rely on the programmer's desire to bring good principles into practice. Flex is a set of components designed to make common problems easier to solve, but it doesn't do anything more than what Flash (in combo with other technologies) could already do.
Today we'll create a simple RIA using Flex components, and compile it with the free FlashDevelop. This will be a visual representation of Cmdr 'Redbeef' Viktor's fleet of starships in orbit around Nobel II.
You can download the files of this tutorial here.
Before we begin, please ensure you have downloaded and installed the following:
- FlashDevelop
- Adobe Flex SDK
- Flex Builder 3 trial (Optional, to see the example data rendered using different views)
First Things First
- You must ensure that you set-up Flex 3 to compile in FlashDevelop - this is not only the alternative to compiling in Flex Builder, but it demonstrates how Flex 3 components are robust and independant of programs as well as each other.
Go to Tools > Program Settings and select AS3Context in the left panel.
Scroll down the right panel and enter the Flex SDK Location to match where you have extracted the Flex SDK that you downloaded. If for any reason you cannot compile, come back to this step to make sure you've located the SDK properly.
Creating Your First Flex 3 Project
- Open FlashDevelop, select 'Open Project' from the 'Project' dropdown menu.Browse for viktors_ships.as3proj from the downloaded files to open the tutorial project. If you were creating a new one from scratch, you would select 'Flex 3 Project' under the ActionScript 3 templates. Creating a new Flex project in Flashdevelop also creates the typical folder structure of a Flex RIA.
- Find 'Main.mxml'. Double-click it to start editing its content. An mxml file is an XML-based markup language that is basically the 'View' in MVC, and you can find it in the Downloaded files. I will discuss the advantages of using MXML rather than ActionScript for creating Views later. You'll notice that data.xml is a child of Main.mxml in the project hierarchy - this is a simple way to look at how your data is organised.
- Run the compiler by hitting 'Test Movie'. Congratulations! you have just compiled your first RIA. You can also play with the data by editing data.xml in the src folder.
The data is represented in DataGrid format
Sure, we could easily have done the same with pure AS3, but Flex has removed all View considerations from AS3 by handling it with the nifty MXML file. AS3 then becomes purely business logic. As with all design patterns, there are always benefits and challenges that accompany Flex and we will discuss these at another time.
BONUS XP
You will notice there is a second .mxml file in the files- MainGraph.mxml. This is an alternative View document to Main.mxml. This uses a graph layout to display the data rather than the grid. The graph components are in the two .swc files: 'datavisualization.swc' and 'datavisualization_rb.swc' which are from the trial download of Adobe Flex Builder. To add swc files to your Flex project in Flashdevelop, right-click the src folder and select Add > Add Library Asset and browse for the .swc file.
To compile from MainGraph.mxml, right-click the file and check 'Always Compile' - there will appear a green arrow to denote that this is now the document file.
Change which file to compile from
You will now see the same data represented as bar graphs when you compile again.
The data is now represented in bar graphs
Flex 3: Introduction
As Beefus Maximus continued on his heroic quest to free Shabbyway Valley from Flash ActionScript Monstrosities, somewhere in the heavens, beyond the moon and constellations, an Orion-class battlecruiser orbits the dark-side of Nobel II.
Aboard the command-deck, Commander 'Redbeef' Viktor and his advisors stand silently over the circular holographic projector depicting Nobel II and the ground war raging on its surface.
Adobe Flex3 is the combo of its framework, Flash (as its underlying technology), compiler, Flex Builder 3 and server-side gateways. It is a tool for making rich-internet applications that are flexible and scalable.
You can think of Flex as an answer to AJAX which has become the benchmark for RIA's. Frankly, I don't see why anyone should choose one over another for any good reason - but if you're like me and you are much more comfortable working in AS3, then I guess Flex would be your entry point.
The key to developing in Flex is the design pattern, and as we've previously mentioned, MVC is the best, if not only relevant design pattern when it comes to creating user-interfaces. As such, before continuing, it might be a good idea to familiarise yourself with the concept of Model-View-Controller.
Get started by downloading the trial of Adobe Flex Builder 3 here and be sure to check out the free SDK as well.
This week, we will start by building a simple rich-internet application with Flex Builder.
E Theory exploring Flex 3
I'm back! It's been a good few weeks since I last posted anything, but I blame it on the sun for sapping my after-work enthusiasm when it comes to writing more about the cool stuff you can do with AS3.
In order to maintain some sort of blogging rhythm, I've decided to post at least once a week, on Tuesdays - and I've included a new 'blog' category for smaller articles when I don't have time to sit down and write a proper tutorial for Flash Quest.
Another more exciting development is going to be my exploration in Flex 3, which many of you may already know is a nifty framework for making Rich Internet Applications. Perhaps I will be writing articles on Flex 3 in a similar-but-different style to the way I've treated the Flash Quest articles - so stay tuned for those posts!
Garry