Extending Visualforce's UI - Series Intro

Kyle
Roche

Welcome to the first in an on-going series of postings exploring the several approaches that are available for extending the Visualforce UI using different sets of 3rd party components. We'll look at technologies like Flex, Ext JS, YUI, and Google's Chart API to name a few.

Overview of Visualforce
Visualforce allows you to abstract the user interface layer from your standard Salesforce org and create something completely unique. Visualforce is the gateway to PaaS on the Force.com platform. Visualforce is built on the MVC Design pattern and leverages APEX define UI behaviors and navigation routines.

Extending Visualforce's UI Layer
In many cases the standard Visualforce UI elements available at GA don't meet every need. Instead of reverting to client side technologies and making calls back through the AJAX Toolkit we're going to walk you through some techniques to integrate 3rd party UI libraries and still leverage the server side power of Visualforce!

Static Resources in Visualforce
With Summer 08, we have a new kind of Salesforce storage designed specifically with Visualforce in mind, called Static Resources. You can upload files to Static Resources via Setup | Develop | Static Resources. Libraries or files uploaded to Static Resources can become items that you reference in your Visualforce pages. Things like stylesheets, JavaScript, images and even archives can be linked to through the $Resource global variable. For more information on Static Resources see the Visualforce Developer's Guide. Organize your Static Resources by compiling the items needed for your Visualforce Application into archive files (Remember, there is a 5MB per file limit). Visualforce can bind to files within the archive so there's no need to upload each file individually!

Stay tuned for our next posting where we'll integrate a DataGrid from Ext JS into a Visualforce Page.