19、jQuery Mobile在Salesforce Visualforce页面开发中的应用

jQuery Mobile在Salesforce Visualforce页面开发中的应用

1. 引言

在移动应用开发中，jQuery Mobile为我们提供了丰富的功能和便捷的开发方式。本文将详细介绍如何在Salesforce Visualforce页面中运用jQuery Mobile实现各种功能，包括弹出面板、对话框、记录列表展示、表单数据捕获、根据浏览器重定向以及用户位置存储等。

2. 弹出面板功能

点击“Settings”按钮会弹出类似Facebook风格的面板，将现有内容推到右侧。面板在模板中定义为与页脚同级的 <div> 元素，其 data-role 属性为 panel 。关闭按钮是一个锚元素，其 href 目标为要返回的页面的 <div> 元素。示例代码如下：

<div data-role="panel" id="settingspanel">
  <h3>Settings</h3>
  <p>A popout panel is becoming a common way to capture settings information.</p>
  <a href="#main" data-role="button" data-rel="close">Close</a>
</div><!-- /panel -->

3. 对话框功能

在移动应用中，使用标准JavaScript的 alert 函数创建对话框可能会给用户带来不佳的体验。jQuery Mobile提供了两种生成对话框的机制：
- 方式一 ：页面中具有 data-role 属性为 dialog 的 <div> 元素的页面，只能作为对话框渲染，复用性较差。
- 方式二 ：链接到具有 data-rel 属性为 dialog 的页面，可根据使用场景将目标页面渲染为普通页面或对话框。

下面是创建一个显示账户列表和“View”按钮的Visualforce移动页面的步骤：
1. 创建账户列表页面：
- 点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 点击“New”按钮。
- 在“Label”字段中输入“MobileDialogMain”。
- 接受自动生成的“Name”字段默认值“MobileDialogMain”。
- 将代码下载中的“MobileDialogMain.page”文件内容粘贴到Visualforce Markup区域，然后点击“Save”按钮。
- 再次点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 找到“MobileDialogMain”页面的条目，点击“Security”链接。
- 在结果页面上，选择应具有访问权限的配置文件，然后点击“Save”按钮。
2. 创建对话框页面：
- 点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 点击“New”按钮。
- 在“Label”字段中输入“MobileDialog”。
- 接受自动生成的“Name”字段默认值“MobileDialog”。
- 将代码下载中的“MobileDialog.page”文件内容粘贴到Visualforce Markup区域，然后点击“Save”按钮。
- 再次点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 找到“MobileDialog”页面的条目，点击“Security”链接。
- 在结果页面上，选择应具有访问权限的配置文件，然后点击“Save”按钮。

当在移动设备浏览器中打开以下URL时，将显示“MobileDialogMain”页面：

https://<instance>/apex/MobileDialogMain

其中， <instance> 是特定于您组织的Salesforce实例，例如“na6.salesforce.com”。“View”按钮的代码如下：

<a href="/apex/MobileDialog?id={!acc.id}" data-mini="true" 
   data-role="button" data-rel="dialog" data-transition="flip">
  View
</a>

data-rel 属性为 dialog 指定目标页面应作为对话框打开， data-transition 属性指定页面之间所需的动画过渡效果。

4. 记录列表展示

在之前的示例中，记录以网格格式布局，没有足够的空间展示记录详细信息。使用jQuery Mobile的 listview 小部件可以在列表的每个元素中显示记录详细信息，并通过HTML5的 data- 属性声明性地提供多种功能。

创建一个在jQuery Mobile listview 小部件中渲染联系人信息的移动Visualforce页面的步骤如下：
1. 点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
2. 点击“New”按钮。
3. 在“Label”字段中输入“MobileFilteredList”。
4. 接受自动生成的“Name”字段默认值“MobileFilteredList”。
5. 将代码下载中的“MobileFilteredList.page”文件内容粘贴到Visualforce Markup区域，然后点击“Save”按钮。
6. 再次点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
7. 找到“MobileFilteredList”页面的条目，点击“Security”链接。
8. 在结果页面上，选择应具有访问权限的配置文件，然后点击“Save”按钮。

在移动设备浏览器中打开以下URL将显示“MobileFilteredList”页面：

https://<instance>/apex/MobileFilteredList

listview 小部件由具有 data-role 属性为 listview 的无序列表元素生成，示例代码如下：

<ul data-filter="true" data-autodividers="true" 
    data-filter-placeholder="Search contacts..." 
    data-role="listview" data-theme="c" data-divider-theme="b">
   ...
</ul>

data-autodividers 属性设置为 true 可根据每个元素中的第一个文本项（此处为联系人记录的 LastName 字段）对联系人进行分组。 data-filter 属性设置为 true 使列表可搜索并添加搜索框， data-filter-placeholder 属性定义搜索框最初显示的占位符文本。联系人记录通过标准的 <apex:repeat /> 组件迭代生成列表项，示例代码如下：

<apex:repeat value="{!contacts}" var="cont">
  <li>
    <h2>{!cont.LastName}, {!cont.FirstName}</h2>
          ...
  </li> 
</apex:repeat>

在搜索框中输入文本将限制列表显示匹配文本的元素。

5. 移动Visualforce表单

从移动网站捕获数据有多种方法。从标记和代码的角度来看，最直接的方法是使用标准控制器管理页面，并通过标准的 <apex:form /> 组件捕获信息。但这种机制需要使用Visualforce视图状态来维护控制器和页面之间的状态，对于移动设备来说有些重量级，并且会妨碍Visualforce Ajax功能的使用。另一种选择是使用JavaScript通过REST API或JavaScript Remoting将信息发送回Salesforce。使用REST API可使应用更具可移植性，但会消耗API调用；JavaScript Remoting允许从Visualforce页面调用Apex控制器中的方法，不消耗API调用，但会将应用与Visualforce绑定，只能在Salesforce平台上托管。

下面是创建一个通过JavaScript Remoting捕获潜在客户信息并存储到Salesforce数据库的移动Visualforce页面的步骤：
1. 创建自定义控制器：
- 点击“Your Name | Setup | Develop | Apex Classes”进入Apex类设置页面。
- 点击“New”按钮。
- 将代码下载中的“MobileLeadCaptureController.cls”Apex类内容粘贴到Apex类区域。
- 点击“Save”按钮。
2. 创建捕获潜在客户的页面：
- 点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 点击“New”按钮。
- 在“Label”字段中输入“MobileLeadCapture”。
- 接受自动生成的“Name”字段默认值“MobileLeadCapture”。
- 将代码下载中的“MobileLeadCapture.page”文件内容粘贴到Visualforce Markup区域，然后点击“Save”按钮。
- 再次点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 找到“MobileLeadCapture”页面的条目，点击“Security”链接。
- 在结果页面上，选择应具有访问权限的配置文件，然后点击“Save”按钮。

在移动设备浏览器中打开以下URL将显示“MobileLeadCapture”页面：

https://<instance>/apex/MobileLeadCapture

填写表单详细信息并点击“Submit”按钮，会将潜在客户信息保存到Salesforce数据库，清空表单并显示确认消息。若发生错误或必填字段未填写，将显示错误消息。要使控制器方法可用于JavaScript Remoting，必须使用 @RemoteAction 注解进行修饰，示例代码如下：

@RemoteAction
public static String CreateLead(String fName, String lName,
              String inCompany, String inEmail, String inPhone)
{
    ...
}

在页面中通过JavaScript调用该方法，示例代码如下：

var fname=$('#firstname').val();
var lname=$('#lastname').val();
...
MobileLeadCaptureController.CreateLead(fname, lname, company,
                email, phone, leadCaptured, {escape:true});

由于JavaScript Remoting调用是异步的，必须提供回调函数来处理控制器响应，示例代码如下：

function leadCaptured(result, event)
{
  ...
  if (event.status) 
  {
    if ('SUCCESS'==result)
    {
      ...
      $('#msg').html('<span style="color:green;">Lead created</span>');
  }
  else
    {
       $("#msg").html('<span style="color:red">An error occurred : ' + result + '</span>');
    }
  }
  else if (event.type === 'exception') 
  {
     $("#msg").html(event.message);
  }
  ...
}

6. 根据浏览器重定向到移动页面

开发者可以提供网页或网站的移动版本，但用户只有知道URL才能访问。当用户在电子邮件或社交媒体帖子中收到指向完整网站页面的链接时，他们更可能点击该链接而不是尝试修改它以指向移动版本。应用程序可以通过检测移动设备的使用并将用户重定向到页面的移动版本来改善用户体验。在Visualforce中有两种实现此功能的方法：
- 服务器端 ：通过查询请求的 USER-AGENT 头并与一组移动设备进行匹配。这种方法可以为用户提供更快的体验，但随着移动设备列表的不断增加，会带来维护开销。
- 客户端 ：使用JavaScript确定用户设备的尺寸，如果设备宽度低于某个大小，则将用户发送到不同的页面。这种方法可能需要两次服务器往返，但具有前瞻性，与设备无关，只关注页面显示所需的屏幕空间。

下面是创建一个根据用户设备宽度重定向到不同页面的Visualforce页面的步骤：
1. 创建桌面版本页面：
- 点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 点击“New”按钮。
- 在“Label”字段中输入“DesktopViewContact”。
- 接受自动生成的“Name”字段默认值“DesktopViewContact”。
- 将代码下载中的“DesktopViewContact.page”文件内容粘贴到Visualforce Markup区域，然后点击“Save”按钮。
- 再次点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 找到“DesktopViewContact”页面的条目，点击“Security”链接。
- 在结果页面上，选择应具有访问权限的配置文件，然后点击“Save”按钮。
2. 创建移动版本页面：
- 点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 点击“New”按钮。
- 在“Label”字段中输入“MobileViewContact”。
- 接受自动生成的“Name”字段默认值“MobileViewContact”。
- 将代码下载中的“MobileViewContact.page”文件内容粘贴到Visualforce Markup区域，然后点击“Save”按钮。
- 再次点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 找到“MobileViewContact”页面的条目，点击“Security”链接。
- 在结果页面上，选择应具有访问权限的配置文件，然后点击“Save”按钮。
3. 创建确定重定向的页面：
- 点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 点击“New”按钮。
- 在“Label”字段中输入“ViewContact”。
- 接受自动生成的“Name”字段默认值“ViewContact”。
- 将代码下载中的“ViewContact.page”文件内容粘贴到Visualforce Markup区域，然后点击“Save”按钮。
- 再次点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 找到“ViewContact”页面的条目，点击“Security”链接。
- 在结果页面上，选择应具有访问权限的配置文件，然后点击“Save”按钮。

在移动设备浏览器中打开以下URL将显示“ViewContact”页面的移动版本：

https://<instance>/apex/ViewContact?id<contact_id>

其中， <instance> 是特定于您组织的Salesforce实例， <contact_id> 是Salesforce实例中联系人的记录ID。在桌面浏览器中访问同一页面将显示桌面版本。为避免设备浏览器将页面默认显示为桌面大小，通过HTML元标签设置视口以匹配设备尺寸，示例代码如下：

<meta name="viewport" content="initial-scale=1, maximum-scale=1,
      height=device-height, width=device-width" />

通过JavaScript片段提取设备宽度并将用户重定向到适当的页面，示例代码如下：

<script>
  if ($(window).width()<=650)
  {
    window.location='/apex/MobileViewContact?id={!contact.id}';
  }
  else
  {
    window.location='/apex/DesktopViewContact?id={!contact.id}';
  }
</script>

7. 用户位置存储

移动设备通常在移动中使用，应用程序经常需要捕获用户的位置以提供最佳用户体验，例如显示与企业或服务的距离，或允许用户在目的地签到。

下面是创建一个捕获潜在客户信息和用户位置并将位置存储在Salesforce数据库中潜在客户记录的移动Visualforce页面的步骤：
1. 创建潜在客户对象的自定义字段以捕获位置：
- 点击“Your Name | Setup | App Setup | Customize | Lead | Fields”进入潜在客户字段设置页面。
- 滚动到“Lead Custom Fields and Relationships”部分，点击“New”按钮。
- 在“Step 1. Choose the field type”页面，从数据类型单选按钮中选择“Gelocation”选项，然后点击“Next”按钮。
- 在“Step 2. Enter the Details”页面，在“Label”字段中输入“Location”，在“Decimal Places”字段中输入“10”，接受默认名称“Location”，然后点击“Next”按钮。
- 在“Step 3. Establish field-level security for reference field”页面，将所有字段保留为默认值，然后点击“Next”按钮。
- 在“Step 4. Add to page layouts”页面，将所有字段保留为默认值，然后点击“Save”按钮。
2. 创建自定义控制器：
- 点击“Your Name | Setup | Develop | Apex Classes”进入Apex类设置页面。
- 点击“New”按钮。
- 将代码下载中的“MobileLeadLocationCaptureController.cls”Apex类内容粘贴到Apex类区域。
- 点击“Save”按钮。
3. 创建捕获潜在客户的页面：
- 点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 点击“New”按钮。
- 在“Label”字段中输入“MobileLeadLocationCapture”。
- 接受自动生成的“Name”字段默认值“MobileLeadLocationCapture”。
- 将代码下载中的“MobileLeadLocationCapture.page”文件内容粘贴到Visualforce Markup区域，然后点击“Save”按钮。
- 再次点击“Your Name | Setup | Develop | Pages”进入Visualforce设置页面。
- 找到“MobileLeadLocationCapture”页面的条目，点击“Security”链接。
- 在结果页面上，选择应具有访问权限的配置文件，然后点击“Save”按钮。

在移动设备浏览器中打开以下URL将显示“MobileLeadLocation”页面：

https://<instance>/apex/MobileLeadLocation

填写表单详细信息并点击“Submit”按钮，会执行JavaScript请求权限后检索用户位置，将潜在客户信息保存到Salesforce数据库，清空表单并显示确认消息。若发生错误、必填字段未填写或检索用户位置失败，将显示错误消息。控制器方法通过 @RemoteAction 注解使其可在JavaScript中执行，示例代码如下：

@RemoteAction
public static String CreateLead(String fName, String lName, String 
inCompany, String inEmail, String inPhone,
           Double latitude, Double longitude)
{
  Lead newLead=new Lead(FirstName=fName,
                        LastName=lName,
                        Company=inCompany,
                        Email=inEmail,
                        Phone=inPhone);

  if (null!=latitude)
  {
    newLead.Location__Latitude__s=latitude;
    newLead.Location__Longitude__s=longitude;
  }
  ...
}

当用户点击“Submit”按钮时，页面使用内置的地理定位功能尝试确定位置（如果可用），示例代码如下：

if (navigator.geolocation)
{
  navigator.geolocation.getCurrentPosition(
                  geoSuccess,
                  geoError,
                  {
                      maximumAge: 0,
                      timeout:30000,
                      enableHighAccuracy: true
                  }
              );
}

由于 getCurrentPosition 函数是异步的，必须提供回调函数来处理错误（ geoError ）和成功（ geoSuccess ）结果。 geoSuccess 函数将位置作为坐标参数传递给通用函数处理潜在客户，示例代码如下：

function geoSuccess(position)
{  
  uploadLead(position.coords.latitude, 
  position.coords.longitude);
}

uploadLead 函数执行控制器方法将潜在客户记录存储到Salesforce数据库，同样是异步的，需要指定回调方法，示例代码如下：

function uploadLead(lat, long)
{
  var fname=$('#firstname').val();
  var lname=$('#lastname').val();
     ...
  MobileLeadLocationCaptureController.CreateLead(fname, lname, 
        company, email, phone, lat, long, 
        leadCaptured, {escape:true});
}

8. 总结

通过以上介绍，我们可以看到jQuery Mobile在Salesforce Visualforce页面开发中具有强大的功能。从弹出面板到对话框、记录列表展示、表单数据捕获、根据浏览器重定向以及用户位置存储等，都能通过jQuery Mobile和相关技术实现。开发者可以根据具体需求选择合适的方法，为用户提供更好的移动应用体验。

相关流程总结表格

功能	步骤数量	关键操作
创建对话框页面	16	页面创建、安全设置
创建记录列表页面	8	页面创建、安全设置
创建表单数据捕获页面	12	控制器创建、页面创建、安全设置
创建重定向页面	24	桌面和移动页面创建、确定重定向页面创建及安全设置
创建用户位置存储页面	12	自定义字段创建、控制器创建、页面创建、安全设置

重定向流程mermaid流程图

graph LR
    A[打开ViewContact页面] --> B{设备宽度 <= 650px?}
    B -- 是 --> C[重定向到MobileViewContact页面]
    B -- 否 --> D[重定向到DesktopViewContact页面]

通过以上内容，我们详细了解了如何在Salesforce Visualforce页面开发中运用jQuery Mobile实现各种功能，希望能为开发者提供有价值的参考。

jQuery Mobile在Salesforce Visualforce页面开发中的应用

9. 技术对比分析

在前面的介绍中，我们涉及到了多种实现不同功能的技术和方法，下面对这些技术进行对比分析，以便开发者在实际应用中能做出更合适的选择。

功能场景	实现方式	优点	缺点
对话框生成	具有 data-role="dialog" 的 <div> 元素	实现简单，明确指定为对话框	复用性差，只能作为对话框渲染
对话框生成	链接到具有 data-rel="dialog" 的页面	可根据场景灵活渲染为普通页面或对话框
数据捕获	标准 <apex:form /> 组件	标记和代码简单直接	依赖Visualforce视图状态，对移动设备重，妨碍Ajax功能
数据捕获	REST API	应用可移植性强	消耗API调用，可能导致限制耗尽
数据捕获	JavaScript Remoting	不消耗API调用	应用与Visualforce绑定，只能在Salesforce平台托管
重定向	服务器端查询 USER-AGENT 头	用户体验快	维护开销大，移动设备列表不断增加
重定向	客户端JavaScript判断设备尺寸	与设备无关，具有前瞻性	可能需要两次服务器往返

10. 代码优化建议

在使用jQuery Mobile和相关技术实现功能时，为了提高性能和代码的可维护性，我们可以采取以下优化建议：

• 对话框功能 ：

  • 对于复用性要求高的对话框页面，优先使用链接到具有 data-rel="dialog" 的页面这种方式。
  • 在对话框页面中，合理使用动画过渡效果，避免过于复杂或耗时的动画影响用户体验。

• 记录列表展示 ：

  • 当列表数据量较大时，考虑分页加载，避免一次性加载过多数据导致页面加载缓慢。
  • 对列表的搜索功能进行优化，可使用防抖或节流技术减少不必要的搜索请求。

• 移动Visualforce表单 ：

  • 在使用JavaScript Remoting时，对输入数据进行严格的验证，避免无效数据传递到控制器。
  • 合理设置回调函数，对不同的响应结果进行细致的处理，提高用户反馈的准确性。

• 根据浏览器重定向 ：

  • 在设置视口时，确保参数的合理性，避免因视口设置不当导致页面显示异常。
  • 对JavaScript重定向代码进行封装，提高代码的复用性。

• 用户位置存储 ：

  • 在请求用户位置时，合理设置 getCurrentPosition 函数的参数，如 timeout 和 enableHighAccuracy ，平衡位置获取的准确性和响应时间。
  • 对位置数据进行缓存，避免频繁请求位置信息。

11. 实际应用案例

为了更好地理解上述技术在实际中的应用，下面给出一个综合的应用案例。假设我们要开发一个Salesforce移动应用，用于销售团队在外出拜访客户时记录客户信息和自身位置。

• 页面设计 ：

  • 首页使用记录列表展示功能，显示客户列表，可通过搜索框快速查找客户。
  • 点击客户列表中的“View”按钮，使用对话框功能显示客户详细信息。
  • 提供一个表单页面，使用移动Visualforce表单功能，让销售人员输入新客户信息，并通过JavaScript Remoting将信息保存到Salesforce数据库。
  • 在表单页面中，使用用户位置存储功能，记录销售人员的当前位置。
  • 根据浏览器重定向功能，确保不同设备都能获得良好的访问体验。

• 代码实现 ：

  • 参考前面介绍的各功能的代码示例，将其组合到相应的页面中。例如，在客户列表页面使用 listview 小部件，在表单页面使用JavaScript Remoting和地理定位功能。

12. 未来发展趋势

随着移动技术的不断发展，jQuery Mobile和Salesforce Visualforce页面开发也将面临新的挑战和机遇。以下是一些可能的未来发展趋势：

• 响应式设计的进一步优化 ：随着移动设备屏幕尺寸的多样化，响应式设计将更加重要。开发者需要不断优化页面布局和样式，确保在各种设备上都能提供一致的用户体验。
• 与新兴技术的融合 ：如与人工智能、大数据等技术的融合，为移动应用提供更智能的功能。例如，根据用户位置和历史数据推荐附近的潜在客户。
• 性能优化的持续关注 ：移动设备的性能虽然不断提升，但用户对应用的响应速度和流畅度要求也越来越高。开发者需要不断探索新的性能优化方法，如使用缓存技术、优化代码结构等。

表单数据提交流程mermaid流程图

graph LR
    A[填写表单信息] --> B{点击Submit按钮}
    B -- 是 --> C{是否支持地理定位?}
    C -- 是 --> D[请求用户位置权限]
    C -- 否 --> E[直接提交表单数据]
    D --> F{获取位置成功?}
    F -- 是 --> G[将位置和表单数据一起提交]
    F -- 否 --> H[仅提交表单数据]
    E --> I[调用控制器方法保存数据]
    G --> I
    H --> I
    I --> J{保存成功?}
    J -- 是 --> K[显示确认消息，清空表单]
    J -- 否 --> L[显示错误消息]

总结回顾

通过本文的介绍，我们全面了解了jQuery Mobile在Salesforce Visualforce页面开发中的应用。从基本功能的实现，如弹出面板、对话框、记录列表展示等，到数据捕获、重定向和用户位置存储等高级功能，我们详细阐述了具体的实现步骤和代码示例。同时，我们还对相关技术进行了对比分析，提出了代码优化建议，并给出了实际应用案例和未来发展趋势。希望这些内容能帮助开发者更好地利用jQuery Mobile和Salesforce平台，开发出更优质的移动应用。