Archive for January, 2008

Curiosity killed the cat – Singularity.

Wednesday, January 30th, 2008

Singularity?

OK, I’m interested enough in Aral Balkan’s “Singularity” to post about it here, on the offer of an early peek this weekend.

I have no idea what it is, or might be, but I’m confident that coming from Aral it will be interesting.

For those of you that have not seen him present (and he does seem to at many conferences), he’s an enthusiastic presenter who never fails to entertain and enthuse. I caught his “rediscovering fun” presentation about “swx” this time last year at LFPUG, and enjoyed it greatly.
Now, swx is not for me at the moment (I’m hoping to stick with AS3, and quite happy with AMF thanks), but never the less it’s a nice project and I can see the value in certain circumstances (Flash lite would be the one that I’d personally pick as being a great match).
What I did find rather impressive was catching Aral doing a twenty minute presentation at Flash on the Beach last year, during which he put together a simple but usable demo application in about ten! Since last January, he’s evidently put together some nice tools to complement the format itself, aimed at making it easy to get started.

Well, time will tell what “Singularity” brings…

pureMVC presentation at LFPUG (London) tomorrow night.

Wednesday, January 30th, 2008

I’m looking forward to catching Paddy Keane presenting a session on pureMVC tomorrow night in london.

I’ve gained quite a lot from Cairngorm in my work flex app, and I’d like to have a little experience of the alternatives (especially if I end up in flash environment without flex’s built in binding again) . I’d given pureMVC serious consideration before going down the cairngorm route and I’m still interested. I’m hoping it will enthuse me enough to rip apart one of my smaller private projects and see how it hangs in a framework rather than my ad-hoc plumbing. Rather better, I suspect!

Thoughout 2007 I made some effort to get to the LFPUG meets, which at least are only a few minutes down the road from me.

For those thinking of it, I’d recommend turning up. They’re a nice bunch , and the organiser (Tink) is a welcoming kind of guy with a keen sense of wit.
There’s also a regular raffle (Not that I’ve won anything yet :( ), this months is for two tickets to FITC in Amsterdam. I’m hoping …

Welcome MXNA readers!

Wednesday, January 30th, 2008

It was with pleasure that I received an email early this morning to inform me that this blog has been accepted for the MXNA news aggregator.

I hope to continue to post on subjects that interest me in regard of Flex, Flash, AIR and any related matters.
The prospect of having a potentially large audience out there encourages me, I can only hope that it is of occasional interest or use to others.

Comments are welcome (in fact encouraged), especially those that are constructive enough to correct any mistakes or inaccuracies I may post!

In the meantime, here is an irrelevance :

fatpuppy.jpg

ComboBox with variable width dropdown.

Monday, January 14th, 2008

the main view in my application changes it’s data quite frequently, and uses a comboBox as one of it’s controls. Initially I’d just left the comboBox’s width unset and it was happy to resize itself according to the data presented.

However, our “designer” was not happy…

It was decreed that the comboBox should remain at a fixed width (In it’s collapsed state).

The data labels it presents varies considerably in length, and to set it’s fixed width to the longest would a) look stupid in most cases b) require measuring all possible labels before deciding on the width.

So, I decided that I would make the dropdown size itself to the widest label for any one current dataset in it’s dataProvider, at the point at which the dataProvider changes.
I also thought about a dataTip function in a similar fashion to that of the tree control, but decided that the dropdownwidth made more sense since generally speaking labels for our data are of a similar length in any set, so it’s a different question than just the odd one long label in the dropdown.

This proved to be fairly straightforward to get working, though it was new to me and I have to admit I still lack confidence that I’ve done it in entirely the correct way.
However, it does seem to work OK so thats probably good enough until I learn a little more.

Measuring the labels widths was easy (dropdown.measureWidthOfItems) , and initially it seemed to make sense to do that and alter dropdownWidth when the dataprovider changed (in collectionChangeHandler() ) .

However, that lead to a dropdown that was less than the width of the base which was ugly, so I thought I’d “just” do dropdownWidth = Math.max(newDropDownWidth, this.width).

That, of course, turned out to be a problem if the dropDown was visible at the time (since that affects the measured width of the component), and lead to some rather strange results :(
Some experimentation showed that the “FlexEvent.VALUE_COMMIT” event occurred at a nice time to measure and set what the new dropdownwidth should be (The dropdown is hidden before the event occurs, so you get the “base” width at that point. On reflection, it may have been worth getting the width of the “base” element somehow, but I didn’t look for that.

The other thing that needed attention was that “measureWidthOfItems” does not take into account the presence or otherwise of the scrollbar on the dropdown.
I detected it’s presence by using dropdown.maxVerticalScrollPosition > 0, but initially hardcoded it’s width to the standard 16 pixels(it was late at the time).
There’s no direct way to get the scrollbars width (it’s protected within the standard dropdown), instead you must extend your dropdown with a method that reads and returns it.
Though I’d not done that before, it proved to be easy enough. However, I’m slightly suspicious that the fact I use a cast to get my extended dropdown class before being able to call the scrollbar width method means that I’ve not quite got it 100% right. But considering it only gets called when the dataProvider changes, I’m not too bothered in practice…

All that remains is to make an example featuring cute puppies…

View example (right click example for source)

AIR : Error #2041: Only one file browsing session may be performed at a time

Monday, January 14th, 2008

This one came as a bit of an unwelcome surprise, in a kind of “didn’t work as I expected” kind of way.

Consider, say, a config class that needs to prompt the user for two files to use (in the case where I came across this, a database file and a directory of images, for instance) .

I’ve found (at least with flexbuilder beta3 and windows XP), that you cannot chain one file browse operation from the select event of another. (BrowseForOpen or browseForFolder are the only ones I’ve tested so far) .

The example mxml text below should demonstrate this …

The trick to fix it is to call the second browse operation via callLater() (if your class extends UIComponent) or a timer (if not).
so to fix the below you would change “checkConfig() ;” in the function file1Selected() to : this.callLater(checkConfig);

I also noticed that in that file the first file browse dialogue appears *beneath* the main application widow, which is a bit rubbish really.

That does make sense, in that the application window may not be rendered to screen in AIR on creationComplete, therefore the browse widow is placed on screen before the window of the AIR application (which appears above it since it was rendered to screen later on).

So … Change the call to checkConfig to the “windowComplete” event of WindowedApplication.
(I first tried the “applicationActivate” event, but seems that gets called whenever the AIR window is focused (or something), so caused some chaos and , confusingly, the same error. Because, of course, checkConfig() was called whenever the file browser was closed and the AIR window activated. DOH!)

As I said, this didn’t work as I’d expected. Is it *wrong*? I don’t know. I’d prefer it didn’t work this way, but so long as I know it does, I can work with it.
Which is really the point of writing about it, hope it helps anyone else lost on the same thing.

View the final, error free mxml file here.

=> this is the original example (that didn’t work…)

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”674″ height=”343″ creationComplete=”checkConfig()”>
<mx:Script>
<![CDATA[

[Bindable]
private var filePath1:String;

[Bindable]
private var filePath2:String;

private function checkConfig():void
{
if(filePath1 == null)
{
var file1:File = new File();
file1.addEventListener(Event.SELECT,file1Selected);
file1.browseForOpen(”pick a file, any file”);
return;
}

if(filePath2 == null)
{
var file2:File = new File();
file2.addEventListener(Event.SELECT,file2Selected);
file2.browseForOpen(”pick a file, any file”);
return;
}
}

private function file1Selected(event:Event):void
{
var f:File = event.target as File;
f.removeEventListener(Event.SELECT,file1Selected)
filePath1 = f.nativePath;
checkConfig();
}

private function file2Selected(event:Event):void
{
var f:File = event.target as File;
f.removeEventListener(Event.SELECT,file2Selected)
filePath2 = f.nativePath;
}

]]>
</mx:Script>
<mx:Text x=”142″ y=”33″ width=”492″ id=”txtFilePath1″ text=”{filePath1}”/>
<mx:Text x=”142″ y=”83″ width=”492″ id=”txtFilePath2″ text=”{filePath2}”/>
<mx:Label x=”10″ y=”83″ text=”config file 2″/>
<mx:Label x=”10″ y=”33″ text=”config file 1″/>

</mx:WindowedApplication>




Transfering my focus to flex presentation…

Tuesday, January 8th, 2008

For a long while now, I’ve been building (if you like) the model of my application, using a very basic gui about whose looks and usability I’ve not cared about too much…

As the application has neared it’s desired functionality and it’s quirks and bugs have decreased, I’ve been able to devote more time to how it’s gui looks and works.

I ended up using cairngorm as a framework (though nearly went for pureMVC, which I’ll probably try on another smaller project in due course for interests sake), so in theory I ought to be able to mess about with my presentation without breaking anything too badly. It’s worked out well so far, on the face of it a little verbose in terms of writing events, commands, delegates etc for everything I do, but the payback has been worth it. I no longer have to remember what particular hack I pulled or worry so much about changing that hack breaking something else since there is a clear path for everything. Changes have been easier, what at first seemed as if it could be restricting is in fact liberating.

I’m actually looking forward to the gui side of things, it’s a whole new area that I’ve not been able to devote much time to since I took up flex.
As I start writing the odd custom component and delving into the framework source I’m getting a better understanding, learning some new stuff and generally getting interested again.
Yes, I have a few books on as3 and flex, but I always find that there is no better way to learn than to do.

The first thing of any interest was the tree thumbnails example I posted, at the moment I’m attempting to bend comboBox to my will. I’ll post on that when it’s done to my satisfaction (There being a couple of things that are still troubling me) and I feel I’ve understood what I’m doing a little better.

You wait ten years for a flash html renderer, and then two come along at once!

Thursday, January 3rd, 2008

This is one thing that I am, and have been, really really missing in flash. My clients, of course, fail to understand why text handling in flash is basic, from their point of view it’s all text that appears on the interweb and why can’t flash “just” display the same kind of text???

Standing in their shoes, I do understand it, but in mine I appreciate the flash player difficulties (A bit, anyway :) I wish it were not so, nevertheless ).

Well, I’ve heard a whisper of flash player 10 having the ability to display tables in text fields, which would be nice, but then I guess we’ll see in good time.

In any case, just as the issue reared it’s head properly at work, I get not one but two little rays of sun shiney hope poking through the clouds, literally in the past couple of days.

Firstly, Alex Harui posted some code and what I consider some quite insightful comments on his blog here.
It is by his own words incomplete and possibly buggy, but that’s fair enough and I’m still very pleased to see it.
As he rightly supposes, in my case I only really need a small subset, and having code to start from will be an enormous leg up compared to starting from scratch.
So far I’ve only had 3/4 hour to play with that one, but it looks promising.

Secondly, another library (htmlwrapper) comes along, open sourced on google code (via FlashcodersNY). Not had much of chance to play with this one either, but reading the docs html tables are yet to come (a shame, since the text I have to render is table based, and unfortunately a little haphazard). Still, I’m looking forward to checking this out as well.
Again, just having something to start with and code to play with should be a great thing.

Many thanks to the respective authors for releasing the code, it’s so much appreciated.

Flex tree control with image tooltips*

Wednesday, January 2nd, 2008

* and some cute puppies, at last :)

Most of the assets my main work project displays are bitmaps, and we tend to use tree controls for most navigation around any given product.

A long running and popular request was for there to be a thumbnail tooltip of the resource appearing when an item in the tree was rolled over.

This seemed like a job for a dull day over Christmas, so I gave it a go …

My first thoughts were that this was essentially a datatip rather than a toolTip per se, so I had a dig around and implemented a quick custom dataTipFunction function and showDataTip=”true” on the standard tree control, then looked for a way to customise what the datatip position was and how to change it to a custom tooltip. That appeared to be a bit of a dead end, or at least one that would require a fair bit of effort.

The positioning of the renderer ToolTip is in a private function for TreeItemRenderer, so there’s no overriding it in an extension of TreeItemRenderer.
I didn’t want to make a whole new implementation of the renderer either, plus if I just copied the existing one to modify there is an include to “/core/Version.as” in the framework which was another complication.
On reflection, it seemed as if the existing implementation of the dataTip was something that was useful enough that I didn’t want to lose it (It displays a tooltip of the label text if that text is too wide to be displayed within the width of the tree).
All in all, that approach was beginning to smell bad.

So, I took the simpler approach of just using the existing itemRollover event, and setting the toolTip on the tree rather than the item renderer, positioning it according to my needs. So far it’s working well enough.

Getting the data from the Rolled over item is easy, in this example I cast it to XML since I only use XMLList for my trees dataProviders.
It would probably be better to allow for other forms of dataProvider as well.

I take a custom attribute of the tree nodes XML as the URL for the thumbnail, and set the trees toolTip to that.

Making a custom toolTip to display the bitmap thumb is easy enough, many thanks to Rich Tretola for his example here.
Briefly, you set the tooltip to your own implementation of IToolTip in a function handling the toolTipCreate event the Tree provides as standard.

Being somewhat lazy, I used Rich’s classes in this example, though I did add some code to keep the positioning of the tooltip once the (unknown size) image loaded, and to allow for the fact that it could in fact go off screen at times (so I reposition it back on if so).
I should probably make that bit of code more generic, however, and add it to the CustomToolTip class rather than the specific ImageToolTip.
That job is now on the list …

This same approach works just as well on a List control, by the way, as one would expect.

I think that’s it … Bear in mind that this is just a basic demo, and there are few things that would need doing to make it “production ready”.

TreeControlWithThumbnails

Right Click on application to view & download Source Code.

Run This Code