Posts in Category "Flex"

How to Tell Which Flex Components Have Been Mobile Optimized

Even when you work for Adobe, it’s hard to keep up with everything we’re doing — especially when it comes to AIR, Flex, and Flash Builder. I started building a new Flex Mobile application yesterday, and I realized that I didn’t know exactly which Flex components had been mobile optimized to-date. Rather than just asking someone for a list, I asked around to find out the best way to keep updated.

Piotr Walczyszyn gave me the excellent suggestion of checking the documentation for mobile skins. If a component has a mobile skin, it has been mobile optimized, and since the docs are kept up to date, this seems like as good a way as any to know which components are safe to use in a mobile app and which to avoid.

Ultimately, I would like to see our docs allow filtering by mobile optimization, but until that happens, this will work almost as well.

URI Handlers in AIR for Android: Phone Calls, Email, Text Messages, Maps, Market, and URLs

The code below demonstrates five URI handlers that AIR for Android currently supports:

  • tel
  • sms
  • mailto
  • market
  • http and https

Invoking applications with URIs is pretty straightforward except in the case of maps. Although AIR does not support the Android "geo" URI intent (it’s not fully supported by Google yet, apparently), the code below demonstrates a very good work-around. Rather than explicitly opening the Maps application with a URI, you can just go to maps.google.com, and Android will ask users if they want to open the URL in the browser or in the Maps application. Simple and effective.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Home">
  <fx:Script>
    <![CDATA[

      import flash.sensors.Geolocation;

      private var geo:Geolocation;

      private function onCallAdobe():void
      {
        navigateToURL(new URLRequest("tel:4085366000"));
      }

      private function onTextAdobe():void
      {
        navigateToURL(new URLRequest("sms:4085366000"));
      }

      private function onEmailChristian():void
      {
        navigateToURL(new URLRequest("mailto:christian.cantrell@adobe.com?subject=AIR%20Rocks"));
      }

      private function onSearchMarket():void
      {
        navigateToURL(new URLRequest("market://search?q=iReverse"));
      }

      private function onChristiansBlog():void
      {
        navigateToURL(new URLRequest("http://blogs.adobe.com/cantrell"));
      }

      private function onGetCurrentLocation():void
      {
        this.geo = new Geolocation();
        this.geo.addEventListener(GeolocationEvent.UPDATE, onLocationUpdate);
      }

      private function onLocationUpdate(e:GeolocationEvent):void
      {
        this.geo.removeEventListener(GeolocationEvent.UPDATE, onLocationUpdate);
        var long:Number = e.longitude;
        var lat:Number = e.latitude;
        navigateToURL(new URLRequest("http://maps.google.com/?q="+String(lat)+","+String(long)));
      }
    ]]>
  </fx:Script>

  <s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" gap="20">
    <s:Button label="Call Adobe" click="onCallAdobe();"/>
    <s:Button label="Text Adobe" click="onTextAdobe();"/>
    <s:Button label="Email Christian" click="onEmailChristian();"/>
    <s:Button label="Search the Market" click="onSearchMarket();"/>
    <s:Button label="Read Christian's Blog" click="onChristiansBlog();"/>
    <s:Button label="Map Your Current Location" click="onGetCurrentLocation();"/>
  </s:VGroup>
</s:View>

New Version of Squiggly Released

Adobe’s Linguistic Services Team (what a great name for a team) recently released a new version of Squiggly — a free spell checking engine for the Flash platform. This update includes the following features:

  • Support for Spanish, Italian, and Portuguese.
  • Support for Hunspell (i.e. OpenOffice and Firefox) format dictionaries.
  • Ability to translate or customize context menu strings.
  • Bug fixes.

As platforms like OS X (which has built-in universal spell checking), and browsers like Firefox and Chrome become more popular, I think more and more people are expecting applications to have spell checking built-in. It’s great to see that Squiggly is providing a low-barrier solution.

New ActionScript and Flex Spell Checking Engine on Adobe Labs

Adobe’s Linguistic Services team recently launched a project code named Squiggly on Adobe Labs. From the project homepage:

Squiggly is a spell checking engine for Adobe® Flash® Player and Adobe AIR®. The Squiggly library allows you to easily add spell checking functionality in any Flex 3 based text control. The distribution package consists of a utility for building your own spelling dictionaries, a sample English dictionary, an ActionScript package that checks individual words for spelling accuracy, and sample code that demonstrates “check as you type” functionality.

The rest of the details can be found on Labs along with a simple demo.

Encrypting Data in AIR

AIR applications often need to store credentials. Many web services out there require authentication, which means that AIR applications need a secure way to store sensitive data. I first ran into this issue when I wrote Salsa, an Amazon S3 client. Salsa needs the end user’s public and private access keys for signing requests, but since both keys are long arbitrary strings that are almost impossible to memorize, I couldn’t ask the user to enter them each time they wanted to use the application. And for obvious reasons, I couldn’t store them in plain text. I needed a way to persist the user’s credentials in way that would not allow other users or processes to access them.

This was back in days of AIR beta 1. The only option I had at the time was to encrypt the credentials myself using a pass phrase provided by the end user. Each time the user started the application, therefore, I had to prompt them for their pass phrase which I’d use to decrypt the public and private keys. If they lost their pass phrase, they had to reenter their public and private keys, as well as enter a new pass phrase. From a usability perspective, this was not the experience I was after.

But then along with AIR beta 2 came the flash.data.EncryptedLocalStore API. There have been some small changes in M6 (the upcoming beta 3), but it’s essentially the same. The EncryptedLocalStore APIs use DPAPI on Windows and the Keychain on Mac to encrypt arbitrary data and associate it with a specific OS user, AIR application ID, and publisher ID. That means applications can encrypt and store data that only the current user and the current application can decrypt. And the best part is that it’s extremely easy to use:

// Writing encrypted information
var passwordBytes:ByteArray = new ByteArray();
passwordBytes.writeUTFBytes("secretPassword");
EncryptedLocalStore.setItem("password", passwordBytes);

// Reading encrypted information
var passwordBytes:ByteArray = EncryptedLocalStore.getItem("password");
var password:String = passwordBytes.readUTFBytes(passwordBytes.length);

To make using the EncryptedLocalStore even easier, my team has written a Preferences API on top of it which makes it extremely easy for applications to store either encrypted or non-encrypted user preferences using any serializable data type.

Whether you use our Preferences library or the EncryptedLocalStore directly, I really think the ease with which sensitive data can be encrypted and decrypted will encourage developers to build secure and user-friendly AIR applications.

Fun with Flex Data Binding

I’m working on a new Apollo application, and I’ve been having some fun with data binding in Flex. In case you haven’t used data binding yet, it is simply a way to bind an object to a component so that changes to that object are automatically picked up by that component, and the component automatically updates itself appropriately. Here’s a simple example (not valid MXML, but you get the point):

[Bindable]
private var labelText:String = "This is a label";

<mx:Label text="{labelText}"/>

Now that labelText is bound to the label component, anytime the labelText variable changes, the text of the label automatically changes, as well.

Ok, that’s a basic example. Here’s a more interesting usage:

[Bindable]
private var items:ArrayCollection;

<mx:Label text="You have {items.length} items."/>

All I’m doing in the example above is combining bound data with a static string so that the label will always show the current number of items in the ArrayCollection. The beauty of data binding is that is saves you the trouble of updating components manually when certain events occur. You just focus on the logic of your application (adding and removing items from the ArrayCollection, in this case), and the label just takes care of itself.

Here’s a slightly more interesting example:

<mx:TextInput id="myInput"/>
<mx:Button label="Do Something" enabled="{myInput.text.length > 0}"/>

This is an example, I’m binding an expression to a component attribute. The length property of the text input is bindable, so whenever it changes, the expression that I’ve bound to the enabled attribute is evaluated. If the length is greater than zero, true is returned, and the button is enabled, but if the length is zero (meaning nothing has been typed into the text input), the button automatically disables itself.

Let’s take this one step further:

private function isButtonEnabled(someString:String, itemLength:uint):Boolean
{
if (...) {
myButton.label = "I'm enabled!";
return true;
} else {
myButton.label = "I'm disabled.";
return false;
}
}

<mx:Button id="myButton" enabled="{isButtonEnabled(someString, items.length)}"/>

In this example, I appear to be binding a function call to the enabled attribute of the button, but in fact I’m actually binding someString and the length property of items to the button. Whenever either changes, the entire expression is evaluated, which causes my function to be called. The arguments of my function call are basically just an arbitrarily long list of objects that my button may be interested in, and may not even be used in the function itself to decide what to do or return. Another advantage of this approach is that my function may do more than just return true or false. I can change the label of the button, or do any number of other things that are appropriate for the current state of the application.

There are a lot of other fun things that can be done with data binding, but I’m not going to go any further because I haven’t decided where to draw the line yet between using data binding to its full potential, and abusing it. That said, if you have any good data binding tips or tricks, I’d love to hear them.

Integrating Perforce with Flex Builder

Personally, I’m a Subversion fan. I started off using CVS for version control many years ago, then moved to Subversion, and have since been perfectly happy. But the Apollo team (along with most other teams at Adobe) uses Perforce, so I’ve been having to adapt. I actually like Perforce in general, but there are two things that really bother me:

  1. I don’t like how you have to check files out (or add them to a changelist) before you can edit them. It’s really annoying to stop what you’re doing, switch to the P4Win client, and add a file to a changelist every time you want to edit it. It really interrupts my workflow.
  2. The P4Win client is kind of slow, and not the most intuitive and usable interface I’ve ever used. And that little jogging P4 icon was certainly an interesting choice.

Anyway, enough complaining. I decided I needed to make working with Perforce easier, so I tried installing the Perforce Eclipse plugin into Flex Builder 2, and was pleased to discover that not only does it work fine, but it really makes working with Perforce much easier and much more efficient. Now, when I want to edit a file, I can add it to a change list right form Flex Builder with a single click.

You can find out how to install the Perforce plugin here. To start using Perforce from Flex Builder, right click on a project, go to "Team", and select "Share project…". In the port field, enter the server and port in the format "server:port" and you’re all set.

Free, Open-source ActionScript 3.0 Libraries

We just released a set of free, open-source ActionScript 3.0 libraries to help get people going with the Flex Builder 2 beta. The libraries include the following projects:

  • corelib. Several basic utilities for MD5 hashing, JSON serialization, advanced string and date parsing, etc.
  • FlexUnit. A unit testing framework for Flex and ActionScript 3.0 applications based on JUnit.
  • Flickr. A wrapper for the entire Flickr API.
  • Mappr. A wrapper for the entire Mappr API.
  • XML Syndication. Libraries for easily parsing all versions of RSS and Atom.
  • Odeo. A wrapper for the entire Odeo API.
  • YouTube. A wrapper for the entire YouTube API.

All the libraries are well documented and come with unit tests. You can download the source and/or just the SWCs, and do anything you want with them (the license is very liberal). All I ask personally is that you build something cool and send me the link.

We built a pretty nice mash-up called "Flow" using five of the seven libraries last week. Kevin Lynch showed it during the Flashforward keynote, and we should be releasing it (along with the code) within the next week or so.

Flex Beta 2 and Free Flex SDK

It’s all true. We’ve decided to release a free version of the Flex SDK. We haven’t decided exactly what’s going to be in it yet, but at a minimum, a compiler and the framework — everything you need to build Flex 2 applications. We’re also going to release a free version of Flex Enterprise Services that will be limited by the number of connections it allows, and will only run on a single server. Of course, Flex Builder 2 and the full version of Flex Enterprise Services 2 won’t be free, but now anyone will be able to get started building Flex 2 applications at no cost whatsoever. This is all we really know at this point, but I’ll post more details when I have them.

Also, Flex Builder 2 and Flex Enterprise Services 2 will go into public beta tomorrow, so get ready. Some of the new features include:

  • View source support. If you want to share the source of your app, just enable the view source option when publishing, and Flex Builder 2 will automatically generate beautifully formatted source code for all the world to see along with a "View Source" option in the context menu. This is amazingly slick.
  • Player detection.
  • History management.
  • Automatic import organization.
  • Code collapse.
  • Outline view.
  • Tons of other stuff.

If you’re still getting up to speed on Flex, I made a post the other day entitled "Clarifying the Term Flex" which describes in detail all the different components of Flex. I’ll let you know when the beta is available for download, or you can just keep an eye on Adobe Labs (rss).

Clarifying the Term “Flex”

I’ve noticed some confusion out there around the term "Flex". The term has evolved as our technology has evolved, and actually means something very different now than it did even just a few months ago. If you’re a little confused about what we mean when we say Flex or Flex 2, this should clear things up.

I’ve decided to break this post down into two sections: Initial Flex Products, which describes how we started off using the term Flex, and Current Flex Products, which describes what Flex means today.

Initial Flex Products

  • Flex 1.5: Flex 1.5 is probably what most of you think of when you think of Flex: an enterprise level presentation server. You write MXML, move it over to a server, and Flex compiles the MXML into a SWF, and serves up your application’s presentation layer. You can compile your MXML "off-line" and just copy the resulting SWF over to your server, as well. Once your Flex application is running on the client, you can use web services or AMF to communicate with the server.
  • Flex Builder 1.5: Flex Builder 1.5 is an authoring environment for Flex 1.5. It is based on the Dreamweaver code base, and gives you things like design and code view, syntax highlighting, code hinting, and application preview.

Current Flex Products

  • Flex 2: Flex 2 is an umbrella term which refers to all the technologies in the Flex 2 product line including the Flex Framework, Flex Builder 2, and Flex Enterprise Services 2.
  • Flex Framework 2: With the next generation of Flex technology, we have decoupled the framework from the products themselves. The Flex Framework consists of MXML (an XML-based language for declaratively building your applications), class libraries, components, containers, and effects. The Flex Framework can be used to build and style Flex applications without a server or any particular IDE. In fact, all you actually need to build Flex applications is the Flex Framework and the Flex compiler, both of which can be used on their own. Find out more about the Flex Framework here.
  • Flex Builder 2: Flex Builder 2 is an entirely new product, and has almost nothing in common with Flex Builder 1.5. Flex Builder 2 is a brand new RIA IDE built on top of Eclipse, and is the easiest and most powerful way to build Flex applications. Flex Builder 2 makes developing Flex applications much simpler with features like an integrated compiler, code hinting, debugging, design view, source control system integration, and tons of other features. It will be available as both a standalone application, and as an Eclipse plugin that you can use with your existing Eclipse installation. Find out more about Flex Builder 2, and download an alpha release, here.
  • Flex Enterprise Services 2: Flex Enterprise Services is basically the next generation of the Flex 1.5 server, but with tons of new functionality like automated testing, enterprise messaging support (which provides a publish/subscribe messaging infrastructure), and the Flex Data Services, which automatically synchronizes data manipulated locally with data on the server. Find out more about Flex Enterprise Services 2 here.

Other Flex-related Technologies

  • Flex Charting Components 2: The Flex Charting Components 2 are a new set of customizable Flex components which provide very slick data visualization capabilities. Think of them as an extension to the Flex Framework. You can use them with Flex Builder 2 and Flex Enterprise Services. Find out more about the Flex Charting Components 2 here.
  • Flex Compiler: Although Flex Builder 2 and Flex Enterprise Services both have the Flex compiler built in, it can also be used outside of either product. The compiler can be used for compiling MXML applications or ActionScript projects from the command line. Find out more about using the Flex compiler and Flex framework from the command line here and here.
  • ActionScript 3: ActionScript 3 is the core of the Flex Framework. Although the syntax is similar to ActionScript 2, it is more object-oriented, more strongly typed, and because it executes inside a brand new virtual machine, it is much faster than ActionScript 2. ActionScript 3 is fully compliant with the ECMAScript 4 proposal (the standard JavaScript 2.0 is based on), and includes things like E4X and regular expressions. Find out more about ActionScript 3 here.
  • Flash Player 8.5: Flash Player 8.5 is the newest version of the Flash Player, and is still in alpha. It is the client runtime for Flex 2 applications. The biggest addition to Flash Player 8.5 is the ActionScript 3 virtual machine. Find out more about Flash Player 8.5 here.

If you have any Flex related questions, or if anything in this post isn’t clear, let me know.