Designing Solutions with Visualforce Mobile Components

I’ve started looking heavily into the Visualforce Mobile Components, a community-maintained set of Visualforce components that make it easy to develop Visualforce pages for tablet browsers. It’s open source and has an above average set of docs on both Github and on a Developerforce wiki. While these docs are certainly useful to devs, I was looking for an evaluative look at the solution as a whole and a judgement of its architecture.

So, the big question: What do these components provide that makes it so easy to make Salesforce tablet web apps? Well, rather than this project choosing to write the low level, cross-browser code from scratch, it delegates the rendering duties to jQuery Mobile. Most of the components in this project constitute a framework around jQuery Mobile. These components are relatively high-level, being functions of Salesforce terms, such as Sobjects and fields, that produce tablet-friendly list, button, and menu HTML around the specified Salesforce objects. This UI work being the first half of the VF Mobile Components project, let’s briefly look at its architecture.

When creating a Visualforce page using standard components, we think at a lower level. For example, to make a pageBlock that contains several fields we are forced to spell out each field’s rendering element and its placement. After this, the page is often given custom styling, such as logos, custom component placement, and color branding, to personalize it for the org.

The VF Mobile Component project, with its current set of components, does not allow many opportunities for this kind of custom styling. Rather, it uses a more declarative approach, in which a few HTML templates are provided that are designed to look and feel satisfying on a smaller screen, such as a tablet. When designing a mobile VF app with these components, you will be choosing from a set of templates that will accept your choice of SF objects and fields.

As an example of the current templates, one higher-level template is the SplitView template, in which you can specify one template to fill the left quarter of the screen and another template to fill the right three-quarters of the screen. An application that uses this template may have a list of Sobjects records on the left and details of the selected record on the right. Other template options are the Sobject list and detail components, which occupy the whole screen.

New components are desperately needed by this project, which is where the community must contribute. It looks as if these components won’t be too difficult to create, since the provided platform code in Apex is quite flexible. There is plenty of jQuery Mobile that is still unrepresented by this project, so here’s what interested parties must do: take a look at the jQuery Mobile docs, find a feature that you like, and port it into a VF component in a similar manner to existing mobile components. Once you have it working pretty well, send a pull request upstream to the Forcedotcom Github repository and spread the word about your addition.

This is a pretty exciting set of components and I hope people start using it.

Posted in: Salesforce