I’m leaving Flex and it’s not because of HTML5.

Note I cross posted this entry on my new blog.

Flex has been really good to me for many years. In fact I moved to the US in 2002 and started working on a Flash project and we jumped on Flex before it was 1.0 with Royal which was the beta code name of Flex. Flex had a long road since and I delivered many fun and successful customer projects. Many of which were internal enterprise projects and I also worked on a few pretty visible public ones like the Australian Open Tennis Vault, the NCAA Vault. I even co-authored a Flex on Rails" book.

You would think I would leave Flex based on the flux it is in right now after the catastrophic public relation announcement from Adobe in November. That’s not it, as I actually believe Flex has a bright future and is in great hands with the Apache Flex Team. My realization happened a couple of weeks ago with the announcement of Rubymotion. The cheer fact of being able to build iOS apps with the iOS SDK in Ruby was that moment for me and it opened my eyes and pointed to a turning point in my career. I’m going mobile full steam ahead. This is the future. Note just RubyMotion, just the mobile sector in general. And many mobile apps need to be backed by great server side services. So mobile and the cloud are really an exciting combination.

So what do I mean by “I leave Flex”. Actually it already started, I’m not taking on new Flex Desktop Project, I cancelled of few customer Flex projects that where on my radar and I’m canceling several internal project I was working on. In addition I will not attend Flex user groups or conferences and I’m not giving Flex speaking engagements or trainings. That’s it, done!

So what about my current engagements with Flex? I currently have two great customer for which I provide product development, mentoring and consulting services and I would like to continue working with them for the foreseeable future. In fact these two customers have many Ruby on Rails projects and will start doing more mobile development. So it seems to be a good match.

And what about Flex mobile which is pretty awesome and is a great way to build iOS and Android apps for the enterprise? You may not know this, but I have been an Objective-C developer in the mid-90 on NeXTStep and followed the WWDC conference since many years before the iOS SDK was announced. Again I love Ruby and the iOS SDK, I just wasn’t very fond of Objective-C anymore as Ruby spoiled me. RubyMotion is my gateway drug to iOS and I’m just ready to dive fully into iOS. Mentally I don’t want to master two different environments and the iOS ecosystem is large enough to sustain me professionally.

Now will I still recommend Flex to anyone? The answer is clearly yes as there are still many situations and projects where Flex is a great match. At least until a good HTML5/JavaScript framework can provide the same productivity than with the Flex SDK. All the current HTML frameworks will evolve and morph drastically over the coming years. Which is a good reason to choose Flex if you want stability. These HTML frameworks will take several years to mature. This said I really enjoy Backbonejs, Spinejs, Ember-js and how they try to make development of Rich HTML Applications easier.

So, here we go. Good bye Flex!

– Daniel Wanja

UndoManager for ActionScript

UndoManager is A simple ActionScript library to add undo/redo functionality to your Flex/ActionScript projects. I just extracted this library from one of the project I’m working on.

Read more on my new blog

Enjoy!
Daniel

UndoManager for ActionScript

UndoManager is A simple ActionScript library to add undo/redo functionality to your Flex/ActionScript projects. I just extracted this library from one of the project I’m working on.

Read more on my new blog

Enjoy!
Daniel

The Future of Flex.

At first I thought “Wow, Adobe really messed up their communication”. They could have focused on what they are adding, strong support for HTML5 and CSS4, Adobe AIR for Mobile, and not on what they are removing, the Flash Player in the Browser. But then they also announced that they opened sourced Flex via the Apache Foundation. And the main stream media, the blogosphere, and many developers I know went crazy and said Flex is dead, it’s over, time to convert all your projects to HTML5.

At a second thought I think it’s pretty smart what Adobe did. The saying goes “If you can’t beat them, join them”. In fact the Flex against HTML fight wasn’t one where Adobe had anything to win from. So they just made it loud and clear and now they are saying “We are HTML5”. In fact detaching themselves from Flex in appearance allows them to ride the new HTML5 technowave and get in the news when they upgrade their tool, bring out new HTML5 component framework or acquire hot companies like PhoneGap and TypeKit. We are HTML5!!

Adobe has already two great tools for HTML5, Muse and Edge and needs to push them way further and also needs to create or acquire a great HTML component framework such as Sencha so they call build and sell new development tools as well as design tools for the new growing crowd of HTML5 developers.

So where does that leave Flash and Flex. I use a lot Flex in the enterprise, and that’s where Adobe just did the most damage in my eyes. Go now try to convince any CTO that Flex is a good idea. Flex is a mature framework and Adobe has a great enterprise offering, but it will be hard to convince anyone that Adobe is still behind that technology after the way they managed their communication. This said I think the move of Flex to the Apache open source foundation is a great one and if managed right will give Flex a good run for years to come. Flex is still a great choice for many enterprise projects and will remain so until a solid and widely adopted HTML component framework emerges. If Adobe is smart they could provide that offering.

Flex is also a great environment to develop “native” mobile applications that can run on iOS and Android. The forthcoming Flex SDK 4.6 will show that potential and it’s a great way to create cross platform mobile and tablet applications. Adobe will not kill Adobe AIR for the mobile as it’s a too appealing growth market. But that message didn’t get through to the main stream media.

As Adobe said Flash for the desktop for games and Adobe AIR for mobile will be here for a while. But Adobe has the most to gain if they become the major player in the HTML5 field by providing tools, framework and making the web standards evolve. And they are in a good position to get there. To achieve this goal it also means that they will refocus many of their development teams and this will impact Flash and Flex. Moving the Flex SDK and some of the key developers to the Apache Foundation will allow to continue to evolve the SDK regardless of Adobe’s new focus. The move a few years ago to the Flex Sparks components and the recent addition of the new mobile components provide a great and mature framework basis for a real open source effort which I believe will have a long life even if it will become a niche environment over the long run. Note I consider Ruby on Rails a niche market, a really great one to be in. Adobe has something great with Adobe AIR for mobile and this is the one area where they could even grow their developers basis if they get their message right. For me AIR for mobile/tablets and the Flex SDK 4.6 is one solution where I can build mobile apps faster than in any other environment and this will be a great business to be in, especially for the enterprise market.

The smart enterprises will realize that Flex is stable and here to stay for the long run, even if it’s not in the spotlight. They will start HTML projects in parallel to gradually improve their developer workforce and experience in this area. They will also realize that the HTML5 frameworks and coding technics are evolving so rapidly that it will be time consuming just to keep up. Also these frameworks are not as mature and complete as in the Flex ecosystem. Finding Flex developers is difficult, but finding great HTML/Javascript developers is even harder. This said, there is no denying that pretty quickly the HTML5 tools and frameworks will catchup with what Flex offers today in ease of development for enterprise applications.

Personally I’m looking forward to see how these HTML5/Javascript tools/libraries will evolve and will play with many of them.

So where does all this leaves you, the developer. Well, it’s for sure time to jump on the new HTML/Javascript bandwagon if you haven’t yet. I cannot see many companies starting new enterprise projects with Flex. If you are into mobile or tablet development give the new Flex SDK 4.6 a try, I believe there is a great potential for Flex to become a major player in the mobile development arena…targeting “native” applications and not the browser. Yep, your heard it here first 😉

Enjoy,
Daniel

The Future of Flex.

At first I thought “Wow, Adobe really messed up their communication”. They could have focused on what they are adding, strong support for HTML5 and CSS4, Adobe AIR for Mobile, and not on what they are removing, the Flash Player in the Browser. But then they also announced that they opened sourced Flex via the Apache Foundation. And the main stream media, the blogosphere, and many developers I know went crazy and said Flex is dead, it’s over, time to convert all your projects to HTML5.

At a second thought I think it’s pretty smart what Adobe did. The saying goes “If you can’t beat them, join them”. In fact the Flex against HTML fight wasn’t one where Adobe had anything to win from. So they just made it loud and clear and now they are saying “We are HTML5”. In fact detaching themselves from Flex in appearance allows them to ride the new HTML5 technowave and get in the news when they upgrade their tool, bring out new HTML5 component framework or acquire hot companies like PhoneGap and TypeKit. We are HTML5!!

Adobe has already two great tools for HTML5, Muse and Edge and needs to push them way further and also needs to create or acquire a great HTML component framework such as Sencha so they call build and sell new development tools as well as design tools for the new growing crowd of HTML5 developers.

So where does that leave Flash and Flex. I use a lot Flex in the enterprise, and that’s where Adobe just did the most damage in my eyes. Go now try to convince any CTO that Flex is a good idea. Flex is a mature framework and Adobe has a great enterprise offering, but it will be hard to convince anyone that Adobe is still behind that technology after the way they managed their communication. This said I think the move of Flex to the Apache open source foundation is a great one and if managed right will give Flex a good run for years to come. Flex is still a great choice for many enterprise projects and will remain so until a solid and widely adopted HTML component framework emerges. If Adobe is smart they could provide that offering.

Flex is also a great environment to develop “native” mobile applications that can run on iOS and Android. The forthcoming Flex SDK 4.6 will show that potential and it’s a great way to create cross platform mobile and tablet applications. Adobe will not kill Adobe AIR for the mobile as it’s a too appealing growth market. But that message didn’t get through to the main stream media.

As Adobe said Flash for the desktop for games and Adobe AIR for mobile will be here for a while. But Adobe has the most to gain if they become the major player in the HTML5 field by providing tools, framework and making the web standards evolve. And they are in a good position to get there. To achieve this goal it also means that they will refocus many of their development teams and this will impact Flash and Flex. Moving the Flex SDK and some of the key developers to the Apache Foundation will allow to continue to evolve the SDK regardless of Adobe’s new focus. The move a few years ago to the Flex Sparks components and the recent addition of the new mobile components provide a great and mature framework basis for a real open source effort which I believe will have a long life even if it will become a niche environment over the long run. Note I consider Ruby on Rails a niche market, a really great one to be in. Adobe has something great with Adobe AIR for mobile and this is the one area where they could even grow their developers basis if they get their message right. For me AIR for mobile/tablets and the Flex SDK 4.6 is one solution where I can build mobile apps faster than in any other environment and this will be a great business to be in, especially for the enterprise market.

The smart enterprises will realize that Flex is stable and here to stay for the long run, even if it’s not in the spotlight. They will start HTML projects in parallel to gradually improve their developer workforce and experience in this area. They will also realize that the HTML5 frameworks and coding technics are evolving so rapidly that it will be time consuming just to keep up. Also these frameworks are not as mature and complete as in the Flex ecosystem. Finding Flex developers is difficult, but finding great HTML/Javascript developers is even harder. This said, there is no denying that pretty quickly the HTML5 tools and frameworks will catchup with what Flex offers today in ease of development for enterprise applications.

Personally I’m looking forward to see how these HTML5/Javascript tools/libraries will evolve and will play with many of them.

So where does all this leaves you, the developer. Well, it’s for sure time to jump on the new HTML/Javascript bandwagon if you haven’t yet. I cannot see many companies starting new enterprise projects with Flex. If you are into mobile or tablet development give the new Flex SDK 4.6 a try, I believe there is a great potential for Flex to become a major player in the mobile development arena…targeting “native” applications and not the browser. Yep, your heard it here first 😉

Enjoy,
Daniel

Redis-Flex: An ActionScript Library to integrate with Redis

Announcing redis flex An ActionScript Library to integrate with Redis.

A while back I looked into accessing Redis directly from Flex and I found an existing library, as3redis that however didn’t support the new unified request protocol. So I wrote a minimalist wrapper that now allows to send commands to a redis server.

To access the Redis server from Flex just instantiate a Redis instance:

    <redis:Redis id="server"
                 connected="server_connectedHandler(event)"
                 result="server_resultHandler(event)" />

Then you can send commands:

    server.send("SET A 123");
    server.send("GET A");
    server.send(["rpush", "messages", "message one"]);

Note it’s not a good idea to connect a Flex application directly to Redis. Redis is usually used in the context of an application server that protects it’s access in the same way that Flex doesn’t connect directly to a database. However they may be cases that this could be useful.

Enjoy!

Daniel

To Infinity and… no beyond – An ActionScript bug…I mean, feature.

So yesterday I was asked about a bug in a legacy Rails and Flex application. There was one company name that wasn’t displayed correctly on the front-end. “Infinity Corp Name” was just displayed as “Infinity”, so nothing beyond infinity. First I thought it was a joke, but not, a real bug that could cause issues.

So I looked at the code and the service call was a plain HttpService call with the resultFormat set to object. The server returns XML but the Flash Player converts the XML to a tree of objects. This is where it get’s funny. In fact when the player converts your hash to Objects it checks if a value is a number or a string…Hey guess what “Infinity followed by something” is a number.

Here are some conversion examples:

String Is Number Converted Number
“123” true 123
“123 Abc” false NaN
“Infinity” true Infinity
“Infinity Abc” true Infinity

It’s the last conversion which is the root of the problem as “Infinity Abc” is a number that when casted translates to Infinity!

So we found the problem but the solution is really don’t use the Flash Player to do the conversion for you using the return type “object”. Use “e4x” which would turn your object in XML or use JSON and do the conversion yourself.

To Infinity… and beyond!

Daniel

To Infinity and… no beyond – An ActionScript bug…I mean, feature.

So yesterday I was asked about a bug in a legacy Rails and Flex application. There was one company name that wasn’t displayed correctly on the front-end. “Infinity Corp Name” was just displayed as “Infinity”, so nothing beyond infinity. First I thought it was a joke, but not, a real bug that could cause issues.

So I looked at the code and the service call was a plain HttpService call with the resultFormat set to object. The server returns XML but the Flash Player converts the XML to a tree of objects. This is where it get’s funny. In fact when the player converts your hash to Objects it checks if a value is a number or a string…Hey guess what “Infinity followed by something” is a number.

Here are some conversion examples:

String Is Number Converted Number
“123” true 123
“123 Abc” false NaN
“Infinity” true Infinity
“Infinity Abc” true Infinity

It’s the last conversion which is the root of the problem as “Infinity Abc” is a number that when casted translates to Infinity!

So we found the problem but the solution is really don’t use the Flash Player to do the conversion for you using the return type “object”. Use “e4x” which would turn your object in XML or use JSON and do the conversion yourself.

To Infinity… and beyond!

Daniel

Building Rails Apps for Rich Client – Using the bulk_api from Flex.

In this screencast we are going to show how to build a Rails app in a couple of minutes that is optimized for Rich Client. The application is a todo application build in Flex connecting using the bulk_api to the Rails server using my new bulk data source Flex framework.

Enjoy!

Daniel

Journey into Android Development – Part 3 : Flex Development (Adobe AIR for Android)

Ok, today I’m at the 360Flex conference following Brent Arnold’s AIR for Android presentation. We are playing with the Flex SDK 4.5 to build an Android app however we had to sign an NDA, so I cannot say some of the detail unless it’s already on the internet. This said I assume that tomorrow Adobe will announce the official release of Flash Builder 4.5. And a ton’s of information was already published:

  • http://labs.adobe.com/technologies/flex/mobile/
  • http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero
  • http://corlan.org/2011/01/12/understanding-flex-mobile-views-and-viewnavigator/

Here is TourDeFlex that shows all the capabilities of the Adobe AIR runtime. Download TourDeFlex. The source code can be found at https://github.com/jamesward/TourDeMobileFlex

In the training we created a small application that checks the capabilities of your device: Download DeviceCapabiliites
The application uses the Capabilities api that checks various parameters of your device., such as multi-touch, camera, location. Here is the source code:

Within Flash Builder in the properties of your project you can go to the Flex Build Packaging | Google Android and create a self-signed certificate.
Then you can use the Project | Export Release Build… option to create an .apk file for your project.

The application itself is not that exicting but allowed us to discover how to create AIR apps for Android using Flex and Flash Builder.

Enjoy!

Daniel.

UPDATE (4/10/11): Et voilà Flex 4.5 is announced, but the final version will only be downloadable early May. Here is a good article on mobile development.

Journey into Android Development – Part 3 : Flex Development (Adobe AIR for Android)

Ok, today I’m at the 360Flex conference following Brent Arnold’s AIR for Android presentation. We are playing with the Flex SDK 4.5 to build an Android app however we had to sign an NDA, so I cannot say some of the detail unless it’s already on the internet. This said I assume that tomorrow Adobe will announce the official release of Flash Builder 4.5. And a ton’s of information was already published:

  • http://labs.adobe.com/technologies/flex/mobile/
  • http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero
  • http://corlan.org/2011/01/12/understanding-flex-mobile-views-and-viewnavigator/

Here is TourDeFlex that shows all the capabilities of the Adobe AIR runtime. Download TourDeFlex. The source code can be found at https://github.com/jamesward/TourDeMobileFlex

In the training we created a small application that checks the capabilities of your device: Download DeviceCapabiliites
The application uses the Capabilities api that checks various parameters of your device., such as multi-touch, camera, location. Here is the source code:

Within Flash Builder in the properties of your project you can go to the Flex Build Packaging | Google Android and create a self-signed certificate.
Then you can use the Project | Export Release Build… option to create an .apk file for your project.

The application itself is not that exicting but allowed us to discover how to create AIR apps for Android using Flex and Flash Builder.

Enjoy!

Daniel.

UPDATE (4/10/11): Et voilà Flex 4.5 is announced, but the final version will only be downloadable early May. Here is a good article on mobile development.

Good RobotLeg presentation at 360Flex

Paul Robertson gave a RobotLeg presentation at 360Flex and put his slides online. I had to dive into a RobotLeg application the other and wanted a refresher and found his slides really great so I’ve extracted for your (and my) convenience some useful bullets points:

  • View
    • the View is represented by your view components and their Mediators
    • Mediators provide API for view components
    • Mediators listen for view component events
    • Mediators listen for framework events
    • Mediators dispatch framework events
    • view components are not coupled to their Mediators
    • Mediators are coupled to their view components
    • Mediators can access Service and Model classes directly
  • Actor
    • Actor is the base class for Model and Service classes
    • eventDispatcher is injected into Actor
    • Actor provides a dispatch(event) method
    • Actor is for your convenience
  • Model
    • Models extend Actor
    • Models provide an API for data
    • Models sit between application data and other actors
    • Models should not listen for framework events
    • Models dispatch framework events
  • Service
    • Services extend Actor
    • Services usually implement an interface
    • Services communicate with the outside world and provide an API to external services
    • Services can parse results from external services
    • Services do not store data
    • Services do not receive framework events
    • Services dispatch framework events
  • Controller
    • represented by the Command class
    • Commands are executed in response to framework events
    • Commands are stateless
    • Commands perform work on Service and Model classes and dispatch events (call other commands)
    • Commands receive data from the events that trigger them
    • Commands dispatch framework events
    • Commands do not receive framework events

You can get the slides here and also checkout his blog entry for more info.

These days everyone has his preferred Flex framework. Mine is still Swiz as it doesn’t impose a structure like Cairgorm or RobotLeg. I’ve also just started on a new project that uses Parsley, so I’ve soon done them all!

Enjoy!
Daniel

UsageReport Downloader for Amazon Web ServicesTM. A simple tool to download all you usage reports with one click. ec2, s3, sns, sqs and more

UsageReport Downloader for Amazon Web ServicesTM is a simple tool to download all you usage reports with one click.

Install UsageReport Downloader

mainui.png

The files are download in your documents folder. You can change the default folder. You selection is kept for the next time.

Click the Download XML or Download CSV button to choose which format the report should be downloaded from and off you go…

downloading.png

All you files are download to the select download folder (here /Users/daniel/Documents/usagereport/downloads/Current\ Billing\ Period)

downloadedfiles.png

When the application start it checks if you already logged in and you will see the following message.

pleasewait.png

You can stay logged in between launching the application, we recommend that you log out once you download all you files.

If you need to login just enter your email and amazon password as usual for https://aws.amazon.com.

usernamepassword.png

If you use the authentication tokens for signing in you will be presented this additional screen:

token.png

Et voila…Happy downloading!

Please contact me at daniel@appsden.com for any bugs, issues, questions.

Enjoy!
Daniel Wanja

Sneak peek of Usage Report for Amazon Web Services™

I have been working on a tool to visualize your Amazon Web Services usage logs for EC2, RDS, SQS, S3, SDB (and soon CF). There will be a limited free version and a full version that has the dashboard and the drill down for each of the services. This tool is still in development but my todo list is getting shorter…so you can have a sneak peek here:

Sneak peek of Usage Report for Amazon Web Services™ from daniel wanja.

360Flex last day.

What a conference! The talks where really awesome so far. Not exactly sure what I will attend today. I might attend “Optimize it! ActionScript Tips for iPhone Games” followed by “Adobe is from Mars, Microsoft is from Uranus: A View from the Client”. Then I will have to split early to catch a flight to Salt Lake City for the MountainWest RubyConf 2010.

Optimize it! ActionScript Tips for iPhone Games Renaun Erickson

Renaun is Plaform Evangelist for Adobe since last week. He will put up the slides and code on his blog later today. Many of the tips are good for any Flash/Flex app not just for iPhone ones.

  • Packager for iPhone (PFI)
  • LLVM cross compiles

He will focus the talk on Memory/Cpu/Mouse Move and Game Timers.

Instead of going to the Flex/Silverlight talk, sorry Jun and Eric, I went to Nate Beck’s talk on pushbutton. And Doug McCune had something special planned for Nate’s birthday…

Flex 4: It’s a Wrap

Thank’s Tom and John…the conference was awesome!

360 Flex – Day 2 (Tuesday) – Live Blogging

As you saw yesterday afternoon I didn’t blog too much, so let’s how today goes. The party last night was really fun, lot’s of networking, rock band playing and just a nice general geek atmosphere.

Evolution of RIA Design Principals

Right now the “Evolution of RIA Design Principals” panel is about to start.

Panel is:

  • Chet Haase – Senior Computer Scientists at Adobe
  • Bill Scott – Director UI Engineering at Netflix
  • Ehud Waizer – SAP
  • Paul Guirata – Catalyst Resources

Context: oriented to customer facing applications. Not games.

Chet Haase

He works on effects at Adobe. Effects used in a subtle way can make the user more effective.

What are the top 3 rules

  1. Transitioning
  2. Anticipatory
  3. well-timed.

Don’t Lose the User.

Bill Scott

Principles for Interesting Moments

  • Input where you output
  • Require a light footprint
  • Stay in the flow
  • Offer invitations
  • Be reactive
  • Use transitions

Paul Giurata

Modular
Reusable

  • Panel vs Page
  • Panels being reusable application(s)
  • Panels being re-used down to the code level
  • Panels potentially being entirely separate applications

Bill mentions Christine Perfetti has a few videos on usability testing.

Compiled Favorite Principles

  • Transitioning (Animations)
  • Anticipatory
  • Timing
  • Don’t Lose the User
  • Interesting Moments
  • Modular
  • Reusable

Consistency .via. developers working from the same code. Not a style guide as it’s open for interpretation.

Whats New in Flex 4 that’s NOT Spark! – Deepa Subramaniam

Deepa was on the engineering team for 7 years and now just got promoted as product manager.

She will put the slides on her blog. So I will go easy with the notes.

We will talk about:

  • Enhanced States
  • Pixel Bender Integration
  • Text (TLF)
  • 2-way Data Binding
  • Advanced CSS
  • OSMF
  • MXItemRenderer
  • RSLs
  • Charting Enhancements
  • ASDoc
  • MXML Vector
  • Compile time FXG Optimization
  • Improved Compiler

2-Way Databinding

Inline declaration using the syntax, @{bindable_property}

<s:TextInput id="t1" text="@{t2.text}" />
<s:TextInput id="t2" />

Enhanced States Syntax

  • AddChild/RemovedChild replaced with includeIn/excludeFrom
  • State Groups
<m:states>
 <m:Sate name="A"/>
 <m:Sate name="B"/>
 <m:Sate name="C"/>
</m:states>

<Button label="b1" includeIn="A,B" />
<Button label="b2" includeIn="C" />

Text

  • FTE – Flash Text Engine in FP10
  • TLF – Text Layout Framework, set of ActionScript classes build atop FTE. Is XML-based markup

Each text element maps to a class

<div>        flash.textLayout.elements.DivElement
<p>            flash.textLayout.elements.ParagraphElement
<span>        flash.textLayout.elements.SpanElement
<tab>        flash.textLayout.elements.TabElement

TLF Partitioning:

  • Simple, plain text
  • Rich text
  • Rich editable text
  • Rich, editable, selectable text

Pixel Bender Integration

  • Pixel Bender: language for hardware-indepdent image processing algorithm
  • Shader: compiled instance of a Pixel Bender kernel
  • Flex introduces the ShaderFilter class. Simplifies pixel bender such that they can be invoked in MXML

Advanced CSS

  • Flex 3: type and class selectors
  • Flex 4: Multiple class selectors, id selectors, descendant selectors, pseudo-selectors, pseudo-state selectors

Eg pseudo-state selectors

@namespace s "library://ns.adboe.com/flex/spark";

s|Button:up {
  color:#000000;
}

s|Button:down {
  color:#FFFFFFF;
}

OSFM

  • Generic framework for managing media in Flash applications
  • Offers playback functionality, exposed in the Spark video component
  • replaces FLVPlayback
  • org.osmf.media.MediaPlayer
  • Play, pause, stop, loop, seek, volume, autoLoop, autoPlay, …

MXItemRenderer

  • Spark ItemRenderers for use with MX List-based components
  • Extends Spark ItemRenderer and handles the contractual differences

Charting Enhancements

  • FilterFunctions for chart types. Can specify custom filter functions against the data set
  • Inverted axis support
  • RendererDirection in PieSeries
  • Performance related bug fixes

RSLs

  • By default RSL is turned on.
  • Default linked HelloWorld is 78% smaller
  • How to monkey patch when using RSLs. If you monkey patch you loose the benefits off RSLs
  • Flex is split in 6 RSLs: textlayout, osmf, framework, spark, sparkskins, rpc

MXML Vector

  • New type
  • Like Arrays but contents are restricted to a single base type
  • Faster than array
<fx:Vector id="myVector" type="String">
  <fx:String>hi</fx:String>
  <fx:String>bye</fx:String>
</fx:Vector>

Compile-time FGX Optimization

  • FXG directly to SWF representation
  • Faster and smaller
  • .fxg or past FXG into an MXML Component uses compile-time FXG Optimization

ASDoc

  • Comments in MXML
  • Support DITA creation
  • Max, Win, Linux

Improved Compiler

  • Incremental compilation. 50-80% better
  • Full compilation: 30-40% better (large apps)
  • Compiler Memory Usage: large apps are 30% better. multi-project apps are 70% better. Small apps are similar to Flex 3

360 Flex – Day 2 (Monday Afternoon) – Live Blogging

360flex_6_robot.png

Obey: Building a Rules Engine with AS3 and the Hamcrest API – Drew McClean & RJ Owen

360flex_7_rules.png

How are rules defined and implemented?

Rules Engine Anatomy: Facts -> Rules [Conditions=>Actions] -> Output

Battery is down!

Flex + Phidgets = Beer – Kevin Hoyt

Kevin’s presentation was how to drive a phidgets board to control dispensing beer to users with an rfid, taking a picture along the way and counting the numbers of beers that user had so far. The board is driven from a Flex application. It was really impressive presentation.

Intro to Flex Typography – Matt Guest

  • Flash Text Engine
  • Text Layout Framework

360 Flex – Day 2 (Monday Morning) – Live Blogging

360flex_1_ebay.png 360flex_2_ebay.png

Actually today is the first day of the conference. Yesterday was a tutorial day which was really fun. Today there will be a bunch of 1h20m sessions throughout the day. The conference is at the ebay headquarters.

360flex_3_keynote.png

I was with three other guys from Denver and we nearly missed the start of the keynote as we took the light rail in the wrong direction. How can 4 engineers go so wrong? 🙂 Anyhow it doesn’t seem we missed to much as it’s starting with a talk from the sponsor (ebay/paypal) about the eBay developer program.

Keynote

Now onto the main keynote by Deepa Subramaniam on the Adobe Flash Platform for her first keynote given ever. She is the new Product Manager of the Flex SDK.

  • The Flex 4 release is coming really soon.
  • Overview of Flex 4
  • Demo of spark components
  • Data-Centric Development
  • Video from the Flex team (geek funny)
360flex_4_ Deepa.png

It’s great that Deepa become the project manager of Flex 4, she understand what’s programming is about. She now continues her talk on the Open Screen project.

Developing multi-screen applications (phone .vs. desktop…)

Cross screen challenges/Cross device challenges

  • Screen size
  • Input mechanisms
  • Performance
  • Context/use case changes
  • Screen size, orientation

Flex can help – Slider (Mobile Flex Framework)

  • Deliver top quality experience
  • Across multiple platforms
  • Within performance constraints

The Slider team is hard a work and hope to have a preview available this year :-(… I want it earlier!

Growing Flex Ecosystem:

  • Functional Testing Tools
  • Performance and Load Test Tools
  • Flex Components
  • Frameworks
  • AMF servers
  • Tooling Extensions
  • Licensing+Encryption
  • Security Testing

All data visualization components now available in the free open-source Flex SDK!

Cool John is saying that they are recording the videos of each session.

Appocalypse Soon? The remaking of ‘Flex Components’ – Michael Labriola

It’s full house for Michael’s talk. I’m not sure how much live blogging I should do has they are video tapping each session.

This session is part of his continuing quest to teach Flex from the inside out. To learn about the Flash Player and the Flex framework.

Going to derive the Flex framework. Implement a custom component.

  • Flex 3 and Flex 4 components both descend from UIComponents

Michael is not explain how the code execution is managed by the Flash Player and executed during a frame.

  • All the basic Flex 3 methods also apply to Flex 4.
  • Flex 3: A base class and then a descendent class for each Layout. Problem i.e. verticalScrollPolicy=”off” to avoid unwanted scrollbars.
  • Flex 4: doesn’t derive layout behavior but can assemble it. Frame (Horizontal, Vertical, Diagonal). So the visuals don’t exist inside of the class.
  • Flex 4 are based on two separate pieces: the form and the function.
  • Separating these pieces favors composition over inheritance. By separating these we gain and we loose…
  • Gain: have one set of functionality look many different ways
  • Loose: a lot of dead weight and lots of extra classes
  • Two type of components: Controls and Containers
  • Flex 4: two types of things… those that can be skinned and those that cannot
  • Groups are the base type of container
  • Groups don’t have visual identify
  • BasicLayout, HorizontalLayout, VerticalLayout, TileLayout

New Hierarchy:

UIComponent
    SkinnalbeComponent
    SkinnableContainerBase
        SkinnableContainer
            Applicaiton
            Panel
            Window
        SkinnableDataContainer
  • Skins are classes defined in MXML
  • Applied to components using the skinClass or by CSS
  • Components: declare skin parts and declare skin states

Skins: specify a HostComponent

<fx:Metadata>
   [HostComponent("spark.components.Button")]
</fx:Metadata>

Declare states

   <s:states>
    <s:State name="up" />
    <s:State name="over" />
   </s:states>
  • How it all works: components need to size themselves, need to be created at runtime, need to interact with parents and children
  • Instanciation: all Flex components start with a constructors. Constructors in Flex add event listeners and setup initial properties…That’s it.
  • Display List: list of all the components that are on the screen at one point or another
  • Creating children: all visual children of a component are created in the createChildren method. The visual children of a component exists in the skin and so the skin is first created at this time.
  • Skin Methods: attachSkin, detachSkin, partAdded, partRemoved
  • Sizing: each component implements the measure() method. Flex works on the principle that children must be sized before their parent and it makes the sizing process potentially asynchronous. It works via a priority queue. Priority based on nest level.
  • Flex 4: children leave inside a skin and not the parent. The skin is a component, so we ask it the size of it’s children.
  • Measured Data: measure is only a suggestion.
  • Sizing: parents size children. A component does not size itself.
  • Sizing and Positioning: sizing and positioning is done in a method called updateDisplayList().
  • UDL: components are given a size. One the size is given, the component is free to do what is wishes. For the most part, this information is simply passed down to the skin. Again recursion.

This was a great talk and clarifies many things which is great timing as I’m starting to dive deeper into Flex 4.

To be continued…

360 Flex – Day 1 (Sunday) – Live Blogging

We just had a great breakfast at Peggy Sue’s Dinner…and moved over to the Ebay Headquarters where the conferences is about to start.

I’ll be taking notes during the day and updating this page as we go one.

UPDATE: Now that I typed all that I realized that Justin put up the slides and code on his blog: http://blog.classsoftware.com/.

Connecting Arduino Hardware to Flex: Justin Mclean

twitter: justinmclean
Justin is from Sydney, Australia.

Content:

  • Arduino platform, how to program and how to connect to Flex
  • 2/3 Arduino 1/3 Flex
  • Hands on

So we’ll go through the followings:

  • Digital Inputs
  • Digital Outputs
  • Analogue Inputs
  • Pulse Width Modulation
  • Serial Communication
  • Connecting to Flex
  • Review and wrap up

So Justin gave each attendee one board and a set of components. The board is open source hardware. I think that’s pretty cool. Feels like the hardware kit I bought for my 6 years son. The board is $25 and with all the components it’s about $40.

arduino.png

The hardware is provided to all participants by sparkfun.com

Software

http://arduino.cc/en/Main/Software

arduino_software.png

Also install the serial driver: FTDIUSBSerialDriver_10_4_10_5_10_6

Other Hardwares

  • ATmega micro-controller from Atmel. It mostly runs in cars.
  • Arduino Duemilanove
  • Arduino Pro and Pro mini
  • Lyllypad (warable)
  • Funnell IO
  • Mega
  • Many others

ATMega328

  • Hight performance low power RISC
  • 16 Mzh up to 16 mips (faster as your first pc you owned – if you are a bit older)
  • 32K of Memory
  • SPI and 2 wire serial interfaces
  • External interrupts, timers, pulse width modulation

IDE

  • IDE open sourcee and cross platform.
  • Based on the Processing language
  • Many open source sketches (projects) and libraries availables. Ethernet library, servers, …

First Program

int ledPin =  13;    // LED connected to digital pin 13

// The setup() method runs once, when the sketch starts
void setup()   {                
  // initialize the digital pin as an output:
  pinMode(ledPin, OUTPUT);     
}

// the loop() method runs over and over again,
// as long as the Arduino has power

void loop()                     
{
  digitalWrite(ledPin, HIGH);   // set the LED on
  delay(1000);                  // wait for a second
  digitalWrite(ledPin, LOW);    // set the LED off
  delay(1000);                  // wait for a second
}

Now this will make the led blink:

Programming

  • C like language based o wiring
  • Write code and compile in IDE
  • Upload compiled code using USB
  • Hard to debug

Circuit Basics

  • Ground and power
  • Potential difference required for current ot flow
  • Conductors and resistors

Digital Inputs/Outputs

  • Digital pins on Arduino are dual purpose
  • Digital logic and voltage on = 5V off = 0V
  • Can be set to be input or output via pinMode

Variables

  • boolean, char, byte, int, long, float, double, string and array
  • int 16 bits, long 32 bits, float 32 bits
  • Strings are nul terminated ’\0’
  • Declare by ; eg int i;

It’s actually C++…What?! At a Flex conferences 🙂

Setup Function

  • Used for initialization
  • Run when program loaded or board reset
  • Best place to place calls to pinMode

LEDs

  • Current will only flow in one direction
  • Longest pin connect to positive side, shortest to ground
  • Dont’ connect directly to power source use in series with resistors
leds.png

Resistors

  • Resistors limit current flowing through them
  • Value and tolerance indicated by cooler bands
  • Resistor values for LEDs
  • For RGB or LEG digits you need multiple resitors
  • REG/GREEN/BLUE 180 oms, WHITE/ULTRAVIOLET 100 oms
resistors.png

Debugging ia Serial Port

  • Use Serial.begin to set speed
  • Serial.print, Serial.println to output
  • Use serial monitor in IDE to view

Blinking LED

Same program that the first program but this time we just set the led to the pin 3 which is connected to the board.

Digital Inputs

  • Some logic as inputs; hight 95V0 or low (0V)
  • Simplest digital input switch
  • Call pinMode to set as digital input as input

Connect Switch

  • Wire up push button on breadboard
  • Change code to turn light on/off

Now switches have three states (on, off, and in between) to the board needs to be wired to take that into account so you can program it accordingly. We added a very high resistence (10k) next to switch to ensure that the switch reports 0V when not clicked.

int led = 3;
int button = 4;

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
  pinMode(button, INPUT);
}

void loop() {
  if (digitalRead(button) == HIGH)  {  
    Serial.println("on"); 
    digitalWrite(led, HIGH);    
  } else {
    Serial.println("off"); 
    digitalWrite(led, LOW);  
  }
}  

So let’s look at the wiring and how the switch operates:

Internal Pullup Resistors

  • Set mode to input
  • digitalWrite to HIGHT to turn on
  • digitalWrite to LOW to turn off

So there is something like the 10K resistor built-in the board to avoid using an extra resistor on the board to make sure the switch values are on or off.

Switch Issues

  • Switches can bounce and give and off values while switching
  • Noise can give false results
  • More a problem when switching needs to be counted
  • Use timer to solve issue (time = millis())

Analog Inputs & Potentiometer

  • Can read values via analogRead
  • Result is in range 0 to 1023 (10 bits)
  • Potentiometer is Variable resistor
  • Eg Read potentiometer values with Analog Inputs
int led = 3;
int pot = 0;

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
}

void loop() {
    int value = analogRead(pot);
    digitalWrite(led, HIGH);    
    // Set delay based on analog input
    delay(value);
    digitalWrite(led, LOW);  
    delay(value);
}  

So now when the potentiometer is turned to the right a value of 1023 is returned and the lights blinks on and off for about 1 seconds. Turning to the left makes the delay shorted (down to 0) and you can get it to run blink really fast.

potentiometer.png

LDR

  • Light dependent resistor (high resistance)
  • Set flash rate based on value of LDR

This is a great full day tutorial and everyone seems to have fun. It’s pretty basic, but it’s the first time I program hardware.

Now we are writing fadeIn and fadeOut functions and get the light to pulse on and off

void fadeIn(int led) {
  for (int i=0; i<256; i++) {
    analogWrite(led, i);
    delayMicroseconds(5000);
  }
}

void fadeOut(int led) {
  for (int i=255; i >= 0; i--) {
    analogWrite(led, i);
    delayMicroseconds(5000);
  }
}

void loop() {
    fadeIn(led);    
    fadeOut(led);  
}  

Now we replace the light sensor by a temperature sensor. There are also air quality sensors, breathalyzers.

Flex

Communication between Flex and Arduinos.

  • Software on Arduino (Firmata)
  • USB serial to socket proxy
  • Flex event based library to talk to socket (as3Glue)

Firmata is an Arduino library that support a binary protocol over serial interface. It’s Bi-directiona. Use version 2.

In the Arduino IDE let’s load the StandardFirmata program (File|Examples|Firmata|StandardFirmata). It’s a 286 lines program similar to the code we wrote so far, but more complex.

Server Proxy

From http://arduino.cc/en/Main/Software the server proxy (end of page)

To configure proxy first find what your serial device is.
In terminal do: ls /dev/cu*

/dev/cu.Bluetooth-Modem
/dev/cu.Bluetooth-PDA-Sync
/dev/cu.usbserial-A600ailA

Then add this line to your serproxy.cfg:
serial_device=/dev/cu.usbserial-A600ailA

Then we just start the server proxy:
$ ./serproxy
Serproxy – (C)1999 Stefano Busti, (C)2005 David A. Mellis – Waiting for clients

Now in Flex you need to add the as3glue code (http://code.google.com/p/as3glue/) then you can drive arduino as follows:

private var arduino:Arduino = new Arduino();

private function init():void {
    arduino.addEventListener(ArduinoEvent.FIRMWARE_VERSION, turnLedOn);            
}

private function turnLedOn(event:ArduinoEvent):void {
    arduino.setPinMode(13, Arduino.OUTPUT);
    arduino.writeDigitalPin(13, Arduino.HIGH);
}

A qik look at the class room in the middle of coding their Flex app to drive their Arduino device:

Now we are going to write some Flex code to have some buttons that turn on/off some functions of the board.

private var arduino:Arduino = new Arduino();
private const pin:int = 3;
private const button:int = 4;

private function arduinoInit(event:Event):void {
    arduino.enableDigitalPinReporting();
    arduino.setPinMode(pin, Arduino.OUTPUT);
    arduino.setPinMode(button, Arduino.INPUT);

    arduino.addEventListener(ArduinoEvent.DIGITAL_DATA, buttonChanged);
}

private function buttonChanged(event:ArduinoEvent):void {
    if (event.pin==button) {
        event.value == Arduino.HIGH ? turnOn() : turnOff();
    }
}

private function turnOn():void {
    arduino.writeDigitalPin(pin, Arduino.HIGH);
}

private function turnOff():void {
    arduino.writeDigitalPin(pin, Arduino.LOW);
}

Thanks Justin, great talk!

vault.ncaa.com : under the hood of a cool Flex project.

vault.png

Thought Equity Motion and NCAA two days ago officially released the Ncaa Vault. A cool Flex app backed by an incredible video database with awesome metedata about each game…and released just in time for March Madness.

Here are a few of the announcements and online articles describing the services:

In fact with the Vault you can have a URL right into a specific moment of any game and Wired picked out a great last second tying shot.

The twittersphere feedback is also pretty impressive.

This is the most visible Flex app I worked on 🙂 Late January Cameron Pope contacted me to ask if I could help on a Flex project for NCAA and Thought Equity. The funny part is that I didn’t know that Cameron was such a great Flex developer, I met him via the Denver Ruby on Rails User Group (derailed) and I also didn’t know what NCAA was (don’t shoot, I didn’t grow up in the US and we don’t have TV). So when I asked my father in law about NCAA and realized it was about Basketball I was intrigued by what type of application we needed to build. Cameron showed me the mockups built by Donny Wells which is just an awesome graphical designer. These mockups where just incredible and then I was presented the video service technology the Thought Equity Motion team put together, and I was just blown away and though that this would be a cool project to work on.

Cameron was the main Flex developer and I just worked part time on Monday’s on this project. If you need and incredible Flex developer just contact Cameron.

Now let’s dive more into the Flex nitty-gritty details:

For the mvc architecture we used the Swiz Framework and this turned out to work exceptionally well. Swiz sports some dependency injection features that can be enabled via the [Autowire] tag and I was surprised when I realized I could also just use that feature in an item render. Let’s look at a little detail…For the play by play timeline if a play is in the future it is displayed in bold:

timeline.png

So each line of the timelime is rendered by the TimeLineItemRender and you can just autowire the model which contains the playhead position.

      [Autowire]
      [Bindable]
      public var vaultModel:Vault;

The we can set the style name accordingly based on the play’s start time and the current playhead position:

   styleName="{data.startTime < vaultModel.playheadPosition ? 'past' : 'future'}" 

The style of the application was created by the designer and Cameron did a great job reproducing it using Degrapha for skinning () using an approach similar to this example (example source)

Most of my work was around the searching, bug fixing and general architecture overview. We took a similar approach to the one I described here in order to avoid most of the server round trips during searching.

The Flex app is just a pretty face, behind the scene Thought Equity provides an incredible services that they will expose in many ways, the start can be seen here and all that data will be able to be accessed via API and other means.

This was a short but incredible project for me, the guys at Though Equity have such an incredible vision on how to turn these sport videos into something so much bigger! Thank you guys for getting me on board.

thoughtequity.png

Enjoy!
Daniel Wanja