Stefan B.log

that’s kind of funny, getting an email from Adobe announcing Adobe® AIR™ 1.5 for Linux® in large letters:

BREAK FREE FROM THE BROWSER

I don’t want to break free (at least not from the browser ). I want a competitive desktop solution using Flex instead of Swing or SWT, but so far that’s not what I can get. If you want to know what is still the problem with AIR (IMHO), look at Mike Chamber’s blog about the CommandProxy.

I’ve used the same approach (communication via sockets) to access the Ruby Runtime and execute Ruby scripts on a Windows XP machine and do some MS automation (see Ruby On Windows). But that was just a hack and in my case for a special kind of application in mind not a feasible solution.

I attended the Adobe on AIR Tour in Amsterdam in april last year to take a fresh look on AIR and to talk to some of the Adobe guys, here with Mike Chambers (you can run, but you can’t hide). I tried to find out what is their point of view and what to expect from AIR in the future and what Adobe is aiming for - another widget toolkit or a real desktop platform? But unfortunately the answer was not clear. Now we are two minor AIR releases (1.1, 1.5) further ahead and it’s still not clear to me. Ok, ok, I know it’s all about security and cross platform issues, but I still think Adobe is missing the point - even Java had JNI just from the start and SUN was adding more and more platform specific features to the JDK and has launched the JDesktop Integration Components (JDIC) project on javadesktop.org - for good reasons.

I’ve seen this article written by Yakov Fain and couldn’t agree more:

Dear Adobe, please make AIR a full-fledged desktop development platform. You can’t be a little pregnant.

Please don’t get me wrong - I like AIR, especially that Adobe has integrated the WebKit browser engine (can’t wait for JWebPane). I wish I would have the same HTML stuff in Flex running in a browser (but that’s another story).

So, Adobe, please give us the freedom to rock out on any platform! Yes, I want to break free…

Btw, here is Adobe’s demo AIR application to show some nice features:

In this post I mentioned that the rendering of a MatchDataGrid can be a bit slow when too many visible cells are used. Ok, here is a full size demo. And I’ve added some features:

• Font size slider
• Yahoo theme switch
• Some settings stored on client side as LSO (Local Shared Object)
• To be continued…

In my previous post I’ve tried to customize the ComboBox; now it’s time for the DataGrid - probably the most important GUI component for enterprise applications. If you try to understand the DataGrid and the item rendering stuff in more detail (like me) you should take a look at these cool sites:

• Adobe
• Flex Examples
• Alex’s Flex Closet
• Peter Ent
• switchonthecode

I’ve created a MatchDataGrid with the same kind of filtering like I have done for the MatchComboBox and I’ve also added some code for using links and some decorator stuff. All filtering for the DataGrid is done on the client side (browser or AIR), this is not about backend filtering or paging.

Demo

To get a real impression I used some real data. You don’t need the Filter - Checkbox to switch filtering off, but I’ve added it here to show its complete functionality. Also the layout and design of the controls could be done more nicely (e.g. using SearchBox), but hey, it’s just a demo!

You can get the source from here, but please be careful - the component was not heavily tested and so far not used in any application.

Demo data

The data for the demo grid was created from a file named BK05Q406.KE1 downloaded from a german website for health insurance matters. The content is not valid anymore, so please don’t use it for anything else! I’ve wrote a small Ruby script to transform the EDIFACT format into XML.

Source

If you look at the source you will see that all the code for the demo is written in two files Main.mxml and Grid.as and the code for the MatchDataGrid, MatchDataGridItemRenderer and MatchFilter is under the package folder de.sbistram.controls. Some code comment is probably missing (like always), but nevertheless most of the stuff is straight forward.

Open issues

• More or less the same like with the MatchComboBox - not tested in any serious application so far and missing unit tests. I’m sure there are some bugs, but maybe the code is a good starting point and someone can use it.
• The filter allows also filtering of one input text per column, so the GUI demo should be extended.
• I replaced the lightweight DataGridItemRenderer with the heavyweight Label renderer. So this is causing rendering performance problems for grids containing more than ca. 100 visible cells.
• HTML is used to mark the matched text and also used for the anchor links, but other HTML stuff is not supported and will not work! So keep it in mind.
• Would be nice if the link underlines are only visible when hovering over the link (or at least as an option).
• Maybe ‘Match’ wasn’t such a good name for the controls because it has nothing to do with matching regular expressions.

Flex 4

I hope that Flex 4 (codename Gumbo) offers more HTML support out of the box than Flex 3 - so let’s hope and wait for FxDataGrid.

Long time ago I’ve created a custom search ComboBox in Java Swing for an enterprise application. Exploring the Flex framework I tried to find the same kind of ComboBox component. First place to look for special components is probably the flexlib, another good resource is Flex Examples. I was not lucky, so I searched the Web - here’s what I found:

• adobe.com
• websector.de
• hillelcoren.com
• defusion.org.uk
• flex888.com

Demo

Ok, a lot of cool stuff, especially the Autocomplete TextInput component, but not exactly what I was looking for. Anyway, I thought it’s a nice exercise to see how easy or difficult it is to customize a Flex Combobox (btw, in Swing it was not easy at all ) and this is my result so far:

You can get the source from here, but please be careful - the component was not heavily tested and so far not used in any application.

Open issues

• Actually it’s a non-editable combobox, but it still looks like an editable combobox. I’ve tried to fix this by switching from non-editable to editable and back on the fly via an approach more or less like this:

  override protected function focusInHandler(event:FocusEvent):void {
          editable = true;
          super.focusInHandler(event);
  }
   
  override protected function focusOutHandler(event:FocusEvent):void {
          editable = false;
          super.focusOutHandler(event);
  }

  But unfortunately it’s not that easy. I run into several problems and fixing one issue was causing another. Maybe it’s a better idea to change the skin dynamically, but I’m not sure if this is the way to go.

• Setting the prompt property is not working correctly.
• Start editing in the input field will open the dropdown list, but when you resize the window so the dropdown list will close the dropdown list will stay invisible (see bug issue)

Flex 4

I’m sure there are more open issues, but maybe the code is a good starting point - or should we rather wait for FxComboBox in Flex 4 - Gumbo (to be continued…).