共计 6357 个字符,预计需要花费 16 分钟才能阅读完成。
如何在 ovirt 中应用 GWT 框架为页面新增组件
Ovirt 中的 GWT 框架(GWTP)
参考 ovirt gwt 代码剖析
如何要在 GWT 页面新增或者批改组件?
批改、新增、删除菜单能够参考文档 减少 / 批改左侧导航
-
定位页面
ovirt 中的页面明规定,ovirt 页面
以集群为例- 集群列表页面
MainClusterView.java(V) 相似页面为 MainNetworkView.java MainHostView.java - tab 页面
SubTabClusterGeneralView.java 相似页面为 SubTabHostGeneralView.java -
新建、删除、批改等各种按钮监听页面
ClusterPopupView.java 相似页面为 HostPopupView.java要想找到这些页面能够通过该页面名称在 PresenterModule.java 页面中进行查问,PresenterModule 中定义了每个 tab、popubview 的 M、V、P 三者之间的关系。
- 集群列表页面
-
批改页面
定位页面后,能够对页面进行操作,比方新增、批改、暗藏某个组件。留神如果 view 页面有对应的 xml 页面,批改时须要将两个文件内容同步。
以下以在新建、编辑虚构网卡配置集页面中新增平安组下拉列表为例- 依照以上办法对页面进行定位,找到须要批改页面 VnicProfilePopupView.java
且能够发现 VnicProfilePopupView.java 存在对应 VnicProfilePopupView.ui.xml 中存在各种援用 - 在页面中新增平安组单选组件
-
VnicProfilePopupView.ui.xml
在 VnicProfilePopupView.ui.xml 中存在各种援用<ui:UiBinder <!-- GWT 组件 提供能够援用的组件(GWT 原生、GWTbootstrap3、ovirt 原生)--> xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:d="urn:import:org.ovirt.engine.ui.common.widget.dialog" xmlns:e="urn:import:org.ovirt.engine.ui.common.widget.editor" xmlns:ge="urn:import:org.ovirt.engine.ui.common.widget.editor.generic" xmlns:k="urn:import:org.ovirt.engine.ui.common.widget.form.key_value" xmlns:b="urn:import:org.gwtbootstrap3.client.ui"> <!-- 援用利用常量,个别设置组件名称 --> <ui:with field='constants' type='org.ovirt.engine.ui.webadmin.ApplicationConstants' />
倡议应用原生,及框架中的已知简略组件,能够在网上查问文档进行参考
<b:Row> <e:ListModelListBoxEditor ui:field="securityGroupsEditor" label="{constants.safeGroup}" usePatternFly="true" labelColSize="SM_6" widgetColSize="SM_6" /> </b:Row>
<e />
: 组件所在库
ListModelListBoxEditor
:组件名称
ui:field="securityGroupsEditor
“: 该参数须要和 view 中保留雷同
label="{constants.safeGroup}"
: 组件显示名称
labelColSize="SM_6"widgetColSize="SM_6"
:组件款式
还能够在 xml 中新增 css 款式<ui:style> .firstRow {padding-top: 15px;} .hide_ext {display: none;} </ui:style> <b:Row addStyleNames="{style.hide_ext}"> <b:Column size="SM_12" > <g:Label text="{constants.customPropertiesVnicProfile}" /> </b:Column> </b:Row>
申明的 css 能够应用 addStyleNames=”{style.hide_ext}” 增加到组件上
-
VnicProfilePopupView.java
减少名称为 xml 中 ui:field 值的参数,类型对应所应用的的组件@UiField(provided = true) @Path("securityGroups.selectedItem") public ListModelListBoxEditor<SecurityGroupForVnic> securityGroupsEditor;
在构造方法中对组件进行初始化
securityGroupsEditor = new ListModelListBoxEditor<>(new SecurityGroupForVnicRenderer(constants));
-
VnicProfileModel.java NewVnicProfileModel.java EditVnicProfileModel.java
NewVnicProfileModel、EditVnicProfileModel 继承了 VnicProfileModel,雷同操作在 VnicProfileModel 中实现。-
雷同操作
申明对象,用来保留后盾查到的值,以及名称须要对应 view 页面中@Path("securityGroups.selectedItem")
中securityGroups
// 过滤从后盾查来的值,使其合乎组件对应数据格式 private ListModel<SecurityGroupForVnic> securityGroups; public ListModel<SecurityGroupForVnic> getSecurityGroups() {return securityGroups;} public void setSecurityGroups(ListModel<SecurityGroupForVnic> securityGroups) {this.securityGroups = securityGroups;} // 用来存取后盾查问的值 List<ExtSecurityGroupForCreate> securitys; public List<ExtSecurityGroupForCreate> getSecuritys() {return securitys;} public void setSecuritys(List<ExtSecurityGroupForCreate> securitys) {this.securitys = securitys;}
申明空选项, 下拉列表设置空选项
private static final SecurityGroupForVnic EMPTY_SECURITY = new SecurityGroupForVnic();
在构造方法中对数据进行初始化
// 初始化下拉列表值 setSecurityGroups(new ListModel<SecurityGroupForVnic>()); // 申请后盾,查问安全局数据 querySecurityGroupList();
Frontend.getInstance().runQuery()
: 申请后盾接口办法
QueryType.GetAllSecurityGroup
: 后盾申请 query, 后盾实现为GetAllSecurityGroupQuery
new SecurityGroupQueryParameter(0, null)
: 查问参数
new AsyncQuery<QueryReturnValue>()
: 接口申请回调,在该办法中向securitys
赋值public void querySecurityGroupList(){Frontend.getInstance().runQuery(QueryType.GetAllSecurityGroup, new SecurityGroupQueryParameter(0), new AsyncQuery<QueryReturnValue>(returnValue -> {if (returnValue != null) {setSecuritys(returnValue.getReturnValue()); } })); }
在平安组扭转事件中减少
initSecurityGroups()
getDataCenters().getSelectedItemChangedEvent().addListener((ev, sender, args) -> {if (getDataCenters().getSelectedItem() != null) {Version dcCompatibilityVersion = getDataCenters().getSelectedItem().getCompatibilityVersion(); Guid currentDcId = getDataCenters().getSelectedItem().getId(); initCustomPropertySheet(dcCompatibilityVersion); initNetworkQoSList(currentDcId); initNetworkFilterList(dcCompatibilityVersion); initNetworkList(currentDcId); // 该方位为从新初始化平安组下拉列表值 initSecurityGroups();} });
该办法对平安组下拉列表进行值的初始化
private void initSecurityGroups(){if (!getSecurityGroups().getIsAvailable()) {return;} querySecurityGroupList(); if (getSecuritys() != null){List<SecurityGroupForVnic> securityGroupForVnics = new ArrayList<>(); securityGroupForVnics.add(EMPTY_SECURITY); getSecuritys().stream() .filter(sg -> getDataCenters().getSelectedItem() != null && getDataCenters().getSelectedItem().getId().toString().equals(sg.getDataCenterId())). forEach(sg -> {SecurityGroupForVnic securityGroupForVnic = new SecurityGroupForVnic(); securityGroupForVnic.setId(Guid.createGuidFromString(sg.getId())); securityGroupForVnic.setName(sg.getName()); securityGroupForVnics.add(securityGroupForVnic); }); getSecurityGroups().setItems(securityGroupForVnics); initSecurityGroupsValue();} }
保留时页面参数封装,把以后选中的值放到保留参数中
SecurityGroupForVnic selectedItem = getSecurityGroups().getSelectedItem(); if (selectedItem != null && selectedItem.getId() != null && !selectedItem.getId().equals(Guid.Empty)){Map<String ,String> sgs = new HashMap<>(); sgs.put("SecurityGroups", selectedItem.getId().toString()); //$NON-NLS-1$ vnicProfile.setCustomProperties(sgs); }else {vnicProfile.setCustomProperties(null); }
-
差别
NewVnicProfileModel.java
中须要将以后下拉列表中的值选中空选项@Override protected void initSecurityGroupsValue() { // Do nothing getSecurityGroups().setSelectedItem(Linq.firstOrNull(getSecurityGroups().getItems(), new Linq.NamePredicate(null))); }
EditVnicProfileModel.java
须要将已选中的值渲染到下拉列表中@Override protected void initSecurityGroupsValue() {if(getProfile().getCustomProperties() != null && getProfile().getCustomProperties().get("SecurityGroups") != null){getSecurityGroups().setSelectedItem(Linq.firstOrNull(getSecurityGroups().getItems(), new Linq.IdPredicate<>(Guid.createGuidFromString(getProfile().getCustomProperties().get("SecurityGroups"))))); } }
-
- 依照以上办法对页面进行定位,找到须要批改页面 VnicProfilePopupView.java
-
留神点
-
frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/core/Common.gwt.xml
ovirt 中如果想用 backend 创立的实体类,须要在该文件中进行申明
<include name="common/businessentities/network/securitygroups/ExtSecurityGroupForCreate.java"/> <include name="common/businessentities/network/securitygroups/ExtSecurityGroupRuleForCreate.java"/> <include name="common/businessentities/network/securitygroups/SecurityGroupForVnic.java"/> <include name="common/action/securitygroup/SecurityGroupQueryParameter.java" />
总结
该文档只阐明前台新建 GWT 组件时,须要做的操作,具体页面、具体性能须要依据理论进行设计
-