I wanted to do a project to learn salesforce, but not a trivial hello
world style example. I had recently played around with jQuery Mobile, but
didn't do anything significant with it. I decided to put together a basic
mobile CRM app. Here's what the finished app looks like.

contact list screen shot view contact screen shot edit contact screen shot

Salesforce provides a full-featured environment for free to anyone. It takes no time to sign-up for this Developer Edition, and you get access to
everything. If you're just getting started with salesforce, I can't
recommend enough
the online tutorials, workbooks, and documentation at
developer.force.com.

Accessing the App Data

Our app will contain Contact and Account data. We'll use Apex Web Service methods to provide the data. We can get all our Contacts with the following:

{% codeblock lang:java %} webService static List getContacts() {
ApexPages.StandardSetController setCon = new ApexPages.StandardSetController( Database.getQueryLocator( [select id, name, lastname, firstname, title, department, phone, email from Contact])); return (List)setCon.getRecords(); } {% endcodeblock %}

Next we need to call the web service method from the client code. We'll use the force.com ajax apex javascript libraries to access our data. Add these script references to your page <head> section.

{% codeblock lang:html %}

{% endcodeblock %} To call the web service method from JavaScript we use this simple one-liner. {% codeblock lang:js %} var contacts = sforce.apex.execute("MyWebService", "getContacts", {}); {% endcodeblock %} ## Building the UI ## Our mobile app UI will be 100% [jQuery Mobile], and we can use [force.com] [Sites] to provide pure web content. [Sites] by default provides configurable headers, footers, navigation, etc. that you can apply themes to. We don't want any of this in our app since we'll be controlling everything in the UI. To turn off the default stylesheets, header, and navigation elements your `apex:page` element should set the corresponding attributes, and should look similar to the following: {% codeblock lang:html %} {% endcodeblock %} Now we'll add in the jQuery Mobile references. {% codeblock lang:html %} {% endcodeblock %} The beauty of jQuery Mobile is that all you have to do is markup your html with the correct attributes to get a mobile UI. You don't need to write any JavaScript. Usually you serve up the jQuery _Mobilized_ html from the server. We want our app to run and function when the device is offline, so we're going to generate the html at run-time on the client using JavaScript to remove the dependency on the server. To minimize the amount of html we embed in our JavaScript, we're going to use [jQuery Templates]. [jQuery Templates] allows us to write our html for the UI as we usually would, and to leave placeholders for the pieces we want to replace. Here's an example of a template used to generate a list page. {% codeblock lang:html %}

{% endcodeblock %}

The things wrapped in ${} are replaced with the values. The way we use the template is by calling the $.tmpl method.

{% codeblock lang:js %} var $page = $('#object-list-page-template').tmpl(data);
{% endcodeblock %}

jQuery Templates are very powerful, and really help with the maintainability of your code. Check out the documentation to learn more.

Conclusion

This provides an overview of the core pieces of the solution and the technologies used. If you like to dive in deeper, the complete source is available on github, and the working app is available here (must be viewed in a WebKit based browser).