Salesforce视图与控制器之间的交互

时间：2023-03-08 23:50:56
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);

    }

}

大概效果图就如下：

Salesforce视图与控制器之间的交互

大致描述下这个页面和控制器做了什么，首先点击选择微信用户，然后出现一个dialog选择框（jQuery ui风格），选上对应的微信用户后，便会在上图右下角出现对应的选择，点击删除操作，便会删除掉对应行，在向控制器get数据和post请求的时候（Ajax），请求的时候在请求提示区会有对应的正在请求数据的提示。整个过程都是AJAX，却完全不是用js做到的，相当方便，当然也支持通过js去完成，最后也大致说明下。

Salesforce视图与控制器之间的交互

当点击选择微信号按钮出现一个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转义的标志，前面有讲到，大概的控制器和视图交互就是这样，应该还不全，也是研究了一个星期的成果而已，后面再慢慢完善吧。

相关文章