Thursday, August 10, 2006

FXT - Flex Templating [Archive URL] [Comments: 4]

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

[Archive URL] [Comments: 4] Ted Patrick 8:50 AM


Comments:

why is it that no flex apps actually work?

ReferenceError: Error #1069: Property hasDefinition not found on flash.system.ApplicationDomain and there is no default value.
at mx.managers::SystemManager/getDefinitionByName()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::addingChild()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::rawChildren_addChildAt()
at mx.managers::SystemChildrenList/addChild()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::initialize()
at mx.managers::SystemManager/::initHandler()
# posted by evenamonkey : 2:23 PM [   ]

You have a beta version of Flash Player 9 installed.

I will update the FXT Flash Player detection so that your player will self upgrade.

Regards,

Ted :)
# posted by Ted Patrick : 3:24 PM [   ]

Great stuff Ted!

I have a Flex based blogging system and tonight figured I'd play around with your templating routines to see about getting better SEO. Normally the blog runs in two stages...a standard view (using an html embed) and a permalinked page where I send all permalink hits to with flashvar pickups. This ends up being the perfect scenario to bring your routines onboard because I can still dedicate the main wrapper to the template using html without permalink hits (expecting a php flashvars) having to share it.

Right out of the gate it works great. This is the first mockup simply pulling all the data from MySQL that normally populates my main stage containers. I hit the database...inject it into the template as concatenated XML and write it once all the sheep are in the pen. What I'll most likely do is tie template generation to my admin panel so if I make any changes, create new articles, links, etc...it will generate a new template based on current data on the fly.

FXT test pulls:

http://www.flex-fanatic.com/Flex_FXT/test.html

Target page once I rework my original frontend:

http://www.flex-fanatic.com

Entry is faster as well because I get to offload as many httpservice requests as I care to model in the template.

You've got me hooked! Wonderful job and very creative thinking sir!

Chris
# posted by Chris Seahorn : 6:20 PM [   ]

Your first point under benefits states this technique is search engine compatible.

Can you provide evidence that search engines are indexing the XML content?

I've entered more details in issue 3 on your google code site here:

http://code.google.com/p/fxt/issues/detail?id=3

Thanks
# posted by jg : 7:59 AM [   ]

Post a Comment