Twaver-HTML5基础学习(22)层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)、属性管理容器(PropertyBox)

本文涉及的产品
应用实时监控服务ARMS - 应用监控,每月50GB免费额度
简介: 本文介绍了Twaver HTML5中的多种管理容器:层管理容器(LayerBox)、告警管理容器(AlarmBox)、列管理容器(ColumnBox)和属性管理容器(PropertyBox)。文章解释了这些容器的作用、如何获取它们,并提供了一些基本的操作方法。这些容器分别用于管理图层、告警、表格列和属性对象,是TWaver中数据管理和组织的重要部分。

层管理容器(LayerBox)

LayerBox的主要作用是用来管理Layer,得到LayerBox的方式有两种,一种是直接通过var layerBox =
databox.getLayerBox();一种是创建:var layerBox = new twaver.LayerBox(box);

var layerBox = box.getLayerBox();
var layerBox = new twaver.LayerBox(box);

twaver.Layer(图层)继承于twaver.Data,用于描述拓扑网元的图层信息,Layer有四个特殊属性:visible,editable,movable,rotatable。

//显示隐藏
setVisible:function()
getVisible:function()
//是否可以移动
setMovable:function()
getMovable:function()
//是否能编辑
setEditable:function()
getEditable:function()
//是否可以旋转
setRotatable:function()
getRotatable:function()

Twaver-HTML5基础学习(7)Layer图层元素

告警管理容器(AlarmBox)

AlarmBox自然是用来管理告警(Alarm)的,获取AlarmBox的方法也有两种,
一种是var alarmBox =databox.getAlarmBox();另外一种是:var alarmBox = new AlarmBox(box);

Twaver-HTML5基础学习(4)告警元素(Alarm)
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果

列管理容器(ColumnBox)

列管理容器主要用于Table表格中,管理表格中的列(twaver.Column)对象。

    var table = new twaver.controls.Table(box);
    ...
    var column = new twaver.Column(name);
    column.setName(name);
    column.setPropertyName(propetyName);
    column.setPropertyType(propertyType);
    if (valueType) {
   
        column.setValueType(valueType);
    }
    table.getColumnBox().add(column);

Twaver-HTML5基础学习(10)嵌入Table

属性管理容器(PropertyBox)

属性管理容器主要用来管理属性(twaver.Property)对象。

    var sheet = new twaver.controls.PropertySheet(box);
    ...
    var sheetBox = sheet.getPropertyBox();
    var property = new twaver.Property();
    property.setCategoryName(category);
    if (!name) {
   
        name = demo.Util._getNameFromPropertyName(propertyName);
    }
    property.setName(name);
    property.setEditable(true);
    property.setPropertyType(proprtyType);
    property.setPropertyName(propertyName);
    sheetBox.add(property);

学习参考:TWaver Documents

相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
目录
相关文章
|
1天前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
12 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
1天前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
10 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
1天前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
9 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
1天前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
8 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
1天前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
7 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
1天前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
9 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
1天前
Twaver-HTML5基础学习(32)Network样式andTree样式
本文介绍了如何在Twaver-HTML5中自定义Network和Tree组件的样式,包括标签、提示、颜色、告警等。
12 2
Twaver-HTML5基础学习(32)Network样式andTree样式
|
1天前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
11 5
|
1天前
|
前端开发
Twaver-HTML5基础学习(33)自动布局
本文介绍了如何在Twaver-HTML5中使用自动布局功能,支持多种布局类型如圆形、对称、上下左右布局等。
9 3
|
1天前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
8 1