Skip to end of metadata
Go to start of metadata

通过对上面布局对象的学习,接下来开发一个综合的页面,类似主框架页面,主要使用了SplitPanel、TabControl、ToolBar、Tree实现。

 

在工程src目录下,创建一个新的视图命名“Main.view.xml”,设定视图属性:

属性名称

描述

title

Dorado7.0 快速入门

设定页面标题

页面布局

需要开发的是一个具有顶部菜单条,页面分割为左右两个工作区域。根据前面的经验,可以通过使用ToolBar创建菜单条和SplitPanel对象实现页面分割。

 

第一步:为视图添加ToolBar对象

第二步:添加SplitPanel对象

 

在视图中添加SplitPanel对象放置于ToolBar下方,并设定其属性:

属性名称

描述

Postion

200

 

丰富ToolBar

可以为ToolBar添加一个文字描述,可以通过ToolBar的子控件ToolBarLabel实现,另外需要在右侧添加一个带有图标的按钮并绑定到一个菜单。

 

第一步:添加ToolBarLabel

点击ToolBar,添加ToolBarLabel控件。

第二步:设定ToolBarLabel属性

 

设定ToolBarLabel属性:

属性名称

描述

padding-left

5

这个属性需要在Style属性添加。选择“style”属性,点击属性下方的"add"添加.

label

Dorado7 快速入门

 


保存后可以通过浏览器查看效果。

第三步:创建菜单

为View添加一个Menu对象,并添加2个MenuItem控件,分别为Item设定其Caption为“Help”与“About”。

第四步:实现菜单事件

新建Main.js文件,为About菜单绑定事件,在Main.js文件中填入如下代码:

第五步:添加ToolBarButton

为ToolBar添加Fill对象接着添加ToolBarButton对象,并设定Menu属性为Menu1。

第六步:设定ToolBarButton图标

属性名称

描述

icon

url(>skin>common/icons.gif) -100 -20

通过icontool工具生成。

 

 

保存后通过浏览器可以看到现在的效果。

添加Tree和TabControl

第一步:添加tree

 在边分割区域添加Tree,作为导航树。

第二步:添加TabControl

 在主分割区添加TabControl,并设定属性ID为“tabControl”。

第三步:添加树节点

 在树上添加树节点,设定Tree控件的id为tree1,并在第一个子节点下再添加一个子节点。

分别为添加Node设定Label属性。第一个节点的Label为chapter01,第二个为chapter02,第三个为chapter03,第四个为chapter04,第一个节点的字节点Label为HelloWorld.

现在的页面效果如下:

设定节点icon属性为

属性名称描述
iconurl(>skin>common/icons.gif) -160 -80通过icontool生成

 

树节点与TabControl的联动

如何在Tree的节点点击时动态为TabControl添加Tab呢?在Tree对象中,每次点击数节点都会触发Tree本身的事件,其中OnDataRowClick事件会在每次树节点点击时触发,可以通过在这个事件中编写一些代码来控制TabControl。

需要实现点击左侧树上节点,在右侧TabControl中打开一个Tab页面,并在其中展现前面开发的例子。如,在点击HelloWorld节点的时候在右侧新建一个IFrameTab并打开前期开发的HelloWorld页面。

 需要在Tree的OnDataRowClick中编写代码用于控制TabControl,由于要打开前期开发的页面在TabControl中,根据前面的学习,需要使用IframeTab,但是IFrameTab有一个非常重要的属性Path需要设定,由于制定打开的页面地址。为了实现此功能需要在需要打开页面的树节点上把这个地址传递过去,可以配置HelloWord这个节点的UserData属性,把需要的路径填写的其中,设定HelloWord这个节点的UserData属性为:sample.chapter01.HelloWorld.d

UserData属性是用户自定义属性。用户可以在其中放置临时数据用于后续操作。

在Main.js文件中为Tree绑定onDataRowClick事件。

动态创建对象可以参考:

03. 创建Dorado7对象(SEFC)

保存后,可以通过页面查看现在的效果。

 

Labels
  • No labels