Tag: flex3

Categories
Blog News

What about flex on this blogpost ?

For those few regular readers out there, they have probably noticed that I no longer post regularly about Adobe Flex.

Please be assured that this is not out of the picture ! Rather, I wanted to learn Flex enough to get by in it. It’s been *very* interesting, but also very hard sometimes to wrap my head around Actionscript and MXML. Now that I know a bit about what I can do with Flex, I’ve started again with Python and more specifically with CherryPy.

CherryPy is a very easy-to-use web framework that you can use to set up your own webserver in a flash. It provides a basic syntax for setting up the webservice, then scurries out of the way, letting you ‘get on with it’, whatever that may be.

Currently I’m setting up a local Webserver (using CherryPy) and this is where most of my time has gone to.

Once the python application on there has been created (and most of it has) I then will head back to Flex and it’s usages as a reporting tool – I’ll be trying to use PyAMF as the glue between python functions and Flex datagrids.

Anyways, more on that later…

Categories
Apple Programming

WeightManDesktop v.0.2 (AIR)

WDM-r2

I updated my little AIR application called WeightManDesktop (which uses data from WeightMan, a free  iPhone application made by Katachi Studios) to version 0.2.

Changes in version 0.2:

  • Calculates the minimum and maximum weight
  • Calculates the minimum BMI
  • Both the weight graph and the BMI graph now don’t start from 0 – instead they use the minimum values to calculate the begin value of the graph
  • The graphs are much more clear now and the changes in weight show up more distinctly.

You can download version 0.2  of the program by clicking on the install badge. Version 0.1 entry and description can be found here.

[airbadge] WeightManDesktop, https://boschmans.net/wp-content/uploads/2009/11/WeightManDesktop.air, 0.2, https://boschmans.net/wp-content/uploads/2009/11/WDM-r2.png[/airbadge]

Categories
Programming

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.

Categories
Programming

WeightManDesktop, an AIR application for Weightman (iTunes)

WDM-r2

Here’s a small application called WeightManDesktop that I wrote as a proof of concept to see how difficult it was to import a csv file and process it in actionscript. I blogged about it earlier here.

It uses the csv file that is generated by WeightMan (iTunes link), a free iPhone program that allows you to note your weight over time intervals. Weightman allows you to export your entries in csv and sent them by mail to your desktop. I wanted a desktop application that could display all the entries in one go.

The iPhone app is made by Katachi studios. I did try to contact them to let them know I was posting this, but as their site is partly in japanese and there is only a small english page, I couldn’t find the contact email… [update: I managed to contact them, and they seem happy with it 🙂 ]

To use the program, use the install badge below – it’s an AIR application, so you need to first install the run-time air player as well if you haven’t done so before. I’ll make a proper install badge for it sometime in the future if or when I revise the program.

Use the source button on the bottom of the screen to locate the csv file and import it. Two graphs will then be shown, one showing your weight and one showing your body mass index level, as calculated by Weightman.  There’s a toggle button to show only the last 30 entries as well.

It’s a very basic first release, but I may add additional functionality it in the future. If you would like an improvement or see something to fix, please leave a comment.

[Update: link changed to point to version 0.2 – changes are described here]

[airbadge] WeightManDesktop, https://boschmans.net/wp-content/uploads/2009/11/WeightManDesktop.air, 0.2, https://boschmans.net/wp-content/uploads/2009/11/WDM-r2.png[/airbadge]

Categories
Programming

Reading and Displaying a csv file using Flex (AIR) and Actionscript

I’ve already written a python script that can convert a .csv file to a .xml file, which quite a few people seem to like. This is a good solution when you have a large file to convert.

But really, reading a small and simple csv file directly into Flex/Flash to use it in charts or display the contents in a DataGrid would be a “Nice To Have” solution. Plus, I’ve noticed that over the years I reuse my code and each time I add new functionality to it; now is the time to start with it !

So I made an AIR application ( for the simple reason that I load a local csv file) that does exactly that. The AIR app is called WeightManDesktop.

Since I know it’s a small file that I’m loading, it doesn’t matter that I load it completely into memory. For a larger file, in Python I would typically open the file for reading and read it line by line, processing each line as I go.

Using the File.browseForOpen AIR functionality, I read in the file selected by the user into a string and then process the content in a seperate function:

// Read in the selected file when the file is selected
private function openfileSRCHandler(event:Event):void{
fileStream.open(file, FileMode.READ);
content = String(fileStream.readUTFBytes(fileStream.bytesAvailable));
fileStream.close();
trace(“*** File loaded.”);
processContent();
}

Using the strings split function, I first split the string into seperate lines using the line seperator to split them. Each line thus becomes an Array. I then split each line into seperate content, again using the split function using commas to seperate them into the seperate items. These items are then added to an ArrayCollection that I’ve previously defined.

private function processContent():void {
//var ending:String = new String(“\n\g”);
// Split the whole file into lines
var values:Array;
var lines:Array = content.split(“\n”);
trace (“File split into ” + lines.length + ” lines”);
// Split each line into data content – start from 1 instead of 0 as this is a header line.
for ( var i: Number=1; i < lines.length; i++ ) {
var line: String = lines[i];
values = line.split(“,”);
trace (“line split in ” + values);

// Add values to arraycollection
linedata.addItem({date:values[0], weight:values[1], bmi:values[2], workout:values[3]});

And that’s it. Use the ArrayCollection as a dataprovider for your datagrid and Bob’s your Uncle !

Categories
Programming

When your flex test build suddenly no longer works

When I’m using Adobe Flex to run a test build of my application, often for testing a change I just made, I sometimes get an error, on which I click continue, and then instead of continuing, nothing else happens. This usually happens because of a run-time error.

Subsequently, Flex builder still works, but any release builds you want to create no longer get made; nothing shows up as an error.

I’ve found out that the probable culprit is the adl compiler, which is stuck, most probably waiting for input which you cannot supply.

The easiest way to get out of this situation is to use taskmanager to kill the adl process. This allows flex builder to run test builds again. However, the source that causes the problem is in the programming change you made, so you need to solve that first otherwise it will again create the same situation, and then you need to kill adl again…

Categories
Programming

Aarghl! Error #1034 Type Coercion failed: Cannot convert something to something

The error “Type Coercion failed: cannot convert [#78F6AA, #CAF2DA] to Array” has stared me in the face for the past few days or so.

The error actually has useful information in it (but at the moment I got it, ofcourse I never properly read it…). It states that whatever you are doing, you are passing the wrong type of variable to the function/variable. It expects it to be in another type.

This blog entry helped me to understand the error message.

I wanted to implement a function so the user can select his own gradient colors and save them as a preference for my AIR app. cp1 and cp2 are 2 flex colorpicker functions.

…

…
[Bindable] private var colors_selected:Array = [cp1.selectedColor, cp2.selectedColor];
…

However, everytime I ran the program I got the Type Coercion error.

Finally I found out what’s wrong. I made an array out of both colorpicker selected colors, and then passed it to backgroundGradientColors in another array.
Duh (Smacks head) !
Of course it doesn’t like it ! Below is the corrected code. The mx:SetStyle now does not specify an array, as this is constructed in the variable colors_selected.

…

…
[Bindable] private var colors_selected:Array = [cp1.selectedColor, cp2.selectedColor];
…

Categories
Programming

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 !

Categories
Programming

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 !

Categories
Programming

Showing a popup image in flex and passing variables to a mxml module

I already show a thumbnail image in my Quickwins application, but I wanted to show the full image when one clicked on the thumbnail. The image should open in a window on top of the current application window, and can be closed again.

I had to google for a while (I got a lot of help from reading “Web Development Central” ) and search the Flex built-in help before I figured it out, but I think it’s because it’s so damn easy to do this in just a few lines of code !  Here’s how you do this :

Say you want to show an image – the image’s path is “c:\windows\test.jpg” and that path is stored in a string variable screenshot_path

  1. Create a new mxml module in your project, for example call it ‘ViewWindow.mxml’ – Make it a TitleWindow
  2. In your main program, call the module via the PopUpManager  (you’ll need to import it via “import mx.managers.PopUpManager;”): 
    PopUpManager.createPopUp(this, ViewWindow, false);
  3. In your ViewWindow module you create a mx:image – let’s say we give it the id “Image2View”. This image will be loaded upon initialisation of the window via the init() function which is automatically executed when the module is called. We wil use the screenshot_path variable from the main application. To do that, we need to tell ViewWindow from where the variable is coming from: from the parent application. Appropriately, you can use the referrer ‘parentApplication’ : 
    Image2View.load(parentApplication.screenshot_path);
  4. Upon closing the window (notice that we have activated the close button) we tell the popupmanager to remove this window.

See the full code for the ViewWindow.mxml below.