乐趣区

关于java:如何在ovirt中使用GWT框架为页面新增组件

jiezi

如何在 ovirt 中应用 GWT 框架为页面新增组件

Ovirt 中的 GWT 框架（GWTP）

参考 ovirt gwt 代码剖析

如何要在 GWT 页面新增或者批改组件？

批改、新增、删除菜单能够参考文档 减少 / 批改左侧导航

  1. 定位页面

    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 三者之间的关系。

  2. 批改页面
    定位页面后，能够对页面进行操作，比方新增、批改、暗藏某个组件。留神如果 view 页面有对应的 xml 页面，批改时须要将两个文件内容同步。
    以下以在新建、编辑虚构网卡配置集页面中新增平安组下拉列表为例

    • 依照以上办法对页面进行定位，找到须要批改页面 VnicProfilePopupView.java
      且能够发现 VnicProfilePopupView.java 存在对应 VnicProfilePopupView.ui.xml 中存在各种援用
    • 在页面中新增平安组单选组件

    1. 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}” 增加到组件上

    2. VnicProfilePopupView.java
      减少名称为 xml 中 ui：field 值的参数，类型对应所应用的的组件

      @UiField(provided = true)
@Path("securityGroups.selectedItem")
public ListModelListBoxEditor<SecurityGroupForVnic> securityGroupsEditor;

      在构造方法中对组件进行初始化

      securityGroupsEditor = new ListModelListBoxEditor<>(new SecurityGroupForVnicRenderer(constants));

    3. 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")))));
 }
 }

  3. 留神点

    1. 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 组件时，须要做的操作，具体页面、具体性能须要依据理论进行设计

退出移动版