Below is how to create an HTML 5 and Iphone App of the Contact object using Force.com
This tutorial is 2 parts, Part 1: Contact HTML5 App, Part 2: Contact Iphone App
Step 1. Login into your Force.com account
Step 2. Make sure there is some contacts loaded into your contact object.
Step 3. Load the following css and js files into Status->Developer->Static Resources
- jquery.mobile-1.0rc2.min.css
- jquery.min.js
- jquery.mobile-1.0rc2.min.js
- style.css
Step 4: Create the following file – Resource.sales file:
var currentContactDetails = new Array();
var currentContact = new Array();
var $j = jQuery.noConflict();
$j(document).ready(function() {
if(window.location.href.indexOf('#') > 0) {
window.location.href = window.location.href.split("#")[0];
}
addPageListeners();
$j.mobile.showPageLoadingMsg();
getContacts(function(){
$j.mobile.hidePageLoadingMsg();
});
});
function addPageListeners() {
$j('#addcontact').live('pagebeforeshow', function () {
$j("#contactNameTxt").val('');
});
$j('#addcontactdetails').live('pagebeforeshow', function () {
$j("#contactNameTxt").val('');
$j("#contactDepartment").val('');
$j("#contactTitle").val('');
$j("#contactNumber").val(0);
$j("#contactHomeNumber").val(0);
$j("#contactEmail").val('');
$j("#contactFax").val(0);
});
}
function getContact(callback) {
$j('#contactlist').empty();
SalesKingController.queryContact(function(records, e) { showContact(records, callback) }, {escape:true});
}
function showContact(records, callback) {
currentContact.length = 0;
for(var i = 0; i < records.length; i++) { currentContact[records[i].Id] = records[i]; }
var x = 0;
$j.each(records,
function() {
$j(<li></li>)
.attr('id',this.Id)
.hide()
.append(this.Name)
.click(function(e)
{
e.preventDefault();
$j.mobile.showPageLoadingMsg();
$j('#ContactName').html(currentContact[this.id].Name); $j('#ContactDepartment').html(currentContact[this.id].Department); $j('#ContactTitle').html(currentContact[this.id].Title); $j('#ContactNumber').html('$'+currentContact[this.id].MobilePhone); $j('#ContactHomeNumber').html('$'+currentContact[this.id].HomePhone); $j('#ContactEmail').html('$'+currentContact[this.id].Email); $j('#ContactFax').html('$'+currentContact[this.id].Fax); var onLoadComplete = function() { $j.mobile.hidePageLoadingMsg(); $j.mobile.changePage('#detailpage', {changeHash: true}); } setTimeout(onLoadComplete, 10); }) .appendTo('#contactlist') .show(); x++; }); $j('#contactlist').listview('refresh'); if(callback != null) { callback();} }
Step 3. Create a new Apex application by entering the following URL in your browser window:
https://c.na10.visual.force.com/apex/applicationName
applicationName can be any name eg. ContactApp
Step 4. Copy and paste this code:
<apex:page showHeader=”false” standardStylesheets=”false” cache=”true” controller=”SalesKingController” >
<apex:outputText escape=”false” value=”{!'<!DOCTYPE html>’}”/>
<html>
<head>
<title>SalesKing – Sales Kings HTML5 App</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<link rel=”stylesheet” href=”{!URLFOR($Resource.cloudtunes_jQuery, ‘jquery.mobile-1.0rc2.min.css’)}” />
<script type=”text/javascript” src=”{!URLFOR($Resource.cloudtunes_jQuery, ‘jquery.min.js’)}” />
<script type=”text/javascript” src=”{!URLFOR($Resource.cloudtunes_jQuery, ‘jquery.mobile-1.0rc2.min.js’)}” />
<script type=”text/javascript” src=”{!URLFOR($Resource.sales)}” />
<link rel=”stylesheet” href=”{!URLFOR($Resource.style, ‘style.css’)}” />
<link rel=”stylesheet” href=”{!URLFOR($Resource.darkblue, ‘dark_blue.css’)}” />
<script type=”text/javascript” src=”{!URLFOR($Resource.inmobile, ‘in-mobile.js’)}” />
</head>
<body>
<div style=”height:24px;display:block !important;visibility:visible !important; width:24px”></div>
<!– /IClista –>
<div data-role=”page” id=”home” data-theme=”b”>
<!– /Header –>
<div data-role=”header”>
<a href=’#’ id=”logout” class=’ui-btn-left’ data-icon=’home’ >Home</a>
<h1>Salesforce Sales King App</h1>
</div>
<div data-role=”content”>
<ul id=”contactlist” data-inset=”true” data-role=”listview”
data-theme=”c” data-dividertheme=”b”>
</ul>
</div>
</div>
<div data-role=”page” data-theme=”b” id=”detailpage”>
<div data-role=”header”>
<a href=’#mainpage’ id=”backAlbums” class=’ui-btn-left’ data-icon=’arrow-l’ data-direction=”reverse”>Contacts</a>
<h1>Contacts</h1>
</div>
<div data-role=”content”>
<h1 id=”ContactName”></h1>
<table>
<tr><td>Department:</td><td id=”ContactDepartment”></td></tr>
<tr><td>Title:</td><td id=”ContactTitle”></td></tr>
<tr><td>Mobile Number:</td><td id=”ContactNumber” type=”number”></td></tr>
<tr><td>Home Number:</td><td id=”ContactHomeNumber”></td></tr>
<tr><td>Email:</td><td id=”ContactEmail”></td></tr>
<tr><td>Fax:</td><td id=”ContactFax”></td></tr>
</table>
</div>
</div>
</body>
</html>
</apex:page>
Step 5. Apex will ask if you want to create the new ‘ContactController’. Click Yes to create the Controller. Paste the controller code:
public with sharing class SalesKingController
{
@RemoteAction
public static List<Contact> queryContact()
{
return [SELECT Id, Name, Department, Title, HomePhone, MobilePhone, Fax, Email FROM Contact ORDER BY Name LIMIT 50];
}
}
Will look like below:
Click on a Contact to get the details
Thys Michels Blog 
I am exicited about HTML5 but Flash can do all these things html5 can do in a better way.Creating slideshow in HTML5! wow! what, flash did that 10 years ago! It is very easy to create a flash animation, for example a ball bouncing in flash professional in less than am minute. Javascript is a mess when compared to AS3.