Dorado 5 : 2.5.1.Menu(菜单) (RF2)

Dorado中提供的菜单组件，可以灵活定制，并具有多种展现形态，如下图的菜单工具栏，OutlookBar以及与菜单绑定的按钮。以及系统右键菜单。

图表 126
我们可以在studio中直接设计menu对象，如下图：

图表 127
菜单项的设置如下：

其中label为菜单项标题,disabled表示菜单是否禁用,visible属性表示是否需要隐藏。
菜单项的层次不作限制

通过视图模型配置文件定义

图表 128
Xml范例代码：

MenuItem就是菜单中的菜单项对象，基本属性使用时注意name属性要求使用英文命名，label为菜单显示的标题，而path属性主要用于系统主框架页面中的不同模块的URL连接，通过path属性指定要链接的URL字符串。
对于系统主框架页面设计中，我们可以通过Menu的target属性指定目标框架。

定义好菜单之后，下一步的工作就是如何显示菜单。显示菜单可以通过指定菜单容器实现。这些容器常用的有：

MenuBar：

图表 129
通过设定MenuBar的menu属性绑定到菜单上，代码如下：

OutlookBar:

图表 130
通过设定OutlookBar的menu属性绑定到菜单上，代码如下:

另外Menu也支持右键菜单处理，通过指定Menu的popupContainer的属性可以右键激活该Menu对象的容器，如树，表格以及HTML标记对象，多个对象之间用逗号分割开:

上述代码表示，treeOrg,tableEmployee,buttonOp三个组件对象右键菜单为menu1对象。

菜单在使用时，除了链接一个新的URL功能之外，在系统中还经常得但当一个业务功能执行的操作。对于URL功能，我们可以很容易得通过MenuItem的path属性以及Menu的target属性实现，而对于业务功能动作，我们也可以通过Menu对象提供的菜单项的单击事件实现，事件的声明如下:

public void onItemClick(Menu menu, MenuItem item)

当单击菜单项时被触发
Parameters
menu - Menu - 触发事件的菜单对象
item - MenuItem - 被单击的菜单项
Returns:
void

例如在doradosample中主界面中的菜单项都是一些特殊的业务操作，地址：

http://www.bstek.com/dorado5/main.jsp

其中Menu对象的onItemClick事件代码定义如下：

switch (item.getName()) {
case "language_chinese": {
commandChangeLanguage.parameters().setValue("language", "cn");
commandChangeLanguage.parameters().setValue("country", "ZH");
commandChangeLanguage.execute();
break;
}
case "language_english": {
commandChangeLanguage.parameters().setValue("language", "en");
commandChangeLanguage.parameters().setValue("country", "US");
commandChangeLanguage.execute();
break;
}
case "skin_default": {
commandChangeSkin.parameters().setValue("skin", "default");
commandChangeSkin.execute();
break;
}
case "skin_simple": {
commandChangeSkin.parameters().setValue("skin", "simple");
commandChangeSkin.execute();
break;
}
case "console": {
open("console.d", "_blank");
break;
}
}

可以看到该事件代码中大部分都是调用一些特殊的Command对象执行命令。

在前面的菜单使用说明中我们都是通过视图模型配置文件完成对Menu对象的初始化工作，另外我们也可以通过java代码初始化Menu对象。在视图模型实现类中，在initControls方法下添加如下的代码：

protected void initControls()
throws Exception {
super.initControls();

Menu menuMain = (Menu)getControl("menuMain");

MenuItem languageItem = new MenuItem("language","Language");
menuMain.getItems().add(languageItem);
MenuItem englishItem = new MenuItem("language_english","English");
englishItem.setDisabled(true);
MenuItem chineseItem = new MenuItem("language_chinese","中文");
languageItem.getItems().add(englishItem);
languageItem.getItems().add(chineseItem);

MenuItem skinItem = new MenuItem("skin","皮肤");
menuMain.getItems().add(skinItem);
MenuItem defaultItem = new MenuItem("skin_default","默认");
MenuItem simpleItem = new MenuItem("skin_simple","简洁");
skinItem.getItems().add(defaultItem);
skinItem.getItems().add(simpleItem);

MenuItem adminItem = new MenuItem("admin","管理");
menuMain.getItems().add(adminItem);
MenuItem consoleItem = new MenuItem("console","控制台");
adminItem.getItems().add(consoleItem);

MenuItem resourceItem = new MenuItem("resource", "网络资源");
menuMain.getItems().add(resourceItem);
MenuItem downloadItem = new MenuItem("download","产品下载");
downloadItem.setPath("http://www.bstek.com/download/dorado/dorado5.zip");
resourceItem.getItems().add(downloadItem);
MenuItem doccenterItem = new MenuItem("doccenter","控制台");
doccenterItem.setPath("http://www.bstek.com/dorado5/doc");
resourceItem.getItems().add(doccenterItem);
MenuItem bbsItem = new MenuItem("bbs","控制台");
bbsItem.setPath("http://www.bstek.com/bbs");
resourceItem.getItems().add(bbsItem);
MenuItem homepageItem = new MenuItem("homepage","BSTEK主页");
homepageItem.setPath("http://www.bstek.com");
resourceItem.getItems().add(homepageItem);
}

以上利用了视图模型的组件动态编程技术，Menu对象的详细API接口说明请参考server-api。
这种通过java代码初始化菜单的效果和在视图模型中来初始化菜单的效果是一致的，相对来说第二种方式更多的被应用与各种系统中，尤其是在权限维护的系统中，我们可以根据登录用户动态初始化菜单的内容。

Menu对象中的菜单项也允许我们利用其所提供的相关Client-API进行动态调整，我们可以通过Menu提供的addItem方法新增菜单项。
下面我们将展现一个根据dataset中的内容来利用client-api动态更新菜单项的例子。
首先，我们有一个名为datasetMenu的dataset，其中包含了一组菜单项的属性。

<Dataset type="Custom" listener="menuJs_datasetMenuListener" id="datasetMenu">
<MasterLink />
<Fields>
<Field name="name">
<Properties />
</Field>
<Field name="label">
<Properties />
</Field>
<Field name="path">
<Properties />
</Field>
</Fields>
<Parameters />
<Properties />
</Dataset>

通过下面的uupdatemenu方法，我们实现在客户端对菜单的进行动态更新。

function updatemenu(){
menu.getTopItem().getItems().clear();
for (var record datasetMenu.getFirstRecord(); record != null; record = record.getNext()) {
var item = new MenuItem(record.getValue("name"), record.getValue("label"));
item.setPath(record.getValue("path"));
menu.getTopItem().addItem(item);
}
}

其中addItem(item)为MenuItem对象的方法，通过这个方法给菜单项增加子菜单项，从而可以方便地实现动态菜单效果，同样这个方法也可以实现多级菜单。

属性	说明
popupContainer	需要通过鼠标右键激活快捷菜单的对象id,多个id之间用逗号分割.
target	菜单项默认打开新页面链接时的目标框架

MenuItem的详细属性说明:

属性	说明
command	菜单项默认需要执行的命令，如果和path同时定义，则只有command生效。
disableIcon	如果菜单项被禁止后，该菜单项需要显示的图标资源的url
disabled	是否禁止菜单项
icon	菜单项的图标资源url
label	菜单项显示的标题
name	菜单项的名称，不要使用中文数字或则特殊字符命名
path	默认菜单项需要打开的链接地址
visible	是否可见

CSS说明
如果我们需要修改光标悬停在MenuItem时光标的形状为可移动对象，则需要在你的工程目录home\smartweb\v2\skins\default\skin.css文件中把.HotMenuItem中的cursor属性修改为move

图表 131
你还可以根据你的需要修改padding，height，background-color等属性

.PopupMenu {
width: 130;
padding: 1;
background-color: #F0F0F0;
border-width: 1;
border-color: #A0A0A0;
border-style: solid;
}

.MenuItem {
cursor: hand;
padding: 2;
height: 24;
border-width: 1;
}

.MenuItem_Disabled {
cursor: hand;
padding: 2;
height: 24;
border-width: 1;
}

.MenuItem_Disabled TD {
color: gray;
}

.HotMenuItem {
cursor: hand;
padding: 2;
height: 24;
background-color: #DDEDF9;
border-width: 1;
border-color: #7BB9E6;
border-style: solid;
}

属性	说明
.PopupMenu	右键弹出MenuBar的默认的风格设定
.MenuItem	菜单按钮的默认风格设定
.MenuItem_Disabled	菜单按钮被禁用时的默认风格设定
.MenuItem_Disabled TD	Menu的Table布局中菜单按钮所在TD区域的皮肤设定，见图MenuBar-1
.HotMenuItem	具有热点的MenuItem的默认风格设定
.PopupMenu	右键弹出MenuBar的默认的风格设定
.MenuItem	菜单按钮的默认风格设定
.MenuItem_Disabled	菜单按钮被禁用时的默认风格设定

Dorado 5 : 2.5.1.Menu(菜单) (RF2)

简述

使用

菜单的定义

菜单的绑定

菜单单击事件的管理

动态编程

Java代码动态编程

JavaScript代码动态编程

Menu详细属性说明:

Attachments: