Flex best practices – Part 1: Setting up your Flex project article

http://www.adobe.com/devnet/flex/articles/best_practices_pt1.html

Flex best practices – Part 2: Development practices

http://www.adobe.com/devnet/flex/articles/best_practices_pt2.html

If you would still like the Powerpoint preso email me and I’ll send it along.

There was an example application that I wanted to share as well. I’ll post it on this blog in the very near future. It utilizes many of the practices and standards covered in my presentation and the articles. I’d like to provide a little info or blog post at least along with the example…soon….

I’ll be giving this same presentation on Flex Best Practices in March at the OC Flex Users Group. Thanks to ASFusion for the invite!!

Thanks again to everyone who made it out last night. The audience was really great and had great questions and a great discussion. I appreciate everyone’s time and feedback. Thanks to Dolores for all of the help getting ready for the preso too!!

The other area she investigated was skinning the Flex 3 UI controls with video. This is something I haven’t seen in any Flex UI’s to date, Dolores is always up to something cool! She has really been digging into skinning Flex apps lately. Stop by her blog or get in touch directly to discuss bleeding-edge Flex 3 and AIR skinning requests. Dolores is also very interested in integrating 3D into Flex. Stay tuned for some 3D/Flex UI explorations from her in the future.

Now, on to the free Flex books!!!

Congrats to Anand Vardhan for being the first one to send in the correct answer to the last book giveaway question.

“What are three components that can be used for accessing server-side data with Flex?”

The correct answer was:

• HTTPService
• RemoteObject
• WebService

More information about Accessing Server-Side Data with Flex can be found in the online Adobe Flex 3 Help.

Anand already had a copy of Programming Flex 2 and he was kind enough to pass the book on to the second place winner who was Nuno Rosa from Portugal. Congrats to Nuno, you’re copy of Programming Flex 2 has been sent off. Enjoy that book, it’s a great one!

Now for what you’ve all been waiting for… The free book.

This week I have a copy of Flex Solutions by Marco Casario. The book is published by Friends Of ED so you know it’s quality. This is a massive book that covers a TON of information for Flex 2 and Flex 3 developers.

Here is this weeks book giveaway question:

AIR provides an easy-to-use, cross-platform window API for creating native operating system windows using Flash, Flex, and HTML programming techniques. What are three classes used to create and work with windows in AIR?

The first person to email me with the correct answer will win the copy of Flex Solutions. Good luck!

2007 was an AWESOME year for Flex and AIR. 2008 should continue this trend. Here are several different technologies and other items I plan on monitoring going into 2008. Some of these are bleeding edge, others are fundamentals which we’ve been studying for years.

“I’m sure that Flex skills will be one of the hottest skills to have in 2008.” – Yakov Fain

ActionScript 3.0
Essential ActionScript 3.0
Personally I plan on digging into the nitty-gritty details of the language. This includes refining knowledge of Errors, Events, Exceptions, Interfaces, Bitmap API, Display API and Namespaces to name a few. I’ll be reading Essential ActionScript 3.0 to do so.

Adobe AIR
http://labs.adobe.com/technologies/air/
The first full release of AIR should be coming in 2008. With the rapid growth and massive interest already I cannot even speculate what 08 will bring for this exciting, young technology.

Adobe Astro
http://labs.adobe.com/wiki/index.php/Astro
“The next major release of Flash Player, codename “Astro,” was first previewed at Adobe MAX 2007. The preview highlighted a few of the new capabilities the Flash Player team is working on for Astro: advanced text layout, simple 3D effects, and custom filters, blend modes and effects.”

Adobe BlazeDS
http://labs.adobe.com/technologies/blazeds/
http://livedocs.adobe.com/labs/blazeds/html/index.html
“BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe® Flexâ„¢ and Adobe AIRâ„¢ applications for more responsive rich Internet application (RIA) experiences.”

API’s
http://programmableweb.com/apis/directory/1?sort=date
I always keep an eye on this area of Programmable Web for new ideas for applications and mashups.

ASDoc
Using ASDoc
“ASDoc is a command-line tool that you can use to create API language reference documentation as HTML pages from the classes in your Flex application. The Adobe Flex team uses the ASDoc tool to generate the Adobe Flex 2 Language Reference.”

Brain-computer interface
http://en.wikipedia.org/wiki/Brain-computer_interfaces
http://www.techrivet.com/2007/07/23/NeuroSkyMovingBeyondConceptBCI.aspx
“brain-computer interface (BCI), sometimes called a direct neural interface or a brain-machine interface, is a direct communication pathway between a human or animal brain (or brain cell culture) and an external device.” The WII in Flash was cool, let’s see one of these plugged into the Flash Platform!!!

Cairngorm
http://labs.adobe.com/wiki/index.php/Cairngorm
http://www.cairngormdocs.org/
“The Cairngorm Microarchitecture is a lightweight yet prescriptive framework for rich Internet application (RIA) development.”

Cloud Computing
http://tnerd.com/2007/10/14/cloud-computing-the-next-big-thing-is-cloud/
Cloud_computing_wp_final_8Oct.pdf
“is a computing paradigm shift where computing is moved away from personal computers or an individual server to a “cloud” of computers. Users of the cloud only need to be concerned with the computing service being asked for, as the underlying details of how it’s achieved are hidden”

Design Patterns
http://www.javacamp.org/designPattern/
http://www.exciton.cs.rice.edu/JAvaResources/DesignPatterns/default.htm
ActionScript 3.0 Design Patterns: Object Oriented Programming Techniques
“In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design. A design pattern is not a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations”

E4X
http://www.adobe.com/devnet/flex/articles/training_e4x.html
http://www.ecma-international.org/publications/standards/Ecma-357.htm
E4X: A new approach to XML processing
http://www.w3schools.com/e4x/default.asp
“E4X offers a natural, fluent set of language constructs for manipulating XML. In contrast to traditional XML-parsing APIs, XML with E4X performs like a native data type of the language. E4X streamlines the development of applications that manipulate XML by drastically reducing the amount of code needed.”

EcmaScript 4.0
http://www.ecmascript.org/
http://www.ecmascript.org/es4/spec/evolutionary-programming-tutorial.pdf
Microsoft trying to derail ECMAScript 4?
“ECMA-262 Edition 4 is the next-generation version of ECMAScript being developed currently by the ECMA TG1 working group.” This space is heating up, keep a watch on this one I have a feeling this is going to shape the future of the web in major ways.

Flash Media Server
http://www.adobe.com/products/flashmediaserver
“an enterprise-grade data and media server from Adobe Systems Inc. This server works together with the Flash Player runtime to create media driven, multiuser RIA’s.”

Flex 3 & Flex 4
http://labs.adobe.com/technologies/flex/
Keep an eye on Adobe Labs. Flex 3 will be coming out in 2008 and who knows we may even see at least some more talk about or get to provide additional input on the future of Flex.

Flex Custom Components
http://www.adobe.com/devnet/flex/articles/creating_components.html
Flex Component Kit Alpha for Flex 2.0.1
http://www.adobe.com/devnet/flash/articles/creating_as3_components.html
I think creating custom components for Flex is going to increase in demand in 2008.

Flex Performance and Memory Profiling
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.”

Flex Persistent Framework Caching
http://weblogs.macromedia.com/jd/archives/2007/08/player_update_p.cfm

Flex Refactoring
http://labs.adobe.com/technologies/flex/videos/refactoringdemo/

Flex Skinning
http://www.adobe.com/devnet/flex/articles/flex_skins.html
http://www.scalenine.com/resources.html
“If you want to redesign the appearance of the Flex components more radically, you can do so by creating a new set of skins for the Flex components that completely replace the built-in Halo Aeon theme.”

Hibernate
http://www.hibernate.org/
“Hibernate is a powerful, high performance object/relational persistence and query service. Hibernate lets you develop persistent classes following object-oriented idiom – including association, inheritance, polymorphism, composition, and collections.”

Hydra / Adobe Image Foundation
http://labs.adobe.com/wiki/index.php/AIF_Toolkit
“The Adobe Image Foundation (AIF) Toolkit preview release includes a high-performance graphics programming language that Adobe is developing for image processing, codenamed Hydra, and an application to create, compile and preview Hydra filters and effects.”

Java 7
https://jdk7.dev.java.net/
http://today.java.net/pub/a/today/2007/08/09/looking-ahead-to-java-7.html

Java 6
http://www.sun.com/training/catalog/courses/WJB-110A.xml
http://www.sun.com/training/catalog/courses/SL-275-SE6.xml
http://www.sun.com/training/catalog/courses/CX-310-065.xml
Here are a few links with training recommended for Java certification. Might be something to think about for the future.

JavaFX
http://www.sun.com/software/javafx/index.jsp
“The JavaFX product family delivers the ability to create interactive content, applications and services from the desktop to mobile devices to the living room.”

Microformats
http://microformats.org/
“Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.” Microformats are being used in conjunction with Adobe AIR.

Occasionally Connected Apps
Monitoring network connectivity
One of the draws to using Adobe AIR is the ability to monitor network connectivity. This is one area I want to work with and research a bit more in 2008.

OOP
http://www.friendsofed.com/book.html?isbn=1590598458
http://www.adobe.com/devnet/actionscript/articles/oop_as3.html
“Object-oriented programming (OOP) is a programming paradigm that uses “objects” and their interactions to design applications and computer programs. It is based on several techniques, including encapsulation, modularity, polymorphism, and inheritance. It was not commonly used in mainstream software application development until the early 1990s. Many modern programming languages now support OOP.”

Papervision 2.0
http://blog.papervision3d.org/
http://papervision3d.googlecode.com/svn/trunk
http://blog.zupko.info/?p=76
“Features: Faster! ShadeMaterials, Shaders, ASCollada (animation support), Frustrum Culling, Multiple Viewports, Render to Scene and more. More features expected soon.”

Prisim
http://labs.mozilla.com/2007/10/prism/
“Unlike Adobe AIR and Microsoft Silverlight, we’re not building a proprietary platform to replace the web. We think the web is a powerful and open platform for this sort of innovation, so our goal is to identify and facilitate the development of enhancements that bring the advantages of desktop apps to the web platform.”

Refactoring
http://www.refactoring.com/
“Refactoring is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior. Its heart is a series of small behavior preserving transformations. Each transformation (called a ‘refactoring’) does little, but a sequence of transformations can produce a significant restructuring.”

Spring
http://www.springframework.org/
http://www.theserverside.com/tt/articles/article.tss?l=IntrotoSpring25
“The Spring Framework is probably best known for offering features required to effectively create complex business applications outside of the programming models that historically have been dominant in the industry. Next to that it is also credited for introducing previously unfamiliar functionalities into today’s mainstream development practices, even beyond the Java platform.”

SQLite
http://www.sqlite.org/
http://sqlitebrowser.sourceforge.net/
“SQLite is a software library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine.” This is used in google gears and Adobe AIR. Firefox also uses SQLite.

Struts
http://struts.apache.org/
“An open source framework for building Servlet/JSP based web applications based on the Model-View-Controller (MVC) design paradigm.”

Subversion
http://subversion.tigris.org/
http://svnbook.red-bean.com/
http://svnbook.red-bean.com/en/1.4/svn-book.pdf
“Subversion (SVN) is a version control system initiated in 2000 by CollabNet Inc. It allows users to keep track of changes made to any type of electronic data, typically source code, web pages or design documents.”

Surface Computing
http://www.microsoft.com/surface/
“Surface computing is the use of a specialized computer GUI in which traditional GUI elements are replaced by intuitive, everyday objects. Instead of a keyboard and mouse, the user interacts directly with a touch-sensitive screen, replicating the familiar hands-on experience of everyday object manipulation.”

Swing
Java Swing By Marc Loy
http://java.sun.com/docs/books/tutorial/uiswing/
“Swing is a widget toolkit for Java. It is part of Sun Microsystems’ Java Foundation Classes (JFC) — an API for providing a graphical user interface (GUI) for Java programs. Swing includes GUI widgets such as text boxes, buttons, split-panes, and tables.”

Thermo
http://labs.adobe.com/wiki/index.php/Thermo
“Thermo” is an upcoming Adobe product that makes it easy for designers to create rich Internet application UIs. Thermo allows designers to build on familiar workflows to visually create working applications that easily flow into production and development.

Technological singularity
http://en.wikipedia.org/wiki/Technological_singularity
“There is no clear definition, but usually the Singularity is meant as a future time when societal, scientific and economic change is so fast we cannot even imagine what will happen from our present perspective, and when humanity will become posthumanity.”

TouchLib
http://www.whitenoiseaudio.com/touchlib/
“Touchlib is our library for creating multi-touch interaction surfaces. It handles tracking blobs of infrared light for you and sends your programs multitouch events, such as ‘finger down’, ‘finger moved’, and ‘finger released’. It includes a configuration app and a few demos to get you started. It interaces with most major types of webcams and video capture devices”

UML
http://www.uml.org
http://en.wikipedia.org/wiki/Unified_Modeling_Language
“In the field of software engineering, the Unified Modeling Language (UML) is a standardized specification language for object modeling. UML is a general-purpose modeling language that includes a graphical notation used to create an abstract model of a system, referred to as a UML model.”

Unit Testing
http://code.google.com/p/as3flexunitlib/
http://www.adobe.com/devnet/flex/articles/unit_testing.html
“Unit testing is a procedure used to validate that individual units of source code are working properly. A unit is the smallest testable part of an application. In procedural programming a unit may be an individual program, function, procedure, etc., while in object-oriented programming, the smallest unit is a method; which may belong to a base/super class, abstract class or derived/child class.”

WebKit
http://webkit.org/
http://webkit.org/blog/
“WebKit is an open source web browser engine.” This is the browser used within Adobe AIR.

Please get in touch regarding your AIR application development and/or user interface/experience design needs.

Flex Skin Design Deconstructed – Behind the Design

I’ve always loved repeat motif or repeat patterns since I first learned about them in my graphic design class in ‘95. That is also one of the things that caught my eye about the San Francisco inspired style and movement called “Hyphy”. The concept of repeat patterns layered with metallics is big in the Fashion scene right now and one that I employed as a recurring theme throughout this design. I dipped into this style for my 1st Flex skin theme called Green and Gold GUI Flex Skin. Below I’m going to go into my design approach to creating this unique user interface design using Photoshop, Illustrator and Adobe Flex. I call this user interface art.

UPDATE:
The link above appeared to be broken. It should now be working.

Now telecommuters and contractors can quickly scan gigs from all over the US, Recruiters and Real estate agents can track listings covering more territory. Pinpoint “For sale” items and find people, apts, and friends faster.

Please leave additional feedback, feature requests or bug reports here in the comments.

The Adobe Intgrated Runtime (AIR) is required for Burrow to run. Use the Express Install link to automatically setup AIR and Burrow or download and install them separately.

Burrow Homepage:
http://www.seantheflashguy.com/burrow

Burrow Installer Direct Download Link:
http://www.seantheflexguy.com/air/burrow/burrow_v1_08.air

AIR Installers:
http://labs.adobe.com/downloads/air.html

Burrow has been entered into the Adobe AIR Developer Derby. Wish ‘er luck!

Foundation AIR:
Creating Desktop Applications with the Adobe Integrated Runtime (Foundations)
by: Zach Stepek
Paperback – Jan, 2008

Professional AIR: Application Development for the Adobe Integrated Runtime
by: Charles Freedman, Keith Peters, Clint Modien, and Ben Lucyk
Paperback – Feb, 2008

Flex X Cookbook:
The Adobe Developer Library Guide for Rich Internet Application Developers (Cookbook)
by: Joey Lott and Chafic Kazoun
Paperback – Feb, 2008

Flex X User Interface Design & Development:
Creating User-Friendly Rich Internet Applications
by: Matt Voerman and Simon Reid
Paperback – Feb, 2008

Creating Mashups with Adobe Flex and AIR
by: Chris Korhonen and David Hassoun
Paperback – Jan, 2008

Professional Adobe Flex 3
by: Rich Tretola
Paperback – Jan, 2008

Foundation Actionscript 3.0 with Flash CS3 and Flex
by: Steve Webster, Sean McSharry, and Tim Willison
Paperback – Nov, 2007

AdvancED Flex Application Development: Building Rich Media X (Advanced)
by: R Blank, Chris Charlton, Omar Gonzalez, and Hasan Otuome
Paperback – Oct, 2007

Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers (Solutions)
by: Marco Casario
Paperback – Oct, 2007

Flex 3: A Beginner’s Guide
by: Michele E. Davis and Jon A. Phillips
Paperback – Mar, 2008

Adobe Flex cookbook beta
http://www.tiny.cc/VbU44

AnimatedGIfLoader Flex Component
Allows you to load animated gif files into your Flex applications
http://dougmccune.com/blog/animatedgifloader-flex-component/

Asdia
Provides an easy way to integrate flowcharts, uml or any other diagrams in flash tools.
http://code.google.com/p/asdia/

as3flexunitlib
ActionScript 3.0 framework for unit testing.
http://code.google.com/p/as3flexunitlib/

AsWing A3
Allows programmers to make their flash application(or RIA) UI easily
http://www.aswing.org/

Cairngorm
http://labs.adobe.com/wiki/index.php/Cairngorm

DisplayShelf Component
Provides a rich, templatable control to display a faux-3d view of a list of items

http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/

flex2treemap
Treemap Component for Adobe Flex 2
http://code.google.com/p/flex2treemap/

flex4filemaker
Flex4FileMaker is an Adobe Flex 2 FileMaker API modeled after the FileMaker PHP library.
http://code.google.com/p/flex4filemaker/

FlexBook
Flex flip book component. Supports transparantcy.
http://www.quietlyscheming.com/blog/components/flexbook/

flexbox
Directory of Flex Components
http://flexbox.mrinalwadhwa.com/

flexcalendar
Flex Calendar Components
http://code.google.com/p/flexcalendar/

flexedtoolkit
Flexed Toolkit
http://code.google.com/p/flexedtoolkit/

FlexLib
community effort to create open source user interface components for Adobe Flex 2.
http://code.google.com/p/flexlib/

flexservicelocator
ServiceLocator for flex to use web service
http://code.google.com/p/flexservicelocator/

flextube
FlexTube is an flex UI front end for youtube

http://code.google.com/p/flextube/

Flex 2 Basic Email Form
Cut and dry example using an HTTP Service to send an email in Adobe Flex 2 via a simple PHP email script.
http://augiemarcello.com/flex-2-basic-email-form/

Flex 2 Debug Component
http://www.mikenimer.com/index.cfm/2006/7/5/FlexDebugPanel

Flex 2 Primitive Explorer
http://www.3gcomm.fr/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html

Flex Developers Journal
The first and only independent magazine serving Adobe Flex developers worldwide.
http://flex.sys-con.com/

Flex Style Explorer
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Fluorine
FLUORINE is an open source .NET Flash Remoting Gateway.
http://fluorine.thesilentgroup.com

Free Visual Reflection Component for Flex 2
http://blog.benstucki.net/?id=20

Granite Data Services
Free, open source (LGPL’d), alternative to Adobe® Flex 2 Data Services for J2EE application servers.
http://www.graniteds.org/confluence/display/INTRO/Granite+Data+Services

JAM – Just ActionScript and MXML
http://www.onflex.org/code/

Live “reflection” component
http://www.rictus.com/muchado/2006/07/05/live-reflection-component/

osflash-xray
Open Source Flash Debugger for AS2/AS3/Flex1.5/Flex2
http://code.google.com/p/osflash-xray/

scale nine
themes for flex and apollo/AIR
http://www.scalenine.com/

SpringGraph
Adobe Flex 2.0 component that displays a set of items that are linked to each other.
http://mark-shepherd.com/blog/springgraph-flex-component/

The Flex Show
Jeffry Houser and Ryan Stewart’s Poscast covering Flex related topics.
http://www.theflexshow.com/blog

The ServeBox Foundry
Based on several design patterns, and includes tools built to resolve some of the recurrent Flex 2 development challenges.
http://sourceforge.net/projects/sbasfoundry

Yahoo Astra Components
Tree, Menu, TabBar, AutoComplete, and Charts
http://developer.yahoo.com/flash/astra-flash

Yahoo! Maps Web Services – Flexâ„¢ API
http://developer.yahoo.com/maps/flash/flexGettingStarted.html

ZoomFrame
http://www.zeuslabs.us/2007/08/14/open-source-flex-component-zoomframe/

Check the finished experiment here.

Dolores Joya is a freelance Graphic/UI/Brand Designer located in San Diego CA. Get in touch with her here.

“Greetings Flex Community. I’m back for another round of interface art & design to inspire others doing Flex Skinning. My creative inspiration this time is “The Rad 80′s”. The triangular shapes, plastic, synthesizers, boombox’s, Breakin’ and over accessorizing. There’s so many things from the 80′s to work with. For this design I started with the Flex Skin for Flash template available at Adobe’s website: http://www.adobe.com/devnet/flex/articles/flex_skins.html.

Also, I read through the article there on How to Skin for Flex. I usually create some brief sketch concepts then do some initial mock-up work in Illustrator because the color swatch, pattern, and gradient libraries available there provide much more materials for me to get going. For this design I pulled the Boombox from stock photography and cut it apart to suit my UI requirements. I took materials from the image and re-purposed them for buttons and backgrounds. At this point I open up Flash and import my vectors and pngs into the appropriate symbol. For items that do not exist I create a new symbol, making sure “Export for Actionscript” is checked in the Symbol properties dialogue box. Once that is done I created a new class in my CSS with a similar name and call my symbol there. From here you tell your Flex control what style it should take on and your off and running. I usually go back and forth from Photoshop to Flash to Flex to test out my ideas and see how they come across. I haven’t gotten into animation and audio which are going to be my next steps. For me, this is strictly creativity for fun and inspiration so I follow the direction my ideas flow in and I’m happy to say Flex is making things much more easier for me to create.

Flash Design Tip:
Did you know that Illustrator Color and Gradient Swatch’s translate very smoothly into Flash? If you setup your AI file with your gradients, then Export SWF. Once you import them into Flash you can select them with the eyedropper tool and add them to your swatch palette. Here’s one I created and saved out as a Flash Color Set. This one is in Metallic’s. Try it, just “Add Colors” in your Flash Swatch palette and select the “gradients_metallics.clr” file.

Have fun.

–
dolores joya
graphic designer
www.doloresjoya.com”