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…

5 thoughts on “Using Adobe Flex to Show CSV to XML converted data”

  1. Hello, nice work, I would like to help you implement this project with the same features also maps with the graphics. You can send me the codes of the project to see if we can work on a new feature? Sorry my English is horrible

  2. Hi Alex,

    Would you be able to share some codes regarding having access to the nodes in the xml converted from csv with Flex? By the way the csv to xml script is owesome. nice job!

  3. Just noticed the seperator is “,” not “;” when saving the file to csc in Excel 2003, which caused problem for converting to xml.

  4. Hello there EJ,

    I’ve added a new blog item describing just that. Let me know if you have additionnal questions.

    As for the seperator, I will take that in account if I revisit the script for any future changes.

Leave a Reply

Your email address will not be published. Required fields are marked *