DIGG IT! Flex Templating provides rich client side website templating using MVC (Model-View-Controller). FXT solves a host of problems for using Flex and Flash Player for website development.
Yahoo View on Yahoo Web Search Model using FXT
Home Template View
Results Template View
Both of these pages use the same SWF template but use a different model within the HTML source.
Flex View on Yahoo Web Search Model using FXT
Home Template View
Results Template View
Both of these pages use the same SWF template but use a different model within the HTML source.
FXT Component Use Examples
Basic Template Model
List Example
DataGrid Example
Download FXT Version 1.0 Source
Model == XML Island embedded in HTML
View-Controller == Flex 2 SWF
This is an implementation of client side templating using Flex. It is a very compatible and productive way to make data driven websites very quickly. The custom Yahoo Web Search mashup took less than an hour to create and the entire UI can be reskinned by changing a single SWF file.
The key point is that the Model within the HTML page drives the View of a Flex application. It allows Flex to compete in a page centric world and expands the reach of the Flex marketplace. In a typical HTML based application, data (Model) and tags (View) are merged and intertwined. With FXT, the data (Model) is separate from the templated Flex code (View) until both arrive on the end users machine. Both pieces need not arrive or update at the same time, creating a more real-time feel than most HTML applications have. This is because the data (Model) remains structured all the way to the client side where it is templated at runtime rather than being merged at the server. Using E4X, you can utilize components, data binding, and async loading to create truly immersive rich web applications. Reskinning in this paradigm is simple. If the developer changes the SWF template on the server, the entire UI will change instantly. This simplifies development and deployment of larger scale sites and allows for small teams to edit sites in an extensible and productive manner.
The solution is also 100% SEO compatible as the Model of a page is within the HTML of the application. Better still, the data can be easily parsed with any xml parser by web crawlers or other Mashup applications.
FXT Project Page
FXT Blog
FXT Bug Tracking
Download FXT Version 1.0 Source
FXT SVN Repository
svn checkout http://fxt.googlecode.com/svn/trunk/ fxt
Benefits:
Model Driven - The data (Model) is in HTML as XML. It is browser and search engine compatible.
Restful URLS - The urls are simple, bookmarkable, and back button supported.
Classic MVC - Model is XML embedded in HTML, View and Controller are Flex-generated SWFs.
E4X is used to render data within the template SWF file.
Flex States are supported.
Rapid - Just open a project, edit the XML model, and edit the Flex template to create an interactive site. Layout is component based and easy with E4X.
Fast - Once the SWF file is cached, each page load time is 100% data loading and Flex instantiation.
Enjoy FXT!
Ted Patrick
Flex Evangelist
Adobe Systems
Its a neat concept. My big wish is that the TextArea component in Flash/Flex could render more than the most basic HTML and recognize image placement. I think that would go a long way towards 'ease of use' in creating sites using Flash and Flex.
What if there were a first class HTML component in Flex? I think the answer lies in the fact that Flex is extensible and innovative developers will find a way.
Claus, please code faster!
Ted :)
Is there any way you could make flex open a new tab in firefox on a middle click? My biggest gripe with flex is that you can not open a new tab from flex, only a new window or refresh the current window.
hey.. that's what I've been trying as long as I use flash... the damn middle button / new tab.. I cant live without that... I even dont click on flash banners because of that...
really sux.....
Its all lies, Ted doesn't put his pants on one leg at a time, but instead instantiates the pants, then reparents them onto this body.
Great work Ted, now to come up with a hybrid child of this mixed with some of that whacky Claus's ideas followed through with some of the ideas you once mentioned on MSN many moons ago - Ted:Lanugage :)
Scott,
I prefer shorts and chacos on a beach.
import com.ted.*
import hawaii.maui.*
ted = new Ted()
ted.addChild( new Shorts() );
ted.addChild( new Chacos() );
kapaluaNorth = new Beach()
kapaluaNorth.addChild(ted)
Although it might be better to create an XML model and let the view decide what I look like each day based on location. Ahhh client templating...
Scott, drop me an email at tpatrick@adobe.com.
Cheers,
Ted :)
This looks really nice. It's one of the things that makes me want to give flex a try. I've been keeping an eye on flex's capabilities but haven't made the jump yet.
My only real gripe with flex is the lack of normal HTML functionality. I can't cut/paste from the results and I can't highlight any of the URL's and "copy URL to clipboard." This is a big barrier. Is there a way around it? Hopefully something that would work in general for all text rendered?
The HTML and the Flex/FlashPlayer DOM are wildly different. There is a bit of impedence mismatch here but nothing that some good tooling and custom tags could not eliminate.
First, MXML is XML strict so poorly formatted HTML will not port well.
Second, I question the mixing of formatting and data. Data should remain usable at all times on the client side and formatting should be isolated in the view. This requires some new tools in the form of using E4X (ECMA 4 XML), components, and binding. The result is a very good templating model built on a firm foundation.
I am porting an HTML site to FXT now and am learning many tricks to implementing HTML style layout in FXT. We need a specilized component set for FXT to handle the HTML style layouts but using E4X as the model.
My 2 cents,
Ted
I recall reading in the docs that a parameter passed in via flashvars can only be 64kB in size.. is this true? And if so, is there an alternative solution?
This is a follow-on to the two Anonymous posts regarding the absence of Flex/Flash support for "open a new tab".
I am with you!!! And IE7's imminent release will soon be bringing tabbed browsing to the masses in the IE world too. Now the absence of "open a new tab" support in Flex/Flash content will be even more apparent.
fyi … I have researched this and my read is that the problem lies less with Flex/Flash (aka the Flash Player), but more in that there is no cross-browser standard for "open a new tab".
As best I can see, a solution may come upon future browser adoption of the CSS3 CSS3
"target-new: tab" property.
Since Flash Player lives in browsers, until a standard is adopted across browsers, it might be an undo burden on the Flash Player development team to implement browser testing logic to support differing "open a new tab" interfaces.
hth,
g
I am a Flex NewBee, and never done any kind of coding before, but I actually had a chuckle at the instantiate Ted Code, so I must be getting somwhere :)
I thought it was my stupidity, as to why I could not get to grips with html formated text in flex, why I couldn't just paste a block of text in, without my code giving me errors. Now I dont feel so bad knowing it is a limitation.
But it is possible with CSS is it not? Any pointers to some examples would be great.. meanwhile the search continues.
hey Ted,
concept looks great and of course SEO is vital for flash and (especially) flex's success...
have a question though - how would one use this in a dynamic, data driven site, for example one written using AMFPHP?
Cheers
Hi Ted,
Can you please provide an example of how we should embed the XML into our web page? The only clear example that I have found was on Judahs Blog.
He uses a "script tag" with the type attribute set to 'type="text/xml"'.
I was just curious if this is the way you embedded your XML data and if using the "script tag" as suggested on Judahs Blog is SEO. I have heard from others that search engines will ignore data in the script tag.
Thanks!