1
+ <!--
2
+ Copyright (c) 2012, salesforce.com, inc.
3
+ All rights reserved.
4
+
5
+ Redistribution and use in source and binary forms, with or without modification, are permitted provided
6
+ that the following conditions are met:
7
+
8
+ Redistributions of source code must retain the above copyright notice, this list of conditions and the
9
+ following disclaimer.
10
+
11
+ Redistributions in binary form must reproduce the above copyright notice, this list of conditions and
12
+ the following disclaimer in the documentation and/or other materials provided with the distribution.
13
+
14
+ Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or
15
+ promote products derived from this software without specific prior written permission.
16
+
17
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED
18
+ WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
19
+ PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
20
+ ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
21
+ TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
22
+ HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
23
+ NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
24
+ POSSIBILITY OF SUCH DAMAGE.
25
+ -->
26
+ <!--
27
+ Sample Visualforce page showing use of Force.com JavaScript REST Toolkit from
28
+ an HTML5 mobile app using jQuery Mobile
29
+ -->
30
+ <apex:page standardStylesheets="false"
31
+ showHeader="false"
32
+ sidebar="false"
33
+ contentType="text/html">
34
+ <!--
35
+ HTML5 doctype
36
+ -->
37
+ <apex:outputText escape="false" value="{!"<!DOCTYPE html>"}"/>
38
+ <!-- Use the RemoteTK component - this has the necessary JavaScript and Apex -->
39
+ <c:RemoteTK />
40
+ <html>
41
+ <head>
42
+ <title>Accounts</title>
43
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
44
+ <!--
45
+ You must download jQuery and jQuery Mobile and put them in a
46
+ static resource bundle like this to be able to correctly control ordering
47
+ of JS includes.
48
+ -->
49
+ <apex:stylesheet value="{!URLFOR($Resource.static, 'static/jquery.mobile-1.0a4.min.css')}" />
50
+ <apex:includeScript value="{!URLFOR($Resource.static, 'static/jquery-1.5.2.min.js')}" />
51
+ <apex:includeScript value="{!URLFOR($Resource.static, 'static/jquery.mobile-1.0a4.min.js')}" />
52
+ <apex:includeScript value="{!URLFOR($Resource.sample, 'forcetk.js')}" />
53
+ <apex:includeScript value="{!URLFOR($Resource.sample, 'mobileapp.js')}" />
54
+ <script type="application/javascript">
55
+ // Get a reference to jQuery that we can work with
56
+ $j = jQuery.noConflict();
57
+
58
+ // Create the RemoteTK client - no session id required!
59
+ var client = new remotetk.Client();
60
+
61
+ // Kick things off...
62
+ $j(document).ready(function(){
63
+ addClickListeners();
64
+
65
+ $j.mobile.pageLoading();
66
+ getAccounts(function(){
67
+ $j.mobile.pageLoading(true);
68
+ });
69
+ });
70
+ </script>
71
+ </head>
72
+
73
+ <body>
74
+ <div data-role="page" data-theme="b" id="mainpage">
75
+
76
+ <div data-role="header">
77
+ <h1>Account List</h1>
78
+ </div>
79
+ <div data-role="content">
80
+ <form>
81
+ <button data-role="button" id="newbtn">New</button>
82
+ </form>
83
+ <ul id="accountlist" data-inset="true" data-role="listview"
84
+ data-theme="c" data-dividertheme="b">
85
+ </ul>
86
+ </div>
87
+ <div data-role="footer">
88
+ <h4>Some Text</h4>
89
+ </div>
90
+ </div>
91
+ <div data-role="page" data-theme="b" id="detailpage">
92
+ <div data-role="header">
93
+ <h1>Account Detail</h1>
94
+ </div>
95
+ <div data-role="content">
96
+ <table>
97
+ <tr><td>Account Name:</td><td id="Name"></td></tr>
98
+ <tr><td>Industry:</td><td id="Industry"></td></tr>
99
+ <tr><td>Ticker Symbol:</td><td id="TickerSymbol"></td></tr>
100
+ </table>
101
+ <form name="accountdetail" id="accountdetail">
102
+ <input type="hidden" name="Id" id="Id" />
103
+ <button data-role="button" id="editbtn">Edit</button>
104
+ <button data-role="button" id="deletebtn" data-icon="delete"
105
+ data-theme="e">Delete</button>
106
+ </form>
107
+ </div>
108
+ <div data-role="footer">
109
+ <h4>Some Text</h4>
110
+ </div>
111
+ </div>
112
+ <div data-role="page" data-theme="b" id="editpage">
113
+ <div data-role="header">
114
+ <h1 id="accformheader">New Account</h1>
115
+ </div>
116
+ <div data-role="content">
117
+ <form name="accountform" id="accountform">
118
+ <input type="hidden" name="Id" id="Id" />
119
+ <table>
120
+ <tr>
121
+ <td>Account Name:</td>
122
+ <td><input name="Name" id="Name" data-theme="c"/></td>
123
+ </tr>
124
+ <tr>
125
+ <td>Industry:</td>
126
+ <td><input name="Industry" id="Industry"
127
+ data-theme="c"/></td>
128
+ </tr>
129
+ <tr>
130
+ <td>Ticker Symbol:</td>
131
+ <td><input name="TickerSymbol" id="TickerSymbol"
132
+ data-theme="c"/></td>
133
+ </tr>
134
+ </table>
135
+ <button data-role="button" id="actionbtn">Action</button>
136
+ </form>
137
+ </div>
138
+ <div data-role="footer">
139
+ <h4>Some Text</h4>
140
+ </div>
141
+ </div>
142
+ </body>
143
+ </html>
144
+ </apex:page>
0 commit comments