tyoshikawa1106/MobileSample_jQueryMobile.page

## MobileSample_jQueryMobile.page
<apex:page docType="html-5.0"
           showHeader="false" sidebar="false"
           standardController="Contact">
    <apex:stylesheet value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery-1.9.1.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'cordova.force.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'backbone/underscore-1.4.4.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'force.entity.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'SObjectData.js')}"/>
    <head>
        <title>Contacts</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <c:RemoteTK />

        <script type="text/javascript">
            var $j = jQuery.noConflict();
            var client = new remotetk.Client();
            Force.init(null,null,client,null);

            var Contacts = new SObjectData();
            Contacts.errorHandler = displayError;

            $j(document).ready(function() {
                regBtnClickHandlers();
                getAllContacts();
            });

            function getAllContacts() {
                Contacts.fetch('soql','SELECT id, firstName, lastName, phone from Contact LIMIT 100',function() {
                    showContacts(Contacts.data());
                });
            }

            function showContacts(records) {
                $j('#cList').empty();
                $j.each(Contacts.data(),
                    function() {
                    var newLi = $j('<li></li>');

                    var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.FirstName+ ' '+this.LastName+ '</a>');
                    newLink.click(function(e) {
                        e.preventDefault();
                        $j.mobile.showPageLoadingMsg();
                        $j('#fName').val(Contacts.findRecordById([this.id]).FirstName);
                        $j('#lName').val(Contacts.findRecordById([this.id]).LastName);
                        $j('#phone').val(Contacts.findRecordById([this.id]).Phone);
                        $j('#contactId').val(Contacts.findRecordById([this.id]).Id);
                        $j('#error').html('');

                        $j.mobile.changePage('#detailpage', {changeHash: true});
                    });
                    newLi.append(newLink);
                    newLi.appendTo('#cList');
                  //  x++;
                  });

                $j.mobile.hidePageLoadingMsg();
                $j('#cList').listview('refresh');
            }

            function addUpdateContact(e){
                e.preventDefault();
                var cId = $j('#contactId').val();
                var record = Contacts.findRecordById(cId);
                if(record == null) { //new record
                    record = Contacts.create();
                }
                record.FirstName = $j('#fName').val();
                record.LastName = $j('#lName').val();
                record.Phone = $j('#phone').val();
                Contacts.sync(record,successCallback);
            }

            function deleteContact(e){
                e.preventDefault();
                Contacts.remove(Contacts.findIndexById($j('#contactId').val()),successCallback);
            }

            function successCallback(r){
                getAllContacts();
                $j.mobile.changePage('#listpage', {changeHash: true});
            }

            function displayError(e){
                console.log(e);
                $j('#error').html(e[0].message);
            }

            function regBtnClickHandlers() {
                $j('#add').click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg();
                    $j('#fName').val('');
                    $j('#lName').val('');
                    $j('#phone').val('');
                    $j('#error').html('');
                    $j('#contactId').val('');
                    $j.mobile.changePage('#detailpage', {changeHash: true});
                    $j.mobile.hidePageLoadingMsg();
                });

                $j('#save').click(function(e) {
                   addUpdateContact(e);
                });

                $j('#delete').click(function(e) {
                   deleteContact(e);
                });
            }
        </script>
    </head>

    <body>
        <div data-role="page" data-theme="b" id="listpage">
            <div data-role="header" data-position="fixed">
                <h2>Contacts</h2>
                <a href='#' id="add" class='ui-btn-right' data-icon='add' data-theme="b">Add</a>
            </div>
            <div data-role="content" id="contactList">
                <ul id="cList" data-filter="true" 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" data-position="fixed">
                <a href='#listpage' id="back2ContactList" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Back</a>
                <h1>Contact Details</h1>
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <label for="fName">First Name:</label>
                    <input name="fName" id="fName" />
                </div>
                <div data-role="fieldcontain">
                    <label for="lName">Last Name:</label>
                    <input name="lName" id="lName" />
                </div>
                <div data-role="fieldcontain">
                    <label for="phone">Phone:</label>
                    <input name="phone" id="phone"/>
                </div>
                <h2 style="color:red" id="error"></h2><br/>
                <input type="hidden" id="contactId" />
                <button id="save" data-role="button" data-icon="check" data-inline="true" data-theme="b" class="save">Save</button>
                <button id="delete" data-role="button" data-icon="delete" data-inline="true" class="destroy">Delete</button>
            </div>
        </div>
    </body>
</apex:page>
	<apex:page docType="html-5.0"
	showHeader="false" sidebar="false"
	standardController="Contact">
	<apex:stylesheet value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.css')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery-1.9.1.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'cordova.force.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'backbone/underscore-1.4.4.min.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'force.entity.js')}"/>
	<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'SObjectData.js')}"/>
	<head>
	<title>Contacts</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<c:RemoteTK />

	<script type="text/javascript">
	var $j = jQuery.noConflict();
	var client = new remotetk.Client();
	Force.init(null,null,client,null);

	var Contacts = new SObjectData();
	Contacts.errorHandler = displayError;

	$j(document).ready(function() {
	regBtnClickHandlers();
	getAllContacts();
	});

	function getAllContacts() {
	Contacts.fetch('soql','SELECT id, firstName, lastName, phone from Contact LIMIT 100',function() {
	showContacts(Contacts.data());
	});
	}

	function showContacts(records) {
	$j('#cList').empty();
	$j.each(Contacts.data(),
	function() {
	var newLi = $j('<li></li>');

	var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.FirstName+ ' '+this.LastName+ '</a>');
	newLink.click(function(e) {
	e.preventDefault();
	$j.mobile.showPageLoadingMsg();
	$j('#fName').val(Contacts.findRecordById([this.id]).FirstName);
	$j('#lName').val(Contacts.findRecordById([this.id]).LastName);
	$j('#phone').val(Contacts.findRecordById([this.id]).Phone);
	$j('#contactId').val(Contacts.findRecordById([this.id]).Id);
	$j('#error').html('');

	$j.mobile.changePage('#detailpage', {changeHash: true});
	});
	newLi.append(newLink);
	newLi.appendTo('#cList');
	// x++;
	});

	$j.mobile.hidePageLoadingMsg();
	$j('#cList').listview('refresh');
	}

	function addUpdateContact(e){
	e.preventDefault();
	var cId = $j('#contactId').val();
	var record = Contacts.findRecordById(cId);
	if(record == null) { //new record
	record = Contacts.create();
	}
	record.FirstName = $j('#fName').val();
	record.LastName = $j('#lName').val();
	record.Phone = $j('#phone').val();
	Contacts.sync(record,successCallback);
	}

	function deleteContact(e){
	e.preventDefault();
	Contacts.remove(Contacts.findIndexById($j('#contactId').val()),successCallback);
	}

	function successCallback(r){
	getAllContacts();
	$j.mobile.changePage('#listpage', {changeHash: true});
	}

	function displayError(e){
	console.log(e);
	$j('#error').html(e[0].message);
	}

	function regBtnClickHandlers() {
	$j('#add').click(function(e) {
	e.preventDefault();
	$j.mobile.showPageLoadingMsg();
	$j('#fName').val('');
	$j('#lName').val('');
	$j('#phone').val('');
	$j('#error').html('');
	$j('#contactId').val('');
	$j.mobile.changePage('#detailpage', {changeHash: true});
	$j.mobile.hidePageLoadingMsg();
	});

	$j('#save').click(function(e) {
	addUpdateContact(e);
	});

	$j('#delete').click(function(e) {
	deleteContact(e);
	});
	}
	</script>
	</head>

	<body>
	<div data-role="page" data-theme="b" id="listpage">
	<div data-role="header" data-position="fixed">
	<h2>Contacts</h2>
	<a href='#' id="add" class='ui-btn-right' data-icon='add' data-theme="b">Add</a>
	</div>
	<div data-role="content" id="contactList">
	<ul id="cList" data-filter="true" 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" data-position="fixed">
	<a href='#listpage' id="back2ContactList" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Back</a>
	<h1>Contact Details</h1>
	</div>
	<div data-role="content">
	<div data-role="fieldcontain">
	<label for="fName">First Name:</label>
	<input name="fName" id="fName" />
	</div>
	<div data-role="fieldcontain">
	<label for="lName">Last Name:</label>
	<input name="lName" id="lName" />
	</div>
	<div data-role="fieldcontain">
	<label for="phone">Phone:</label>
	<input name="phone" id="phone"/>
	</div>
	<h2 style="color:red" id="error"></h2><br/>
	<input type="hidden" id="contactId" />
	<button id="save" data-role="button" data-icon="check" data-inline="true" data-theme="b" class="save">Save</button>
	<button id="delete" data-role="button" data-icon="delete" data-inline="true" class="destroy">Delete</button>
	</div>
	</div>
	</body>
	</apex:page>