Visualforce 開発者ガイド
jリモートオブジェクトと jQuery Mobile の併用例
Visualforce リモートオブジェクトは、JavaScript フレームワークとうまく「融合」できるように設計されています。次の例は、拡張されていますが単純であり、リモートオブジェクトと jQuery Mobile を使用して取引先責任者のリストを表示し、取引先責任者の追加、編集、および削除を行います。
次の例は Salesforce モバイルパックの jQuery Mobile を使用し、jQuery 用モバイルパックに含まれているサンプルコードに基づいています。リモートオブジェクトと jQuery Mobile により、携帯端末向けの単純な取引先責任者管理ページを簡単に作成できます。
リモートオブジェクトと jQuery Mobile を使用した単純な取引先責任者エディタ
1<apex:page docType="html-5.0" showHeader="false" sidebar="false">
2
3 <!-- Include jQuery and jQuery Mobile from the Mobile Pack -->
4 <apex:stylesheet value="{!URLFOR($Resource.MobilePack_jQuery,
5 'jquery.mobile-1.3.0.min.css')}"/>
6 <apex:includeScript value="{!URLFOR($Resource.MobilePack_jQuery,
7 'jquery-1.9.1.min.js')}"/>
8 <apex:includeScript value="{!URLFOR($Resource.MobilePack_jQuery,
9 'jquery.mobile-1.3.0.min.js')}"/>
10
11 <!-- Remote Objects declaration -->
12 <apex:remoteObjects jsNamespace="RemoteObjectModel">
13 <apex:remoteObjectModel name="Contact" fields="Id,FirstName,LastName,Phone">
14 <!-- Notes is a custom field added to the Contact object -->
15 <apex:remoteObjectField name="Notes__c" jsShorthand="Notes"/>
16 </apex:remoteObjectModel>
17 </apex:remoteObjects>
18
19 <head>
20 <title>Contacts</title>
21 <meta name="viewport"
22 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
23
24 <script type="text/javascript">
25 var $j = jQuery.noConflict();
26
27 // Config object with commonly used data
28 // This keeps some hard-coded HTML IDs out of the code
29 var Config = {
30 Selectors: {
31 list: '#cList',
32 detailFields: "#fName #lName #phone #notes #error #contactId".split(" ")
33 },
34 Data: {
35 contact: 'contact'
36 }
37 };
38
39 // Get all contacts, and display them in a list
40 function getAllContacts() {
41 $j.mobile.showPageLoadingMsg();
42
43 var c = new RemoteObjectModel.Contact();
44 // Use the 'limit' operator to increase the default limit of 20
45 c.retrieve({ limit: 100 }, function (err, records) {
46 // Handle any errors
47 if (err) {
48 displayError(err);
49 } else {
50 // Empty the current list
51 var list = $j(Config.Selectors.list).empty();
52 // Now add results records to list
53 $j.each(records, function() {
54 var newLink = $j('<a></a>', {
55 text: this.get('FirstName') + ' ' + this.get('LastName')
56 });
57 newLink.data(Config.Data.contact, this.get('Id'));
58 newLink.appendTo(list).wrap('<li></li>');
59 });
60
61 $j.mobile.hidePageLoadingMsg();
62 list.listview('refresh');
63 }
64 });
65 }
66
67 // Handle the Save button that appears on both
68 // the Edit Contact and New Contact pages
69 function addUpdateContact(e){
70 e.preventDefault();
71
72 var record = new RemoteObjectModel.Contact({
73 FirstName: $j('#fName').val(),
74 LastName: $j('#lName').val(),
75 Phone: $j('#phone').val(),
76 Notes: $j('#notes').val()
77 // Note use of shortcut 'Notes' in place of Notes__c
78 });
79
80 var cId = $j('#contactId').val();
81 if( !cId ) { // new record
82 record.create(updateCallback);
83 } else { // update existing
84 record.set('Id', cId);
85 record.update(updateCallback);
86 }
87 }
88
89 // Handle the delete button
90 function deleteContact(e){
91 e.preventDefault();
92 var ct = new RemoteObjectModel.Contact();
93 ct.del($j('#contactId').val(), updateCallback);
94 }
95
96 // Callback to handle DML Remote Objects calls
97 function updateCallback(err, ids){
98 if (err) {
99 displayError(err);
100 } else {
101 // Reload the contacts with current list
102 getAllContacts();
103 $j.mobile.changePage('#listpage', {changeHash: true});
104 }
105 }
106
107 // Utility function to log and display any errors
108 function displayError(e){
109 console && console.log(e);
110 $j('#error').html(e.message);
111 }
112
113 // Attach functions to the buttons that trigger them
114 function regBtnClickHandlers() {
115 $j('#add').click(function(e) {
116 e.preventDefault();
117 $j.mobile.showPageLoadingMsg();
118
119 // empty all the clic handlers
120 $j.each(Config.Selectors.detailFields, function(i, field) {
121 $j(field).val('');
122 });
123
124 $j.mobile.changePage('#detailpage', {changeHash: true});
125 $j.mobile.hidePageLoadingMsg();
126 });
127
128 $j('#save').click(function(e) {
129 addUpdateContact(e);
130 });
131
132 $j('#delete').click(function(e) {
133 deleteContact(e);
134 });
135 }
136
137 // Shows the contact detail view,
138 // including filling in form fields with current data
139 function showDetailView(contact) {
140 $j('#contactId').val(contact.get('Id'));
141 $j('#fName').val(contact.get('FirstName'));
142 $j('#lName').val(contact.get('LastName'));
143 $j('#phone').val(contact.get('Phone'));
144 $j('#notes').val(contact.get('Notes'));
145 $j('#error').html('');
146 $j.mobile.changePage('#detailpage', {changeHash: true});
147 }
148
149 // Register click handler for list view clicks
150 // Note: One click handler handles the whole list
151 function regListViewClickHandler() {
152 $j(Config.Selectors.list).on('click', 'li', function(e) {
153
154 // show loading message
155 $j.mobile.showPageLoadingMsg();
156
157 // get the contact data for item clicked
158 var id = $j(e.target).data(Config.Data.contact);
159
160 // retrieve latest details for this contact
161 var c = new RemoteObjectModel.Contact();
162 c.retrieve({
163 where: { Id: { eq: id } }
164 }, function(err, records) {
165 if(err) {
166 displayError(err);
167 } else {
168 showDetailView(records[0]);
169 }
170
171 // hide the loading message in either case
172 $j.mobile.hidePageLoadingMsg();
173 });
174 });
175 }
176
177 // And, finally, run the page
178 $j(document).ready(function() {
179 regBtnClickHandlers();
180 regListViewClickHandler();
181 getAllContacts();
182 });
183
184 </script>
185 </head>
186
187 <!-- HTML and jQuery Mobile markup for the list and detail screens -->
188 <body>
189
190 <!-- This div is the list "page" -->
191 <div data-role="page" data-theme="b" id="listpage">
192 <div data-role="header" data-position="fixed">
193 <h2>Contacts</h2>
194 <a href='#' id="add" class='ui-btn-right' data-icon='add'
195 data-theme="b">Add</a>
196 </div>
197 <div data-role="content" id="contactList">
198 <ul id="cList" data-filter="true" data-inset="true"
199 data-role="listview" data-theme="c" data-dividertheme="b">
200 </ul>
201 </div>
202 </div>
203
204 <!-- This div is the detail "page" -->
205 <div data-role="page" data-theme="b" id="detailpage">
206 <div data-role="header" data-position="fixed">
207 <a href='#listpage' id="back2ContactList" class='ui-btn-left'
208 data-icon='arrow-l' data-direction="reverse"
209 data-transition="flip">Back</a>
210 <h1>Contact Details</h1>
211 </div>
212 <div data-role="content">
213 <div data-role="fieldcontain">
214 <label for="fName">First Name:</label>
215 <input name="fName" id="fName" />
216 </div>
217 <div data-role="fieldcontain">
218 <label for="lName">Last Name:</label>
219 <input name="lName" id="lName" />
220 </div>
221 <div data-role="fieldcontain">
222 <label for="phone">Phone:</label>
223 <input name="phone" id="phone"/>
224 </div>
225 <div data-role="fieldcontain">
226 <label for="notes">Notes:</label>
227 <textarea name="notes" id="notes"/>
228 </div>
229
230 <h2 style="color:red" id="error"></h2>
231
232 <input type="hidden" id="contactId" />
233 <button id="save" data-role="button" data-icon="check"
234 data-inline="true" data-theme="b" class="save">Save</button>
235 <button id="delete" data-role="button" data-icon="delete"
236 data-inline="true" class="destroy">Delete</button>
237 </div>
238 </div>
239 </body>
240</apex:page>4 つのリモートオブジェクト操作すべてが使用されていますが、コールバックハンドラは 3 つしかありません。
- getAllContacts() は retrieve() をコールして取引先責任者のリストを読み込み、コールバック用の匿名関数を提供します。コールバックは、エラーがないかチェックし、結果を反復処理してページに追加します。
- 同様に、showDetailView() は retrieve() をコールして詳細ページ用に 1 件の取引先責任者を読み込み、結果は再び匿名関数によって処理されます。
- addUpdateContact() と deleteContact() は、取引先責任者の追加、更新、および削除を処理します。どちらのメソッドも updateCallback() をコールバック関数として渡します。updateCallback() はリモートオブジェクト操作の結果を使用しません。エラーのチェックを行い、エラーをコンソールにログ出力し、getAllContacts() をコールしてページを更新するのみです。