Flex 4: flex.components

Here is a very simple example that displays some of the components that are located in the new flex.components package.  The SWF is interesting because it is visually a little different than the classic Flex theme. No CSS has been altered in this example. Flash Player 10 is required to view the SWF.  The following Flex 4 components can be seen: Panel, CheckBox, List, RadioButton, TextArea, TextInput, ToggleButton, HSlider, VSlider, VScrollBar, HScrollBar.

JPG showing the components: Flex 4 components screehshot

SWF with the functional components: Flex 4 components SWF

Here is the sample source code:

<?xml version=”1.0″ encoding=”utf-8″?>
<Application xmlns=”http://ns.adobe.com/mxml/2009″
layout=”flex.layout.VerticalLayout”
backgroundColor=”white”
xmlns:ns=”library:adobe/flex/gumbo”>

<Script>
<![CDATA[

/**
*
* @project Flex 4 flex.components example
* @author Sean Moore, http://www.seantheflexguy.com
* @date: August 29, 2008
*
*/

private function onButtonClick():void
{
trace(">>onButtonClick");
}
private function onListSelectionChanged(event:Event):void
{
trace(">>onListSelectionChanged");
trace("event.currentTarget.selectedItem="+event.currentTarget.selectedItem);
}
private function onRadioButtonClick():void
{
trace(">>onRadioButtonClick");
}

]]>
</Script>

<Panel title=”Flex 4 flex.components example” width=”500″>
<Button click=”onButtonClick();” label=”Flex 4 Button” />

<CheckBox label=”Flex 4 CheckBox” />

<Group>
<Rect width=”200″ height=”100″>
<stroke>
<SolidColorStroke weight=”1″ color=”#000000″ alpha=”0.5″ />
</stroke>
</Rect>
<List content=”['row one','row two','row three','row four']” selectionChanged=”onListSelectionChanged(event);” />
</Group>

<RadioButton label=”Flex 4 RadioButton” click=”onRadioButtonClick();”/>

<TextArea height=”50″ content=”Flex 4 TextArea.”/>

<TextInput text=”Flex 4 TextInput”/>

<ToggleButton label=”Flex 4 ToggleButton” />

<HSlider />
<VSlider  />

<VScrollBar />
<HScrollBar  />

</Panel>

</Application>

Note that the <Group> element is not required to use the List component. It’s been added to help show where the List is in the example SWF. (Sorry that the code hasn’t been beautified…)

The Nature Conservancy - Protecting Nature, Preserving Life

Thanks to the Adobe Developer Connection for putting together this awesome program! Authors that contributed work to the ADC from June through August in 2008 were each given an opportunity to choose from 5 charities to donate $100 to. The ADC Write and Give Program generated $6200 USD in Q3 of 08!! That’s fantastic! I donated to the Nature Conservancy for my work on the Flex Best Practices series. Shout out to the other authors who also contributed to the ADC Write and Give Program.

Sheri German
http://www.swanilda.com/

Paulo Caroli
http://caroli.org/

Ayo Binitie
http://mrbinitie.blogspot.com/

Louie Penaflor
http://www.restlessthinker.com/blog/index.php

Jonathan Tabak
http://www.panachetech.com/

Jim Babbage
http://www.communitymx.com/blog/index.cfm?blogger=32

Nick Myers
http://www.cooper.com/

DryIcons
http://dryicons.com/

Tom Green
http://www.tomontheweb.ca/

Kumar Vivek
http://blog.i2fly.com/

John Wylie
http://www.activata.co.uk/

Samir Dash
http://www.mobilewish.com/

David Tucker
http://www.davidtucker.net/

Bill Bejeck
http://www.adobe.com/devnet/flex/articles/flex_grails.html

Henrik Lindahl
http://www.kodgruppen.com/

Sebastien Arbogast
http://sebastien-arbogast.com/

Zee Yang
http://www.flexlive.net/

Thanks again to Hong Qiu for all the help with the article. The second part of the Best practices series is in the works and should online in the next couple months. Thanks to Edward Sullivan the Product Manager at the Adobe Developer Connection as well.

Additional information can be found on the ADC Blog.

Just a quick post regarding Flash Forward 2008. There is a killer line up this year including: David Carson, Erik Natzke, Grant Skinner, Keith Peters, Lee Brimelow, Paul Ortchanian, Tinic Uro, Luke Bayes, Stacey Mulcahy and Branden Hall to name a few. David Carson should certainly have some interesting insight for the Flash community. I am extremely fortunate enough to have acquired a pass to this incredible event. If you want to chat or grab a coffee hit me up. Contact info follows:

email: info@seantheflexguy.com
twitter: http://www.twitter.com/seantheflexguy

Extra-mega-super thanks to Phillip Kerman for the hook up.

Hope to see you there…

Here is a great book from Manning about AIR development that you might want to check out. Topics include: windowing, menus, file system, drag-and-drop, local databases, SQLite, HTML in AIR, network connectivity and also updating/distributing apps. Flex and Flash based AIR development techniques are covered. “Adobe AIR in Action introduces AIR to developers familiar with Flash and Flex, showing them how to build solid AIR-driven desktop applications. Using examples, the expert authors walk web developers through the new topics they will need to develop AIR applications for the desktop.”

You can download two free sample chapters from the book in PDF format here:

Introducing Adobe AIR (1.7 MB)

Applications, windows and menus (3.1 MB)

You can also check out the Table of Contents here.

Shout out to the great authors: Joey Lott, Kathryn Rotondo, Sam Ahn and Ashley Atkins. (And an extra special thanks to Kathryn for sharing that other source code.) Props to Karen Tegtmeyer as well for coordinating my involvement with the review effort.

Visit the companion website here:
http://www.manning.com/lott/

I actually had the extreme pleasure of doing some technical reviews of the book while it was being written. As a thank you Manning placed a quote from me on the back of the book. In addition my name appears in the acknowledgments. This is a huge, huge honor and I am extremely thankful. Thank you very, very for the opportunity.

Here are some photos of my copy of the book.

Adobe AIR In Action - Manning

Adobe AIR In Action - Sean Moore Quote

Here is your chance to win a free copy of: Total Training, Adobe Flex 2 – Advanced Visual Programming. Some highlights from the DVD are: Discover how to create data bound drag and drop functionality for virtually any Flex control. Learn to create mouse-aware application features. Understand loose component coupling, implemented through bindings and events. Get inside tips on optimizing file size through programmatic shape creation. See how to implement and skin Flex components directly in ActionScript 3.0.

Be the first person to email me with the answer to the following question and I’ll mail you a copy of the training DVD.

What are three application development frameworks that can be used for the development of Flex rich internet applications?

Sorry but this giveaway is for US residents only at this time.

Good luck!

Here is an article on Flex best practices that I had the extreme pleasure of recently writing for Adobe’s Dev Center. The article explores a number of things you can do to help clarify your Flex development process. The article was a community based effort and input was collected from quite a few prominent Flex, Flash and ActionScript developers. I would like thank Hong Qiu for a ton of great input and direction. Also many thanks goes out to the Flex team for their time and input. Lastly, many thanks to Dolores Joya, Eric Feminella, Matt Chotin, Jesse Warden and Chris Griffith to name a few, I couldn’t have written the article without your input, help and support.

I’m currently working on another article in the Flex best practices series. I’ve done a TON of research for the next article so it should be really good. Keep an eye out in the Adobe Dev Center for that sometime in September or October.

It was really, really, really cool to have an article published in the Dev Center, something I have wanted to do since at least 2002. Thanks again to Hong and Adobe for the opportunity!!

Some screen shots from the Adobe website:

I wanted to post a link to this article that I had the pleasure and opportunity of writing for Flash Magazine about the Mate framework for Flex. Mate is an awesome framework used for developing applications using Adobe Flex. I’d like to thank both Jens from Flash Magazine and Laura from ASFusion for their help reviewing and getting the article together and published. I’ve wanted to write for Flash Magazine a very long time, so massive respect for the opportunity!! I was also unclear on a couple of things about the framework and Laura’s input was a huge help and greatly appreciated.

You can check out the article here:

Mate: Event driven framework for Flex
by: Sean Moore, July 2008 for Flash Magazine
http://www.flashmagazine.com/Reviews/detail/mate_event_driven_framework_for_flex/

Here is a new pocket guide for Flex 3.0 that somehow slipped past me. I haven’t seen this book mentioned anywhere. Things have been mega busy over the last few months so that could explain it. Three things I really like: Flex, O’Reilly and a pocket sized book. These pocket guides are great for reading while standing in lines, on airplanes etc. I want to get a copy of this little guy ASAP! Here are the details for the book. Enjoy!

Getting Started with Flex 3 An Adobe Developer Library Pocket Guide for Developers
By: Jack Herrington, Emily Kim
Compiled by: Adobe Development Team
First Edition June 2008 (est.)
Pages: 143
Series: Adobe Developer Library
ISBN 10: 0-596-52064-6 | ISBN 13: 9780596520649

Book description:
“Discover how easy RIA development can be with this one-of-a-kind handbook from the Adobe Developer Library. Several clear, step-by-step mini-tutorials teach you about web services, event handling, designing user interfaces with reusable components, and more. After finishing this guide, you’ll be able to build Flash applications ranging from widgets to full-featured RIAs using the Flex SDK and Flex Builder 3.0 — whether you come from an open source or Visual Studio-intensive background.”

Table of Contents

http://oreilly.com/catalog/9780596520649/

The Flex and AS3 ecosystem is exploding. The demand for individuals who know these technologies is at an all time high. I currently get about 5 people per day that are seeking developers who know this stuff. Over the past year the demand has only increased. More and more kats are jumping into Flex/AS3 dev every day. Along with the surge of interest has come a ton of new tools, libraries and components. I put together two blog posts last year showcasing many of these new libraries, tools, etc. The hit count on these those posts is pretty impressive to say the least. It surprised me quite a bit actually. Since the start of 2008 there have been several cool items introduced to the community. Here is a new list of 36 Flex and AS3 tools, libraries and components that I’ve been tracking. I hope someone else gets some use out of this list. I need to check out many of these projects myself…

List of 31 Flex APIs, Libraries, Components and Tools
http://seantheflashguy.com/blog/2007/08/21/list-of-31-flex-apis-libraries-components-and-tools/

List of 22 ActionScript 3.0 API’s
http://seantheflashguy.com/blog/2007/08/13/list-of-22-actionscript-30-apis/

ActionScript 3.0 APIs from Eric Feminella
ActionScript 3.0 APIs developed specifically for Adobe Flex and AIR.
http://www.ericfeminella.com/blog/actionscript-3-apis/

ASMailer
The ASMailer class sends emails using an SMTP server. ASMailer sends mail without the need of a server side language like PHP or JSP.
http://asmailer.riaforge.org/

Away3d 2.1
Away3D is a realtime 3d engine for flash in ActionScript 3.0
http://away3d.com/away3d-21-demos-docs

Bullet Graph
A good way to show actual time spent vs. the estimated time for a project
http://agileui.blogspot.com/2008/05/bullet-graph-free-flex-component.html

Degrafa
Degrafa : Declarative Graphics Framework
http://www.degrafa.com/

Desuade Partigen
Desuade Partigen is an extension for Adobe Flash which lets you create realistic vector and raster particle effects (such as fire, smoke, sparkles), without requiring you to do any complex coding.
http://desuade.com/products/partigen/

EasyMVC
EasyMVC is an event driven MVC framework which focuses on flexibility while not getting in the developers way.
http://projects.simb.net/easyMVC/

Five3D
vector-based 3d rendering framework by Mathieu Badimon – has just received a significant update, bringing it to version 2.1. New features this version brings: Back Face Culling, Flat Shading, Z-sorting, Space Drawing functions, Bitmap3D class, Video3D class, Sprite2D Class, Letter Spacing, Text Width
http://five3d.mathieu-badimon.com/

Flash Player 10 API Documentation!
http://download.macromedia.com/pub/labs/flashplayer10/flashplayer10_as3langref_052008.zip

Flex 3 Performance and Memory Profiling
“Memory profiling lets you look at objects being created, take snapshots and compare them. Performance profiling allows snapshots for looking at cumulative and internal time.”
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Performance_and_Memory_Profiling

Flex 3 RSLs
Use Flex 3 runtime-shared-libraries (RSLs) to reduce the size of your applications and thereby reduce the time required to download the application. RSLs are just SWF files whose code is used as a shared library between different application SWF files.
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:Flex_3_RSLs

Flex 4 States syntax changes
Flex 4 will target all of the legacy usage scenarios of classic Flex states functionality (stateful components, states as application “views” or “pages”, effects and transitions between view states, etc.). This document outlines what is primarily a syntax change for the existing functionality.
http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax

Flex and Flex Developers Magazine
http://www.ffdmag.com/

Flex “Designer Scroll Bars”
“designer scroll bars” – skinny little tone on tone scroll bars that have no scroll arrows
http://www.gskinner.com/blog/archives/2008/05/designer_scroll.html

FlexMDI
flexmdi is a robust, extensible Multiple Document Interface framework for Adobe Flex.
http://code.google.com/p/flexmdi/

Flex Resource Bundles
What’s a resource bundle? It’s a set of values that you externalize from your source code in a properties file. And it can be swapped out at compile time or, with Flex 3, at runtime. Think of it like a style sheet for values.
http://blog.extends.eventdispatcher.org/roger/introduction-to-flex-resource-bundles/

FOAM
FOAM is a two-dimensional rigid body physics engine written in ActionScript 3.0.
http://code.google.com/p/foam-as3/

Go3D
Cool Tweening Engine, the Go3D which give you more control over moving objects in 3d space.
http://code.google.com/p/goplayground/source/checkout

GoogleMap Flex Component
A new component for Flex Developers who want to add more control or be very well organized.
http://www.igorcosta.org/?p=140

Guttershark
Guttershark is an Actionscript 3 library that pushes some simple conventions on you, only to make you faster as a developer. It’s a pattern for Flash development that cuts out a huge amount of time, especially when you’re in the first stages of development.
http://www.guttershark.net/

ILOG Elixir
A suite of professional user interface controls that gives developers a rich collection of innovative and interactive data display components. It includes ready-to-use schedule displays, map displays, dials, gauges, 3D and radar charts, a treemap chart and organization charts.
http://www.ilog.com/products/ilogelixir/

LoadingImage
Takes a regular Flex Image component, and adds a self contained ProgressBar to it to show its own loading progress.
http://www.munkiihouse.com/?p=135

Logger Library and RIALogger
The Logger component provides classes to that abstract the Flex 2 Log and logging Target classes. It provides a simple approach to logging messages with category information and provide hooks into multiple targets. It supports the following logging targets by default: RIALoggerTarget, TraceTarget (trace()), XPanelTarget, and FlexTracePanelTarget. The LogController also provides functionality to allow you to setup your own custom logging Target.
http://renaun.com/blog/flex-components/rialogger/

Mate
Mate is a tag-based, event-driven Flex framework.
http://mate.asfusion.com/index.cfm

Merapi
Merapi is a new project that is a framework for connecting AIR to java at the desktop.
http://adamflater.blogspot.com/search/?q=merapi

MinimalComps: Minimal AS3 UI Component Set
CheckBox, PushButton, HSlider, VSlider, InputText, ProgressBar, RadioButton, ColorChooser (text input only) and Panel.
http://www.bit-101.com/minimalcomps/

OpenFlux
OpenFlux is an open-source Flex component framework which allows developers to create radically new and custom Flex components.
http://code.google.com/p/openflux/

PeekPanel
Cool way to hide options or preferences in an application. It borrows the look and feel from the FlexBook/PageFlip components already out there, but instead of simulating a book, this is more of a way to use the “flip” to hide other components.
http://www.billdwhite.com/wordpress/?p=29

PlexiGlass
http://www.bobjim.com/category/plexiglass/

Share (Document Services API)
Online service provided by Adobe that allows you to share, publish, and organize documents online.
http://code.google.com/p/as3sharelib/downloads/list

Slide
Slide is an application framework for projects built in Flex 2 or 3. Using familiar design patterns, Slide provides a robust MVC structure, view state management decoupled from view implementation and a flexible approach to model and controller access, eliminating need for singleton classes.
http://code.google.com/p/flex-slide/

Sandy 3.0.2
Sandy is an intuitive and user-friendly 3D open-source library.
http://www.flashsandy.org/versions/3.0

Sprouts
Sprouts is an open-source, cross-platform project generation and configuration tool for ActionScript 2, ActionScript 3, Adobe AIR and Flex projects.
http://www.projectsprouts.org/

Universal Mind Extensions for Adobe Cairngorm
Universal Mind has extended the “classic” Adobe 2.2.x Cairngorm version to provide many productivity and maintenance enhancements.
http://code.google.com/p/flexcairngorm/

Video Tutorial on Compiling for Flash Player 10
http://theflashblog.com/?p=383

Virtual Space (AS 3.0) V. 1.0
The Virtual Space is an AS3 component that can be used to create virtual-tour type visualizations very easily. Simply specify 6 images to be used for top, bottom, left, right, front, and back. Then, position the camera, set the initial view, and specify interaction parameters.
http://www.afcomponents.com/components/virtual_space_as3/