For the seasoned Flex developer, we’ve been accustomed to using the Flex Component Explorer as a reference. However, this is set to change with a great new application called Tour de Flex.

Tour de Flex is a desktop application, built using AIR, with the goal of providing a way to explore Flex’s capabilities and resources, including the core Flex components, Adobe AIR and data integration.

Created by James Ward, Greg Wilson and Christophe Coenraets, Tour de Flex has three main purposes: provide non-Flex developers with an overview of what is possible; provide seasoned Flex developers with a visual reference tool; and finally, provide commercial and non-commercial Flex developers a platform to showcase their skills.

Probably the greatest feature of this application is the integration of a variety of third-party components, effects and skins. The application contains examples from the following and we are told that this list will be regularly updated when new content becomes available:

  • Acrobat.com Share
  • Amazon
  • AOL Instant Messenger
  • Cocomo
  • Ebay
  • Flickr
  • Google Language
  • Intuit Quickbase
  • Last.fm
  • Photoshop.com
  • Salesforce.com
  • Scribd
  • Smugmug
  • Twitter
  • Yahoo Weather

Below is a selection of screenshots from the application:

(Click on the images to see a larger view)

Included with the Tour de Flex project is an Eclipse plugin, built by Holly Schinsky, that provides a search interface to the 200+ examples available in the main Tour de Flex application. The plugin allows you to search by component name, tag or author and double-click any item in the results to immediately see the component in Tour de Flex.

To install the plugin, add the following URL to your Eclipse software update sites:

http://tourdeflex.adobe.com/eclipse.

Once installed, a new Tour de Flex view is available to add. The plugin has been tested with Eclipse 3.4 and with Flex Builder 3.x.

The official Tour de Flex page and install can be found on the Flex.org website.

Whether you are new to Adobe ® Flex ® or have been developing for a while, frameworks can help you get organised quickly.

Below is a list of Flex and AIR frameworks that will allow you to get up and running and develop highly-collaborative applications. The introductions are by the frameworks themselves, but I’d like to here from you about your experiences using them.

Cairngorm

Cairngorm is the lightweight micro-architecture for Rich Internet Applications built in Flex or AIR. A collaboration of recognized design patterns, Cairngorm exemplifies and encourages best-practices for RIA development advocated by Adobe Consulting, encourages best-practice leverage of the underlying Flex framework, while making it easier for medium to large teams of software engineers deliver medium to large scale, mission-critical Rich Internet Applications.

More information can be found on the Cairngorm project’s website.

PureMVC

PureMVC is a lightweight framework for creating applications based upon the classic Model-View-Controller concept.

Based upon proven design patterns, this free, open source framework which was originally implemented in the ActionScript 3 language for use with Adobe Flex, Flash and AIR, has now been ported to nearly all major development platforms.

Two versions of the framework are supported with reference implementations; Standard and MultiCore, though only the Standard version has been ported to other languages so far.

More information can be found on the PureMVC project’s website.

Mate

Mate is a tag-based, event-driven Flex framework.

Flex applications are event-driven. Mate framework has been created to make it easy to handle the events your Flex application creates. Mate allows you to define who is handling those events, whether data needs to be retrieved from the server, or other events need to be triggered.

In addition, Mate provides a mechanism for dependency injection to make it easy for the different parts of your application to get the data and objects they need.

More information can be found on the Mate project’s website.

Swiz

Swiz is a framework for Adobe Flex that aims to bring complete simplicity to RIA development. Swiz provides Inversion of Control, event handing, and simple life cycle for asynchronous remote methods. In contrast to other major frameworks for Flex, Swiz imposes no J2EE patterns on your code, no repetitive folder layouts, and no boilerplate code on your development. Swiz represents best practices learned from the top RIA developers at some of the best consulting firms in the industry, enabling Swiz to be simple, lightweight, and extremely productive.

More information can be found on the Swiz project’s website.

Guasax

Guasax is an ease of use programming framework which provides the creation of an ordered and scalable application with Adobe Flex. The lifecycle of the Guasax framework is based in the MVC pattern to take on our program actions. The Guasax framework helps you to maintain your business logic tier highly decoupled from your presentation logic tier.

Guasax takes reflection and introspection techniques as well as the Inversion of Control (IoC) pattern to execute the operations which we have pointed at and to make a decision about itself. Guasax is not intrusive on your class model. You don’t have to extend your classes in a framework class to use it.

More information can be found on the Guasax project’s website or on their Google code project.

Model-Glue: Flex

Model-Glue: Flex brings implicit invocation, Model-View-Controller design, and cleaner, less repetitive integration with backend services to Flex and AIR applications.

It shuns repetitive, boilerplate code in favor of helper classes and expressive APIs.

More information can be found on the Model-Glue: Flex project’s website.

Gaia

Gaia is an open-source front-end Flash Framework for AS3 and AS2 designed to dramatically reduce development time.

Gaia is targeted at anyone who develops Flash sites. It provides solutions to the challenges and repeated tasks faced with front-end Flash site development, such as navigation, transitions, preloading, asset management, site structure, deep linking and SEO. It provides speed and flexibility in your workflow and a simple API that gives you access to its powerful features.

More information can be found on the Gaia Framework’s website.

UPDATE: Some more frameworks that I overlooked.

Parsley

Parsley is an application framework for Flex/Flash/AIR applications written in AS3. It contains the following modules:

IoC Container (Configuration and Dependency Injection) - Inspired by the Spring Framework it brings the concept of anIoC(Inversion of Control) container to ActionScript. It is useful for configuration and wiring of applications. It helps building a well structured architecture and decoupling the individual building blocks of your application. Configuration is based on XML files.

MVC Framework - The MVC (Model View Controller) framework helps decouple the view layer from other parts of the application. It borrows the concept of a FrontController from Cairngorm, but instead of advocating the use of BusinessDelegate and ServiceLocator patterns, the framework integrates the FrontController with the IoC container.
More information can be found on the Parsley Framework’s website.

Prana

Prana is an Inversion of Control (IoC) Container for ActionScript 3.0, and more specifically the Flex framework. It enables you to configure objects and components in a non-intrusive way by describing them in an external XML document and having them loaded at runtime.

At its core is a Spring-ish application context and IoC container. The XML dialect for the application context is aimed to be Spring compliant.

The framework also contains utility classes for configuring and extending Cairngorm and PureMVC applications, a Reflection API and general utilities.

More information can be found on the Prana Framework’s website.

Arp

Arp is a pattern-based framework for Flash and Flex. It supports both ActionScript 2 and ActionScript 3.

More information can be found on the Arp project’s page on the Open Source Flash website.

Adobe has progressively been developing an online presence with Buzzword, Share, Brio and Photoshop Express. But the online presence falls short of important spreadsheet and presentation applications.

So who could the contenders be? Here are two extremely promising applications built on the Flash platform:

SlideRocket

SlideRocket LogoSlideRocket is a rich Internet application, built on the Flash platform, that provides for every part of the presentation lifecycle. It integrates authoring, asset management, delivery and analytics tools into a single hosted environment that allows you to quickly create stunning presentations, intelligently manage your assets, securely share your slides, and measure the results.

There are already a number of companies that are striving to be the web-based presentation application of choice, including Google, Zoho and Empressr.

SlideRocket is the first online productivity application that embraces business level features such as collaboration, robust security, dynamic data binding and business integration with applications like Salesforce.com. SlideRocket aims to differentiate itself from other presentation products by including a community marketplace where content and services can be shared and transacted. SlideRocket also embraces the best of the Internet with features like asset tagging, web content mashups, embedded data services and seamless rich media support.

It’s absolutely one of the best presentation creation applications out there. And because it’s built on rich Internet application technologies you can add interactivity and create a cinematic experience that I haven’t seen done any where else.

Ryan Stewart, Adobe’s Rich Internet Evangelist writing in ZDNet - SlideRocket - the king of presentation applications.

SlideRocket - main presentation screenSlideRocket - incorporating videoSlideRocket - adding Flickr to the librarySlideRocket - manipulating images

(click on the images for more detail)

SlideRocket has been designed from the ground up with extensibility and portability in mind as well. To this effect, third party developers will be able to build components into slideshows using the application’s APIs, creating compelling presentations.

You can find more information on the SlideRocket website.

blist

Blist LogoBlist makes it easy for anyone to create private or collaborative databases.

Blist is not alone in the online database market. Zoho DB, DabbleDB and Trackvia are all web-based tools that provide users the ability to create and administer databases.

Although Blist’s simplicity makes it seem like you’re not dealing with anything more complicated than an online spreadsheet, the Blist user interface is actually hiding a complex relational database backend.

Unlike other online database systems, such as Zoho DB, using Blist doesn’t require the user to know SQL to use all it has to offer. This makes Blist great for users who need more than an Excel spreadsheet, but who don’t want to delve into the complexities of a database software application like Access.

Blist BetaBlist BetaBlist BetaBlist Beta

(click on the images for more detail)

Blist’s focus on making database creation and management a straightforward process, built on an always available, rich Internet application suggests it can fill a niche. Demand will prove the depth of such a niche, but if it grabs enough attention from people as regular users, it will become an extremely interesting prospect for acquisition.

You can find more information on the blist website.

The ActionScript reference for rich Internet application development provides an alphabetical reference for all native ActionScript APIs for the Adobe technology platform runtimes: Adobe Flash Player and Adobe AIR—as well as the Adobe Flex framework APIs. Use this guide both as an API reference and a tool to learn about the ActionScript APIs available within the runtimes.

Download the ActionScript reference for RIA development (PDF 1.3MB)

The Adobe technology platform contains two primary runtimes. Flash Player is browser-based, and Adobe AIR is desktop-based. Because Adobe AIR is built on top of Flash Player, the Flash Player APIs are available within Adobe AIR. Consequently, Adobe AIR APIs are not available within Flash Player. The Flex framework is built on top of the Flash Player APIs, so it runs in both Flash Player and Adobe AIR. However, a number of Flex APIs take advantage of AIR APIs, and thus work only within Adobe AIR.

More information about this guide can be found on the Adobe Developer Centre Website.

Adobe AIR LogoSince the Adobe Integrated Runtime (AIR) was released at the end of February, we now have a stable platform on which to build desktop applications with our existing web skills. A number of people have already started and the Adobe AIR Marketplace is filling with AIR applications by the day.

So what is the big deal? The Adobe marketing team state that:

The Adobe AIR runtime lets developers use proven web technologies to build rich Internet applications that deploy to the desktop and run across operating systems. Adobe AIR offers an exciting new way to engage customers with innovative, branded desktop applications, without requiring changes to existing technology, people, or processes.

What AIR applications should you check out?

What is intriguing is that all the tools I have chosen are generally useful tools for the developer or designer, with the exception of twhirl, which is a social-interaction tool. I’m looking forward to when other, less developer-centric tools become freely available. AgileAgenda has taken the lead with this respect, albeit not freely available, as has eBay desktop, but I would like to see examples from the BBC in the form of a desktop BBC iPlayer or maybe a Flickr image browser, del.icio.us bookmark reader, RSS aggregator and a Picnik image editor.

Analytics Reporting Suite

Google Analytics Reporting SuiteThe Analytics Reporting Suite, by Nicolas Lierman, brings Google Analytics to the desktop. It uses it’s own custom API to interact with Google and nearly implements all the features of Analytics.

For website owners this is a must-have application. Like the twhirl AIR application below, it is a fantastic example of what can be achieved with Flex and AIR. Measuring visitor trends and traffic are essential tasks to managing and improving a websites performance. The Analytics Reporting Suite allows you to configure multiple Google’s Analytics accounts and access the web-based suite’s plethora of features via a desktop application. The application displays integrated graphs and animations via a tabbed interface, which allows you switch between a number of reports. These reports can then be saved as a PDF, Excel or XMLdocument, or printed.

You can download and install the application from the About Nico website.

twhirl twitter Client

Twhirl Logotwhirl, by Marco Kaiser, is probably the most popular desktop client for the twitter micro-blogging service. Most of the features available on the twitter website are accessible through twhirl, plus, a lot of usability enhancements have been added to make it easier to manage multiple accounts. This is great for those who want to separate business and personal accounts they may have.

The twhirl application is a great example of how AIR can bring web applications to the desktop; it can dock to the system tray, display message alerts and you can configure the applications opacity when not focused (great if you like Mac and Vista-styled themes). The application allows you to search twitter users, view their timelines, add friends, view followers, delete tweets and much much more. Twhirl automatically fetches your friends’ status updates, direct messages and replies, whilst also colour coding different types of messages and alerting you to messages both audibly and visually.

The twhirl application is skinnable and comes with several built in skins with which you can customise the application. All-in-all twhirl is not only one of the best twitter clients, but AIR applications.

You can download and install the application from the twhirl website.

Kuler Desktop

Adobe Kuler LogoAdobe kuler is the first web-hosted application from Adobe Labs designed both to stand alone and to complement Adobe Creative Suite software. Built using Adobe Flash and ActionScript 3.0, kuler is all about colour: colour for exploration, inspiration, experimentation and sharing. Kuler is clearly targeted at the designer, but anyone interested in colour will benefit from its use.

You can download and install the application from the Adobe Labs website.

WebKut

WebKut LogoWebKut is a web screenshot tool that allows you to capture web pages, or parts of them in a very simple way. It provides you with 3 capture options: the entire page, the current view, or only a selection. This little application proves particularly handy for those presentations or projects that need great visuals from the web.

You can download and install the application from the WebKut website.

RichFLV

RichFLV, by Benjamin Dobler, lets you edit FLV files. The key features include reading FLV metadata, read and edit cuepoints, cut FLV files, convert the sound from an FLV to MP3 format, convert an FLV to an SWF … and much more.

You can download and install the application from the Adobe AIR Marketplace website.

SearchCoders Dashboard

SearchCoders LogoThis Flex-based chat widget is designed with programmers in mind. The code input feature allows developers to chat about code without disrupting the conversation.

You can download and install the application from the SearchCoders website.

Pownce

Pownce LogoMuch like twhirl in look, feel and ease-of-use, but with a slant towards productivity rather than micro-blogging, Pownce is a way to keep in touch and share things with your friends or colleagues. You can send people files, links, events, and messages and then have real conversations with the recipients. This is a great collaboration tool and was one of the first services to really embrace AIR as an application architecture, which could realise their service as a desktop client. Everything that is available via the Pownce website is also available via the client application, except and possibly importantly, the ability for the user to amend their account settings and add friends to your network; this still has to be done via the website.

For a small annual amount, Pownce offers a paid-for service which will eliminate adverts from your profile and allow you to send huge file sizes (100MB) and customise the theme of your Pownce.

Pownce also offers Drupal integration and a mobile application, which works with the iPhone, BlackBerries and many more ‘internet-ready’ mobile devices.

You can download and install the application from the Pownce website.

Sys-con Media. You either love them or you hate them, but last week I had one of my articles published by the venerable sage of the digital age.

You can check the article, Future Directions for Rich Internet Applications out on the Flex Developer’s Journal.

Silverlight aims to compete with Adobe Flash and the presentation components of AJAX. It also competes with Sun Microsystems’ JavaFX, which was launched a few days after Silverlight.

Microsoft Silverlight is a proprietary runtime for browser-based Rich Internet Applications, providing a subset of the animation, vector graphics, and video playback capabilities of Windows Presentation Foundation. The runtime is available for Microsoft Windows and Mac OS X, with Linux support under development via the third-party Moonlight runtime.

Microsoft describes its advantages as follows:

Compelling Cross-Platform User Experiences

  • Deliver media experiences and rich interactive applications for the Web that incorporate video, animation, interactivity, and stunning user interfaces.
  • Seamless, fast installation for users, thanks to a small, on-demand, easy-to-install plug-in that is under 2 megabytes (MB) in size and works with all leading browsers.
  • Consistent experiences between Windows-based and Macintosh computers without any additional installation requirements.
  • Create richer, more compelling Web experiences that take greater advantage of the client for increased performance.
  • Stunning vector-based graphics, media, text, animation, and overlays that enable seamless integration of graphics and effects into any existing Web application.
  • Enhance existing standards/AJAX-based applications with richer graphics and media, and improve their performance and capabilities by using Silverlight.

Flexible Programming Model with Collaboration Tools

  • Based on the Microsoft .NET Framework, Silverlight enables developers and designers to easily use existing skills and tools to deliver media experiences and rich interactive applications for the Web.
  • Simple integration with existing Web technologies and assets means Silverlight works with any back-end Web environment or technology. No “rip and replace” required.
  • Silverlight integrates with your existing infrastructure and applications, including Apache, PHP, as well as JavaScript and XHTML on the client.
  • Choice of development languages including JavaScript, Ruby, Python, C#, Visual Basic .NET, and more.
  • Role-specific tools for both designers and developers that take advantage of Web standards and the breadth of the Microsoft .NET connected software features.
  • For designers: Microsoft Expression Studio for creating interactive user interfaces and media rich experiences, preparing media for encoding and distribution, and creating World Wide Web Consortium (W3C) standards-compliant sites using modern XHTML, XML, XSLT, CSS, and ASP.NET.
  • For developers: Microsoft Visual Studio for developing client and server code with full Microsoft IntelliSense, powerful cross-platform debugging, rich language support, and more.
  • Consistent presentation model by using XAML, the declarative presentation language used in Windows Vista–based applications. Controls, visual designs, media, and other elements can be presented with full design fidelity in both Silverlight and Windows-based applications.
  • Extensible control model makes it easy to add rich content and behaviors while enabling efficient code-reuse and sharing.
  • Dramatically improved performance for AJAX-enabled Web sites with the power, performance, and flexibility of Silverlight and .NET-connected software.

High Quality, Low Cost Media

  • Unified media format that scales from high definition (HD) to mobile with Windows Media Video (WMV), the Microsoft implementation of the Society of Motion Picture and Television Engineers (SMPTE) VC-1 video standard, as well as support for Windows Media Audio (WMA) and MP3 audio.
  • Add vector-based graphics and overlays to media with support for integration of graphics that scale to any size and broadcast-style overlays for tickers and closed captioning.
  • Flexible ad-insertion solutions with video and animation, including the ability to deliver fluid, broadcast-style video or animated advertisements without loss of visual fidelity or motion quality.
  • Lower-cost media streaming with Emmy Award winning Windows Media technologies that can lower the cost of streaming delivery by up to 46%, and enjoy the flexibility to work with your existing Windows Media streaming deployments. Even further cost reductions are possible with the upcoming Microsoft Internet Information Services (IIS) Media Pack for Microsoft Windows Server 2008.
  • Broad ecosystem of media tools, servers, and solutions compatible with the Windows Media operating system.
  • Microsoft PlayReady content-access technology that delivers a single solution for digital rights management support on both Windows-based and Macintosh computers for content providers (coming in Silverlight 1.1)
  • Powerful encoding tools for live and on-demand publishing of media experiences with Microsoft Expression Encoder, including hardware-accelerated encoding of WMV and VC-1 at up to 15 times the performance of software alone when paired with a Tarari Encoder Accelerator board.

Connected to Data, Servers, and Services

  • Mash-up and incorporate services and data from the Web by taking advantage of the Silverlight support for LINQ while accessing that data with common protocols like JSON, RSS, POX, and REST.
  • Increase discoverability of rich interactive application (RIA) content that can be indexed and searched due to the text-based XAML format that describes interface and content in a Silverlight-based application.
  • Rapidly scale applications with Silverlight Streaming by Windows Live to host and integrate software services and media content.

Streaming audio and video

  • Silverlight Streaming by Windows Live offers a free streaming and application hosting solution for delivering high-quality, cross-platform, cross-browser, media-enabled rich interactive applications (RIAs). With the ability to author content in Microsoft Expression Encoder and other third-party editing environments, Web designers maintain complete control of the user experience.

Microsoft is finally making real efforts to woo the designer community who have traditionally worshipped the Adobe and Mac product ranges. One new product that addresses this previously overlooked community is Silverlight, which uses the XAML technology and is touted as Microsoft’s Flash killer. For anyone who is keen to listen, Microsoft proposes that Silverlight will achieve similar results to Flash, but it does so in an entirely different way and has different aims. So, the big question is, will Microsoft be able to break the dominance of Adobe’s Flash platform, that is available on the PC, Mac and mobile devices alike? I’m sure the jury is out on that one, but it can be said it is an uphill task.

So what is Silverlight and XAML proposition? How does it vary from Flash?

Microsoft Silverlight is a proprietary runtime for browser-based Rich Internet Applications, providing a subset of the animation, vector graphics, and video playback capabilities of Windows Presentation Foundation. The runtime is available for Microsoft Windows and Mac OS X, with Linux support under development via the third-party Moonlight runtime.

Not much difference to Flash so far…

Extensible Application Markup Language (XAML) is a declarative XML-based language used to initialize structured values and objects. XAML is used extensively in the .NET Framework 3.0 technologies, particularly in Windows Presentation Foundation (WPF), where it is used as a user interface markup language to define UI elements, data binding, eventing, and other features, and in Windows Workflow Foundation (WWF), in which workflows themselves can be defined using XAML.

Not much difference to Adobes’s MXML

Browser support…

A frequently asked question is which browsers and operating systems will it run on? If XAML is limited in this area, its usefulness in the web world will also be significantly limited. Previous encarnations of XAML, were limited and justifiably criticised as it would only work with an ActiveX control. However, this has now been resolved with support for Firefox, Opera, Safari and Netscape, Windows and OSX alike. Support is provided by a downloadable plugin, much like Flash!

Like Flash…

Silverlight enables web developers to create visually rich user interfaces and animations, play video clips and stream media within the web page, again, much like Flash! But it is different! The comparison doesn’t end there. Animations are organised using timelines and frames within the tool…how else would you organise an animation without timelines?!

Like Flex…but not!

Where things differ from Flash are the tools used to develop the Silverlight applications. Silverlight is supposed to be a way of designing and building rich user interfaces. However, standard HTML elements are missing. The way you design a particular interface is to build a standard HTML form in your favourite editor, e.g. Dreamweaver CS3, and then open this page in Silverlight to add the visual enhancements that your design requires. This sounds complicated to say the least. In comparison, Flash has a brilliant tool and framework called Flex that does this far more gracefully and with the development of Thermo, designers can really feel comfortable in the web application development mix.

Silverlight applications will also run on mobile devices, but the plan is for the applications to only run within a mobile web browser. This is unlike Adobe who are feaverishly developing the AIR runtime to allow Flash applications to run independently of the browser environment and offline.

So, Web 2.0 and beyond with Silverlight and XAML may be somewhat jumping the gun. You may say that there is nothing new or innovative with the Silverlight offering. It does, however, serve to emphasise how important the Rich Internet arena is becoming or indeed has become.

For a long time now Adobe’s Flex IDE has been the one of the only tools for developing ActionScript 3 applications. Now there is an alternative in the form of PowerFlasher’s FDT 3.0.

Developed for internal by PowerFlasher, the FDT (Flash Development Tool) wowed freelancers so much that the company decided to launch it as a commercial product. Like Flex Builder, FDT is built upon the Eclipse framework and therefore has many similarities with other Eclipse-based tools, not least JDT upon which it is based.

It is great to see competing tools out there on the market and it can only serve to strengthen the popularity of the technology.

PowerFlasher’s tool can be found at http://fdt.powerflasher.com. It is really worth a look.

Whether you love it or you hate it, LinkedIn for Groups now has the UK Adobe User Groups for ColdFusion, Flex and Flash.

The ColdFusion, Flex and Flash User Groups represent a central information resource for all UK Adobe developers. With the increasing importance of Rich Internet Applications, Rapid Application Development, the popularity Adobe software and industry recognition of the ColdFusion, Flex, Flash and AIR products, these user groups assist developers in defining their role within the Adobe and wider community. These groups aim to provide information resources and a chance to meet fellow developers and network within the community.

To join the groups and start networking, simply click on the appropriate link below:

UK ColdFusion User Group:

http://www.linkedin.com/e/gis/27811/79F5911ECBBE

UK Flex User Group:

http://www.linkedin.com/e/gis/27255/6343D73C42C2

UK Flash User Group:

http://www.linkedin.com/e/gis/27401/0E94A97A7DD4

The Flex and Flash User Group websites are still being designed/developed, but you can email them at

info [at] ukfxug [dot] org

info [at] ukflug [dot] org

respectively with ideas on what you would like to see on each site.

« Older entries