刚接触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转义的标志,前面有讲到,大概的控制器和视图交互就是这样,应该还不全,也是研究了一个星期的成果而已,后面再慢慢完善吧。

Salesforce视图与控制器之间的交互的更多相关文章

  1. --@angularJS--指令与控制器之间的交互demo

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

  2. AngularJs-指令和指令之间的交互(动感超人)

    前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...

  3. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  4. 深入理解模型,视图和控制器(C#)

    这篇文章向你提供ASP.NET MVC 模型,视图和控制的高度概览.换句话说,解释一下ASP.NET MVC中的 ‘M’, ‘V’, 和 ‘C’. 看完这篇文章以后,你应该就能理解ASP.NET MV ...

  5. 我的Android第五章:通过Intent实现活动与活动之间的交互

    Intent在活动的操作 作用: Itent是Android程序中各个组件直接交换的一个重要方式可以指定当前组件要执行任务同时也可以给各个组件直接进行数据交互              同时Inten ...

  6. 简单讲解MVC(视图/模型/控制器)

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...

  7. 从零开始学iPhone开发(3)——视图及控制器的使用

    上一节我们分别使用IB和代码建立了两个视图并且熟悉了一些控件.这一节我们需要了解视图和视图的切换. 在iOS编程中,框架提供了很多视图,比如UIView,UIImageView, UIWebView等 ...

  8. 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图与控制器传递数据

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  9. storyboard三种sugue 和 跳转场景的三种方式 以及控制器之间的传值

    Storyboard引入了2个概念:1. scene:一个场景,由一个viewController和相关的xib表示. 2. segue:在这是用于连接scenes,其有多种类型,iphone包括:P ...

随机推荐

  1. python_cookies

    1.将cookies保存到变量中,然后打印cookie中的值 #coding:utf-8 #将cookies保存到变量中,然后打印cookie中的值 import urllib2 import coo ...

  2. Leetcode: Palindrome Partition I II

    题目一, 题目二 思路 1. 第一遍做时就参考别人的, 现在又忘记了 做的时候使用的是二维动态规划, 超时加超内存 2. 只当 string 左部分是回文的时候才有可能减少 cut 3. 一维动规. ...

  3. Python学习笔记14—模块

    在python中所有的模块都被加入到了sys.path中,用下面的方法可以看见模块的位置. >>> import sys >>> import pprint > ...

  4. configChanges

    android中的组件Activity在manifest.xml文件中可以指定参数android:ConfigChanges,用于捕获手机状态的改变. 在Activity中添加了android:con ...

  5. vue的递归组件以及三级菜单的制作

    js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性 父组件:slotDemo.vue: <template> <div& ...

  6. Excel 一个工作表进行按行数拆分

    1. 如下Excel表,总共有120多行数据,如何将以50行数据为一个工作表进行拆分 Sub ZheFenSheet() Dim r, c, i, WJhangshu, WJshu, bt As Lo ...

  7. struts2中s:iterator 标签的使用详解 及 OGNL用法

    简单的demo: s:iterator 标签有3个属性:value:被迭代的集合id   :指定集合里面的元素的idstatus 迭代元素的索引 1:jsp页面定义元素写法 数组或list <s ...

  8. CodeForces 732C Sanatorium

    C. Sanatorium time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  9. plsql连接其他服务器的oracle

    plsql除了连接本地的oracle还需要连接其他服务器上的oracle时 1.下载安装oracleClient:2.在oracleClient安装目录下:例如:D:/instantclient_11 ...

  10. inode file 结构

    inode位图(inode Bitmap) 和块位图类似,本身占一个块,其中每个bit表示一个inode是否空闲可用. inode表(inode Table) 我们知道,一个文件除了数据需要存储之外, ...