Skip to end of metadata
Go to start of metadata

简述

SplitPanel可以将页面分割成两部分,如左右或上下,并且可以通过SplitPanel在浏览器中直接拖拽改变分割的布局。

创建视图

在工程中创建新的package"sample.chapter02",并通过Dorado7 Studio(参考05. 创建HelloWorld页面)创建视图SplitPanel。

添加控件

选择View根节点,并通过Dorado7 ToolBox找到SplitPanel,双击添加SplitPanel控件。

对SplitPanel设定属性:

属性名称

描述

directionleft左右分割
position200在direction为left情况下,position的值表示的含义为分割栏举例左边的边距为200(也就是SideControl的宽度为200)

SplitPanel 下包含2个子对象,分别为MainControl主控件和 SideControl边控件,它们可以实现上下或左右式的布局,通过控制SplitPanel的direction属性设定布局形式,边控件的大小可以 通过属性position设定。关于属性更详细的介绍可以参考Client API 中关于SplitPanel的相关章节。

页面预览

在浏览器中输入如下网址:

页面效果如下:

添加子控件

MainControl和SideControl都是容器型的控件,我们可以在内部添加其他的Dorado7控件。

 我们以Label控件为例,在SplitPanel的主控件和边控件分别添加一个Label对象。

并分别设定两个Label控件的text属性为:"主空间"和"边空间",如下图:

保存当前视图后,刷新SplitPanel页面,浏览页面效果。

Labels
  • No labels