Local swf file with networking workaround: use Mini-Server (Windows)

Mini-Server_1

Recently  I created a small app to show off in a demo. It’s supposed to live on a webserver, and loads an xml file which contains urllinks using an HTTPService, and then assigns these links to buttons in a tabbed navigator flash component that’s located somewhere in the html page.

For the demo, I created a few dummy html pages that are kept in the same directory and pointed the urls in the xml to use those.

The problem I faced was that I didn’t have a handy webserver to store my release build on when I wanted to demo the app – when I started it up using Windows File Explorer, double clicking the bin-release html file, Flash decided to put it in a mixed sandbox security mode: local-with-network, which means that you forfeit local access to other files. And so my app suddenly couldn’t find it’s xml file anymore. And the purpose of the app is to put it up on a website, the local execute was just to demo to app.

[When you run your app inside the FlexBuilder program, by the way, this all works fine without any problems – it’s only when you do a release build that you suddenly start to learn about security sandboxes and apps with local or networking rights.]

I didn’t fancy writing a server in Python/CherryPy. Although quite possible,  it would take time, and I wanted a solution right then and there. It needed to be portable, and smallish, and as long as it could serve some static pages with client-executed content in it I would be happy.

Enter Mini-Server, which is completely standalone program, vintage 2006, about 462K, and does the job admirably. If you install PHP and show it where it lives it can even do php pages. It’s made by John Owen, which apparently is a nom de plume for a whole rafter of bitmonkeys who churn out one program after another… 🙂

Anyway, the problem is now solved: I start the mini-server, specify the port and root folder (only once, an ini file is saved for the next time), and hit run. I can then show off my demo site with a flash app that is served via http. Once the demo is done, I hit the stop button. It all fits on a usb stick, neat !

Please note that this is a small server for development purposes only. The author notes this as well, and it’s not something  I would stick on the intarnet without extensively testing it’s capabilities/security issues. But it is still a neat program to have on your usb stick when you rapido need a webserver!

Another solution is, on compile-time, using the flex-compiler publish setting to indicate the sandbox you want your application to be in. A user can then trust the flash app and it can then use both local and networking links. See the above Adobe link in the text for more details if you are looking for that solution.

When is the next train leaving ? (Flex application)

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 !

How to access your xml in flex

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 !

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…

Version 1.8 of CSV2XML is out

Thanks to a comment from a user of the program who had problems getting the script to process csv files on the mac, I’ve updated the script to version 1.8 so it will now open them without first needing to save the file in unix format when exporting to csv from Office for Mac.

For those of you who noted the version skip, version 1.7 has not been released, but just includes a simple test to see if the first field is empty or not. If empty the line is dropped. It’s been commented out in the latest version. Since my hosting provider also does python, I have renamed the file to .txt. Simply rename it to .py to have it working.

csv2xml_v18

[For the Pythonistas : I’ve set the csv module to now open the files in read ‘universal’ mode]