Do they test at all?

I’ve noticed that there are a lot of sites out there that have swfs throwing Errors (*).  It’s the most annoying thing about having to use the debugger version of the flash player. I don’t want to look at other coders sloppy error handling, but there seems to be no choice. Check Microsofts Xbox Live site for instance: http://live.xbox.com/nb-NO/default.aspx – it pops an error window with: Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found. The site is just a random example – Microsoft is no better or worse than others.

Flash Builder wishes

Everybody wants to change the world. And every developer wants something their tools don’t provide. I’m mostly a happy camper when it comes to Flash/Flex Builder – it allows me to do my job with little fuss. And if there is something that taints the experience  I can just think of the Flash IDE – which immediately makes Flex shine again. But even so there are a couple of things that could lighten the day:

Super quick bookmarks
I need to jump around in the code when debugging or adding functionality to existing code. In venerable SE|PY, I could click once in the left hand margin to set bookmarks. In Flex I have to select text, context click and save.  Too much! I just need a quick way to navigate between a bunch of methods.

What about my parents?
Complex frameworks often entails extended classes to avoid duplicate code. But remembering in which class of the inheritance chain a method is defined can be hard. What about an option that lets you view all the inherited methods as well? In the same code view, but with colour coded backgrounds to make it possible to see at a glance where the method hails from. And with navigation to go into the actual class the inherited method was defined in. When trying to familiarise (or re-familiarise) myself with code sets, this would make the task much easier.

References
The Declarations and References search tools introduced in FB3 are a good idea, but they are slow and clunky. This information should be available instantly, either through context icons or context sensitive views – select a method – the content of the view changes.

Complex formulas
Formulas for placing and scaling graphic elements can grow to be quite complex – I do this frequently and so far, the only way to make it more readable is to split it up over several lines, making the steps towards the final answer easier to decipher when I have to change or debug the code six months later. At that point everything is forgotten and I have a hard time remembering what I did or why.

But why can’t the code editor show formulas as you would write them on paper? Instead of one long line suited to computers, we could view fractions as numbers above and below lines. I usually write out formulas that way on paper and ‘translate’ into code when I think I’ve got it. I found this example from TUAW: which is how achieve this on a mac. Imagine how much easier it would be to read formula-heavy code if FB could show it to us this way?

Flex API bug

I just ran into an issue that looks like a bug in the Flex API. The DragManager is used for dragging and dropping between flex components, and it can also be used to implement drag and drop quite easily in your own projects. It’s (mostly) well implemented and the syntax is straightforward. To start a drag, use DragManager.doDrag(dragInitiator, dragSource, mouseEvent). The details are explained in the documentation.

The bug I encountered is in the dragSource part of the call above – it’s an instance of  DragSource class, used to store data being dragged. You add data with myDragSourceInstance.addData(myData, “identifyingString”). Nice and sensible. The problem occurs when data is retrieved through myDragSourceInstance.dataForFormat(“identifyingString”). It returns Object as data can be of any type. Here’s the method from DragSource:

public function dataForFormat(format:String):Object
 {
 var data:Object = dataHolder[format];
 if (data)
   return data;

 if (formatHandlers[format])
   return formatHandlers[format]();

 return null;
 }

But if the data you added is numeric zero – 0 – the test if(data) will return false and the method will return null instead of numeric zero. Bummer! I suspect that if (data || data === 0) would be better.

The workaround I used was to set data as a string instead. As data return is untyped, we need to cast it anyhow.

What do you think? Has Adobe implemented the method correctly or is this a bona fide bug?

DIY Flex SDK 3.3 in Flex Builder

Adobe has updated the flex SDK to 3.3 – they did so in March this year. I had assumed that this update was part of the Adobe auto updating regime – all other Adobe applications are handled, but apparently not all parts of the Flex Builder. So instead of waiting for things to fix themselves, I did it manually using these clear and simple instructions.

I was playing around with the Flex 4 betas when I saw it. Installing the Flex 4 SDK follows the same steps, but using it is a roller-coaster of weird bugs and exiting new features. I’m currently trying to get to terms with the new Text Layout Framework API. Exploring new APIs is overwhelming, but I have to say that it looks very good indeed.

Open challenge: Dynamic ContextMenu

Inspired by the very enjoyable challenge from my friends at Apt, we’re doing our own. In a recent project I needed a contextMenu which allowed the user to select the number of pictures to show in a ad template. The choices change with the size of the ad, so every time the context menu is shown, it’s regenerated first. But for the challenge, you can skip the regenereation bit.

I’ll post my solution on tuesday (2.jun)

Easy tweaking of Flex component skins

We run a dark grey theme for our Print application. This has required quite a lot of tweaking to get it right and despite using the css way of configuring and skinning all components, Adobe did not have dark palettes in mind when they designed the Halo theme.

E.g.: to get the selected and rollover color right for lists, we had to extend and hack the Activator class because default color handling mixes the theme color with white to get the different shades needed. Which look quite odd in a dark theme.

Flex “Workspace in use…” error – arg!

Most annoying thing about Flex Builder. If I work for a while in Flex, then quit and try to start Flex again it says “Workspace in use or cannot be created, blah blah”.

I can then either restart the pc  or use task manager to quit process “Javaw”.  I’m running FB 3.2 on Win XP (all patches and service packs thank you). It’s not a huge hassle to quit that process, it just seems like an unnecessary bug in a 3 point 2 version of a major application.

Has anyone found a workaround or perhaps knows what the cause is? A search showed that I’m not the only one annoyed by it, but there doesn’t seem to be a fix yet.

Web Services are suprisingly easy with Flex

Last time I had to work with web services, ActionScript2 was still hot stuff. Handling complex data was an absolute pain, mainly because of the woefully primitive XML implementation of AS2. Manually looping through children’s lists is not my idea of fulfilling programming tasks. Not that I realised how bad it was until AS3 showed up with E4X. “You mean I can just read the XML like an object or array? No way, that’s sci-fi!”

It was with a great deal of apprehension that I started on a new project that required integration with an external web service. But it turned out to be an absolute breeze. A small, hitherto ignored, menu item called “Data: Import Web Service (WSDL)” turned out to be very close to magic and became my new best friend.

Import Web Service takes an URI to the WSDL (web service definition language), loads and parses it and then lets you choose the methods you want to generate code for. It creates complete proxies with typed data classes for both in- and output. You can reload and regenerate classes if the web service changes, and you can add and remove methods at any time. All the generated code is accessible and well documented – although all is well documented with examples in the Flex help, I didn’t need more than the comments in the generated code.

I’m not claiming to have made a big discovery here, after all it’s part of the standard Flex Builder. But it just works so much better than I expected. Web Services have gone from being a royal pain to the easiest and most structured way of communicating with the server.

The big AsDoc race

Well, not so much of a planned race as a coincidence. I work on a winXP pc at work and on an iMac at home. Thanks to Adobe’s fair policies, I can use the same licence on different systems at home and at work. Good work guys.

Right now, I’ve done some revisions to the AsDoc comments in the framework, tried out some of the tags for documenting events, packages, etc. This means running the ant script that runs AsDoc quite a few times. Ant outputs time elapsed as default. My work pc, a 3Ghz Pentium D takes about 44 seconds. My iMac at home – 2.8Ghz, not latest model – takes about 24 seconds. I have no idea if this is due to Java implementation differences or maybe AsDoc just runs faster on a mac, but still. On the whole, Flex Builder feels faster at home, but I don’t have any hard numbers to show.

Addendum: Just got a new Quad core PC, still running XP. It did it in 28 seconds. We’ve added quite a bit of code since the first comparison so it’s not a fair race.

Trackless Slider component

The Slider component is fairly easy to style. But as with many of the flex components, I seem to quickly reach the point where I can’t get it to look exactly as I want it to. Rumours say that this will be rectified in version four, but in the meantime there are workarounds and hacks.

I wanted a Slider component with a background of bars growing in height – like a volume slider. Attaching a png with the bars was easy (yes, I know – it can be scaled. But for this project, scaling was not necessary and I couldn’t justify spending hours on gold-plating it). Removing the tracks wasn’t that easy as it can’t be done through a simple style property.

The solution is a custom skin. But as the Slider component uses the track to calculate some of its properties, and places other graphics according to track size and position, it needs to be measurable. I just drew an invisible rectangle. Overriding the methods that calculate width and height will probably be more efficient, but shouldn’t matter, unless you have dozens on screen simultaneously.

Here’s the skin class – use mySlider.setStyle(“trackSkin”, SliderTrackSkinInvisible) to set it.

package no.papirfly.msp.skins
{
    import flash.display.Graphics;

    import mx.core.IFlexDisplayObject;
    import mx.skins.halo.SliderTrackSkin;

    public class SliderTrackSkinInvisible extends SliderTrackSkin implements IFlexDisplayObject
    {

        public function SliderTrackSkinInvisible()
        {
            super();
        }    

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            this.graphics.clear();
            var gr:Graphics = this.graphics;
            gr.beginFill(0x00FF00, 0);
            gr.drawRect(0,0, unscaledWidth, height);
            gr.endFill();
        }
    }
}