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.
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).
- It requires the addition of a number of supporting javascript routines.
- 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.
- Inserts the javascript support rtns directly into the DOM for you. Multiple controls reuse the same routines.
- 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.
Related posts:
IFrame demos updated to Flexbuilder 3 & Other stuff
IFrame Resizing
IFrame comms demo update
Flex: GWT: Developer Experience – Part 1
- Introduction
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 start
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.