All 108 entries tagged Rich Media

View all 109 entries tagged Rich Media on Warwick Blogs | View entries tagged Rich Media at Technorati | View all 3 images tagged Rich Media

September 26, 2008

AIR: Rendering native system icons, Pt.1

I was asked how I got AIR to display native file icons in a component – it’s pretty easy to do, although my method is a little convoluted to explain without posting reams of code, partly because it’s buried in a sequence of Cairngorm events/commands but also because there a couple of important issues to watch for and handle (see bottom of this entry for those). Here’s an overview:

AIR has support for retrieving the native system icons in whatever supported sizes exist. The icons are stored as a property of each File object as BitmapData, in an array, File.icon.bitmaps. Each element in the array is the same icon at different sizes, e.g. 32×32, 16×16 etc.

In order to get at an icon at a given size, you can’t rely on what sizes are available at a given element position, so you need to create a new (empty) BitmapData object at your target dimension, then iterate through File.icon.bitmaps until you hit the matching-sized BitmapData object. Once you have a match, you can put the matching data into your own BitmapData object. Here’s a brief example:


public function get32Icon():BitmapData {
            var myFile:File = new File("C:/foo.txt");
            var bmpData:BitmapData = new BitmapData(32, 32);
            for (var i:uint = 0; i < myFile.icon.bitmaps.length; i++) {
                if (myFile.icon.bitmaps[i].height == bmpData.height) {
                       bmpData = myFile.icon.bitmaps[i];
                   }
               }
               return bmpData;
         }

Obviously you need more than the code above to handle situations where the 32×32 icon isn’t available, but that’s a basic way to grab the icon as BitmapData. At this point you could create a new Bitmap object and give it the captured data, but for my application I set the icon data back onto an Object that represents the File object (I actually used an ObjectProxy because I wanted to bind this data to an ItemRenderer later) – again this becomes important later on.

Okay, so now I have my icon data, in an object that also contains other information about the file, like its name etc. To display it in a TileList, or other component, I just use a custom ItemRenderer. I set up an image tag for the icon within the renderer:

<mx:Image width="32" height="32" source="{getIcon(data)}" />

...and then create a method in the renderer to return the icon data to the image component:


private function getIcon(data:Object):Bitmap {
        var bmpData:BitmapData = new BitmapData(32, 32);
        bmpData = data.icon;
        var iconBmp:Bitmap = new Bitmap(bmpData);
        return iconBmp;
        }

Now each time the ItemRenderer has to render an item, it gets the relevant icon, the filename etc. and displays them within the TileList – easy! Here’s the result, showing the app running in XP and OSX:
Files part screen grab

But there are caveats; AIR does not behave consistently on all platforms with icon data. Here are couple of the problems I encountered:

  • Performance. There seem to be some differences in execution time for file system queries in AIR. Originally I had an ArrayCollection of File objects as the DataProvider for the TileList, retrieving icon data for each one in the ItemRenderer as required. On Windows this seemed fine, but on Mac OSX it proved to be very slow, to the point where my app was unusable. I overcame this by using the Flex Profiler to see what was causing the problem, finding that the underlying get icon() execution time was very long on OSX. By grabbing the icon data once, then caching it and other key File properties into an ObjectProxy, I was able to get OSX performance almost on a par with Windows, and this also sped things up elsewhere because I was calling get icon() once, rather than per-item in the renderer. It also improves scrolling performance of the TileList because that component renders items dynamically as they are displayed. In fact you could go one step further than I did and extend UIComponent to improve render performance even more.
  • Missing icons. AIR on Windows won’t retrieve some icons, in particular for .EXE, .TMP and .INI files. These are stored in shell32.dll on XP, but for some reason AIR can’t get to them. I also found one or two similar issues in OSX. AIR on Linux using the most recent AIR beta just returns a null value for File.icon.bitmaps, so rendering native icons is currently impossible. You need to add some way of checking for a missing icon in these cases, and swop it out for an embedded one if you can; I created a temporary workaround where I parse the BitmapData for null pixel values.

The next part of this article will deal with how I got native icons to render for remote files, but I bet you can already guess how that’s done…


September 25, 2008

AIR: Creating a custom status bar

It’s easy to create your own customised status bar for AIR applications. For my example, I wanted to be able to display a network status icon that indicates whether the application is connected – this is bound to a state set by AIR’s network service monitor, via Cairngorm.

First of all, in your application MXML file, make sure showStatusBar is set to true, add the statusBarFactory parameter and point it to your custom component:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    showStatusBar="true" 
    statusBarFactory="{new ClassFactory(CustomStatusBar)}">

Then just make a new MXML component called CustomStatusBar and add any elements you want to display in your new status bar. There are a couple of things AIR will be expecting from a StatusBar, most importantly the status setter and getter methods required to display status text:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox width="100%" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    backgroundColor="#E3E1E1" 
    >
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import uk.ac.warwick.filesclient.model.AppModel;
            [Bindable] private var modelLocator:AppModel = AppModel.getInstance();

            [Bindable] public function get status():String
            {
                return this.statusText.text;
            }

            public function set status(value:String):void
            {
                this.statusText.text = value;
            }

            private function showNetworkStatusIcon():void
            {
                var path:String = "";
                if(modelLocator.isNetworked)
                {
                    statusIcon.source = "greenlight.png";
                } else {
                    statusIcon.source = "greylight.png";
                }
            }
        ]]>
    </mx:Script>
    <mx:Label id="statusText" paddingLeft="7" fontAntiAliasType="advanced"/>
    <mx:Image id="statusIcon" 
    toolTip="Network status"  
    horizontalAlign="right" 
    width="100%" 
    height="10" 
    verticalAlign="middle" 
    render="showNetworkStatusIcon()"/>
</mx:HBox>
You can add almost anything you like in there with this technique; animations, custom text etc. Here’s a quick screen grab of my basic custom status bar with its status light on green after a bit more tweaking of the layout and styling – nothing amazing, but its useful to be able to add your own elements when required (click to enlarge);

Status bar

September 18, 2008

Flex unit testing and continuous integration with FlexUnit, Ant and Selenium

Here’s a couple of really useful guides to setting up a continuous Flex testing and integration framework using FlexUnit, Ant and Selenium, written by my friend and ex-colleague Kieran at Black Pepper, and his colleague Julia. The articles cover setting up FlexUnit and Ant and then creating acceptance tests using FlashSelenium:


September 10, 2008

Flex IoC frameworks: which?

I need some Flex framework advice; I’m about to start a couple of new AIR projects, and decided that instead of using Cairngorm again it would be a good idea to try a different framework. There’s no particular reason to move away from Cairngorm – I’ve become reasonably comfortable with how it works and what it does, and I like it, but I’d also like to explore other approaches to Flex development. Last time I looked around there were a few alternatives, but in the few months since I posted that entry a number of new frameworks have appeared, and the amount of choice has increased considerably.

At first I thought I’d go for PureMVC – it seems like a popular framework in general, but around here our Java development is based on Spring, and I’d quite like to explore the dependency injection/IoC concepts at the core of Spring in a Flex app, to learn for myself how to apply such patterns in a context I’m familar with.

As far as I can tell, there are three IoC frameworks – Prana is a lightweight IoC container for PureMVC, Mate, which looks really well-thought out, with good documentation, and finally Swiz, which also looks interesting. I’m just not sure which will help me get into IoC as quickly as possible, coming from Cairngorm. I suspect I’ll go for PureMVC with Prana, but if anyone has any advice/insight it would be useful!


September 09, 2008

Silverlight to support H.264, AAC

Follow-up to <video> and Flash from [Ux]

Microsoft has announced that Silverlight will be supporting AAC audio and H.264 video. With regard to my previous entry about the video tag, this will make it even harder for Theora and can only consolidate H.264 as the current codec of choice. The announcement comes as no surprise to industry experts, but this move proves that MS is aggressively going after online video in a big way, but I’m not sure anyone really wins – based on browser/OS install base Silverlight may become more of a threat than the video tag would have been.

I’ve also been thinking a little more about Chrome – given that YouTube is part of Google it’s likely that when Chrome supports the video tag, the embedded codec(s) Google chooses could have a huge impact. Considering that H.264 is already being used on YouTube, perhaps that would be the default choice?


Search:

MXNA link

Tweets



    Tags

    Other blogs I like...

    Black Pepper Software Go to 'Black Pepper Software'

    Eismann-sf Go to 'eismann-sf'

    Ted On Flex Go to 'Ted On Flash'

    Galleries

    RSS2.0 Atom

    Meetups:

    Not signed in
    Sign in

    Powered by BlogBuilder
    © MMXIV