Skip to content

Commit 87d3e99

Browse files
author
Pat Patterson
committed
Factored common code out of mobile VF and HTML pages
1 parent a4975ee commit 87d3e99

File tree

3 files changed

+9
-258
lines changed

3 files changed

+9
-258
lines changed

‎app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626

2727
/*
2828
* This is a simple jQuery-based app that uses the Force.com REST API.
29-
* See vf.js for code required to run this in Visualforce
30-
* See custom.js for code required to run this on your own server
29+
* See example.page for code required to run this in Visualforce
30+
* See example.html for code required to run this on your own server
3131
*/
3232

3333
function logout(e) {

‎mobile.html‎

Lines changed: 3 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
<script type="text/javascript" src="static/jquery.popup.js"></script>
4141
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
4242
<script type="text/javascript" src="forcetk.js"></script>
43+
<script type="text/javascript" src="mobileapp.js"></script>
4344
<script type="text/javascript">
4445
// OAuth Configuration
4546
var loginUrl = 'https://login.salesforce.com/';
@@ -85,48 +86,7 @@
8586
client = new forcetk.Client(oauthResponse.access_token, null,
8687
oauthResponse.instance_url, proxyUrl);
8788

88-
// Add click listeners
89-
$j('#newbtn').click(function(e){
90-
// Show the 'New Account' form
91-
e.preventDefault();
92-
$j('#accountform')[0].reset();
93-
$j('#accformheader').html('New Account');
94-
setButtonText('#actionbtn','Create');
95-
$j('#actionbtn').unbind('click.btn').bind('click.btn',createHandler);
96-
$j.mobile.changePage('#editpage',"slide",false,true);
97-
});
98-
99-
$j('#deletebtn').click(function(e){
100-
// Delete the account
101-
e.preventDefault();
102-
$j.mobile.pageLoading();
103-
client.del('Account', $j('#accountdetail').find('#Id').val()
104-
, function(response) {
105-
getAccounts(function(){
106-
$j.mobile.pageLoading(true);
107-
$j.mobile.changePage('#mainpage',"slide",true,true);
108-
});
109-
});
110-
});
111-
112-
$j('#editbtn').click(function(e){
113-
// Get account fields and show the 'Edit Account' form
114-
e.preventDefault();
115-
$j.mobile.pageLoading();
116-
client.retrieve("Account", $j('#accountdetail').find('#Id').val()
117-
, "Name,Id,Industry,TickerSymbol", function(response){
118-
$j('#accountform').find('input').each(function() {
119-
$j(this).val(response[$j(this).attr("name")]);
120-
});
121-
$j('#accformheader').html('Edit Account');
122-
setButtonText('#actionbtn','Update');
123-
$j('#actionbtn')
124-
.unbind('click.btn')
125-
.bind('click.btn',updateHandler);
126-
$j.mobile.pageLoading(true);
127-
$j.mobile.changePage('#editpage',"slide",false,true);
128-
});
129-
});
89+
addClickListeners();
13090

13191
$j.mobile.changePage('#mainpage',"slide",false,true);
13292
$j.mobile.pageLoading();
@@ -135,92 +95,7 @@
13595
});
13696
}
13797
}
138-
139-
// Populate the account list and set up click handling
140-
function getAccounts(callback){
141-
$j('#accountlist').empty();
142-
client.query("SELECT Id, Name FROM Account ORDER BY Name LIMIT 20"
143-
, function(response){
144-
$j.each(response.records, function() {
145-
var id = this.Id;
146-
$j('<li></li>')
147-
.hide()
148-
.append('<a href="#"><h2>'+this.Name+'</h2></a>')
149-
.click(function(e){
150-
e.preventDefault();
151-
$j.mobile.pageLoading();
152-
// We could do this more efficiently by adding Industry and
153-
// TickerSymbol to the fields in the SELECT, but we want to
154-
// show dynamic use of the retrieve function...
155-
client.retrieve("Account", id, "Name,Id,Industry,TickerSymbol"
156-
, function(response){
157-
$j('#Name').html(response.Name);
158-
$j('#Industry').html(response.Industry);
159-
$j('#TickerSymbol').html(response.TickerSymbol);
160-
$j('#Id').val(response.Id);
161-
$j.mobile.pageLoading(true);
162-
$j.mobile.changePage('#detailpage',"slide",false,true);
163-
});
164-
})
165-
.appendTo('#accountlist')
166-
.show();
167-
});
168-
169-
$j('#accountlist').listview('refresh');
170-
171-
if (typeof callback != 'undefined' && callback != null) {
172-
callback();
173-
}
174-
});
175-
}
176-
177-
// Gather fields from the account form and create a record
178-
function createHandler(e){
179-
e.preventDefault();
180-
var accountform = $j('#accountform');
181-
var fields = {};
182-
accountform.find('input').each(function() {
183-
var child = $j(this);
184-
if ( child.val().length > 0 && child.attr("name") != 'Id') {
185-
fields[child.attr("name")] = child.val();
186-
}
187-
});
188-
$j.mobile.pageLoading();
189-
client.create('Account', fields, function(response) {
190-
getAccounts(function(){
191-
$j.mobile.pageLoading(true);
192-
$j.mobile.changePage('#mainpage',"slide",true,true);
193-
});
194-
});
195-
}
196-
197-
// Gather fields from the account form and update a record
198-
function updateHandler(e){
199-
e.preventDefault();
200-
var accountform = $j('#accountform');
201-
var fields = {};
202-
accountform.find('input').each(function() {
203-
var child = $j(this);
204-
if ( child.val().length > 0 && child.attr("name") != 'Id') {
205-
fields[child.attr("name")] = child.val();
206-
}
207-
});
208-
$j.mobile.pageLoading();
209-
client.update('Account', accountform.find('#Id').val(), fields
210-
, function(response) {
211-
getAccounts(function(){
212-
$j.mobile.pageLoading(true);
213-
$j.mobile.changePage('#mainpage',"slide",true,true);
214-
});
215-
});
216-
}
217-
218-
// Ugh - this is required to change text on a jQuery Mobile button
219-
// due to the way it futzes with things at runtime
220-
function setButtonText(id, str) {
221-
$j(id).html(str).parent().find('.ui-btn-text').text(str);
222-
}
223-
</script>
98+
</script>
22499
</head>
225100

226101
<body>

‎mobile.page‎

Lines changed: 4 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -53,143 +53,19 @@ an HTML5 mobile app using jQuery Mobile
5353
<apex:includeScript value="{!URLFOR($Resource.static, '/mobile/jquery.mobile-1.0a4.min.js')}" />
5454
-->
5555
<apex:includeScript
56-
value="{!URLFOR($Resource.forcetk, 'forcetk.js')}" />
56+
value="{!URLFOR($Resource.sample, 'forcetk.js')}" />
57+
<apex:includeScript
58+
value="{!URLFOR($Resource.sample, 'mobileapp.js')}" />
5759
<script type="application/javascript">
5860
// Get a reference to jQuery that we can work with
5961
$j = jQuery.noConflict();
6062

6163
// Get an instance of the REST API client
6264
var client = new forcetk.Client('{!$Api.Session_ID}');
6365

64-
// Populate the account list and set up click handling
65-
function getAccounts(callback){
66-
$j('#accountlist').empty();
67-
client.query("SELECT Id, Name FROM Account ORDER BY Name LIMIT 20"
68-
, function(response){
69-
$j.each(response.records, function() {
70-
var id = this.Id;
71-
$j('<li></li>')
72-
.hide()
73-
.append('<a href="#"><h2>'+this.Name+'</h2></a>')
74-
.click(function(e){
75-
e.preventDefault();
76-
$j.mobile.pageLoading();
77-
// We could do this more efficiently by adding Industry and
78-
// TickerSymbol to the fields in the SELECT, but we want to
79-
// show dynamic use of the retrieve function...
80-
client.retrieve("Account", id, "Name,Id,Industry,TickerSymbol"
81-
, function(response){
82-
$j('#Name').html(response.Name);
83-
$j('#Industry').html(response.Industry);
84-
$j('#TickerSymbol').html(response.TickerSymbol);
85-
$j('#Id').val(response.Id);
86-
$j.mobile.pageLoading(true);
87-
$j.mobile.changePage('#detailpage',"slide",false,true);
88-
});
89-
})
90-
.appendTo('#accountlist')
91-
.show();
92-
});
93-
94-
$j('#accountlist').listview('refresh');
95-
96-
if (typeof callback != 'undefined' && callback != null) {
97-
callback();
98-
}
99-
});
100-
}
101-
102-
// Gather fields from the account form and create a record
103-
function createHandler(e){
104-
e.preventDefault();
105-
var accountform = $j('#accountform');
106-
var fields = {};
107-
accountform.find('input').each(function() {
108-
var child = $j(this);
109-
if ( child.val().length > 0 && child.attr("name") != 'Id') {
110-
fields[child.attr("name")] = child.val();
111-
}
112-
});
113-
$j.mobile.pageLoading();
114-
client.create('Account', fields, function(response) {
115-
getAccounts(function(){
116-
$j.mobile.pageLoading(true);
117-
$j.mobile.changePage('#mainpage',"slide",true,true);
118-
});
119-
});
120-
}
121-
122-
// Gather fields from the account form and update a record
123-
function updateHandler(e){
124-
e.preventDefault();
125-
var accountform = $j('#accountform');
126-
var fields = {};
127-
accountform.find('input').each(function() {
128-
var child = $j(this);
129-
if ( child.val().length > 0 && child.attr("name") != 'Id') {
130-
fields[child.attr("name")] = child.val();
131-
}
132-
});
133-
$j.mobile.pageLoading();
134-
client.update('Account', accountform.find('#Id').val(), fields
135-
, function(response) {
136-
getAccounts(function(){
137-
$j.mobile.pageLoading(true);
138-
$j.mobile.changePage('#mainpage',"slide",true,true);
139-
});
140-
});
141-
}
142-
143-
// Ugh - this is required to change text on a jQuery Mobile button
144-
// due to the way it futzes with things at runtime
145-
function setButtonText(id, str) {
146-
$j(id).html(str).parent().find('.ui-btn-text').text(str);
147-
}
148-
14966
// Kick things off...
15067
$j(document).ready(function(){
151-
// Add click listeners
152-
$j('#newbtn').click(function(e){
153-
// Show the 'New Account' form
154-
e.preventDefault();
155-
$j('#accountform')[0].reset();
156-
$j('#accformheader').html('New Account');
157-
setButtonText('#actionbtn','Create');
158-
$j('#actionbtn').unbind('click.btn').bind('click.btn',createHandler);
159-
$j.mobile.changePage('#editpage',"slide",false,true);
160-
});
161-
162-
$j('#deletebtn').click(function(e){
163-
// Delete the account
164-
e.preventDefault();
165-
$j.mobile.pageLoading();
166-
client.del('Account', $j('#accountdetail').find('#Id').val()
167-
, function(response) {
168-
getAccounts(function(){
169-
$j.mobile.pageLoading(true);
170-
$j.mobile.changePage('#mainpage',"slide",true,true);
171-
});
172-
});
173-
});
174-
175-
$j('#editbtn').click(function(e){
176-
// Get account fields and show the 'Edit Account' form
177-
e.preventDefault();
178-
$j.mobile.pageLoading();
179-
client.retrieve("Account", $j('#accountdetail').find('#Id').val()
180-
, "Name,Id,Industry,TickerSymbol", function(response){
181-
$j('#accountform').find('input').each(function() {
182-
$j(this).val(response[$j(this).attr("name")]);
183-
});
184-
$j('#accformheader').html('Edit Account');
185-
setButtonText('#actionbtn','Update');
186-
$j('#actionbtn')
187-
.unbind('click.btn')
188-
.bind('click.btn',updateHandler);
189-
$j.mobile.pageLoading(true);
190-
$j.mobile.changePage('#editpage',"slide",false,true);
191-
});
192-
});
68+
addClickListeners();
19369

19470
$j.mobile.pageLoading();
19571
getAccounts(function(){

0 commit comments

Comments
 (0)