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.
I have finally got round to making some updates to the flexTraffic site.
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.
There are a number of issues I had with the original code (as clever as it is).
- It needs the developer to add in an iframe explicitly to the holding page of the application. There are different techniques for implementing multiple tabs one of which was to add in multiple iframes, again by hand.
- I was using the accordion control and noticed that the component was unable to detect that it wasn’t visible behind many other components and switch itself off. Handling this required sticking in code which was aware of the structure of the application when I just wanted to forget about that stuff.
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.
- Adds the required iframe element directly into the DOM for you. One for each instance of the control.
- Detects when the component is not visible and switches off the html.
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.
- The code to detect visibility isn’t perfect. You may have to force the control visible on start-up if it is within the main view of your application. If it’s hidden – no problem it’s just kicking it off that might cause you an issue.
- Detecting visibility works by ‘seeding’ all the container objects up the display path, to the root of the application, with event handlers which trigger a call to the control. The control maintains a list of the views all the way to itself and uses this to detect if the display path indicates that it is exposed.
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.
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 start
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.
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.