Dorado 7 : 23.3.1.1 复制视图并配置控件

步骤1：新建Package并拷贝视图

在项目中创建com.bstek.dorado.sample.standardlesson.middle.main包。

将 com.bstek.dorado.sample.standardlesson.junior.main目录下的 Main.view.xml拷贝到com.bstek.dorado.sample.standardlesson.middle.main包中。

步骤2：新增并配置TabControl控件

在本节中需要修改原来的单页工作区为多页工作区，因此需要新增TabControl控件，在【ViewConfig】节点下的【View】节点下添加一个TabControl控件，设置属性如下：

属性	值	说明
id	tabcontrolMain	控件的Id

如下图所示：

步骤3：删除ToolBar原有配置

由于原来ToolBar上显示的菜单是使用MenuButton进行静态配置，在本节中需要在后台从数据库中sl_menu表中读取菜单信息，因此需要将原来静态配置的MenuButton删除，并且解除绑定在ToolBar上的相关事件。

首先展开ToolBar控件选中已经配置的3个MenuButton，点击【鼠标右键】，选中删除，如下图所示：

然后选中ToolBar控件，删除绑定的onReady事件，如下图所示：

保存视图文件。

步骤4：修改ToolBar配置

鼠标选中ToolBar控件，修改属性如下：

属性	值	说明
id	toolbarMenu	控件的Id
listener	spring:mainDynaView#beforeToolBarInit	对象监听器的服务定位表达式

info

我们希望在ToolBar控件上实现后台MenuButton的动态创建，那么需要引入一个新知识点即动态视图。

前面几个例子中，通过创建视图和添加控件进行开发。所有对控件属性的设定都是在可视化的视图编辑器中完成，我们称这种设定方式为静态设定或设计时设定模式。但是有些时候，由于业务的要求，在视图开发过程中对于某些属性的值在设计时可能并不能确定，例如一些个性化的特征。同样三个按钮，不同的人只能看到其中一部分的按钮，或同样一个按钮可能显示的标题或单击时执行的操作并不一样。

如果需要实现更加灵活的功能，那有必要引入动态视图的开发技术，通过这种开发技术，我们可以通过一段Java代码动态设置视图中控件的属性,或动态的创建控件。通过动态视图技术可以将View更好的与后台Java逻辑进行整合,进行更灵活的控制。

对于动态视图，在本节中不会进行详细描述，但强烈建议阅读以下相关资料后，再继续学习：

动态视图

接下来为toolbarMenu控件重新绑定onReady事件，在onReady事件编辑区中输入如下代码：

//获取tags属性为menuitem的控件集合并为它们绑定onClick事件
view.get("^menuitem").addListener("onClick", function(self, arg){
    // 定义Tab变量
    var tab = {};
    
    // 制定当前的tab为IFrameTab
    tab.$type = "IFrame";
    // 定义新Tab的标签
    tab.caption = self.get("caption");
    // 定义Tab的Path
    // get("userData")表示获取当前菜单的UserData属性，
    tab.path = self.get("userData");
    tab.name = self.get("caption");
    tab.closeable = true;
    tab.icon = self.get("icon");
    
    // 如果当前菜单项有指定的Path则打开新的tab
    if (tab.path) {
        with (view.get("#tabcontrolMain")) {
            // 根据name查找是否已经打开过当前的Tab。
            // 如果没有打开过，则需要添加一个新的Tab
            var currentTab = getTab(tab.name);
            if (currentTab) {
                tab = currentTab;
            } else {
                // 获取ID为tabcontrolMain的对象，并添加一个新的Tab
                tab = addTab(tab);
            }
            // 设定当前的Tab为指定的tab
            set("currentTab", tab);
        }
    }
});

//找到tags为logout的控件集合，为控件添加onClick事件监听器即点击后，弹出对话框
view.get("^logout").addListener("onClick", function(self, arg, dialogLogout){
    dialogLogout.show();
});

note

在上面我们发现js中出现with关键字，with语句可以方便地用来引用某个特定对象中已有的属性，但是不能用来给对象添加属性。要给对象创建新的属性，必须明确地引用该对象。

语法格式

with(object instance)
{
	//代码块
}

有时候，在一个程序代码中，需要多次使用某对象的属性或方法，照以前的写法，都是通过:对象.属性或者对象.方法这样的方式来分别获得该对象的属性和方法，着实有点麻烦，学习了with语句后，可以通过类似如下的方式来实现：

with(objInstance)
{
	var str = 属性1;
	.....
}

去除了多次写对象名的麻烦。

步骤5：修改Label配置

选中Label控件，修改控件属性如下：

属性	值	说明
text	Dorado7实战必修课“企业通讯录”中级教程	Label控件显示的文本

步骤6：修改Dialog配置

鼠标展开【dialogLogout】控件下的Children节点，选中Label控件，修改控件属性如下：

属性	值	说明
text	Dorado7实战必修课“企业通讯录”中级教程	Label控件显示的文本

步骤7：修改AjaxAction配置

接下来需要修改ajaxactionLogout这个控件的配置，原来的service主要是针对初级教程部分，现在需要修改为针对中级教程，修改控件属性如下：

属性	值	说明
service	loginServiceForMiddle#doLogout	Dorado服务端暴露给客户端的某个服务的名称

到目前为止，View部分设置完毕，接下来需要准备后台服务。

Dorado 7 : 23.3.1.1 复制视图并配置控件

Attachments: