FXWidget = Flex SWF + SWFObject + Custom HTML Template
DIGG IT!
15
Comments
Published
Saturday, August 18, 2007
at
4:12 PM
.
I have long thought one of the best uses of Flex is for HTML page widgets. One of the barriers here is the default Flex generated HTML. It makes it very hard to add just a single Flex application into a webpage let alone 2 or more. I have created a new project called FXWidget to make this easy and wigitize Flex. FXWidget includes SWFObject, Geoff Stearns sweet JS library for SWF detection and embedding, and a new HTML Template for Flex generating simple HTML tags for page insertion.
DOWNLOAD FXWidget Flex Builder Project
SAMPLES (VIEW HTML SOURCE):
Full Banner
Half Banner
Rectangle
Vertical Rectangle
Large Rectangle
Medium Rectange
Skyscraper
The goal here is to make things easy, super cut and paste easy to add a Flex SWF onto any page on the internet. It isn't quite there yet but this is major progress and I will be refining this methodology over time. Here is what I was thinking:
Steps:
1. ADD a SCRIPT tag loading SWFObject.js within the HEAD tag.
2. Copy and Paste DIV contents!
3. Done
The real hack here is loading a SWF file within a SCRIPT tag. When the SWF is fully loaded, the SWF is then written into the DOM. Under these circumstances, the Flex SWF file is fully preloaded before the object/embed tags are written to the HTML DOM using SWFObject. Ideally the page fully loads and content is viewable as the widgets load without disturbing the page.
Currently the Flex SWF files are large for this purpose but with Flex 3 and Framework caching Flex will begin to be used in these situations. This technique is also very appropriate for use with ASProject and works perfectly.
The key is the file generation pattern within a Flex or ASProject in Flex Builder. The /html-template/ folder contains a template file called index.template.html. This file generates HTML files for every Flex Project File and thus can be customized using variables. In the index.template.html file notice the ${variable} these project properties within the MXML file being compiled and allow you to generate HTML/JS to suit your project needs. In this case I used it to embed using SWFObject vs the regular Flex methodology.
NOTE:
This technique does not currently support HistoryManager and DeepLinking in Flex 3. It can work with these features but support has not been added, feel free to add it in!
So that is FXWidget. Have fun and FXWidget! Woot!
Cheers,
Ted :)
This will be great for my AmazonRank widget!
Excellent idea. This makes it much simpler to add a Flex widget. I had to copy approx. 60 lines of code just to add my mini multi RSS reader to a page using the normal index.template.html. Also using the div tag with an id value will enable us to use CSS to position the div.
Thanks for providing the examples.
Doesn't seem to be working on Safari...
I am seeing it work on Safari 3.0.3. If there is a weak point in this solution it is not using the new Image() to load the SWF file and the onload event. The SCRIPT tag onload event seems flaky in some browsers.
Ted :)
Doesn't seem to work for me in IE or Safari.
Here were my versions:
IE 7.0.5730.11 on XP SP2
Safari 2.0.4 on OS 10.4.10
I dual-boot my MacBook Pro and just get a blank page in both OSes when I click on the sample full-, half- etc. links in the post.
BTW Ted, Safari 3.x s only a public beta, so the majority of the Mac world is likely on the 2.x code base like I am since Software Update isn't publishing that build of Safari.
Beadle Fox,
Do you have Flash Player 9 installed? The SWFObject will only write out object/embed if an appropriate player is detected else nothing.
This could explain these cases where I have seen them work.
Ted
Ted,
Yep- FP 9 across the board on both OSes. The Mac is *not* a debug player, but the Win XP is the FP debug player.
Mac: 9,0,47,0
XP: 9,0,28,0
Ted,
On the XP SP2 / IE side, I actually get a "Done, With Errors" message in the status bar. It states:
Line: 2
Char: 5
Error: Expected ';'
Code: 0
URL: http://onflex.org/FXWidget/VerticalRectangle.html
Looks like (in my case) there is definitely something in the JavaScript that IE 7 doesn't like.
I am 90% sure this is the loading of the SWF within SCRIPT tag. This will need to go via new Image() to handle compatibility.
I will make the modifications and repost. Ah the fun of browser compatibility, it makes the SWF/Flex/Flash work so enjoyable by comparison.
More to come! BTW, thanks for posting bugs and detail it helps a ton.
ted :)
Hi Ted,
I've made some "improvements" to your template and posted it as a project on my blog. My approach was to use the Prototype.js library (I'm somewhat of a fan of that lib) and pre-load the swf via an Ajax call behind the scenes. I then use a closure to trigger the SWFObject initialization.
I've also restored the history functionality, though I'd like to do it a little cleaner than what it currently is.
Take a look @: http://www.beauscott.com/2007/08/20/ted-patricks-fxwidget/
Thanks!
Beau
Ted, I have Safari 2.0.4 and FP MAC 9,0,60,169 on a Powerbook G4 and I don't see the banners. Beau's examples work.
Randy
Just updated all the examples and fixed bugs. Ted :)
SwfObject can already pretty easily be integrated with history/deeplinking, see:
www.asual.com/swfaddress
Note that I don't think you need the script tag hack, if you put the swfobject.js reference in the body of the HTML file, just above the div tag. Originally I followed the code just below this, and didn't learn until later that I was not doing it exactly the same way as his example. I've always done it this way and never had a problem with SWFObject. Just my 2c.
Working great.. But Unfortunately my application requires something different. As i have a widget for which should not be referring to any external javascript functions or external javascript file, Can i get any sort of help, where i use a simple embed tag and/or the object tag to do the same.
Any help regrading this would be highly appreciated.