Category: Programming

I’ve created a smallish new AIR program called “TrainDeparture”, but as it currently uses no database except an xml file, it was fairly easy to recompile it for the web. It has ‘view code’ enabled, by the way.

The program does one thing only : based on the current time it checks the xml file for trains (that you will, for now, need to create yourself or edit the one I supply via a text editor) and will show you the time of the next train leaving.

You can see the results by clicking here:Train Departure

By clicking on the “Prefs” button you will see a resize of the application with a datagrid showing the current entries in the file (it’s there for reference, and in the future I want to add additional stations and more preferences in there).

The “Next” button shows you the train after that, and the one after that, etc. There’s a timer event running so after 30 seconds (or less) the time shown by the next button will be reset to the current next train.

The next thing I want to change is to show not the time the train leaves, but the minutes remaining before the train leaves – I think it will be far more useful for me to see how many minutes remain.

Should you wish to use it, I’ve described the structure of the XML file below.

It’s basically functional, but there is quite a lot of amelioration that can be made to the program. One of them is coding to show the trains on weekdays or in the weekends based on the current date. Another one is to show the remaining minutes before the train leaves.

Also a quick nod to the StackOverFlow website, where a kind person helped me solve a problem with the ‘states’ setting that was driving me crazy. It’s a website for programmers by programmers !

I’ve had a request to explain how I access the XML (using Flex) once I created the XML file out of the csv file using my csv2xml python script.

To access the XML in Flex, I’ve defined an XML variable in Flex :

private var content:XML;

And I then load the XML file into the content file.

fileStream.open(file, FileMode.READ);
content = XML(fileStream.readUTFBytes(fileStream.bytesAvailable));
fileStream.close();

If you are using my csv2xml.py script, the xml file was written with ‘root’ in the top and then for each row in the csv file an ‘element’ tag was used.

Between the element tags the content of one row of the csv is written, using the header of the csv file as the tag name for each item.

In order to access one of these tags below the element, for example the content of the tag ‘assigned’ you would specify the following :

var result:XMLList = content.element.assigned

As you can see, you do *not* mention ‘root’. This was a Gotcha for me for a while… This will store all the assigned in the result variable, which you can then
further manipulate.

BTW, I use the trace command a lot to check on the content of my vars…

In a variation on the previous, say you want to only get the unique values out of a tag, to store in a combobox so the user can use these for filtering the data :

// Function called from each filter to extract the unique values
private function addUniqueValue(alllist:XMLList):XMLList{
var list:XMLList = new XMLList;
//trace("*** Setting up unique values.");
for each ( var property:XML in alllist){
//trace("*** Property : " + property.toXMLString());
if(!list.contains(property)){
list += property;
}
}
return list;
}

You would get the unique values by calling the function in the following way :

var filterStatus:XMLList = addUniqueValue(filtercontent.element.Status);

This will get you a unique list of all the statuses in the xml file.

I hope this helps you get the goods out of your xml file !

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…