sbob-sfdc/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <!-- include jquery mobile -->
    <link rel="stylesheet" href="jquery/jquery.mobile-1.0b2.min.css" />
    <script src="jquery/jquery-1.6.2.min.js"></script>
    <script src="jquery/jquery.mobile-1.0b2.min.js"></script>

    <!-- include phonegap / callback -->
	<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
    <!-- required for oauth plugin support -->
    <script type="text/javascript" src="SalesforceOAuthPlugin.js"></script>

    <!-- include forcetk for REST transaction support -->
    <script src="forcetk.js"></script>

    <!-- include local utility functionality -->
    <link rel="stylesheet" type="text/css" href="SFHybridApp.css" />
    <script type="text/javascript" charset="utf-8" src="SFHybridApp.js"></script>

    <script type="text/javascript" charset="utf-8">


    // The version of the REST API you wish to use in your app.
    var apiVersion = "v25.0";

	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e)
	{
      e.preventDefault();
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/

	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// do something with the url passed in.
	}
	*/

    var forcetkClient;
    var debugMode = true;

    jQuery(document).ready(function() {
        //Add event listeners and so forth here
        SFHybridApp.logToConsole("onLoad: jquery ready");
		document.addEventListener("deviceready", onDeviceReady,false);

    });

    // When this function is called, PhoneGap has been initialized and is ready to roll
    function onDeviceReady() {
        SFHybridApp.logToConsole("onDeviceReady: PhoneGap ready");
		//Call getAuthCredentials to get the initial session credentials
        SalesforceOAuthPlugin.getAuthCredentials(salesforceSessionRefreshed, getAuthCredentialsError);

        //register to receive notifications when autoRefreshOnForeground refreshes the sfdc session
        document.addEventListener("salesforceSessionRefresh",salesforceSessionRefreshed,false);

        //enable buttons
        regLinkClickHandlers();
    }


    function salesforceSessionRefreshed(creds) {
        SFHybridApp.logToConsole("salesforceSessionRefreshed");

        forcetkClient = new forcetk.Client(creds.clientId, creds.loginUrl);
        forcetkClient.setSessionToken(creds.accessToken, apiVersion, creds.instanceUrl);
        forcetkClient.setRefreshToken(creds.refreshToken);
        forcetkClient.setUserAgentString(creds.userAgent);

        // log message
        SFHybridApp.logToConsole("Calling out for records");
        // register click event handlers -- see inline.js
        // regLinkClickHandlers();
        // retrieve Merchandise records, including the Id for links
        forcetkClient.query("SELECT Id, Name, Price__c, Quantity__c FROM Merchandise__c", onSuccessSfdcMerchandise, onErrorSfdc);
    }


    function getAuthCredentialsError(error) {
        SFHybridApp.logToConsole("getAuthCredentialsError: " + error);
    }

    </script>

	<!-- load our app-specific code -->
    <script src="inline.js"></script>

  </head>
  <body>

      <!-- Main page, to display list of Merchandise once app starts -->
      <div data-role="page" data-theme="b" id="mainpage">
          <!-- page header -->
          <div  data-role="header">
              <!-- button for logging out -->
              <a href='#' id="link_logout" data-role="button" data-icon='delete'>
                  Log Out
              </a>
              <!-- page title -->
              <h2>List</h2>
          </div>
          <!-- page content -->
          <div id="#content" data-role="content">
              <!-- page title -->
              <h2>Mobile Inventory</h2>
              <!-- list of merchandise, links to detail pages -->
              <div id="div_merchandise_list">
              <!-- built dynamically by controller function onSuccessSfdcMerchandise -->
              </div>
          </div>
      </div>

      <!-- Detail page, to display details when user clicks specific Merchandise record -->
      <div data-role="page" data-theme="b" id="detailpage">
          <!-- page header -->
          <div  data-role="header">
              <!-- button for going back to mainpage -->
              <a href='#mainpage' id="backInventory" class='ui-btn-left' data-icon='home'>
                  Home
              </a>
              <!-- page title -->
              <h1>Edit</h1>
          </div>
          <!-- page content -->
          <div id="#content" data-role="content">
              <h2 id="name"></h2>
              <label for="price" class="ui-hidden-accessible">Price ($):</label>
              <input type="text" id="price" readonly="readonly"></input>
              <br/>
              <label for="quantity" class="ui-hidden-accessible">Quantity:</label>
              <input type="number" id="quantity"></input>
              <br/>
              <a href="#" data-role="button" id="updateButton" data-theme="b">Update</a>
              <!-- note that number is not universally supported -->
          </div>
      </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	<!-- include jquery mobile -->
	<link rel="stylesheet" href="jquery/jquery.mobile-1.0b2.min.css" />
	<script src="jquery/jquery-1.6.2.min.js"></script>
	<script src="jquery/jquery.mobile-1.0b2.min.js"></script>

	<!-- include phonegap / callback -->
	<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
	<!-- required for oauth plugin support -->
	<script type="text/javascript" src="SalesforceOAuthPlugin.js"></script>

	<!-- include forcetk for REST transaction support -->
	<script src="forcetk.js"></script>

	<!-- include local utility functionality -->
	<link rel="stylesheet" type="text/css" href="SFHybridApp.css" />
	<script type="text/javascript" charset="utf-8" src="SFHybridApp.js"></script>

	<script type="text/javascript" charset="utf-8">


	// The version of the REST API you wish to use in your app.
	var apiVersion = "v25.0";

	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e)
	{
	e.preventDefault();
	};
	document.addEventListener("touchmove", preventBehavior, false);
	*/

	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
	// do something with the url passed in.
	}
	*/

	var forcetkClient;
	var debugMode = true;

	jQuery(document).ready(function() {
	//Add event listeners and so forth here
	SFHybridApp.logToConsole("onLoad: jquery ready");
	document.addEventListener("deviceready", onDeviceReady,false);

	});

	// When this function is called, PhoneGap has been initialized and is ready to roll
	function onDeviceReady() {
	SFHybridApp.logToConsole("onDeviceReady: PhoneGap ready");
	//Call getAuthCredentials to get the initial session credentials
	SalesforceOAuthPlugin.getAuthCredentials(salesforceSessionRefreshed, getAuthCredentialsError);

	//register to receive notifications when autoRefreshOnForeground refreshes the sfdc session
	document.addEventListener("salesforceSessionRefresh",salesforceSessionRefreshed,false);

	//enable buttons
	regLinkClickHandlers();
	}


	function salesforceSessionRefreshed(creds) {
	SFHybridApp.logToConsole("salesforceSessionRefreshed");

	forcetkClient = new forcetk.Client(creds.clientId, creds.loginUrl);
	forcetkClient.setSessionToken(creds.accessToken, apiVersion, creds.instanceUrl);
	forcetkClient.setRefreshToken(creds.refreshToken);
	forcetkClient.setUserAgentString(creds.userAgent);

	// log message
	SFHybridApp.logToConsole("Calling out for records");
	// register click event handlers -- see inline.js
	// regLinkClickHandlers();
	// retrieve Merchandise records, including the Id for links
	forcetkClient.query("SELECT Id, Name, Price__c, Quantity__c FROM Merchandise__c", onSuccessSfdcMerchandise, onErrorSfdc);
	}


	function getAuthCredentialsError(error) {
	SFHybridApp.logToConsole("getAuthCredentialsError: " + error);
	}

	</script>

	<!-- load our app-specific code -->
	<script src="inline.js"></script>

	</head>
	<body>

	<!-- Main page, to display list of Merchandise once app starts -->
	<div data-role="page" data-theme="b" id="mainpage">
	<!-- page header -->
	<div data-role="header">
	<!-- button for logging out -->
	<a href='#' id="link_logout" data-role="button" data-icon='delete'>
	Log Out
	</a>
	<!-- page title -->
	<h2>List</h2>
	</div>
	<!-- page content -->
	<div id="#content" data-role="content">
	<!-- page title -->
	<h2>Mobile Inventory</h2>
	<!-- list of merchandise, links to detail pages -->
	<div id="div_merchandise_list">
	<!-- built dynamically by controller function onSuccessSfdcMerchandise -->
	</div>
	</div>
	</div>

	<!-- Detail page, to display details when user clicks specific Merchandise record -->
	<div data-role="page" data-theme="b" id="detailpage">
	<!-- page header -->
	<div data-role="header">
	<!-- button for going back to mainpage -->
	<a href='#mainpage' id="backInventory" class='ui-btn-left' data-icon='home'>
	Home
	</a>
	<!-- page title -->
	<h1>Edit</h1>
	</div>
	<!-- page content -->
	<div id="#content" data-role="content">
	<h2 id="name"></h2>
	<label for="price" class="ui-hidden-accessible">Price ($):</label>
	<input type="text" id="price" readonly="readonly"></input>
	<br/>
	<label for="quantity" class="ui-hidden-accessible">Quantity:</label>
	<input type="number" id="quantity"></input>
	<br/>
	<a href="#" data-role="button" id="updateButton" data-theme="b">Update</a>
	<!-- note that number is not universally supported -->
	</div>
	</div>
	</body>
	</html>