But today, the Flex community is by far the strongest one on the RIA market and it’s not only due to Adobe. Flex is still the first-choice to build RIA because it’s consistent and because… it works. You should all read this fantastic article by Joao (RIA expert in Portugal). It’s also due to the fact that a lot of Flex developers were coming from various technical backgrounds: Java (mainly), PHP, AS3, .NET… And they tried to bring and translate their knowledge investing in areas not covered by Adobe’s engineers: data-visualization, backend integration, continuous integration, micro-architectures… As a tribute, I just wanted to summarize on one graph (inspired by Michell Zappa) some compelling projects developed by the community around Flex. All these projects are used by large organizations in strategic Enterprise applications. All these talents can now become official Flex contributors thanks to the Apache foundation. Flex is successful thanks to this constellation of talents, not thanks to Adobe.

Some projects are of course missing, I’m sorry for that, it’s not an exhaustive list; but this graph expresses all the efforts made by the community to make Flex a successful framework in a professional Enterprise environment. Just a few projects, such as BlazeDS, were initiated by Adobe on this map. Flex has been successful in the past thanks to the involvement of its vibrant community of talented developers… why would it change?  If you want to follow the Apache Flex project and get involved, check this page: http://incubator.apache.org/flex/

Thanks to all the folks who helped me build this list on Google Docs.

Radio X-Track

UI considerations

Radio X-Track is a great project led by true music lovers. DJs, painters, actresses and sound designers work together to publish creative playlists of music, covering various styles and  stimulating your eyes with massive paintings. The web radio is also a place for networking with music lovers. Once logged-in with your Facebook account, you can start chatting directly on the website. This arty space is directed by X-Track, a famous sound design studio in France. You can visit the web radio here: http://radio.x-track.net/EN/

The development of the mobile application was challenging as the web radio is a Flash application connected to FMS. Thanks to the recent updates of Adobe AIR, I’ve been able to use Flex to stream the playlists on smartphones and tablets. First, I’ve decided to use my adaptive layout technique to code one UI and target both mobile and tablet screens. Here is a video that explains the trick. I’m playing with two view navigators that dynamically adapt their dimensions and their coordinates at runtime, depending on the screen resolution and the screen orientation.

That’s why on Android, you have a very simple user experience. The first view is the list of DJs, the second view displays a scrollable picture, streams the playlist and displays the title of the song.

Here is the link to the Android application:

https://market.android.com/details?id=air.com.riagora.Xtrack

With Flex, you code one project and then can publish it on both Android and iOS. So I submitted this application to Apple.

The App Store reviewers rejected the initial application for UI reasons. They told me that displaying a list and then a view could be done in the browser, and that it doesn’t justify the development of an application. They wanted me to develop the application using HTML5… well… live audio… html5… I had to consider a new strategy and worked on a totally different UI. I started studying the UI patterns of approved radio application and ended up with a new user experience. I’ve also added some features such as a twitter feed and the biographies of the artists. The application has been directly approved by Apple and is now available for iPhone and iPad users.

Here is the link to the iOS application:

http://itunes.apple.com/fr/app/radio-x-track/id467964868?mt=8

Some technical tips to manage audio content

As the music is streamed by FMS, you can use the classic NetConnection and NetStream object of the Flash API. When the user wants to hear another playlist, I kill the current NetStream object and create a new one (I keep in memory the NetConnection instance). FMS fires a RTMP message every time a new song is streamed. The client catches the message and displays the title of the song on the screen. The main challenge was to mimic the behavior of the iPod. If you shutdown the screen of your iPhone, or if you switch to another application, the radio is still supposed to stream audio. AIR 3 introduced a new feature to enable this behavior. At the end of the application descriptor of your Flex mobile application, you have a dedicated section for iPhone settings. You can set iOS keys such as UIApplicationExistsOnSuspend. All the iOS settings for Adobe AIR are listed on this page. In this case, I’m setting the UIBackgroundModes key to audio.

Code block

<iPhone>
        <InfoAdditions><![CDATA[
			<key>UIDeviceFamily</key>
			<array>
				<string>1</string>
 
			</array>
			<key>UIBackgroundModes</key>
			<array>
				<string>audio</string>
			</array>
		]]></InfoAdditions>
        <requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>

Unfortunately, it won’t display the “play” icon in the status bar of iOS. I guess it would require the development of a native extension. Radio X-Track is a free application. Enjoy !

Mioozic

Mioozic is also a Flex mobile application available on both Android and iOS. You start by choosing a theme or a category, and it will start streaming music on your device. This Flex application has been developed by Christophe Keromen, the author of “Flex 4.5 for mobile devices” (in French). It’s a great example of a high-performance Flex application running on smartphones.

Mioozic on Android : https://market.android.com/details?id=air.netrix.air.mioozic

Mioozix on the app store: http://itunes.apple.com/fr/app/mioozic/id479503574?mt=8

What’s that track

This game developed by Orange Labs and Deezer is also a very cool Flex mobile application. It’s a quiz game. You can play alone or with friends. The goal is very basic: hear a song, tap the screen if you think that you know the artist, and select the correct artist in a list of four. It’s a very cool game with a nice 70s UI. It’s already a popular app on Android (only). Have fun.

What’s that track on Android: https://market.android.com/details?id=air.com.orange.labs.whatsthattrack&hl=fr

We are looking for committers!!! If you want to participate in the success of Apache Flex, check this blog post. Yennick is one of these talented Flex developers who could become Apache Flex committers. He’s the project leader of GradleFx. I met him in Belgium during the Devoxx conference and he has been kind enough to accept an interview.

“Hi Yennick, can you introduce yourself, your background and your relationship with Flex:”

Hi, my name is Yennick Trevels and together with Steven Dick I started the GradleFx plugin. I work as a RIA Consultant at iDA MediaFoundry in Belgium where I do most of my projects in Java and Flex (desktop, web, mobile, …).

I started out as a Java developer for 3 years, but soon found out that I wanted to focus on frontend development and that’s how I got started with Flex. Flex has been somewhat of a passion for me now because it allows me to create good looking applications with lots of custom components and there are still a lot of oppertunities to create libraries which make our lives easier.

“GradleFx is a Gradle plugin. Can you explain us what Gradle is and who is using it today?”

Gradle is a new build tool which combines the best features of Ant and Maven and leaves the bad things behind. It has dependency management, convention-over-configuration, multi-project support and lot’s of other cool features. Build scripts are written in Groovy where you have access to the Gradle API, which gives your build scripts a lot of flexibility.

Lots of plugins are already available for Gradle, like the Java plugin, Maven plugin, Eclipse & Intellij plugins, Sonar plugin etc. These plugins make your build scripts a lot easier because most of the time the only thing you have to do is configure some variables. So build script in Gradle are shorter/easier and more flexible than Maven or Ant build scripts.

GradleFx uses these same principles because it’s a plugin for Gradle.

“Then I guess that GradleFx is just an extension for building Flex applications. How does it work and what do I need to make it run?”

GradleFx is indeed a plugin to build Flex applications.

First you’ll need to install the Gradle and Flex SDK, add the Gradle bin directory to your PATH environment variable and create a FLEX_HOME environment variable which points to your Flex SDK. Once you have these setup you can start to write your build script (in a build.gradle file). You don’t have to manually download GradleFx because it’s available on the Maven Central repository, so just specify it as a dependency for your build script and apply the plugin, that’s it.

“What are the features that the GradleFx plugin adds to Gradle.”

Right now the plugin has tasks to compile SWC, SWF and AIR projects, clean the build directory, copy your resources to the build directory, create an html wrapper and run FlexUnit tests.

“Automated builds are more and more strategic in our industry and most of the Flex projects are industrialized. In your opinion, what are the key differentiators of GradleFx compared to Ant or Maven for instance?”

Because GradleFx uses convention-over-configuration and builds scripts are written in Groovy your average build script will be a lot shorter and easier to read.

Another big advantage is the flexibility that Groovy offers, if you need to perform some custom functionality that isn’t available yet in any plugin then it’s much easier to write this yourself compared to Ant or Maven. Simple tasks like copying some files can be added in just a few lines of code.

GradleFx can use Ivy or Maven repositories to get its dependencies so you don’t need a separate repository for your existing Maven or Ant based build scripts.

“Can you share with us a sample to manage several project and comment the code?”

Ok, I’ll show you an example of a multi-project build which uses all the conventions provided by GradleFx.

This is the build script of the parent project and these settings are used by all sub-projects. This project doesn’t compile to a SWC or SWF.

Code block

//specify the GradleFx plugin as a dependency for this build script. Maven Central will be used to get it.
buildscript {
	repositories {
		mavenCentral()
	}
	dependencies {
		classpath group: 'org.gradlefx', name: 'gradlefx', version: '0.3.2'
	}
}
 
//specify settings common to all subprojects
subprojects {
 
	//apply the GradleFx plugin to this project
	apply plugin: 'gradlefx'
 
	version = '1.0-SNAPSHOT'
 
	//define the repositories from which the project dependencies
	//should be downloaded
    	repositories {
        		mavenCentral()
        		mavenRepo name: 'yoolab-releases',      url: "http://projects.yoolab.org/maven/content/repositories/releases"
        		mavenRepo name: 'yoolab-snapshots',     url: "http://projects.yoolab.org/maven/content/repositories/snapshots"
    	}
 
	// specify the project dependencies. Notice the 'external' marker,
	// which means that the library will not be compiled in the
	// swc of the subprojects
   	dependencies {
        		external group: 'org.as3commons', name: 'as3commons-collections',
			version: '1.1', ext: 'swc'
        		external group: 'org.as3commons', name: 'as3commons-lang',
			version: '0.3.2', ext: 'swc'
    	}
}

Then we have the build script of a library subproject which will compile to a SWC.

Code block

//specify the type of flex project
type = 'swc'
 
dependencies {
	// specifies a dependency to another subproject. This will compile
	// the other project before compiling this one and use its
	// compiled SWC in this project.
	external project(':util')
}

And finally we have the build script of the application project which compiles to a SWF.

Code block

//specify the type of flex project
type = 'swf'
 
dependencies {
	// specify two dependencies to library projects. These will be compiled
	// into the SWF file since they belong to the "merged" configuration.
	merged project(':util')
	merged project(':domain')
 
	//override the dependencies specified in the parent project so they
	//use the "merged" configuration
	merged group: 'org.as3commons', name: 'as3commons-collections',
		version: as3commons_collections_version, ext: 'swc'
	merged group: 'org.as3commons', name: 'as3commons-lang',
		version: as3commons_lang_version, ext: 'swc'
}
 
// add another source directory for the locale files. The srcDirs property is a
// GradleFx property which by default has the value ['src/main/actionscript']. This
// is the directory where you need to put your actionscript and mxml files.
srcDirs.add('src/main/locales/{locale}')
 
additionalCompilerOptions = [
		'-locale=en_US'
]

That’s it for this example. You can find more examples in our GradleFx examples repository: https://github.com/GradleFx/GradleFx-Examples

“What are you working on and what will be the next features of GradleFx?”

I just released version 0.4 which contains support for AIR projects.

Upcoming features are mobile projects support, project file generation for Eclipse and Intellij IDEA, automatic downloading of the Flex SDK and AS3Doc generation.

“GradleFx is open-source. How can we contribute?”

You can contribute in a number of ways.

One is by trying out the project and giving feedback on our support forum and/or log issues in our issue tracker on Github.  Or if you feel some documentation is missing, feel free to add it to our wiki on Github (or just tell us so we can add it). It’s the feedback that we get that also makes this project better and we always try to do something with it.

Another way is by forking the project on GitHub, add a feature or improve the code and apply a “pull request”. Then we can integrate those changes and put them in an official release.

“How do we know when a new version of GradleFx is released?”

You can follow me or Steven on twitter, this is where we announce all things related to GradleFx.
Yennick: @SlevinBE
Steven: @stevendick

Some useful links to get started:

• Site: http://gradlefx.github.com/
• Documentation: https://github.com/GradleFx/GradleFx/wiki
• Examples: https://github.com/GradleFx/GradleFx-Examples
• Help & Support: http://gradlefx.tenderapp.com/home
• Bug Tracking: https://github.com/GradleFx/GradleFx/issues
• Changelog: https://github.com/GradleFx/GradleFx/blob/master/CHANGELOG.textile

“Game of Flex” is not just a game, it’s also a great way for us to showcase the great performance of Flex on tablet devices, and for you to discover the new components and features of our latest release of Flex! Indeed, Game of Flex is also a learning tool. At anytime, you can click on the “Snippet” button and read the source code of the current sample. You can also click on “Tutorial” to read an online tutorial about the current sample.

Download the game and the source code

The direct links to the application are:

Android tablets: https://market.android.com/details?id=air.com.riagora.flexgame
iPad: http://itunes.apple.com/us/app/game-of-flex/id483389384
BlackBerry Playbook: soon

You can also download the source code of the application. Install Flash Builder 4.6 and import this Flash Builder Project (FXP file): FLEXGAME.FXP

Some tips inside the code

If you want to check the source code of the app, you’ll learn…:

• How to use the new SplitViewNavigator architecture (portrait and landscape layouts on tablet devices)
• How to display HTML content inside a Flex app
• How to access the camera to take pictures
• How to use the BusyIndicator, ToggleSwitch and List components
• How to enable multi-touch
• How to manage your views
• How to use the accelerometer
• How to create custom AS3 item renderers for your lists
• How to access the local SQLite database
• How to use native extensions
• How to set up the new DateSpinner component
• How to display callout popups
• How to set up the software keyboard to match your needs
• How to declare spinner lists

New set of mobile components

Tablet devices are incredibly successful. The Apple iPad introduced new ways to structure applications and new user interactions. The new set of components available in Flex 4.6 is inspired by classic tablet applications. As you’re targeting a larger screen than a smartphone, you need to review your UI navigation. I’ve already shared some thoughts on this in my post named “Adaptive UI”. Thanks to the new SplitViewNavigator, you can manage the layout of multiple views. The ‘Adaptive UI’ is managed by the component and is based on the device orientation.

How to use SpitViewNavigator:

Code block

<s:SplitViewNavigator width="100%" height="100%" id="splitViewNavigator" autoHideFirstViewNavigator="true">
		<s:ViewNavigator id="vnList" firstView="views.ListQuestions" width="300" height="100%"/>
		<s:ViewNavigator id="vnFull" firstView="views.FullView" width="100%" height="100%">
 
			<s:actionContent.portrait>
				<s:Button id="navigatorButton"   label="Show questions" click="splitViewNavigator.showFirstViewNavigatorInPopUp(navigatorButton)" />
			</s:actionContent.portrait>
		</s:ViewNavigator>
	</s:SplitViewNavigator>

More components are also available and directly inspired from iOS applications: the CallOutButton (popup related to a component), the SpinnerList, the ToggleSwitch and the famous DateSpinner.

Soft keyboard parameters

You can easily enhance the behavior of your soft keyboard. If you’re building a form, with a text input field that is waiting for a phone number, then you can modify the look of your mobile/tablet soft keyboard to display numbers only. You can also customize the label of the “return” key on the soft keyboard (and display “Join”, “Go” or “Search” for example). It’s a very nice feature detailed by Holly in this post.

You can set different values for the softKeyboardType property: number, email, punctuation, url, contact or default. For instance, to display numbers on the keyboard, just add a parameter to your TextInput component:

 <s:TextInput softKeyboardType="number" width="180"/>

AIR 3, native extensions and captive runtime

Air 3.1 is attached to Flex 4.6 developments. It means that you can easily embed ActionScript Native Extensions within your Flex mobile project. ANE are a bridge between your Flex mobile app and a native library that can extend the capabilities of the Flex SDK. A list of native extensions are available on adobe.com such as the Gyroscope API, Vibration, Notification, Kinnect… To import an ActionScript Native Extension within your project, just open the new tab in Flash Builder 4.6 dedicated to ANE.

Remember that you can also use the new captive runtime option while packaging a mobile application OR a desktop application. It will create a standalone application that is embedding the AIR runtime. On the desktop, it means that you can actually copy your application on a USB stick and launch it without administration rights! It’s a fantastic new way for deploying AIR apps. On mobile devices, we were already using this technic on iOS. Now you can use the same technic on Android and generate an .apk file that will embed a specific version of the AIR runtime.

Test Flex 4.6 apps on your device

There are already some Flex 4.6 apps available on the Android Market and on the App Store. If you have an iPhone, you can download the free music application called “Radio X-track”. It’s a Flex 4.6 app I’ve been working on, I’ll share more information about this app soon on this blog. Narcissus is also compiled with Flex 4.6 by the way and offers great performance on iPad tablets. Christophe and Holly shared an open-source tablet application to manage your expenses.I’ve also been working on a Flex 4.6 application for tablet users and Flex developers… This application is already secretly available on the Android Market but the app is still “in review” on the app store. As soon as it’s available for both iPad and Android tablets, I’ll showcase this application. More to come…

The evolution of Flex

This is a fairly long post, if you don’t have time to read it all right now, you may want to skip directly to What’s next for Flex. I’m French, I talk too much, and I’m not Victor Hugo… Whatever So feel free to skip this paragraph to focus on our future. But the history of Flex might help you understanding the difference between our past strategy and the new one.

Flex 1 was released in 2004. To develop and deploy a Flex app, you had to use a 15000$ server. I remember that I started looking at Flex 1.5 in 2005 at my previous company. Because of this economic model, I didn’t even try to develop a prototype. Then, after the acquisition of Macromedia, Flex 2 was launched with a free business model and an IDE based on Eclipse. It was 2006, when I started coding Flex projects and when I joined Adobe to promote this technology. In 2007, Flex 3 was open-sourced under the MPL license. Flex 4 introduced the Spark architecture that lets you skin visual components very easily and with a lot of freedom. Thanks to Flex 4.5.1 (and soon Flex 4.6) you can build “native-like” mobile apps and deploy them on Android, iOS and QNX. So what’s next?

I’m very close to the Java and the PHP community (I’m currently writing this post from the fantastic DEVOXX conference with 3200 Java developers around me). When we used to present Flex as an open-source technology, it was more a “you can view my source” one. That was a huge step, and it helped our community to understand how the framework works. After a few months, it also generated some frustration. Flex developers and strategic customers who are Flex masters wanted to contribute actively, optimize the code, etc… Some of them even started their own branches. The Spoon project is the expression of this will and the expression of our lack of efficiency in accepting contributions, which I think was because Flex was perceived and promoted as a product. What I want to express is that we were defining the new Flex features on our side, to (somewhat) surprise our community and generate excitement. It was of course based on customer and user feedback, but then the new features were only shared during main conferences (360Flex or MAX for instance), and this was related sometimes to our product strategy. And this system works very well to spur adoption and generate a lot of excitement: Flex is very successful in the Enterprise today thanks to this strategy.

What’s next for Flex ?

At the same time, HTML5 is moving very very fast — faster than most anyone would have predicted two years ago. This is mainly due to the success of the iPad. That’s why Adobe believes that within 3 to 5 years, depending on the complexity of your RIA, HTML5 should be able to enable decent Enterprise Application user experiences for desktop users, associated with a professional coding experience. What I would add, as an Enterprise consultant, is that we can easily add 2 or 3 years to this period of time. A significant part of the Enterprise customers I’m interacting with are still running on Windows XP. This is a reflection of the tempo of the Enterprise world that cannot be synced with the outside world for security, maintenance, training, and auditing reasons. So even if HTML5 integrates some key RIA concepts within 5 years, it means that browsers still have to implement them and that companies need to update to a recent browser… well, you know the story.

Flex is and will remain the leading framework for first-class Enterprise applications for many years. And by the way, don’t be scared. We’re not blind and we must accept the fact that HTML5 is making fantastic progress. That’s GREAT! And our community has A LOT of time to anticipate this shift and make the most of this transition. Adobe won’t let you down. We’ll contribute to open standards, and at the same time, Adobe, starting with my team, will make sure that you’ll make it through — and even thrive during — any shift in our industry. Don’t worry, if HTML5 becomes the standard for RIA apps, then the best HTML5 RIA developers of tomorrow will be today’s Flex developers. Why? Because RIA development is not just a matter of language. RIA developers have a lot of specific skills (design awareness, client-side architectures, service exposure architecture, user-experience, mobile applications conception and optimization to name a few). You have a unique knowledge of the market that goes beyond knowing a technology inside and out. Adobe is already a key player in the HTML industry, and we’ll deliver more and more advanced tools and technologies (you can already look at PhoneGap, Edge…).

That’s why we need to define the best strategy for the Flex framework and establish it as an Enterprise standard today! There are two options. The first option is to invest in more new features and hire more engineers on the Flex SDK team. For the long term, I don’t believe in this strategy. It’s the traditional way to proceed for software products but not for application development frameworks. The more committed and talented developers you have in the community, the more you need to let them interact with the source code of your technology. The more you have mission critical Flex apps deployed in large organizations, the more strategic customers need to trust the future of your technology. Open source can fulfill these needs. We all know that Flex is deeply linked to the Flash Player which boosted the innovation on the web, and then, consequently, in Rich Internet Applications. I believe that the Flex framework is very mature in terms of features and can answer pretty much all the current Enterprise needs. It can also answer  future needs as we can now rapidly build native apps for iOS, Android and QNX since Flex 4.5.

The second option is to consolidate the current SDK and transition to the next level of openness. That’s why we decided to propose incubating the Flex SDK to the Apache Software Foundation. I’m very happy and excited about this move for several reasons:

• Apache is a very respected foundation by developers and by large organizations. A lot of mission-critical Enterprise applications are already relying on Apache software: Axis, Ant, Maven, JackRabbit, Tomcat, Geronimo, ActiveMQ, Felix…
• We are not only proposing the Flex SDK, we’re also pushing BlazeDS (Java server libraries for data serialization and real-time messaging). In 2012, we’ll propose Falcon, a new generation compiler. We’ll also unveil and propose FalconJS, an experimental and advanced Flex to JavaScript compiler. More projects may also be proposed to Apache to build a first-class open Enterprise RIA stack.
• For the first time, Adobe won’t be the sole influencer on the Flex roadmap. We’ll still have engineers working on it but the effort will also be advanced directly by work of top Flex developers in the community (join the Spoon project if you’re one of them).

So Flex or HTML5 ?

I’ve been working on Rich Enterprise applications for more than 6 years and I can tell you that it requires a lot of different skills and specialized knowledge. RIA developers, and especially Flex developers, know how complex it is to combine an efficient user experience with a maintainable client architecture. Flex is really the only cross-platform solutions on the desktop for rich applications. Today, 90% of Flex applications are internal apps (statistics from what I see on the field) available on the intranet and on the extranet to share the screens with external partners or customers. Flex apps won’t run in mobile browsers as Apple and MSFT don’t host plugins on their tablets (we’re still waiting for the MSFT one by the way) and as Adobe announced its intent to discontinue Flash in mobile browsers. Thanks to this decision, Adobe engineers are now focusing on Adobe AIR, the runtime that can execute and package your Flex applications as native iOS, Android and QNX (BlackBerry) apps. With the arrival of Flex 4.6 at the end of November, Flex apps will perform even better to deliver “native-like” experiences on smartphones and tablet devices. So what’s the market for Flex? Well it’s huge because we are focusing on Enterprise apps and not on Customer apps, we’re focusing on Enterprise data-driven apps, on rebranding and re-architecting existing Enterprise apps developed with Web 1.0 technologies or even client-server ones. That’s a growing market in all industries. Tablets will accelerate this need of user-oriented architectures, because if you deliver a bad user experience on tablets, you’ll immediately fail. The potential of RIA for desktop and tablet users is higher than ever because it unlocks ROI (increase the productivity of your company, improve the decision making processes, reduce the learning curve and then the training costs for employees…). I know that today you’ll hear a lot of people talking about the growing role of tablet devices in our daily life, that tablets will replace PCs, etc… Who cannot agree? I’d like just to add that the Enterprise world is evolving at a different tempo. Believe me, you won’t see large organizations replacing all PCs by tablets next year. If it happens and if it makes sense, it will take years, maybe decades. Desktop users will still represent the main population of Enterprise apps end users for a very long time. With Flex, you can already target 100% of your desktop users without migrating to a new operating system or a new browser, and you can target 99% of tablet devices as you can now generate iOS and Android native apps.

This is regarding the market for Flex, but there’s also the “developer experience”. Flex has been designed for Enterprise developers who are used to working with object-oriented languages like Java, first-class debugging experiences (on the desktop and on mobile devices), continuous integration, agile development, modular applications managed by several development teams, productive tools based on Enterprise standard IDEs like Eclipse, etc… It’s by far the best and the most efficient coding experience on the market and that’s not trivial. Before developing a mission-critical application, you have to measure/estimate the development time. Flex is usually way faster than other solutions, for a better result at the end. That’s why it’s considered the leading RIA framework on the market. So, don’t be scared, Flex is not dead. I was not surprised to see some posts on the web promoting this idea. It’s a classic trend in our industry. Just to illustrate that point, I googled some queries. Here is my TOP 5 list of the dead technologies:

1. “.NET is dead” is the big winner with 576000 search results on Google. Congratulations.
2. “JAVA is dead” is following with 138.000 results. I can hardly feel this trend from Devoxx and the 3200 Java developers around me
3. “PHP is dead” is a little child with only 35.600 results.
4. “Ruby is dead” is in the same range with 30.700 results.
5. “AJAX is dead” generates 6500 results.

So we are newbies in this competition as “Flex is dead” only displays 5000 results I’m kidding of course, it’s a stupid analysis but it highlights that you shouldn’t always trust online articles about technologies lives. Try it with Flash, you’ll be amazed. Flash is a damned zombie . Ok… no more stupid games, let me go back to the future of Flex.

How can I contribute ?

After the announcement of our proposal to the Apache foundation, I received several emails from Flex developers and customers who want to contribute, to play a role in the roadmap, to fix bugs, etc… We’re still defining the process, so I cannot share any information on that today. But as soon as everything is defined, I’ll be the first writing tutorials to explain how to contribute. It’s such a big opportunity for the Flex community. It’s also a huge change of strategy and I’m aware of that, and some of you may be a little bit nervous. But Flex won’t be the only project in collaboration with Apache. We acquired Day software, and the engineers at Day are Apache masters, true open-source contributors. I like that. PhoneGap will also become an Apache project. Adobe is one of the top contributing companies to the Apache Foundation, and I fully embrace this strategy. I want Flex to become as popular as Tomcat in Enterprise architecture!

Let’s embrace this strategy together. Adobe is proud of Flex and super proud of what you achieve everyday with this framework. Based on the emotional reactions perceived on social networks this week, I can tell that we are all true and passionate Flex lovers. So let’s continue to build on that passion and work together on the future of Flex.

I’ve been working on a Flex mobile application called Narcissus, and I finally found the time to finalize and publish it on the App Store. Narcissus is a free application, available on the App Store for iPad users, and on your desktop thanks to the Adobe AIR runtime. Narcissus can analyze and segments the followers of a Twitter account. Inspired by Google + circles, Narcissus categorizes your followers in circles based on their activity on twitter (the number of tweets they sent) and their influence (the number of followers they get). It helps to understand who’s following you, how active your followers are on Twitter  and how influential they are. If you want your content to be re-tweeted and seen by a maximum of Twitter users, you’ll discover that you just need to focus on few people of your network. I’ve recorded a video that showcases the basic features of Narcissus.

This application has been developed with the Flex 4.5.1 framework and Flash Builder. It performs very well on all platforms (iPad, Android and the PlayBook), that’s why I want to share some tricks I’ve learnt building this app.

Design Driven Development

I’m clearly not a designer, but as I was the only person involved in this project, I forced myself to use the Design Driven Development methodology. It implies designing the full user-experience before writing one single line of code. As this project is a “data-visualization” application, the design process was obvious. The goal of a dashboard is to transform data into information. I know the data I can get from Twitter and I know what’s the user problem which is in this case: “how can I know better who’s following me on Twitter to be more efficient on my social network ?”. The UI of the application must bring solutions to that question. As it’s a dashboard application, I decided to use the “drill-down” strategy: start with a global view (using circles) and give the ability to drill-down (analyze the list of followers per category and get the details about a follower). I think I spent at least 4 hours in Photoshop to design the main screen, place the elements, design the circles, the callout popups, the icons… Then the second step is “what’s the best UI architecture to serve this design?”. I rapidly decided to use the new ViewNavigator class of Flex 4.5 and the IconItemRenderer to get the best performance on tablet devices. So I’m using a classic <s:Application> root tag that contains eight <s:ViewNavigator> components, one per circle. I spent two days on coding the application. Then I tested it on an iPAD, optimized the code (mainly my database code) and fixed some bugs.

Optimizing SQLite calls

When you test your application on your PC, SQLite always acts very well. When Narcissus retrieves the list of followers for one account, it needs to save all the ids in one table. So, if you analyze an account that has 2000 followers, it means that you need to fire 2000 INSERT SQL queries. On the desktop, it’s okay, it takes less than one second to Adobe AIR to save these 2000 lines. On the iPAD 1, it’s another story. It takes more or less 10 seconds, and it can freeze the UI. Very bad user-experience. That’s why I decided to use SQLite transactions. If you need to execute a batch of INSERT, DELETE or UPDATE queries, always use transactions. In other words, if you need to execute SQL queries that don’t return a result, you can use transactions. It reduced the SQLite processing time by 90% in my case. Here is a link to the doc that explains how it works, and the code I’m using in the application.

Code block

var sqlS:SQLStatement = new SQLStatement();
			sqlS.sqlConnection = sqlc;
			sqlS.text = "INSERT INTO "+ tableName+"(idUser,screenName,name,url,description,circle,nbFollowers,statusCount,picture) VALUES (@IDUSER,@SCREENNAME,@NAME,@URL,@DESCRIPTION,@CIRCLE,@NBFOLLOWERS,@STATUSCOUNT,@PICTURE)";
 
			sqlc.begin();
 
			for (var i:int = 0; i < arrayFollowers.length; i++)
			{
				objUser = arrayFollowers.getItemAt(i);
 
				sqlS.parameters['@IDUSER'] = objUser.idUser;
				sqlS.parameters['@SCREENNAME'] = objUser.screenName;
				sqlS.parameters['@NAME'] = objUser.name;
				sqlS.parameters['@URL'] = objUser.url;
				sqlS.parameters['@DESCRIPTION'] = myDescription;
				sqlS.parameters['@CIRCLE'] = objUser.circle;
				sqlS.parameters['@NBFOLLOWERS'] = objUser.nbFollowers;
				sqlS.parameters['@STATUSCOUNT'] = objUser.statusCount;
				sqlS.parameters['@PICTURE'] = objUser.picture;
				sqlS.execute();
			}
			sqlc.commit();

I’m also using incremental savings (auto-save) for performance and user-experience reasons.

How to persist simple parameters

I wanted to persist the settings (activity and influence thresholds) in a cleaner way than using a SQLite database. I started using the classic File API. The only directory that works on tablet devices is the Documents one. Here is some code that works both on desktop and tablet apps:

Code block

var file:File = File.documentsDirectory.resolvePath('settingsNarcissus.inf');
	if (file.exists) file.deleteFile();
 
	var fileStream:FileStream = new FileStream(); //create a file stream
	fileStream.open(file, FileMode.WRITE); // and open the file for write
	fileStream.writeObject(object); //write the object to the file
	fileStream.close();

But I’m not a big fan of the Files approach. That’s why I decided to use the Persitence Manager API. This class is so easy to use and so efficient!!! Here is how you can easily save and load settings from anywhere in your mobile project:

Code block

//SAVE
 
var object:SettingsObj = new SettingsObj(thresholdTweets,thresholdFollowers);
 
var persistenceMan:PersistenceManager = new PersistenceManager();
	persistenceMan.setProperty("settings",object);
	persistenceMan.save();
 
//LOAD
 
var persistenceMan:PersistenceManager = new PersistenceManager();
 
	try{
		var object:Object = persistenceMan.getProperty("settings");
 
		thresholdFollowers = object.savedThresholdFollowers;
		thresholdTweets = object.savedThresholdTweets;
	}catch(e:Error){
		//error management if empty
	}

Animations

Some developers asked me how I managed the animations and the transitions with the circles. For the animations, I’m simply declaring basic MXML sequences. When I get the profile image picture of a Twitter account, I’m assigning it to a circle, and then I change the xTo and yTo coordinates of the ‘moveProfile’ object. Here is how I declared the sequence.

Code block

<s:Sequence id="seqAnimationProfile" target="{profileImageComp}" effectEnd="seqAnimationProfile_effectEndHandler(event)">
			<s:Fade  alphaFrom="0" alphaTo="100" duration="500"/>
			<s:Move id='moveProfile'  xFrom="480" yFrom="380" duration="800">
				<s:easer>
 
					<s:Sine/>
 
				</s:easer>
			</s:Move>
			<s:Fade alphaFrom="100" alphaTo="0" duration="500"/>
			<s:Move  xTo="480" yTo="380" duration="50"/>
		</s:Sequence>

Regarding the circles, I’m using the default transitions of the ViewNavigator object. To enjoy the background image, I’m placing eight ViewNavigator with a transparent background which load views with transparent background. Just set the backgroundAlpha property to 0 in the ViewNavigator tags AND in the View tags. The circles are also animated. To do so, I’m playing with MXML graphic properties. The static parts are PNG files (the background and the reflection effet at the top of the circle), the animated part is a Spark Graphic component. Here is the MXML code for a circle:

Code block

<s:Image horizontalCenter="0" source="assets/images/circleBack.png"   verticalCenter="-20"/>
	<s:Graphic id="theCircle"  version="2" horizontalCenter="0" verticalCenter="-20">
		<s:Ellipse height="{radiusCircle}" width="{radiusCircle}">
			<s:fill>
				<s:SolidColor color="{data.colorCircle}"/>
			</s:fill>
		</s:Ellipse>
	</s:Graphic>
	<s:Image horizontalCenter="0" source="assets/images/circleReflect.png" verticalCenter="-87"/>

To animate the circles with some easing, I declared a Resize effect.

Code block

<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:Resize id="fxResize"  duration="500"  target="{theCircle}">
			<s:easer>
 
				<s:Sine/>
 
			</s:easer>
		</s:Resize>
 
	</fx:Declarations>

Leveraging the MXML tags of the Flex framework, you can very quickly build a professional iPAD application. Narcissus has been immediately approved by Apple on the App Store.

Links

If you want to use Narcissus on your desktop (MAC & Windows), install this AIR application:

http://www.riagora.com/narcissus/Narcissus.air

If you have an iPAD, then you can find it on the App Store:

http://itunes.apple.com/us/app/narcissus/id472974421?mt=8

Feel free to add a nice review on the App Store. If you don’t like the app, don’t say anything

Narcissus is just a small app that showcases how creative you can be with basic Flex components on tablet devices. I’m working on the Android version (I just need to fix some relative coordinates stuff to accept all screen resolutions).

I hope you’ll like it. Enjoy  !

Google Analytics is also trying to ease the addition of tracking events inside Flex applications. Unfortunately, the current version of the Google Analytics Tracker library doesn’t support Flex mobile projects. As I really needed this feature for a mobile app (that I will unveil next week), I modified the source code of the GATracker library and now it works like a charm. You can track everything, I mean everything:

- If you have HTTPService requests, you can track how many successful results your users get and  compared this number with the number HTTP fault events.

- If you have 5 tabs in your mobile apps, measure what is the most used tab, check if they are all used. You can also imagine to track the most common path for your app and track scenarios such as “the user hits tab 1, then tab 3 and then tab 2, is the main use case”.

Your mission is to defined what makes sense in your application, and which information will help optimizing it. Here are the steps I used to add Google Analytics tracking information in my mobile application:

1. Download the source (not the SWC) of the Google Analytics for Flash library:  http://code.google.com/p/gaforflash/

2. Open your Flex mobile project and add the code inside your project. It will create a com.google.analytics package with a lot of AS3 classes.

In your Google Analytics console, you need to measure an existing website (in my case riagora.com) and add the classic Google Analytics JavaScript library. Then your website will be validated and you’ll be given an ID for your website by Google. We’ll surcharge the tracking information of your website with mobile tracking information. The ID of your website should look like this chain of characters: UA-2999999-2.

3. On the application level (your root MXML file), create an AnalyticsTracker variable and instantiate a GATracker. The tracking variable is public. Add this code for instance:

Code block

public var tracker:AnalyticsTracker;
protected function viewnavigatorapplication1_creationCompleteHandler(event:FlexEvent):void
{
	// TODO Auto-generated method stub
	tracker = new GATracker(this,"YOUR_GOOGLE_ANALYTICS_WEBSITE_ID","AS3",false);
}

4. If you want to track something, just call the trackPageview method. It’s waiting for the name of the HTML page as a parameter. Create custom names such as “/mobileApp-Success”, or “/mobileApp-tab1″.

Code block

protected function button1_clickHandler(event:MouseEvent):void
{
	// TODO Auto-generated method stub
					FlexGlobals.topLevelApplication.tracker.trackPageview('/mobileApp-tab1');
}

5. Now if you compile your project, you’ll get error messages such as the famous TypeError #1009, also known as “the error that doesn’t help”. Let’s start modifying the Google Analytics code.

6. Open the class components/FlexTracker.as

7. Search and replace this code:

Code block

var appclass:Object = getDefinitionByName( "mx.core::Application" );
 _app = appclass.application;

by code that doesn’t refer to MX Application. In Flex 4.5, we don’t use MX applications anymore, but we can use the FlexGlobals class

Code block

appclass = getDefinitionByName( "mx.core::FlexGlobals" );
 
_app = appclass.topLevelApplication;

8. Then we need to add the root URL of our virtual website (in my case riagora.com). By default, the library tries to get the URL from browser information… well this cannot work with a mobile app running in AIR, so we’ll hard-code the URL Open the GATracker.as class. Comment the _env.url line and add your own root URL.

Code block

//_env.url = _display.stage.loaderInfo.url;
_env.url = "http://www.riagora.com/";

9. We still have to deal with small ‘stage’ issues. Open the core/IdleTimer.as class and comment two lines of code that deal with the Stage:

Code block

_debug      = debug;
         //   _stage      = display.stage;
            _buffer     = buffer;
            _lastMove   = getTimer();
            _inactivity = inactivity * 1000; //milliseconds
 
            _loop.addEventListener( TimerEvent.TIMER, checkForIdle );
            _session.addEventListener( TimerEvent.TIMER_COMPLETE, endSession );
          //  _stage.addEventListener( MouseEvent.MOUSE_MOVE, onMouseMove );

10. And that’s it!!! Within the Google Analytics console, you can now create custom dashboards, filtering the visited pages that starts with “/mobileApp”.

11. You can download this sample Flex 4.5.1 project that contains my updated Google Analytics library. Here is the link to this Flash Builder project: http://riagora.com/pvt_content/android/GoogleAnalytics.fxp

WARNING: Google Analytics doesn’t display the results in real-time ! You have to wait for 24 hours before seeing some tracking results.

When you look at how humans have interacted with enterprise knowledge over the years and even today, paper is still very present. You often interact directly with the knowledge on a horizontal plan using a pen, but this can hardly be centralized. Collaboration on a whiteboard is also an interesting case. You share and review the knowledge on a vertical plane. Often this knowledge is lost as collaboration is thought of as a temporary step in an enterprise workflow or a decision making process. These two interactions (paper and whiteboard) are still very common in large organizations, and that’s how we learn things at school. Personal computers introduced a different approach due to the rise of mice and keyboards. You move your mouse on an horizontal plane, it acts on a vertical plane that hosts the knowledge. For the first time the knowledge could be easily centralized and shared beyond the firewall (the extended company) with partners and external customers. Inspired by typewriters, PCs are not mobile at all, even less mobile than paper. The laptop was the first attempt of mobility. It automatically extended our work area and let us interact with the enterprise knowledge from home and on the road. But it also introduced some of the worst interactions ever (trackpad, balls, etc…). Smartphones are the real truly mobile device, the first that can answer the “anywhere and at any time” requirement. But the typing experience is bad and the small screens don’t let you review documents for instance. For all these reasons, you can see why tablets are a natural evolution. Although there’s still progress to be made, tablets are fully mobile, the typing experience is good, the large screen lets you review documents, and for the first time, and you can combine pleasure and work on the same device.

The rise of tablet devices in large organizations introduces new challenges for IT services. They have to define new processes to secure the configuration and deployment of apps, they have to ensure that mobile apps are auditable and compliant, and, most of all, they have to run existing applications. On the other side, end users are already tablet ninjas. That’s why there will be a gap between what IT services can deliver and users’ expectations. I also believe that native applications deliver the experience that people expect. If you deliver a classic web app on a tablet, employees won’t feel the benefits and they will wait until they are in front of a PC to interact with your app. By the way, I don’t think that tablet devices will replace laptops or PC. Sometimes, it will be complementary, and sometimes yes, there will be some cannibalization. If you look at the enterprise apps developed on tablets in 2011, they were mainly targeting three populations: the top managers, the sales force and the inspectors. Top managers need a real-time access to strategic information. They want dashboards to accelerate and improve their decision making time. The sales force uses tablets for two reasons. It’s a fantastic device to showcase the products  you’re selling, and it’s also a nice way to interact with the CRM. Inspectors, or employees that need to audit external environments, are naturally using tablets to access technical information, capture data in the field and collaborate. Tomorrow, anyone is a potential tablet candidate. Even I as a developer, I can imagine having a tablet with a companion app, helping me browsing the AS3 doc for instance (I think that someone had this idea before me… more to come…).

Flex developers can answer these new needs very easily. We are in pole position. If we embrace a Design-Driven Development methodology, we’ll be very successful. DDD consists of defining the technical infrastructure of your solution based on the user experience. The UI is here to solve end users’ problems, and the system serves the UI. If you build a system-centric application on a tablet, with a UI that reflects the system, then you’ll fail. I hope that tablets will boost the Design-Driven methodology in large organizations. It would also increase the number of Rich Internet Applications. Today, RIA frameworks (and especially Flex) are much more mature than enterprise IT services.  Even with the best technology, if IT services stick to their traditional way of developing products, they will fail again and again. Flex developers need to become DDD sponsors.

Here is the recording of my presentation. You’ll also find my slides (hosted by SlideShare) at the end of this article.

The Keynotes

The Keynote on DAY 1 was magnificent. The introduction with the two dancers was mind-blowing. A classic dancer was answering the moves of a contemporary dancer. It was expressing the shift that is taking place in the creative industry and how the Creative Suite would help our community to make this transition. Creative Suite is moving to the cloud which enables new advanced workflows for pros or amateurs like myself. I was also happy to see that the new generation of Touch Apps are built on top of Adobe AIR on tablet devices. I guess that they are using the AIR 3 native extensions to process the large image filters and AS3 for the UI (which is super cool by the way, especially the Photoshop Touch toolbar). So… it was a great Day 1 Keynote leaded by our CTO.

The second keynote focused on Flex (5%), HTML (75%) and Flash (20%). As Flex 4.6 was already announced before MAX, there wasn’t much to add during the keynote. Ben Forta highlighted the new features of AIR 3 (captive runtime and native extensions), and launched a cool video of a customer (Johnson Controls) who used Flex to code an RIA that runs in the browser and on mobile devices. I met Jeff Boothe, the architect of the project. He’s a great guy and great asset for our community. Here is the video showcasing this cool Flex project:

But, the DAY 2 Keynote was definitely not all about Flex. It was an opportunity for us to showcase that Adobe is the engine of innovation of the web, the laboratory for first-class user experiences, regardless of the end-user technology in use. We’ll innovate for Flash and Web standards at the same time. With the acquisition of Nitobi, Adobe is clearly indicating its intent to become the leading software editor of HTML5. Innovations such as CSS regions and CSS shaders are also highlighting our desire to share our knowledge with the W3C. The demos were quite impressive and Adobe tools (such as Edge and Muse) should be the first to leverage these innovations. We also admit that these innovations won’t be standardized and available in all browsers by the end of the week: that’s why Flash will still have a major and strategic place in the web for people who want to innovate today and deliver first-class experiences to the masses. Among these new areas of innovation, there’s gaming, an industry that is exploding on the web thanks to social networks. Because of its maturity, its community and its technical architecture, Flash will become the console of the web. The Flash 3D (Unreal engine) and 2D (Angy Birds) games demonstrations were just amazing. It’s a new playground for Flash developers and it offers new business opportunities. I think that this keynote had a great impact in the press. A lot of journalists (finally) understood that Flash is not dead and that Adobe is not the enemy of HTML. Adobe is now the official user-experience innovator of the web (well… it has always been the case but some people forgot it).

Flash is the new console of the web, but it will also remain the “Ferrari” of the web. Brands that need to differentiate themselves from the competition by delivering first-class experiences will still use Flash. That’s the case of Nissan, and it’s also illustrated by the interactive agency Les Chinois. Gaming will become a big focus, but I don’t think that it will crowd out other uses.

So where was Flex ?

One video about Flex during the keynote… you may be think that that’s not much attention for a core technology. So where was Flex ? Actually, Flex was everywhere during MAX, and was more present than ever. On Sunday, I attended a Q&A session with the user-group leaders. The big majority of them were Flex developers, and most of their questions were about Flex and Enterprise applications. Then the sessions and labs: more than 75 sessions and labs were about Flex coding!!!

A lot of sessions were focused on Flex mobile development. It was great to see that the major part of our community have already developed and published mobile apps using Flex, although it has been released recently. When you look at where Flex mobile was one year ago… it was nothing… just an illusion. Today, we can develop and publish “native-like” applications. Adobe is still working on performance improvements and you’ll feel these improvements with Flex 4.6, but still, developers demonstrated me very cool high-performance Flex apps. PhoneGap is the Adobe AIR of HTML developers: a cool wrapper for your HTML app with some APIs and the ability to build your own plugins (native extensions). But in the end, it’s still HTML and JS. So it will primarily target content-centric applications in my opinion, and it’s not a framework, so you’ll have to rely on something like jQuery to ease your development. For “native-like” experiences and data-centric apps, Flex is still the first-choice platform and Flash Builder the best coding/debugging experience by far.

If you want to check a session about the future of Flex, get some information about our upcoming new compiler and some cool future features such as ActionScript workers (multi-thread), check this video about the future of the Flash Platform:

http://tv.adobe.com/watch/max-2011-develop/flash-platform-roadmap-flex-flash-builder-flash-player-air/

Flex was also central during the Sneaks which is the moment when our top engineers unveil innovative stuff. I can easily say that it was the best Sneaks so far in MAX history. Two Sneaks deal with Flex. The first one is about reverse debugging. I can’t wait to have this feature in Flash Builder.

The second one is Monocle, a new tool to profile the behavior of the Flash Player. It will be a great addition to our existing tools.

The community is the key

Adobe MAX always reminds me of something: the community has the final word. Adobe enables innovative technologies, but our community innovates even more: finding new use-cases, pushing the boundaries of our platform, and sharing its creativity openly. Every time we launch a new API, we’re happily surprised by how the community uses it. Stage3D is already used for 2D gaming (check Starling)! So I trust the community. Developers shared with me some amazing experimental projects they’re doing with Flex, AIR and Stage3D during Adobe MAX, I hope I’ll be able to show them as soon as possible on this blog. The technology is out, now let’s play.

If you live near Paris, Berlin or London, come and see us at the Back From MAX events at the end of October !!! Check this website: http://www.backfrommax.com