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