Monthly Archives: January 2008

Flowcharting Flex style at Lovelycharts.com


The team over at lovelycharts.com is doing some amazing work with Flex. Watching the video below left me speachless as the application is far easier to use than MS Visio. I really like the workflow for creating diagrams and links between elements. Yet another great Flex application!

var so = new SWFObject( ‘http://www.lovelycharts.com/easy_creation.swf’, ‘csSWF’, ’350′, ’280′, ’9′, ‘#1a1a1a’);so.addParam( ‘quality’, ‘best’ );so.addParam( ‘allowFullScreen’, ‘true’ );so.addParam( ‘scale’, ‘showall’ );so.addParam( ‘allowScriptAccess’, ‘always’ );so.addVariable( ‘autostart’, ‘false’ );so.write(‘media’);

ScreenShots:




Application Output:



Looks like Adobe Flex is close to being the foundation to a suite of applications!

Cheers,

Ted :)

Adobe Flex, Super Bowl XLII, and FireBrand.com


It seems that FireBrand.com is hosting an Adobe Flex application that will showcase a majority of the upcoming Super Bowl XLII advertisements using Flash Player and HD Video. The site allows you to watch all the videos end to end by brand using a great UI. The application is a great RIA and makes it easy to re-watch any of the commercials that you might miss during Super Bowl.


Looks like a great use of Adobe Flex!

Go Adobe Flex!
Go Adobe Flash Player!

Cheers,

Ted :)

Generic Components and Services


I moved this weekend and as I was boxing up all my stuff, I thought about generic components and services. Tape, cardboard, moving wrap, and a rental truck are all simple things but when you put them together they become something far more valuable. It seems simple to combine tape and cardboard, but when combined, they make another powerful component (box) and make a larger service possible (moving). During this strange line of thinking, I tried to find the characteristics that made the most sense when creating generic components and services, here are a few that came to mind:

Reusable
Can I use this component over and over?

Examples:
Can I use the same box N times? (box has some wear and tear but can be used N times)
Can I use a piece of tape N times? (tape is more single use, it gets unsticky)

Combinable
How easily can this component be combined with itself or another component?

Examples:
Tape + Tape + Cardboard = Box
Ink + Quill = Pen
((Box + stuff) * 35) + Truck + 9 hours = Move across town

Orthogonal
Are there side effects when I combine components? The fewer side effect, the easier things can be combined.

Example: Does the steering wheel (component) affect the gas peddle (component)? Say I turn right, does the car speed up? Say I turn left does the car slow down? Not good.

Malleable
Can I make a component do something it wasn’t intended to do. Can I stretch it, bend it to make what I need?
Example: Splice two boxes to hold something unique in size/shape

Multi-purpose
How many different ways can I use a generic components or service?
Example: Tape and cardboard are used for many different things.

Runtime Assembly
Can you assemble new components at runtime? Can you combine components and make new components here and now without a recompile?

Example: HTML has a beautiful set of generic components that can be reassembled into billions of different configurations. Instead of sending down components, you send the recipe assuming all the generic elements are present.

During the move I found the most useful generic component to be moving wrap. This stuff is magic as it adds a little layer of plastic around things and sticks to itself. In packing up the kitchen I wrapped everything breakable in this stuff to protect it and bundle things together. It allowed me to take a stack of glasses and make them virtually unbreakable and one solid element. During the move not a single item broke or scratched and it was largely do to this wrap. It was a simple generic component that really improved my move.

I am looking to build IFBIN 2.0 atop generic components and services that can be reused in other applications. In designing out the component/services it is useful to explore how other applications might use these. As you think about building components and services for use within the applications you build, take a look at what can be made generic and reusable.

I am glad I am all moved!

Ted :)

Flex 3 Framework Caching


One of the new features in Flex 3 and Flash Player (MovieStar) is support for framework caching. Framework caching provides 2 things:

1. Separate the Flex framework from application code via Runtime Shared Libraries (RSL).
2. Installing a secure (signed) Flex framework RSL into Flash Player 9 release 3 (MovieStar)

When you separate the Flex framework into an RSL your application then depends on that RSL and it must be loaded when your app starts up. The RSL contains a specific version of the Flex Framework depending on Flex SDK you use. All sub-versions of Flash Player 9 support RSL but in last release (release 3) Adobe added support for caching a signed (.SWZ) version of the Flex framework. The caching logic installs the signed RSL into the player so that it can be used by Flex app on any domain. This basically allows the RSL to extend the Flash Player so that the Flex Framework version is never downloaded again. The first time a Flex application is used, the caching will occur, the N+1 time the user on any domain will only download the application logic.

Here are two example projects:

Framework cache disabled (default)
Properties/Flex Build Path/Library Path/Framework Linkage/ Merged into code

AC_OETags.js – ( JS Player detection )
playerProductInstall.swf ( Player upgrade SWF )
SampleProject.html ( Base HTML )
SampleProject.swf ( Application SWF file )

Framework cache enabled
Properties/Flex Build Path/Library Path/Framework Linkage/Runtime Shared Library (RSL)

AC_OETags.js – ( JS Player detection )
playerProductInstall.swf ( Player upgrade SWF )
SampleProject.html ( Base HTML )
SampleProject.swf ( Application SWF file )
framework_3.0.189825.swf ( Flex Framework RSL – Loaded for FP9r1 & FP9r2 players )
framework_3.0.189825.swz ( Signed Flex Framework RSL – Loaded for FP9r3+ )

Q: How will this work when a new SDK is released?

The key is that your app is dependent on a specific version of the Flex framework and the caching mechanism supports this. If you run into 2 apps built with different version of the Flex framework, say release and hotfix 1, both frameworks will get cached. This avoids the DLL hell issue typically in deploying windows applications. As the runtime manages caching and supports multiple version of the framework, it just works.

Q: How much smaller?

The signed Flex framework RSL (.SWZ) is 535KB and includes all base components and libraries in Flex. Even if your app uses just a button, the same SDK will get cached. A simple hello world application is 50KB vs the typical 350Kb. Size of your base application will vary depending on the components used as all skinning, style, assets, and custom code will be compiled into this base SWF file.

Q: Does this work with all Flash Players?

YES! Applications where framework caching are turned on will work in all release versions of Flash Player independent of the caching feature. Caching will occur automatically if Flash Player 9 release 3 or higher is installed.

Q: Can I cache custom code in the framework cache?

NO. Only signed Adobe components can be added into the Flex caching feature at this time due to data security. As the cached code is cross-domain enabled, anything in the RSL is added into the security domain of the running application.

Take a deeper look at Flex framework caching it is a great new feature in Flex 3. It will make your applications smaller and they will instantiate faster.

Regards,

Ted :)

Minimalist Approach to Flash/Flex/AIR Development


When I create software that runs on Flash Player I take a minimalist approach during development. Flash Player has a limited amount of code execution capacity, rendering capacity, and memory storage capacity at any moment in time. Ideally your application never pushes the player to its limits at any single moment in time and thus will run as fast as possible. Should you hit these limits, the player will simply slow down until all the work you are asking it to do is complete. Over time these facts have forced me to think in terms of programming in a minimalist fashion.

The Flash Player uses a logical unit of work called a frame which consists of 2 phases which occur one after another in a loop:

1. Process ActionScript
2. Render Graphics
3. GOTO 1

After each of these phases is a buffer to handle delays ( say you render to much or loop over a ton of data ). When both of these phases have completed we call that a frame. Each SWF file you create has a framerate (frames/second) which represents the fastest rate that the Flash Player will loop over these phases. When Flash Player encounters delays in processing either phase it will elongate the time to process the frame and thus your framerate will slow but will never exceed the framerate set in the SWF file.

Ideally your application never renders or executes too much at a single moment in time. There are several ways to handle this:

1. Minimalism – Never attempt to do too much at one time.
2. Process data across frames ( callLater() ).
3. Time Animation – Use time to animate/render ( flash.utils.getTimer() ).
4. Frameworks optimized for Flash Player (Flex).

Flex was built to handle application behavior in a minimalist fashion if used properly. I continue to see developers execute to much ActionScript on a single event and not think in terms of processing data across frames. Using events properly is a great place to start. Make sure you know how long and how often methods are being called from events. I had a case recently where a developer was using the flash.utils.Timer class and firing tick events every millisecond. Even with the simplest of methods subscribed to this event, it would bring Flash Player to its knees. To help visualize how your application works take a look at the memory and performance profiling in Flex Builder 3 Professional. This toolset was built to let you see what your application is doing at runtime and easily locate performance areas within your application. Better still the profiler allows you to locate performance issues late so you can avoid early optimization and save a ton of development time. I prefer to take a more balanced approach and architect things taking advantage of processing over time and using events carefully. Another big issue is the use of bindings as these generate events when data changes. As they are so easy to create, you can force the player to be processing nearly non-stop with the smallest of data changes. They are very powerful but it is easy to abuse.

To more fully understand this approach I would encourage you to explore and experiment with Flash Player and the Flex 3 Profiler. Once you understand how the player internals work and can see the effect of the code you write, you will understand the benefits of being being a minimalist. Just remember, I am not asking you to give up your worldly possessions but rather think in terms of doing the least to achieve your goals with Flash Player or AIR.

Cheers,

Ted :)

Command Proxy – IFBIN 1.0 used it with Python


Mike Chambers posted on using Command Proxy with AIR for .NET integration but having actually deployed a rich client solution cross-platform with IFBIN using this same pattern, I thought I would chime in. First off it works and by works I mean that I successfully built and deployed IFBIN 1.0 on MAC and PC using Flash Player, Flex 1.5, and Python. Here is the architecture atop Mike’s diagram.

The reason I chose Python is that it ran cross-platform so porting between operating systems was not as hard ( can’t say trivial but 90% of the code worked ) and leveraging Flash Player allowed for a rich UI. When IFBIN 1.0 shipped in 2005, we had no AIR runtime and using Central 1.5 was problematic given the lack of a really solid FileIO feature set. The IFBIN architecture ran a local http/socket server and launched a browser when started. The browser then loaded a SWF file created with Flex 1.5 and opened an XMLSocket connection to the locally running Python server. The Python server in this case handled all DRM, FileIO, Downloading, and Licensing of the files on a per installed basis and the local server had a simple API for executing any feature that Flash Player did not support.

In regards to security, the architecture in IFBIN 1.0 limited client/API access via a secure token and only clients with that token could connect to the locally running service and call the API itself. It also helped because the local connection from ClientUI to local server was a persistant TCP/IP Socket so once authenticated all commands over the socket were denoted as secure. I also made some security enhancements to limit the FileIO to a single directory and thus writing and deleting files was limited to the service and managed.

I personally would avoid building an local .NET dependency into your application as this just limits compatibility. When we write software we want to reach the largest market possible without having to do unique things on a per platform basis. With IFBIN 2.0 (yes it is in development) I am using AIR 1.0 with no external dependencies. This choice makes development cross-platform ideal as I get 3 platforms for free without any additional work.

My take is that the key value of AIR is writing software for 3 platforms (MAC/WIN/LIN) with a single codebase. Anything that forces me to do something unique per platform and fork the codebase is a really bad thing.

To Mike’s defense the Command Proxy architecture works well but I would personally never do it again with IFBIN. AIR 1.0 handles all the requirements to deliver IFBIN without a local server/service running.

My 2 cents,

Ted :)

FlowContainer Component


Hats off to Eric Cancil for putting together a great new container control called FlowLayout extending Flex. The new container takes any children (UIComponents) and lays them out handling variable sizes and resizing behavior. What I find interesting is just how useful this component it from an application development perspective. Assuming you get data in via XML you can create component instances and render them into this control at runtime, dynamic forms, dynamic text with images can all be handled within this container.

I will be showing a demo of the new container at the Flex/AIR Pre-Release Tour at Ebay tonight.

Thanks Eric for extending Flex!

Cheers,

Ted :)

SEO and RIA: The Flex Directory Experiment


I have been running an experiment using XML/XSL/Flex and attempting to get search engines to spider the model of the application. This morning Google listed the “Flex Directory” under searches containing the body text of the model data. From what I am seeing the spiders have ignored the attribute data as expected. The lesson is to expose the most important elements of the model data and hide data in attributes that would otherwise hinder the results.

So the next step is to reorganize the data so that the directory gets far broader listings and add in the elements of cross-linking using COMPANY. This will force the spiders to spider the resulting sites via cross-link and reinforce the network relationship via domains.

Proof: SEO and RIA work seamlessly together!

Here are some links for review:
Farata effectiveUI flex
iChameleon ASI
Cynergy Memorphic
Cynergy Flex Sanative

More to come!

Woot,

Ted :)

What is Flex?


I have wanted to cover this basic question for a really long time but it is a very hard question to answer. Flex is many things but I wanted to put a definition out there to help everyone see what it is, where we are headed, and why we created it. With all my presentations I start with “What is Flex?” and it is about time my blog had the same information. So here is my definition:

What is Flex?

Flex is a way to make SWF files!

At the heart of Flex is the ability to create SWF files that run in Adobe Flash Player. Distill all the features down and really it is a development paradigm that compiles to SWF. It really is that simple but often we make the definition much harder. Just like Flash can create SWF files, so can Flex but the way you develop is completely different.

Flex is for developers.

Flex was not built for animators, writers, accountants; it was written for software developers and the paradigm matches the development methodology you already know. If you know Java, C, C++, C#, Delphi, VB, PHP, ColdFusion, Python, Ruby, you can learn Flex with little effort. The goal when Flex was created was to make a development paradigm that developers could learn easily matching the methodology they already know yet create SWF files for Flash Player (and now AIR). Flex has classes, components, a compiler, a debugger, class libraries, and uses XML (MXML) for declarative markup of components. The ActionScript programming language is based on ECMAScript 4 (the language standard behind JavaScript) and has full support for the ECMA XML scripting standard E4X. It also has most of the UI components that you already use ( like button, list, datagrid, combobox, and tree) but it also supports containers like HBox, VBox, TabNavigator, TitleWindow and many others. If you have written software before you can learn Flex easily. Better still is that Flex is compatible with all HTTP servers, version control systems, and any server side programming language, so the knowledge you have of servlets, php, ASP.net, or JSP is really handy. Flex just lets you program the client side in a paradigm you already know and understand.

Flex is for making applications…

Flex was built for making rich client side application behavior. It wasn’t built for making web pages, banner ads, or server side logic it was built for creating client-side applications that run over the Internet talking to remote servers. Flex has been used to make some really great apps like Buzzword (Document Editor like Microsoft Word but in the web) or Picnik (Photo Editor/Manager for touching up your best snapshots) or SlideRocket (Presentation software like Apple Keynote but in the web) or Oracle Sales Prospector (An enterprise ERP application. Yes Oracle uses Adobe Flex! ) or many other applications you can see at Flex.org. The real key is that all these examples provide an application experience just like desktop software.

that run on the web (Adobe Flash Player)…

Flash Player 9 is installed on more than 95% of computers that use the Internet and has been installed more than 3,500,000,000 times at a rate of over 10,000,000 times per day. When you develop software, you want it to run compatibly in as many places as possible. Adobe Flash Player provides a solid foundation to build these experiences without the need to install or update anything on the end users computer. If you were running a store you would want that store available to as many customers as possible and choosing Flash Player allows you to provide a great experience (rich) to 95% of the web (reach). Make sure to look at the reach of the technology you select, if you choose something not widely installed or incompatible, you are simply turning away customers and business.

…on the desktop (Adobe AIR)…

Adobe AIR is a new runtime in development by Adobe and we are very close to releasing Adobe AIR 1.0. AIR allows you to write desktop software that runs on 3 operating systems (MAC,WIN,LINUX) with the same file. This allows your application to be a true desktop application rather then just a website and allows you to do much more than the web allows today. AIR applications are real native desktop applications and provide APIs for writing files, drag-drop, system notifications, network detection, and more. AIR empowers developers to write desktop software that leverages the Internet.

…or on mobile devices.

We are working to enable Flex to build applications for mobile platforms and support a wide range of devices. Just as Flex can be used to write a web based application or desktop application, it can be used to write software for mobile devices. The fact is that devices are becoming ever more powerful and more plentiful. It is just a matter of time before we enable developers to leverage Flex to deliver mobile applications on Flash Lite or AIR on mobile.

In summary, Flex is a development paradigm that allows you to write software for the web and desktop that many people can use compatibly today. It leverages the tools, servers, and development models that you already know and allows you to write the next generation of software compatibly. At Adobe we are working around the clock to make this ecosystem of software better and provide you with the best tools and platforms to make your projects a success.

I encourage you to take a fresh look at Adobe Flex and discover the opportunity in learning a new language and ecosystem. Developers around the world are embracing it to create all sorts of new applications and I think you should jump in too.

My biased answer:

Flex: A development platform that is revolutionizing how the world writes and deploys software!

Cheers,

Ted :)