Learning Flex through 'Just MXML and AS3'

DIGG IT!     9 Comments Published Saturday, July 29, 2006 at 12:11 PM .

On Monday, I received 2 email requests within 30 minutes requesting MXML/AS3 examples. I made an example, added a subject, and pasted the MXML/AS3 into the body. It struck me as a simple way to learn Flex, so I created 'Just MXML and AS3'.

The goal is for the community to post working MXML and AS3 examples to explore working Flex applications. Just paste the code into Flex Builder 2, Flex SDK, Flex Data Services, and it will compile a working example. You can then explore the working code and discover how Flex really works from the inside out.

I learn by doing, seeing, exploring, and understanding. Books are great, but there is no substitute for compiling code, seeing it work, and understanding it. It allows you to see patterns, discover new techniques, and explore another developer's perspective. I have learned more from tinkering with source code than I ever have from a manual or textbook. Real understanding or innovation rarely comes from reading a manual, it occurs when you explore the known to discover the unknown and unwritten.

What would the modern world be like if the Wright Brothers had not tinkered with bikes, kites, and propellers? Real innovation and knowledge comes from exploration.

So what is 'Just MXML and AS3' about?

OPEN - Anyone can post code to 'Just MXML and AS3' but all code is approved for publishing. Post example MXML and AS3 here.

DEVELOPER CREDIT - The name of the developer will be in the post title. "by YOUR NAME HERE" will be in every post.

TEXT POWERED - With 'Just MXML and AS3' you can compile an application in less that 1 minute and see code working on your machine. With text, sharing code is as simple as cut and paste.

I look forward to seeing what you contribute to 'Just MXML and AS3' and I want to encourage everyone to post code often. There is so much to learn in AS3 and MXML that we could post 1000's of examples and still not cover every feature.

Post code, Get credit, Have fun!

Cheers,

Ted :)

---

Flex 2 Preloaders - SWF, PNG, GIF Examples

DIGG IT!     37 Comments Published Monday, July 24, 2006 at 10:22 AM .

Last friday I posted an example of custom preloaders for Flex 2 applications. Using the exact same code, I made 3 examples this morning that show the use of PNG, SWF, GIF within custom preloader classes. Also full source is available below...

SWF Flex 2 Preloader
SWF Flex 2 Preloader View Source
SWF Flex 2 Preloader Source ZIP

GIF Flex 2 Preloader
GIF Flex 2 Preloader View Source
GIF Flex 2 Preloader Source ZIP

PNG Flex 2 Preloader
PNG Flex 2 Preloader View Source
PNG Flex 2 Preloader Source ZIP

I will be posting a new release later this week that contains the progress notification for users of the preloader state. Users will be able to see:

1. Loading progress of RSLs.
2. Loading progress of base SWF.
3. Initialization progress.

More to come!

Ted :)

---

Flex 2 Custom Preloaders

DIGG IT!     24 Comments Published Friday, July 21, 2006 at 2:16 PM .

I have been working on a custom preloader component for Flex. The idea here is to make the preloader into a splash screen just like desktop applications. It conditions the user to think that this is not a web page and is an application. Here is the first public build.

Flex 2 Custom Preloader Example

Flex 2 Custom Preloader View Source

Flex 2 Custom Preloader Source ZIP

Next Build:

- Add Download Progress
- Add RSL Download Progress
- Add Initialization Progress

Features:

- Preloader is available after application initializes.
- Preloader is faded in and out.
- Preloader supports GIF,JPG,PNG,SWF (Yes, Flash Preloaders are supported!)

I am adding in download/initialization progress into the preloader next week. Currently there is no feedback to the end user that the app is loading or initializing, this will change in the next build.

The important item here is that these preloaders can contain GIF, JPG, PNG (with transparency) and SWF files (Flash 2 or higher!). I made sure that it was easy to embed assets into the base movie for playback before the base Flex SWF has loaded. This makes building/customizing preloaders easy. Simply swap the file (welcome.gif) in the /preload directory and edit the Embed statement in the preload.WelcomeScreen.as Class and you are good to go. The goal here was to allow anyone to make a killer preloader for Flex 2.

I will continue to add features to the preloader as needed until it hits 1.0. Getting the base design ready was not easy but now that the hard part is done, it looks to be smooth sailing.

If you want a feature added please post a comment.

cheers,

Ted :)

---

Real World Flex Seminar - New York

DIGG IT!     1 Comments Published Thursday, July 20, 2006 at 10:15 AM .

Today July 20 is the last day for Early Bird registration for the Real World Flex Seminar in New York City. The session content at the seminar is simply fantastic and if you are getting into Flex development this looks to be a great way to learn.



Here is the Real World Flex schedule:

Keynote: David Mendels, Adobe
Yakov Fain + Dr. Victor Rasputnis: Flex and Java
Christophe Coenraets: Extending AJAX with Adobe Flex
Simon Horwith: Flex Data Services
Dave Wolf: Cynergy Systems Technology Presentation
Jesse Randall Warden: Flash & Flex - A Winning Combo
Fumi Matsumoto: Building RIA Consumer Shopping Experiences
Mansour Raad: On Creating Great Mapping Mashups Using Flex
Flex Power Panel Live on SYS-CON.TV

Again to save $100 you will need to register before midnight tonight July 20th!!!



What is really interesting for me is that both my current and former employers are sponsoring the seminar. It will be good catching up with everyone at the conference.

See you in New York!

Cheers,

Ted :)

---

Generating Custom Classes with Interfaces in Flex Builder

DIGG IT!     3 Comments Published Tuesday, July 18, 2006 at 12:02 PM .

While putting together a custom Preloader for Flex 2 I generated an ActionScript 3 Class using Flex Builder. I decided to explore the Add/Remove Interfaces feature in the New ActionScript Dialog. OMG, this is such an awesome feature, I am speechless.

For every Interface you add to your new class, Flex Builder will add all the methods the Interface needs with correct input and return types instantly. I didn't really know what to expect but this far exceeded my expectations.



Try this:

1. Open Flex Builder
2. Create New Flex Project
3. Create New AS Class
4. Enter Class Name
5. Enter "flash.display.Sprite" for the SuperClass
6. Enter "mx.preloaders.IPreloaderDisplay"
7. Make sure that 'Generate functions inherited from Interface' is checked.

Bingo! A perfect custom preloader AS3 Class, ready for deep customization. Rockin!

I love automation, don't make me think, save me boatloads of time, and works perfectly every single time! Great work Flex Builder Team, this one is a jewel.

Custom Preloaders are loading...

Cheers,

Ted :)

---

Filtering UI Data in Flex

DIGG IT!     4 Comments Published Friday, July 14, 2006 at 8:42 AM .

There is a very useful UI pattern emerging for RIA applications in terms of filtering results. Basically as a user enters data and results are filtered in real time. I have seen many cases of this recently in several applications and thought highlighting a few would be useful.

Slider Based Filtering:

HomeLocator by ASFusion

Flex Store(view Products)


Text Input Filtering:

YouTube.com Live Search by Kirk Ballou

FlexJax Search (php/mysql) $$

Search Grid Component by Uday M. Shankar

Apollo Tunes by Mike Chambers


What I find interesting about these examples is that filtering simplifies the amount of visible data. Filtering removes irrelevant data from view and allows the end user to focus and work within the remaining data. The slider model allows you to set high and low bounds on the viewed dataset and the text input provides search results. It will be interesting to see changes to this pattern as we see many Flex applications appear publicly.

More to come!

Next post is "Custom Pre-loaders for Flex 2"!

Ted :)

---

FlexComponents Discussion List

DIGG IT!     4 Comments Published Wednesday, July 12, 2006 at 9:02 AM .

The new FlexComponents list is 100 Percent focused on creating custom components for Flex. The list is NOT for general Flex development and is laser focused on creating custom components for Flex. If you are creating components for Flex, please join in.

FlexComponents

Post message: flexcomponents@yahoogroups.com

Subscribe: flexcomponents-subscribe@yahoogroups.com

Unsubscribe: flexcomponents-unsubscribe@yahoogroups.com

Regards,

Ted :)

---

TagTV - A Media Mashup for Mashup University!

DIGG IT!     3 Comments Published Sunday, July 09, 2006 at 4:27 PM .

I wrote TagTV over the past 2 days for my session at Mashup University on Monday at the Computer History Museum in Mountain View, CA. The event should be allot of fun and I will be highlighting Flex 2 from a mashup developer perspective.

Mashup University - Mashups in Flex 2 by Ted Patrick - Monday 9:45-10:45

CNet is going to be covering the conference and is recording the sessions for web broadcast.

TagTV - Flex RIA for viewing/saving photos and video.

The goal with TagTV is to provide an alternate search/viewing/saving format for photos and video in a single interface. All viewing/searching/saving of content occurs on your TagTV desktop. As you search, you are interacting directly with YouTube.com and Flickr.com backends. All media in TagTV is driven by these content sources. The application allows you to save media and searches within TagTV within the settings panel. If you refresh your the TagTV page, all saved data will be saved with the exception of your viewed media history.

Click to View TagTV


The full source for TagTV is available, simply right click to view source and to download a ZIP file of the entire application.

Enjoy TagTV and see you at Mashup University!

Cheers,

Ted :)

---

Adobe Component Developer Summit - Apollo by Mike Chambers

DIGG IT!     11 Comments Published Friday, July 07, 2006 at 10:58 AM .

Mike Chambers presented Apollo at ACDS. I posted his slides that shed some light on the Apollo project. I have had the pleasure to work with Apollo and it is easily one of the most impressive projects in development at Adobe.

Apollo - Mike Chambers
on
What is Apollo?

Apollo is a cross-OS runtime that allows developers to leverage their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s.






More to come!

Ted :)

---

Update Flash Detection Scripts to support Flash Player 9

DIGG IT!     5 Comments Published Thursday, July 06, 2006 at 8:06 AM .

It is time to update site detection scripts, yet again. Many sites search for a version lower than a fixed player version and break when you visit with Flash Player 9. Flash 9 is compatible but your site's JavaScript needs an update.

Future-Proofing Flash Player Detection Scripts

I have long advocated using SWFObject for Flash Player detection because its simple to use and it works. Basically SWFObject overwrites an HTML DIV tag with minimalist Object/Embed if a player version is supported.

For Flex 2 applications, I recommend sticking with the default HTML/JS templates in Flex Builder 2 and the generated HTML/JS from MXML files in FDS. These templates include some new code that seamlessly enables Express Install within Flex application. If a Flash Player views this HTML/JS and they have Flash Player 6 r65 or higher they will automatically be prompted to upgrade their player. After the download the Flex 2 application is displayed. The user experience here is really great and there has been allot of hard work to enable this killer upgrade feature for Flash Player.

Geoff, contact me so that we can get SWFObject working seamlessly with Flex 2 applications. We need to make it drop dead simple to get Flex 2 SWF into HTML applications in the small and in the large. :)

Again update your JS/HTML to be compatible with Flash Player 9.

Regards,

ted :)

---

Flex.org - Official Website Button

DIGG IT!     0 Comments Published Wednesday, July 05, 2006 at 1:58 PM .

Here is the official Flex.org website button. Add this to your Flex blogs and Flex related sites to link to Flex.org, The Directory for Flex.

          

To add a button to your website, simply copy and paste the HTML below:

<a href="http://www.flex.org"><img src="http://www.flex.org/images/flexorg.gif" alt="Flex.org - The Directory for Flex" border="0" /></a>

          

We have some great changes in development for Flex.org so stay tuned! The changes will put you in the center of Flex for projects, jobs, and locating the resources you need to be successful. Show your support for flex.org and add a button to your website or blog.

More to come...

Ted :)

---

Adobe Component Developer Summit - Slides and Examples

DIGG IT!     4 Comments Published at 12:04 PM .

Adobe hosted 27 component developers in our San Francisco offices on June 22-23. The Flex engineering team presented for 2 days with the focus on creating components for Flex 2. Here are all of the presentation and example code from the summit.

Flex 2 Basics - Ted Patrick

Flex 2 Overview - Matt Chotin

Flex Data Services Overview - Christophe Coenraets

Flex Data Services for Component Developers - Jeff Vroom

Building A Flex Component - Ely Greenfield
Random Walk Components ZIP

Flex Framework Internals Part1 - Alex Harui

Flex Framework Internals Part2 - David George

ActionScript 3.0 and AVM2: Performance Tuning - Gary Grossman
GC Mark and Sweep SWF
Interpreter SWF
JIT SWF

Managers In The Flex Framework - Manish Jethani

Drawing API - Kevin Hoyt
Drawing API ZIP

Automated Testing In Flex - Ram Krishnaiyer

Flex Component Accessibility - Andrew Kirkpatrick & Bob Regan
Flex Component Accessibility ZIP

Apollo - Mike Chambers

I want to thank all the architects and engineers for putting together a really great summit. We had allot of fun putting the event together and hosting our guests. We will be recording all these sessions in Breeze and post them online ASAP.

Adobe is very serious about creating a rich and diverse component market for Flex. We will be hosting more events and supporting the developer community in creating components for Flex ongoing. Given the companies and developers in attendance at the Component developer Summit we will be seeing some amazing open source and commercial Flex components emerging shortly.

Just like PowerBuilder, VB, Java, and .NET markets before, a component market for Adobe Flex is forming. Please contact me if you are making components for Flex 2, I will make sure you get the support and assistance from Adobe that you need to be successful.

Ted Patrick
Flex Evangelist
Adobe Systems Incorporated

---