Dorado 9 : 视图配置的注入和导出(sample-center)

简述

视图配置的注入和导出,是指从任意的.view.xml文件中导入一段配置信息(可以是一个控件或一段Group包含的若干个控件)引入到当前视图中,这种视图重用方法对可客户定制业务化组件带来很大的便利性,同时它比传统控件扩展机制的技术要求更低,使得很多项目团队中非高手的普通技术人员也可以轻松的完成这种配置重用的工作,有利于持续的项目代码优化构建。让你重用那些具有通用性的配置信息。

Import控件的使用

在IDE的Auxiliary面板中提供了Import控件对象,如:


利用这个控件对象,我们可以通过它的src属性很轻松的定位到任意的.view.xml中的一个控件。src的语法格式为:

<Import src="view#id" />

这就表示将指定view的指定id的控件对象引入到当前视图中

GroupStart和GroupEnd控件的使用

当我们希望将一个View中的多个控件对象作为一个整体被其他的视图所引入,则我们可以利用GroupStart和GroupEnd控件处理,这两个控件也在Auxiliary面板中,

<GroupStart id="buttons"/>
<Button caption="添加" icon="url(>skin>common/icons.gif) -121px 0">
  <ClientEvent name="onClick">dorado.MessageBox.alert(&quot;您点击了添加按钮.&quot;);</ClientEvent>
</Button>
<Button caption="删除" icon="url(>skin>common/icons.gif) -141px 0">
  <ClientEvent name="onClick">dorado.MessageBox.alert(&quot;您点击了删除按钮.&quot;);</ClientEvent>
</Button>
<GroupEnd/>

如上代码我们将多个Button对象包含在一个Group中。Import还是用如下的规则:

<Import src="view#id" />

其中id为group的id即可。

范例说明

页面效果:

说明:
该页面面板中的添加/删除按钮以及Listbox都是从其他视图注入的:

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
	<View title="视图配置的注入和导出" layout="Anchor padding:20">
		<Panel caption="一个面板控件" width="400" height="300" layout="regionPadding:1">
			<Children>
				<ToolBar layoutConstraint="top">
					<Import src="com.bstek.dorado.sample.basic.ShardComponents#buttons" />
					<Separator />
					<ToolBarButton caption="保存">
						<ClientEvent name="onClick"><![CDATA[dorado.MessageBox.alert("您点击了保存按钮.");]]></ClientEvent>
						<Property name="iconClass">fa fa-save</Property>
					</ToolBarButton>
				</ToolBar>
				<Import src="com.bstek.dorado.sample.basic.ShardComponents#listbox1" />
			</Children>
		</Panel>
	</View>
</ViewConfig>

我们可以看到其中用了两个Import控件,分别注入了com.bstek.dorado.sample.basic.ShardComponents中的buttons和listbox1控件对象,我们再来看ShardComponents视图中这两个控件对象的定义:

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
  <View>
    <ToolBar>
      <GroupStart id="buttons"/>
      <ToolBarButton caption="添加">
        <ClientEvent name="onClick">dorado.MessageBox.alert(&quot;您点击了添加按钮.&quot;);</ClientEvent>
		<Property name="iconClass">fa fa-plus</Property>
      </ToolBarButton>
      <ToolBarButton caption="删除">
        <ClientEvent name="onClick">dorado.MessageBox.alert(&quot;您点击了删除按钮.&quot;);</ClientEvent>
		<Property name="iconClass">fa fa-minus</Property>
      </ToolBarButton>
      <Button/>
      <GroupEnd/>
    </ToolBar>
    <ListBox id="listbox1" items="One,Two,Three,Four,Five,Six,Seven"/>
  </View>
</ViewConfig>

其中我们发现buttons是一个Group控件对象,内部包含了多个ToolBarButton对象,listbox1就是一个简单的控件对象。

Attachments:

Import.png (image/png)
ImportAndExport.png (image/png)
image2020-5-9 16:40:30.png (image/png)