AppBox v6.0中实现子页面和父页面的复杂交互

前言

1. 你可以通过捐赠获取 AppBox 的完整源代码:http://fineui.com/donate/

2. AppBox v3.0于 2013-08 发布,采用了EF CodeFirst开发模式和扁平化的设计理念:http://www.cnblogs.com/sanshi/p/3274122.html

 

AppBox v3.0中的子页面向父页面传值

AppBox中实现子页面向父页面传值,逻辑代码比较简单,完全使用FineUI的内置封装,没有引入JavaScript代码。首先来看下实现效果:

AppBox v6.0中实现子页面和父页面的复杂交互_第1张图片

AppBox v6.0中实现子页面和父页面的复杂交互_第2张图片

当点击所属角色的触发器输入框(TriggerBox)时,会在当前页面弹出一个包含IFrame的窗体控件(Window),在其中选择需要的数据后关闭。

 

父页面代码和逻辑

在父页面,我们通过一个 TriggerBox 来记录选中的文本信息,一个隐藏字段 HiddenField 来记录选中的值信息:

<f:TriggerBox ID="tbSelectedRole" EnableEdit="false" EnablePostBack="false" TriggerIcon="Search"
    Label="所属角色" runat="server">
f:TriggerBox>


<f:HiddenField ID="hfSelectedRole" runat="server">
f:HiddenField>

 

点击 TriggerBox 触发图标的客户端操作是通过服务器端初始化的,这其实是符合FineUI最初的设计目标:尽量减少客户端脚本,降低代码复杂度。

private void InitUserRole(User current)
{
    tbSelectedRole.Text = String.Join(",", current.Roles.Select(u => u.Name).ToArray());
    hfSelectedRole.Text = String.Join(",", current.Roles.Select(u => u.ID).ToArray());

    // 打开编辑角色的窗口
    string selectRoleURL = String.Format("./user_select_role.aspx?ids=", hfSelectedRole.GetValueReference());
    tbSelectedRole.OnClientTriggerClick = Window1.GetSaveStateReference(hfSelectedRole.ClientID, tbSelectedRole.ClientID)
            + Window1.GetShowReference(selectRoleURL, "选择用户所属的角色");

}

 

仔细观察这段代码,可以看到FineUI的努力和身影,我们尽量将常用操作提取成公共的方法。

比如这里的:

hfSelectedRole.GetValueReference()

则是返回一段JavaScript脚本,本质上点击操作是客户端完成的,因此需要在点击的时候获取隐藏输入框的值,而不是调用InitUserRole初始化的时候!!

再比如这里:

Window1.GetSaveStateReference(hfSelectedRole.ClientID, tbSelectedRole.ClientID)

这是FineUI提供的另一个机制:告诉FineUI子页面回发数据时,需要将数据保存到父页面的哪些控件中?

 

子页面代码和逻辑

看完父页面的代码,再来看下子页面怎么返回值。首先,子页面有一个选择的按钮,和一个复选框列表控件:

<f:Button ID="btnSaveClose" ValidateForms="SimpleForm1" Icon="SystemSaveClose" OnClick="btnSaveClose_Click"
    runat="server" Text="选择后关闭">
f:Button>

<f:CheckBoxList ID="cblRole" ColumnNumber="4" Label="所属角色" ShowLabel="false" runat="server">
f:CheckBoxList>

 

点击按钮会触发一个服务器端事件:

protected void btnSaveClose_Click(object sender, EventArgs e)
{
    string roleValues = String.Join(",", cblRole.SelectedItemArray.Select(c => c.Value));
    string roleTexts = String.Join(",", cblRole.SelectedItemArray.Select(c => c.Text));

    PageContext.RegisterStartupScript(ActiveWindow.GetWriteBackValueReference(roleValues, roleTexts)
        + ActiveWindow.GetHideReference());
}

首先获取复选框列表中,用户选择的文本信息和值信息,然后通过 PageContext.RegisterStartupScript 向子页面注册一段脚本。

 

在内部FineUI其实隐藏了很多复杂的逻辑:

1. 弹出窗体可以在父页面弹出,可以在父页面的父页面弹出,也可以在顶层页面弹出。

2. 如果在子页面最快的找到我们所说的父页面,而不是window.parent!!,这里FineUI封装了一个ActiveWindow类。

 

ActiveWindow表示的是当前激活的窗体(也就是我们所说的子页面IFrame所在的Window控件),用来联系业务逻辑上的子页面和父页面。

ActiveWindow.GetWriteBackValueReference(roleValues, roleTexts)

这段代码和前面的 GetSaveStateReference 相对应,用来将用户选择的值写入父页面相应的控件中。

 

至此,我们没写一行JavaScript代码,实现了子页面向父页面传值这个本来需要JavaScript交互的示例。

 

 

AppBox v6.0中的子页面和父页面的复杂交互

首先一点声明,AppBox v6.0虽然和 v3.0版本号变化很大,但是代码改变并不多,主要是为了跟着 FineUI(开源版)的版本走。

 

AppBox v6.0中,我们首先想做的一点改变是:为选择角色的触发器输入框增加清空图标!!

 

看下最后的实现效果:

AppBox v6.0中实现子页面和父页面的复杂交互_第3张图片

AppBox v6.0中实现子页面和父页面的复杂交互_第4张图片

AppBox v6.0中实现子页面和父页面的复杂交互_第5张图片

AppBox v6.0中实现子页面和父页面的复杂交互_第6张图片

AppBox v6.0中实现子页面和父页面的复杂交互_第7张图片

之所以放了 5 张图在这里,是因为这是FineUI(开源版)v6.0.0中内置的 5 种主题。

 

看似一个简单的改变,其实一点都不简单,因为在子页面传值这个已有逻辑基础上,还要进行清空图标是否可见的逻辑改变:

1. 默认如果所属角色存在值,则显示清空图标;否则不显示清空图标

2. 点击清空图标时,清空两个控件的值,然后隐藏清空图标

3. 从子页面返回数据时,需要显示清空图标

由于存在这些逻辑,FineUI内置的服务器端做法已经满足不了需求了。因为我们决定自己写JavaScript代码来实现。

 

父页面代码和逻辑

首先是将 TriggerBox 改为 TwinTriggerBox 控件,并在客户端实现两个触发图标的点击操作:

<f:TwinTriggerBox ID="tbSelectedRole" EnableEdit="false" EnableTrigger1PostBack="false" EnableTrigger2PostBack="false"
    Trigger1Icon="Clear" Trigger2Icon="Search" ShowTrigger1="false" ShowTrigger2="true"
    OnClientTrigger1Click="onSelectedRoleTrigger1Click();" OnClientTrigger2Click="onSelectedRoleTrigger2Click();"
    Label="所属角色" runat="server">
f:TwinTriggerBox>

默认是不显示清空图标的,所以需要在页面加载完毕后,进行逻辑判断:

var tbSelectedRoleClientID = '<%= tbSelectedRole.ClientID %>';
var hfSelectedRoleClientID = '<%= hfSelectedRole.ClientID %>';

function checkSelectedRoleTriggerStatus() {
    if (F(tbSelectedRoleClientID).getValue()) {
        F(tbSelectedRoleClientID).showTrigger1();
    } else {
        F(tbSelectedRoleClientID).hideTrigger1();
    }
}

F.ready(function () {
    checkSelectedRoleTriggerStatus();
});

 

然后再来看下点击两个触发图标的操作:

function onSelectedRoleTrigger1Click() {
    F(tbSelectedRoleClientID).setValue('');
    F(hfSelectedRoleClientID).setValue('');
    checkSelectedRoleTriggerStatus();
}

function onSelectedRoleTrigger2Click() {
    F('Window1').f_show(F.baseUrl + 'admin/user_select_role.aspx?ids=' + F(hfSelectedRoleClientID).getValue() + '', '选择用户所属的角色');
}

点击第二个触发按钮时,会弹出包含IFrame页面的Window控件,并向IFrame地址传入角色值信息。

 

同时,我们还需要一个函数供子页面调用(更新用户所属角色的两个控件值):

function updateSelectedRole(roleNames, roleIds) {
    F(tbSelectedRoleClientID).setValue(roleNames);
    F(hfSelectedRoleClientID).setValue(roleIds);
    checkSelectedRoleTriggerStatus();
}

 

子页面代码和逻辑

子页面点击选择按钮时,所有代码逻辑在客户端完成,这样也减少了一个HTTP回发:

<f:Button ID="btnSaveClose" ValidateForms="SimpleForm1" Icon="SystemSaveClose" EnablePostBack="false"
    runat="server" Text="选择后关闭">
    <Listeners>
        <f:Listener Event="click" Handler="onSaveCloseClick" />
    Listeners>
f:Button>

在客户端脚本,我们需要完成几个逻辑:

1. 通过JavaScript代码获取复选框列表的文本和值信息

2. 获取对应的业务父页面(不是window.parent!!)

3. 调用父页面的 updateSelectedRole 函数

4. 关闭弹出窗体

 

下面来看下实现代码,还是很清晰的:

var cblRoleClientID = '<%= cblRole.ClientID %>';

function onSaveCloseClick() {
    // 数据源 - 复选框列表
    var cblRole = F(cblRoleClientID);

    var roleNames = [], roleIds = [];
    cblRole.items.each(function (item) {
        // 是否选中
        if (item.getValue()) {
            roleNames.push(item.boxLabel);
            roleIds.push(item.inputValue);
        }
    });

    // 返回当前活动Window对象(浏览器窗口对象通过F.getActiveWindow().window获取)
    var activeWindow = F.getActiveWindow();
    activeWindow.window.updateSelectedRole(roleNames, roleIds);
    activeWindow.f_hide();
}

获取复选框列表的值,用到了 extjs 公开的API接口,不难。

 

而获取业务父页面就不那么简单了,原因前面已经提到了,要特别注意,这个业务父页面不是window.parent!!!!

FineUI也提供了相应的客户端接口:

1. F.getActiveWindow() 获取子页面所在的Window服务器控件对象(不是JS的window对象)

2. F.getActiveWindow().window 获取业务父页面所在的window对象(注意不是Window服务器控件)

理解这两个接口后,就简单了,调用父页面定义的 updateSelectedRole 函数:

F.getActiveWindow().window.updateSelectedRole(roleNames, roleIds);

 

小结

通过本篇文章的介绍,我们知道了如何不写一行JavaScript代码来实现子页面向父页面传值。而对于复杂的交互逻辑,我们也可以手工写JavaScript代码来实现。

由于子页面在作为IFrame放在Window控件中的,而Window控件可以在父页面弹出、可以在父页面的父页面弹出,也可以在顶层页面弹出,这就让如何在子页面中获取业务父页面变得扑所迷离(不是window.parent!),幸运的是FineUI对此提供了服务器端支持(ActiveWindow类)和客户端的支持(F.getActiveWindow函数)。

 

关于开源和坚持

AppBox作为FineUI(开源版)的一个演示项目,从 2009 年就一直存在了,期间经历了 v3.0 的大版本更新,其他版本的改动都不多。但是我们一直在更新FineUI(开源版)和AppBox,至今已经有 8 年时间了。

8 年间,我们看过太多的开源项目轰轰烈烈的来,平平淡淡的去,那些曾经熟悉的身影,曾经陪伴我们的代码,都已经不复存在。其实很多时候,开源项目不是被新技术淘汰,而是被开源作者所丢弃,不免让人扼腕叹息。

每个存在都有存在的价值,时间总会让之前的东西看起来不再那么新奇好玩,但是还有那么一帮曾经关注的网友,一直在使用的用户,只有不断的更新,才不会让关心你的人失望。

 

AppBox v6.0中实现子页面和父页面的复杂交互_第8张图片

任何事物的存在价值是无限的!

 

你可能感兴趣的:(AppBox v6.0中实现子页面和父页面的复杂交互)