TERSUS画画一样开发软件 显示元件介绍-容器类显示元件

TERSUS无代码手机电脑管理类软件开发，其中可拖放使用的容器类显示元件包括：内容显示块（Pane）元件、行显示元件（Row）、列显示元件（Column）、工具栏元件（Tool bar）、组合元件（Group）

内容显示块（Pane）元件是一个显示容器，可以做为一个显示框处理，前端客户只能看到他属性设定的效果，除属性中设定边距及颜色边框等可显示要素外，前端显示效果中客户是看不到这个块的其它内容的。主要的作用：

1、约束了放入其中的其他显示元件的通用属性，定义在它上面的属性如果在其内部放置的其它显示元件上不进一步定义则自动父层属性继承下来。

属性定义可以直接选中元件在添加html.style或html.styleClass来进行定义，后者定义的是一个CSS样式组名（具体样式在项目的样式文件中定义即可，参考另一篇样式管理文章），前一个可直接放CSS样式名和值：

选中后进行样式属性设置

2、可以做为主显示界面中上下左右大框架设计，比如下面设计中可以在一个页面中放四个显示块，四个的大小已拖放过以便于理解，第一个可以做为头部，放名称和LOGO图标，第二个可以是左侧菜单内容区，第三个是具体内容区域，第四个是底部显示比如网页的版权信息等：

显示块设计整体显示布局

行显示元件（Row）:和显示块的作用及使用基本一样，唯一区别是其中放置的显示元件都将排在一行中显示在客户端，除非属性中设定边距及颜色边框等可显示要素，前端也看不到一个没属性的行元件，其主要作用：

1、约束了放入其中的其他显示元件的通用属性，同显示块作用1；

2、放在列元件中，可以设计一些网格状显示的布局（网格状的显示也可以采用复杂表格来设计），放在一个列元件中的若干行中的对应的第一、二、...等元件，自动对齐，按最宽的那个来分配每列的宽度：

列元件及内容显示设计示例

列显示元件（Column）：主要是为设计网格状显示布局而做的，作用主要是与行配合进行设计，同行元件作用2，对列的网格线等进行大小样式颜色处理可通过列的属性的设定来完成。设计方法同显示块作用1中说明。示列如上图。

工具栏元件（Tool bar）:用于在其中放置多个按钮或按钮组元件，好处是可以统一设定一些内部元件的属性及将多个按钮归至一处，比如在一个行元件中，左右都可以放置多个按钮时，如果右侧有3个按钮，可以将它们放进一个工具栏元件中，对工具栏进行一个“float:right;”的样式定义，这样放工具样款中3个按钮就显示在一行的右侧了：

工具栏中一般放按钮并定义样式

组合元件（Group）：是一个逻辑规类用的容器，好处：

1、将一些显示元件放在一个组中，开发时查看方便有条理；

2、复用时直接选中组就可以将组中的元件全部复用。

其中以上好处，最大的优势就是将数据库表或常用的一些通用功能块放在一起时用它来建组，以方便查找使用。

组元件中设计数据库表

注意：组元件以上好处其实其他元件也同样具备，同一个列或行中的元件放在列或行中也可以清楚理解，且复制一个列或行元件，也就将其中所有的内容都复制使用了。所以在实际开发中，不建议使用组元件。