ACT开发指南|自定义UI组件布局
各位朋友们好,今天给大家讲解,在ACT向导开发中,如何对UI组件进行自定义布局。
我们以图1所示的<帮助>组件为例,演示如何将其从默认布局中的下方移到右边的操作方法。
图1 默认UI布局
首先,在XML界面文件中,用户在可选标签:<uidefinition>下,能创建自定义<layout>元素标签,定义UI界面中放置的组件和各组件间相对位置。<layout>标签下子元素标签的定义的模板如下:
图3 Layout模板代码
默认的ACT向导界面UI的构成,通常包括Title、Steps、Properties、Help和Submit等预定义的组件;组件和其对应类型信息如下图所示。在<layout>标签下,需要定义当前UI界面的<component>子标签,用来指定UI界面存在的组件。标签<component>中定义单组件名称、类型、相对位置关系和尺寸大小,对应的模板代码如下:
- 需定义Component的name和componentType属性值;
- 通过属性topAttachment、bottomAttachment、leftAttachment、rightAttachment,定义当前组件上、下、左、右相邻的组件;
- 通过给定topoffset、bottomoffset、leftoffset、rightoffset属性值,定义各组件间的间距大小。
- 需定义heightType、height、widthType和width的属性值;
- heightType和widthType属性值为FitToContent、Percentage或Fixed;
- FitToContent:组件将拥有由ACT设置的默认大小,height和width无作用;
- Percentage:组件的height和width用整体尺寸的百分比表示;
- Fixed:组件的height和width为固定的像素值大小。
接下来,我们以帮助组件为例:预定义的名称为Help,对应类型为helpContentComponent,其与其他组件的相对位置关系如下:图6 Help组件相对位置关系示例按照上述<component>的定义方法,对应的<layout>标签定义代码如下:
最后,我们为向导中步骤指定layout属性值为LayoutName@ExtensionName,对应代码如下所示:
图8 案例中XML代码
以上,就是今天的全部内容,你学会了吗?欢迎大家后台留言,或者邮件至tguangs@163.com一起讨论交流。
实际上,通过<uidefinition>标签不仅可以定义UI布局,也能自定义界面组件,比如为向导添加如下的图表组件显示,同时也支持创建交互对话框、进度框和自定义CSS样式等,能实现的功能是非常强大的,这些高级进阶内容也会在后续文章更新中给大家详细讲解,希望大家能一如既往地支持小田老师。