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控件,设置属性如下:

属性说明
idtabcontrolMain控件的Id

如下图所示:

 

步骤3:删除ToolBar原有配置

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

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

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

保存视图文件。

 

步骤4:修改ToolBar配置

鼠标选中ToolBar控件,修改属性如下:

属性说明
idtoolbarMenu控件的Id
listenerspring: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控件,修改控件属性如下:

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

 

步骤6:修改Dialog配置

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

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

 

步骤7:修改AjaxAction配置

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

属性说明
serviceloginServiceForMiddle#doLogoutDorado服务端暴露给客户端的某个服务的名称

 

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

Attachments:

23.3-1.png (image/png)
23.3-2.png (image/png)
23.3-0.png (image/png)