Flex: IFrame HTML Component v1.1

At the prompting of a comment in the previous IFrame post (thanks masu) I inserted the IFrame.as component into the original demo from Brian Deitte here. There was a problem where the frame component wasn’t sizing correctly when the source url was assigned.

I hadn’t seen the problem before because I am assigning only one url and then programatically resizing the frame from the application.

I have modifed the IFrame component to trigger a sizing when the url property is changed. Now, when the source url is assigned the invalidateDisplayList() function is called. This will trigger the udateDisplayList() function which lays out the frame contents. I think this is the correct way to do this.

Brians modified demo is here. Full zipped project here.

Original IFrame demo here. Full zipped project here.

Flex: flexTraffic v0.0.2

I have finally got round to making some updates to the flexTraffic site.

  • Uses my new iFrame component
  • I have added an experimental ‘graph’ pane. This is a bit of a work in progress. I had originally linked all the roads together with the events hanging off them but the end result looked like a centipede. In fact when the number of events against the road is listed, as it is here, you can see that there is rarely more than one per road. This is an experiment only and a bit of fun learning how to use the Springgraph component.
  • Flex: Towards a better IFrame HTML component.

    If you just want to get the code and skip my ramblings go here.

    When I set out to teach myself flex I decided that it would be a good experiment to convert my gTraffic application, which is written using GWT, to a Flex version. Rejecting the Yahoo Flex map I ended up with a kind of hybrid solution of a Google map with a Flex back end. This was made possible by the extremely clever IFrame component.

    The IFrame component was developed originally I believe by Christophe Conraets and then subsequently improved by Brian Deitte.

    There are a number of issues I had with the original code (as clever as it is).

    Okay, none of those points are particularly onerous but what I really wanted was a true drop in component. You put it in, give it the source url and away you go without having to muck about with the web page.

    Have I succeeded? Well sort of. The new component implements the following.

    Unfortunately you still have to make the change for the wmode, ‘opaque’. I’m not going to attempt to explain why you need this. You can see the change in the zipped source files here

    And that’s all. you can get the source and examples here.

    I should mention a few things which may puzzle a few of you.

    I submit this control back to the Flex community in the spirit that it was contributed in the first place.

    Update: This is now a full blown component and you can find it on Google code here.

    Related posts:

    IFrame demos updated to Flexbuilder 3 & Other stuff
    IFrame Resizing
    IFrame comms demo update

    Flex: GWT: Developer Experience – Part 1

    This is the start of a three part article focusing on my experience of using GWT and then Adobe Flex to implement versions of my UK traffic information site gTraffic.

    You can compare the two by looking at the GWT version and the Flex version.

    As an inital primer I will talk about the original website the GWT and Flex version were based on before getting into description of my experience of the technologies of GWT and Flex.

    The intial version of the site was written using a combination of javascript and html with some AJAX to fetch and parse the data from the server side. It seems strange to contemplate that seems pretty ‘old-hat’ now but at the time it was really cutting edge. It was only just over a year ago really but how things have moved on!

    The data was intially supplied from the BBC TPEG data feed which was later moved to the BBC backstage site which provides a place for mashups using the BBC data. The traffic data in TPEG format was downloaded and massaged into a simpler form using a number of Python scripts.

    My intial thought was to use Java to parse the traffic data but it turned out that my ISP didn’t support this.

    Instead I tried Perl but the experience was so awful I switched to Python even though my desktop developer mentality screamed against using tabs to act and formatting for block statements. The Python IDE bundled with the development kit it usable but having experience of Eclipse I settled with Pydev which had a great debugger and integrates into Eclipse really well.

    The hardship of using CSS to layout the original site was a real pain. Although it looked okay it didn’t have great deal of appeal in terms of look and feel (you will have to take my word for this). I think my vision was sound as both the GWT and Flex versions adopt a similar layout but it was clearly a web page type of look and I was trying for something slicker.

    The original site was written off the back of the experience I had gained in developing a few few sites using JSP and Tomcat for my employer. I had enough knowledge of html and javascript to develop a Google Maps site which took the traffic feeds from the BBC and plot traffic events on a map, plus put in a few nice touches for navigation. Struggling with CSS and layout issues didn’t make for a straightforward experience though and I suspect this is the view of more then a few developers who come initially from a background in development for desktop applications.

    GWT came along at just the right time. I was looking for something that offered the ability to write an ‘application’ with real GUI controls and which ran in the browser. The added bonus was that it was using java which I already knew pretty well so it was tailor-made for my needs.