Salesforce视图与控制器之间的交互
刚接触Salesforce，过程的确是比较艰难了，中文资料几乎没有，看英文资料学的效率却不高，不过看了一段时间的英文资料发现自己英语水平挺高不少啊，现在看都不用工具翻译，早知道就再次尝试报个6级，看下能过不，嘻嘻。。。。Salesforce的开发也是MVC模式，asp.net的MVC就玩的比较多了，换个平台一下子没适应过来，不过原理都一样，接下来就介绍一下最近的学习成果吧，来看一下SF中MVC模式下视图与控制器之间的交互，先贴控制器和视图的代码，下面有详细讲解。
apex视图代码如下：
<apex:page Controller="SendMessageController"> <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'jquery-ui.css')}" /> <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'mystyle.css')}" /> <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-2.1.1.min.js')}"/> <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui.js')}"/> <apex:form > <apex:pageBlock title="视图与控制器的交互"> <apex:pageBlockSection title="Ajax请求提示区"> <apex:outputPanel > <apex:actionStatus startStyle="font-size:40px;color:red;" stopStyle="font-size:30px;" startText="正在添加" id="adding" stopText="添加完成"/> </apex:outputPanel> <apex:outputPanel > <apex:actionStatus startStyle="font-size:40px;color:red;" stopStyle="font-size:30px;" startText="正在删除" id="deleting" stopText="删除完成"/> </apex:outputPanel> </apex:pageBlockSection> <apex:pageBlockSection title="功能区"> <input type="button" onclick="OpenDialog()" id="addUser" value="选择微信用户(按钮)"/> <apex:outputPanel id="AjaxBlock"> <apex:variable value="{!0}" var="rowNum"/> <apex:pageBlockTable value="{!wechatuserList}" var="wu"> <apex:column headerValue="序号"> <apex:outputText value="{0}"> <apex:param value="{!rowNum+1}"/> </apex:outputText> </apex:column> <apex:column headerValue="操作"> <apex:commandLink value="删除" action="{!deleteRow}" reRender="AjaxBlock" status="deleting" style="color:blue"> <apex:param name="rowIndex" value="{!rowNum}"/> </apex:commandLink> </apex:column> <apex:column headerValue="昵称"> <apex:outputField value="{!wu.Name}"/> </apex:column> <apex:column headerValue="微信号"> <apex:variable var="rowNum" value="{!rowNum+1}"/> <apex:outputField value="{!wu.openid__c}"/> </apex:column> <apex:column headerValue="是否有效"> <apex:outputField value="{!wu.validornot__c}"/> </apex:column> </apex:pageBlockTable> </apex:outputPanel> </apex:pageBlockSection> </apex:pageBlock> <apex:actionfunction reRender="AjaxBlock" status="adding" immediate="true" action="{!GetChoose}" name="GetChoose" > <apex:param name="ChooseParam" assignTo="{!Choose}" value=""/> </apex:actionfunction> <div id="SelectWechatUser" style="height:470px;overflow-Y:auto;"> <apex:outputPanel > <input type="button" value="确认选择" onclick="ComfirmChoost()" class="btn"/> </apex:outputPanel> <apex:pageBlock > <apex:variable value="{!0}" var="rowNum2"/> <apex:pageBlockTable value="{!GetUserList}" var="glist"> <apex:column headerValue="选择" style="width:5%"> <input type="checkBox" value="{!glist.Id}" name="checkedPro"/> </apex:column> <apex:column headerValue="序号" style="width:5%;text-align:center;"> <apex:outputText value="{0}" > <apex:param value="{!rowNum2+1}"/> </apex:outputText> </apex:column> <apex:column headerValue="昵称" style="width:30%"> <apex:outputField value="{!glist.Name}" style="width:100%"/> </apex:column> <apex:column headerValue="微信号" style="width:30%"> <apex:outputField value="{!glist.openid__c}" style="width:100%"/> <apex:variable var="rowNum2" value="{!rowNum2+1}"/> </apex:column> <apex:column headerValue="是否有效" style="width:30%"> <apex:outputField value="{!glist.validornot__c}" style="width:100%"/> </apex:column> </apex:pageBlockTable> </apex:pageBlock> </div> </apex:form> <script> var dialog; $(function () { dialog=jQuery("#SelectWechatUser").dialog({ autoOpen: false, height:550, width: 900, modal: true }); }); function OpenDialog() { jQuery("#SelectWechatUser").dialog("open"); } function ComfirmChoost() { var choose=[]; var allPro=document.getElementsByName("checkedPro"); for(var i=0;i<allPro.length;i++) { if(allPro[i].checked) { choose.push(allPro[i].value); } } if(choose.length==0) { alert("请选择微信用户"); return; } else { jQuery("#SelectWechatUser").dialog("close"); GetChoose(choose.join(';')); } } </script> </apex:page>
然后下面是控制器的代码：
public class SendMessageController { public List<wechatuser__c> GetUserList { get; set; } public String Choose{get;set;} public List<String> chooseIds{get;set;} public List<wechatuser__c> wechatuserList { get; set; } public SendMessageController() { wechatuserList=new List<wechatuser__c>(); GetUserList=[select id,Name,openid__c,validornot__c from wechatuser__c]; } public void GetChoose(){ if(Choose !=null ){ chooseIds = Choose.split(';'); System.Debug('长度：'+wechatuserList.size()); for(wechatuser__c model : [select id,Name,openid__c,validornot__c from wechatuser__c WHERE id IN :chooseIds]){ wechatuserList.add(model); } System.Debug('长度：'+wechatuserList.size()); } } public void deleteRow() { Integer rowIndex; rowIndex = Integer.valueOf(ApexPages.currentPage().getParameters().get('rowIndex')); wechatuserList.remove(rowIndex); } }
大概效果图就如下：
大致描述下这个页面和控制器做了什么，首先点击选择微信用户，然后出现一个dialog选择框（jQuery ui风格），选上对应的微信用户后，便会在上图右下角出现对应的选择，点击删除操作，便会删除掉对应行，在向控制器get数据和post请求的时候（Ajax），请求的时候在请求提示区会有对应的正在请求数据的提示。整个过程都是AJAX，却完全不是用js做到的，相当方便，当然也支持通过js去完成，最后也大致说明下。
当点击选择微信号按钮出现一个dialog，这个就不多讲，直接js打开，只不过前面需要引用jquery ui的js和css
dialog的代码是这样构成的。
<div id="SelectWechatUser" style="height:470px;overflow-Y:auto;"> <apex:outputPanel > <input type="button" value="确认选择" onclick="ComfirmChoost()" class="btn"/> </apex:outputPanel> <apex:pageBlock > <apex:variable value="{!0}" var="rowNum2"/> <apex:pageBlockTable value="{!GetUserList}" var="glist"> <apex:column headerValue="选择" style="width:5%"> <input type="checkBox" value="{!glist.Id}" name="checkedPro"/> </apex:column> <apex:column headerValue="序号" style="width:5%;text-align:center;"> <apex:outputText value="{0}" > <apex:param value="{!rowNum2+1}"/> </apex:outputText> </apex:column> <apex:column headerValue="昵称" style="width:30%"> <apex:outputField value="{!glist.Name}" style="width:100%"/> </apex:column> <apex:column headerValue="微信号" style="width:30%"> <apex:outputField value="{!glist.openid__c}" style="width:100%"/> <apex:variable var="rowNum2" value="{!rowNum2+1}"/> </apex:column> <apex:column headerValue="是否有效" style="width:30%"> <apex:outputField value="{!glist.validornot__c}" style="width:100%"/> </apex:column> </apex:pageBlockTable> </apex:pageBlock> </div>
apex中是通过上面这样的写法进行数据填充的，其中<apex:pageBlockTable value="{!GetUserList}" var="glist"> value中的值便是对应到控制器中的GetUserList，这个变量类型是List<wechatuser__c>，所以当页面加载完的时候，如果GetUserList有值的话，便会循环填充满pageBlockTable了，控制器在构造函数中便已经查了数据库，并赋值在这个变量中，另外<apex:variable value="{!0}" var="rowNum2"/>这个我个人理解是一个会根据pageBlockTable中记录条数，进行递增的一个变量，这里我就用来给每条记录一个序号，删除对应的行也是通过这个变量去取得rowIndex来操作的。另一个pageBlockTable的原理也是一样的。
在打开的dialog对话框选择了对应的条目后，js便把选择了的id传到控制器，使用的是actionfunction
<apex:actionfunction reRender="AjaxBlock" status="adding" immediate="true" action="{!GetChoose}" name="GetChoose" > <apex:param name="ChooseParam" assignTo="{!Choose}" value=""/> </apex:actionfunction>
在actionfunction中可以定义apex: param 参数传递过去，而assignTo这个attribute则是对应到了控制器里面的Choose变量，变量有get和set方法，这样，当调用GetChoose（choose.join(';')） 便把想传递的参数直接到了控制器里面的Choose去，这里是我个人觉得挺有趣的。紧接着便是调用数据库把对应记录查出来，然后wechatuserList.add(model); 这样视图这边便会刷新AjaxBlock中的数据，这里就要注意了，如果你觉得仅仅更新wechatuserList便会让视图绑定了这个变量的table也进行刷新的话，你就错了，没有进行过处理的话，是会刷新整个页面，那么页面是新的，数据也就是新的了，刚才传过去的id数据也对应丢失，这样当然不是我们想要的。
在ajax请求的过程中，如果实现 1.让用户知道正在请求数据，页面不刷新 2.请求完后，仅仅刷新想要刷新的部分呢。 第一个问题：在actionfunction中不是有一个status属性吗，注意看 它对应的是
<apex:outputPanel > <apex:actionStatus startStyle="font-size:40px;color:red;" stopStyle="font-size:30px;" startText="正在添加" id="adding" stopText="添加完成"/> </apex:outputPanel>
看属性也就很明显，在Ajax请求过程中status属性是用来通知用户浏览器正在请求某个操作（如果网络卡的话，不卡当然这个信息也不会看到）,startText和stopText的值便是通过改变对应的值来告知ajax请求的过程和完成的状态。问题二：对于actionfunction中的reRender属性，便是指定需要ajax刷新的区域，类似这个例子，考虑ajax请求完成后，更新了wechatuserList的值，而视图中的pageBlockTable刚好绑定了这个变量，如此，ajax请求完后，我们希望刷新这个pageBlockTable来显示最新的状态，于是我用一个div或者ouputPanel来包住这个table，然后赋值一个id，再把这个id给到actionfunction的attribute reRender。这样，在actionfunction执行完后，便会刷新对应的区域，实现了Ajax的请求。
一样的道理，点击commandLink 带上了apex: param 参数，带上需要删除的行rowIndex，在点击了删除按钮后，也是删除List<wechatuser__c>的值，然后ajax刷新AjaxBlock。
总结一下，当视图需要访问控制器的某个方法或者变量（变量需要get和set），只需要{!函数名（或者变量名）} 这样便可以访问控制器，如果需要带上参数便在标签中带上<apex: param> 可以通过绑定控制器的变量和视图中的pageblocktable来实现数据的同步，如果改变了对应的值，刷新视图对应的部分便可以。当然除了这样的方法实现控制器和视图的通讯和Ajax请求，我们也可以通过js来完成，下面代码便是在js中调用控制器的函数，并在回调函数中进行对应的处理。
SendMessageController.AutoAjax( Param, function(result, event){ if (event.status) {
//这里是请求完成处理的事情 }
//这里是当请求状态不正常（错误或者网络延迟），处理区域
}, {escape: true}//这个是html编码的转义开关，之前的一篇博客有讲过 );
js方法中SendMessageController便是控制器名，.后面的便是对应的方法名，控制器的方法前需要带上@RemoteAction标签，函数第一个便是传过去的参数，如果有多个参数，用逗号隔开便可以，有function的便是回调函数，最后那个是html转义的标志，前面有讲到，大概的控制器和视图交互就是这样，应该还不全，也是研究了一个星期的成果而已，后面再慢慢完善吧。
