http://www.noupe.com/adobe/flex-developers-toolbox-free-components-themes-and-tutorials.html

Since Flex is delivered via Adobe Flash Player, you know that your clients will be in a situation for a couple of things:

• See The Content: 98% of people out there on the web have Flash Player
• See The Content The Right Way: Much fewer rendering issues between IE 6/7, Firefox 2/3, Safari, Etc. since they all use Flash Player

Flex uses MXML and Actionscript 3 (AS3) on the coding side. After the code has been written, the Flex Builder will compile a .swf and then the Flash Player will “play” the application. Since the Flash Player is a common platform in the Flex world, many of the standardized components that one might have to write into their applications are already included in the player itself (version 9.) As a result, Flex applications are not only richer, but also smaller (and therefore faster loading) than they might normally have to be to deliver the Rich Internet content.

One of the greatest things about this standardized content is the ability to easily reference what you are trying to do. Adobe has a wonderful Live Docs site that will give you ever bit of code you need to actually develop your own Flex applications using AS3 and MXML.

Personally, I always enjoy programs that don’t force me to code every piece of every code 100% by hand. The Flex Builder will help you to finish statements and complete tags as you begin typing. It also will show you the various components / tags / etc that are available to you when you start to type. For example, if you start trying to type s, Flex will automatically bring up the list of S operations, as well as automatically adding the mx: block to the script. If you’ve done JavaScript development before, you might be familiar with eclipse, which is the platform that Flex Builder is built on.

I’ll be updating this Blog as we cover new topics and information. I won’t be doing a play by play of the actual code that we’re doing however I will try to hit all of the major topics!

We’ve spent some time this morning talking about errors. Flex Builder has a great error console built into it! Not only does it mark up the code, but it gives specific error information at the bottom of the screen that will tell you where the problem is, and potentially (like 60% of the time) what to do about it. A best practice we discussed was to try and avoid putting all of your application into a single file. This allows for much easier debugging if you run into a problem! And of course, keep in mind that if you hit an error as you’re building, Flex is telling you this because it cannot compile with the error. Cancel the problem and solve it otherwise you’ll just keep seeing the same version of the file over and over again until you get it fixed (which is difficult if you think you are seeing updated versions when you run the application.)

Another topic we’ve covered is events. An event occurs in the system when something has happened. For example, the “creationComplete” event will fire when an object (like the application) has finished loading. Events are literally a flare gun shooting up saying “HI I DID SOMETHING!” You can then use these events to tell your code either to do, or not to do, something based on the result of an event.

LUNCH

So I’ve had several people ask me why you would use Flex instead of Flash. Flash is so popular that people are trying to use it for things that it wasn’t really originally intended. For example, at my job, we use Flash for Text delivery and content management. The problem here though, is that Flash is designed to deliver rich media content (video, audio, animation, etc.) using a timeline creation system. Flash is designed to handle text, to an extent, but its not really designed to be an entire web site or other application. It is certainly possible, but its not what it was intended to be used for. Flex on the other hand is designed to be a total application development environment. If you’re trying to do anything other than move from point a to point b, you probably want to use Flex. Probably. You can certainly still do your cool little animated header, or other device in Flash and then import that object into Flex and use it. In doing this, you’re going to be essentially getting the best of both worlds.

Just a quick note on debugging: Make sure you have the debugging version of Flash installed before you start messing with Flex!!!!!!!

Steps So Far:

1. Create the Application
2. Change the background color
3. Create a bindable, private, variable,
4. Call the variable
5. Place an image
6. Discussed Errors
7. Discussed Components
8. Events
9. Debugging
10. HTTP Services

Adobe does a lot of cool things for students, one of which is their education licenses. If you’re a student, you can actually get the Education version of Flex for FREE. Click here to go to their registration site. I highly recommend taking advantage of this if you’re a student!

So far, we’ve done a lot of basic setup. Getting Eclipse configured took quite a bit of time for most people around the room. I’m using the Flex Builder from Adobe, which is built on eclipse (same software more or less.) We are also using CFEclipse, a plugin for Eclipse to make it a little more Cold Fusion friendly.

I’ll be updating this Blog as we cover new topics and information. I won’t be doing a play by play of the actual code that we’re doing however I will try to hit all of the major topics!

One of the most exciting things we’ve talked about is the versatility of Cold Fusion. Compared to a JavaScript application, a Cold Fusion application will take roughly 1/3 the amount of time to complete. From what I’ve seen so far of the code, it is considerably easier to code than JavaScript (as its comprised of a lot of pre-packaged libraries.)

Another very exciting thing about Cold Fusion, is its font abilities. Since Cold Fusion is itself a server, you can embed fonts onto the server so they are available for any flash or PDF content on the server. Remember too that Google has recently started indexing .swf (Flash) files so its now possible to maintain search engine optimization (SEO) while working with Flash / Flex. (Yes, I just called fonts exciting. Talk to your graphics designer they’ll like it.)

Today, we’re doing a pretty short overview of Cold Fusion. The “course” we’re talking through is a 2-3 day intro to the product. However, we’re doing in about a 6 hour block of time. So, obviously we’re moving pretty quickly. The goal is to take a current HTML site and convert it into a Cold Fusion site.

To begin with, we’re taking a lot of the HTML code and breaking it into reusable segments. I am a huge proponent of coding like this. I hate working with sites that use the same code over and OVER and OVER. Its a horrible practice and its so much simpler to just include common files (hooray php.) Cold Fusion certainly support the same sort of include functionality that is common in php and other languages. We’re spending some time now breaking down the HTML template to remove redundant code and including a common header and footer file.

We’re also doing a bit of work on a list. The sample file that we are using has an address book function in it. As a result, there is an un-ordered list (ul) that has 26 entries. Using Cold Fusion, we replaced approx 70 lines of code to setup list items (li) for the address book links with 6 lines, that simply defined the alphabet and then created a loop that reused the same list item element across the entire alphabet. MUCH cleaner code.

Key Note:

At Lunch we had a keynote speaker from Adobe (Adam Lehman from Adobe Systems) who gave us a pretty cool overview of some of the various uses for Cold Fusion and the other Adobe programs in their repertoire as well. We got a great look at Cold Fusion integrating with .Net services. Essentially he had a computer setup (Windows Machine) on his .Net account. He was using Cold Fusion to pull the system processes (similar to clt. alt. dlt. processes on a Windows Desktop). He was then using various ways of displaying this data. First we saw it with AJAX (asynchronous JavaScript and XML), then we saw it with Flex, and finally as an AIR application. All 3 were quite similar, however, there was improvement / change at each step. The Flex app was a bit cleaner / crisper than the AJAX version. Also, it had the Flex charts and diagrams built in. Adam was easily able to swap between the table layout and a pie chart layout. He didn’t have to do a new set of code to make the pie chart, it was built in with Flex. The AIR app worked the exact same way on his desktop, however he was able to easily export the data by dragging to his desktop and got a chart.

Adobe does a lot of cool things for students, one of which is their education licenses. If you’re a student, you can actually get the Education version of Cold Fusion for FREE. Click here to go to their registration site. I highly recommend taking advantage of this if you’re a student! (Please note, unlike the Flex education version, Cold Fusion is for Education / Training ONLY.)