Using Adobe Flex to Show CSV to XML converted data

After having converted all your enormous spreadsheet data to xml using my python script csv2xml, what do you do with it ? Why, you display it using Adobe Flex of course ! Well, at least that’s what I did with my data (YMMV).

The following AIR tool displays issues that have been identified for a website. It uses an XML file on a windows file system as a source and a screenshot directory that shows screenshots linked to the issue description.

Here’s how my user interface looks like after a few iterations; the goal is to show the key facts in the lines in the datagrid, with the issue description and other more detail fields to be filled in below the datagrid when a line is selected in the datagrid.

(click once to see more info, click then again for original large size picture – WordPress has changed how you publish pictures, and it’s annoying me a lot, but not enough to fix it)

The above shows a TabNavigator with in it

  • an Overview tab : this is the main pane that has an overview of the xml data in a layout that makes sense (at least sense for the data)
  • an Overall stats tab : this is based on the most important key field, being the status of implementation and the priority assigned to each item
  • a Stats – Filtered tab : this shows the same graphs as above but filtered based on the dropdown filters in the overview tab
  • and an About tab that gives you an explanation of how it works and incidently, where the free icons come from (Axialis).

Inside the overview tab I have identified the main fields I want to filter on and put them in drop-down buttons. The filters are cumulative, meaning once you use a filter, you can use another filter again on the remaining list of items. Once you are done filtering, you hit the reset button to restore the full list. This has the advantage of just using one filter function to call, each time giving it the previously filtered XML. The disadvantage is that you can’t easily select a different field from the same filter once used, and need to hit the reset button to restart (I keep a copy of the original xml list when starting out).

The data is shown in a datagrid, with the website field having a custom icon renderer that shows an icon for the url link. Clicking on a line in the datagrid shows you the relevant info fields below. If a screenshot of the page exists, the screenshot is shown dynamically on the bottom right.

The stats graphics are draggable. With the inclusion of a simple action script class, found here, and specifying which graphic you want to make draggable, my graphics can be dragged over to the desktop, and are saved as jpegs.

On the bottom of the pane you find 3 buttons : one to select the source xml file, one to select the directory that contains the referenced screenshots and one that lets you exit the application.

What’s still missing that I would like to implement ?

  • a search box : for that I need to figure out how to search inside xml nodes and which ones are important.
  • filters that can be reset individually (lots of work, I will probably keep it as-is)
  • so far this is read-only stuff, the most made comment is that writing back changes would be a great thing. Since excel is the masterfile, this is currently not possible without a major rewrite, however I have some ideas of connecting to databases using Cheetah and pyamf and pydobc !
  • a lightbox style overlay when you click on the thumbnail to see the original picture : I’m trying to get this programmed in, but it’s hard going for the moment as I’m just about done with this app for the moment.

What’s still not working as it should be ?

  • If the preferences file does not exist I get plenty of errors; these disappear once the screenshot path and xml file have been selected once. I think this means that my error checking for empty preferences files is not yet up to a good standard. Plus I cobbled the preferences programming together from different sources; a major review would be needed to fix this.
  • If a screenshot related to a quickwin does not exist, I want it to give a message instead of a broken image icon.
  • Sorting the data in the graphs; haven’t figured that out yet.
  • Exporting your selection to pdf. Printing it.
  • Must be a lot of others, but those are the most glaring ones.

Frankly, as this is the first major flex AIR application that I wrote, and the first time I worked with XML code, I hope you’ll excuse me for stating that the code is in a bit of a mess, and could use some cleanup.

For example, there’s a function that I could reuse a lot that I couldn’t be bothered about at the time to find out how to pass it the right variable in just the right way, so I just hit copy/paste of the same function five times with different starting variables (Yes – it’s blasphemy. Yes, I know. I still cringe when I look at it). As I said, I was a bit drained of getting Flex to work (or adapting myself to Flex).

However, I also found out by writing this that Flex can do some pretty nice stuff with just a few lines of code. Linking the graphics to the numbers was not so a big task as I feared. So in the end I’m pretty proud of it, and I learned a lot about xml and how to massage it and show it in Flex.

Should somebody be interested in parts of the code to have a look at, I’m willing to publish it and/or go over it, just drop me a comment. I just don’t think it’s very high quality code…

Blog News Programming

Revoking a Flex 3 License Activation is not easy.

This is a bit of a weird story, which most people probably won’t have happened to them. Still for those out there in the same situation, this is what happened.

Previously I had bought the “Flex builder Standard edition”, which comes without graphic elements (bars, charts, pies, whatnot). In order to show the results of filtering in my flex program I found it didn’t do all I needed. So I purchased the Flex Builder Pro edition (the full build, not an upgrade).

When you register your products on the Adobe website, you can see on your profile page that each flex builder product can be installed two times – typically used for installing once on Windows and once on Mac, so you can test your products on both environments. This suited me fine, as I have a windows XP laptop and an iMac.

Each time you install Flex builder, you can see in your profile page on that the license count for the registered product decrements by one. My standard edition was installed on both my Mac and my XP, so I had zero licenses left to install (which it showed on my Adobe profile page).

After buying the full Flex Builder, I no longer needed the Standard edition. So I wanted to uninstall and if possible sell the standard edition. So I searched for a deactivation routine inside of the Flex builder Standard edition. Most recent Adobe products like Photoshop and so on have online activation, but I did not find one, so I uninstalled my standard Flex Builder 3 completely, thinking that uninstalling would also revoke the used Flex license with the Adobe server. This does not appear to be the case, as the license count does not increase again.

Erasing the license key from your machine and replacing it with the full flex license also does nothing for the used-up licenses on

So in the end I asked for help at Adobe (Benelux). They too asked me if I could not start the deactivation routing, but admitted they did not have much training in supporting Flex builder. After some more mails and phone calls, the technicians could not help me further, and had no further information to give me, as Flex Builder is a server product, only used in big corporations ( I told them I had bought it in via the online shop as a retail customer, so it’s not only just for big corporations) . After inquiring internally, they told me the only support for Flex on the issue I was experiencing was in America, which I could try to call, but probably would not get in as I would need a support contract.

I reopened the by-now closed support case and wrote quite a lengthy mail explaining that I was not satisfied with the solution. An extremely helpful (dutch) lady has since then tried to help me and has herself contacted the Flex support guys.

It seems Flex is considered an enterprise product, so it is not supported by retail support people and you need an enterprise support contract.

However, the upshot of it seems to be that a normal uninstall should be sufficient. There should be no penalty or license deactivation apparently needed, you can reinstall the Standard edition elsewhere. However, I have not yet tried to sell my license, and probably will not for some time. I’m a bit scared of trying it, and not everybody around me is so deep into programming as I am…

All in all, I have mixed feelings about the support I’m getting for this issue. On the positive side, I was always courteously treated by the support people, and all of them were helpful (but in particular Helene was helpful above and beyond her duty, for which I thank her). On the negative side, it seems that Flex is not considered a retail product, although there are scores of people out there using it to create lots and lots of cool things with it in flex/flash.


Flexing my programming muscles

After writing the python program to convert the data to xml format, I started out to make a flex program that could display it in a neat way, with the hope of ultimately adding dynamic filtering and charting to it as well. I settled on some tabs and no menubar, so far.

One thing is for sure – the Adobe help system is quite good. That, coupled with lots of examples found on other peoples websites helped me make a program that did a lot of what I wanted (more on the final product in a later post). Originally, I started out in absolute mode, laying down my elements to the pixel perfect, specifying x and y. However, you soon enter into the hell of overlapping content coupled with multiple scrollbars that is set in stone on the users computer screen.That’s not what I want.

In the end I went back to drawing out my User-Interface with a combination of HBox and Vboxes (boxes that arrange content respectively horizontally or vertically), and specifying percentages that each element could take of the screen estate. This has the added advantage that when a user has a wider screen than 1024 pixels (which is my start requirement), the graphical elements rearrange themselves quite well.

One of the things that has bothered me the most to adapt to is how strongly each Actionscript variable is ‘typed’ to it’s element base. I lost count of how many times Flex complained to me that I was coercing some poor ‘exemelly variable’ to accept data from another variable from another ‘exemelly list’ type, and that this just wasn’t allowed… For example, if you create an XML list variable, you can’t assign an XML object to it (or part of it). Well, you can, but it’s not simple and you need to program extra code.
[Please feel free to correct me if you know better ways of doing this, I’m still a newbie at this]

In Python you assign a variable something, and Python takes care of it, the so called loosely-coupled binding. When I assign variable X the number 5 and later on add the fifth element from an array and that’s a number or something like a number, Python will happely convert the content of the fifth array element to numerical and add it to the 5.

In Actionscript this is much, much more rigid, and it’s a big pain in the behind to figure out what I am doing wrong and trying umpteen versions of the code before finally, at 0:30 at night getting it to work and *understanding* why Flex was complaining and fixing it. I do get the hang of it though, but it’s a different, more rigourous way of thinking.

Once the code works however, I’m astonished how fast I can set up new graphical elements and set dataproviders to them – in general mxml is just plain fun, actionscript is fun-hard, and they both deliver something that I wish Python had – a genuinely easy way of creating user interfaces.

I’ll post some more about the progress I’m making with creating this application soonish.


Flex and Google App Engine are working together for me !

After using Flex for a bit, and blogging here that the backend is not so extensive, I discovered that Google has brought out the Google App Engine (GAE) sometime this year. It allows you to write the backend in Python and the frontend in html or ajax or even flex ! It even comes with a templating engine, is currently in beta, and is free !

It should be the best of both worlds, if I can get it work together.

There’s actually not that many examples floating on the net that go into much detail into how to set this up. Lots of references to PyAMF (Python with Action Messaging Format so that it can talk Flash), but I find the examples are almost all from people in the know, and for a ‘script’ programmer like me I sure could use some (very) detailed explanations !

I finally found a good example of a simple Flex client that connected to a python Google App Engine on this site. After two nights of puttering around, I finally got my modified example to work and understood what was happening (I’m still learning flex, actionscript3 and now GAE – it’s a bit much sometimes). I actually write the xml back via a python hack where I do a loop and write the tags one by one… tss, I’m sure there’s a better way (pyAMF ?).

Now I still need to get my head around what PyAMF actually does and how it integrates between Flex and GAE. This seems to be a nice example from the PyAMF wiki.


Just finished my first flex application !

I just made a demo form entry in Flex to show to some mates of mine.

They are receiving emails and take their work orders from them, but I find this rather insecure, so the demo form is to show them what is possible with a form to be filled in on a website, in order to avoid all the hassles that happen with mail (arriving late or never, not all information filled in, etcetera).

The original demo page has been ready for about a week, but I had gotten stuck on some combo box controls where I couldn’t retrieve the data from when entered – I finally sussed it out by going to the online help instead of reading the flex3 book, and sure enough, an example was given how to retrieve the data. I have to admit that the flexbuilder documentation is topnotch.

I’m quite happy with that proof of concept page. Enough to finally go to bed now and get some sleep…

Blog News

Tour de Flex is not working for me [update: it works !!]

[UPDATE : Andre in the comments below was nice enough to let me know a solution : uninstalling Adblock for Safari solves the problem. Apparently Tour de flex uses Webkit, and Adblock thinks it’s Safari so want to do it’s magic on it, and crashes the application. So the downside for Safari users is they don’t have Adblock. I use Firefox almost exlusively, so this is not really a problem for me.]

Tour de Flex, the so-called showcasing of all things that you can do with Flex, is not working for me.

It installs fine, and starts up fine, but when I want to click on an example it crashes. Every single time. No need to tell you that this is peeing me off.

Tour de Flex error message
Tour de Flex error message

So far I scoured the web, but haven’t found anything like a solution, perhaps because this problem only happens to a small amount of people (maybe just only me ?).

Grrrr. Google in it’s Google Maps API code page for Flex pointed me to a possible solution for a similar problem, but it’s apparently not the exact same problem, as it still crashes.



Busy learning flex3 and actionscript

Quite busy learning howto program using flex builder 3 in mxml and actionscript3.
It’s like learning 2 languages at the same time! Add to that that you can deploy your app to both the web and the desktop (which has its own specific API’s to access the local filesystem) and it starts getting complicated.
Mxml is quite cool and the help in FB3 is quite good. Still haven’t written a decent application though. Although I have some good ideas already, my knowledge of the languages is not yet sufficient… Grrr.


Adobe Flex Builder 3

I went a bit out on a limb last weekend and purchased Adobe Flex Builder (standard edition). It lets you create in an easy way a layout for your flash-based application and then add some code to your elements using the open-source eclipse editor it’s based on.

Of course, it means learning a whole new programming language, actually two : ‘mxml’ for the layout and ‘Actionscript’ for the more codey bits. If you don’t see me or hear from me, that’s what I’m currently trying to do…

Actionscript and mxml are as much class and object oriented as Python, and where I could get away in Python with just writing some functions and calling them, here I definitely need to use classes, extend them, etc… something I never until now had to get my brain around. Ouch. Sometimes it hurts.

Another difference is that the language is much more strongly typed, you need to identify as much as possible the type of variable you are defining, while Python is much more loose about that.

Still, my first essay so far is a generic form page for telenet in Flash, and works fine. Now busy adding a captcha to it, for which I reused an actionscript component on the intaaaarrrnet.