界面设计器Word格式.docx

界面设计器Word格式.docx

《界面设计器Word格式.docx》由会员分享，可在线阅读，更多相关《界面设计器Word格式.docx（32页珍藏版）》请在冰豆网上搜索。

1.1用途

使用户可以根据自己的需求，简洁方便地自行定义iPensee平台的界面。

1.2功能

使用键盘和鼠标在运行环境下操作和控制可视的控件。

控件操作类型多元化：

Ø

数据集

功能按钮

调起界面

系统操作

超级链接

第二节启动及登录

2.1登录要求

“界面设计器”系统只有系统管理员*才能登录使用。

2.2启动

“界面设计器”的程序图标如下所示：

（其程序名称为$ProgramFile$\iPensee\UI.exe）

步骤一：

在开始\程序\iPensee\界面设计器路径下单击UI图标；

出现登录框如下所示：

图1.1

步骤二：

在登录框中输入正确的用户名和密码后选择其所要操作的系统。

输入完毕后点击

按钮即进入iPensee界面设计器的操作界面。

第三节操作入门

本章将进行界面说明以及详细的各控件使用说明。

3.1界面介绍

图1.2

界面设计器的操作界面如图1.2所示，界面主要分成三块，一是界面上方的菜单栏及控件页，二是界面下方左侧的界面设计显示区，用于显示所见即所得的界面创作；

三是界面下方右侧的属性页，用于设置界面设计元件。

3.2界面元素介绍

（一）菜单

3.21文件

新建：

新建空白界面。

打开：

打开已建立的界面。

保存：

保存当前编辑内容。

重命名：

单击可重新命名当前界面。

复制：

单击复制当前界面。

删除：

单击可删除当前界面。

另存为磁盘文件：

可将当前设计界面保存于其他外部的磁盘内。

打开磁盘文件：

用户可以导入保存在外部磁盘内的文件。

页面设置：

在打印前设置页面的布局、行数等。

打印预览：

单击可以在打印前预览整个界面。

打印：

单击可以打印当前界面。

退出：

单击可退出界面设计器系统。

3.22查看

部分属性：

单击可以查看元件的部分属性，也是常用属性。

全部属性：

单击可以查看元件的全部属性。

中文：

单击可以使部分属性汉化，以简体中文形式出现。

元码：

单击使属性以原代码形式出现。

3.23编辑

控件

单击复制所选对象到剪贴板。

剪切：

单击剪切所选对象到剪贴板。

粘贴：

单击可从剪贴板中粘贴对象。

单击可删除当前组件。

置于顶层：

单击可以使选中的控件浮在最表层。

置于底层：

单击可以使选中的控件埋在最底层。

移动：

单击可以使选中的控件移动到界面中的其他Parent控件上。

3.24选项

业务组件

背景颜色

（二）标签页

3.25标准

（文字）：

单击此按钮可以进行文字编辑。

（图像）：

单击此按钮可以插入图片。

（形状）：

单击此按钮可以插入不同形状的框。

（连线）：

单击此按钮可以插入连线。

（嵌板）：

单击此按钮可以插入嵌板。

（按钮）：

单击此按钮可以插入按钮。

（网页浏览器）：

单击此按钮可以插入网页浏览器。

（插件）：

单击此按钮可以调入外部插件。

（标签页）：

单击此按钮可以插入标签页。

3.26数据集组件

（数据标签）：

单击此按钮可以插入数据标签。

（数据表格）：

单击此按钮可以插入数据表格。

（数据编辑框）：

单击此按钮可以插入数据编辑框。

（数据备注）：

单击此按钮可以插入数据感知备注框。

（文档）：

单击此按钮可以插入文档。

（数据图像）：

单击此按钮可以插入数据图像。

（数据下拉框）：

单击此按钮可以插入数据下拉框。

（日期）：

单击此按钮可以插入日期框。

（数据控件）：

单击此按钮可以插入数据控件。

（数据感知导航按钮）：

单击此按钮可以插入数据感知导航按钮。

（数据属性编辑框）：

单击此按钮可以插入数据属性编辑框。

（数据树形表格）：

单击此按钮可以插入数据树形表格。

第四节设计界面

4.1新建新界面

1．用户通过登录后，进入界面设计操作模块，系统会自动弹出“选择界面”窗口，见图1.3，在“选择界面”窗口里显示了所有已经设计完的iPensee平台界面，单击界面名称选取界面，单击“确认”按钮，进入该界面；

图1.3

2．如果用户需要新建一个空白的界面，单击“取消”按钮，在“菜单”中单击“文件”，选择“新建”，系统弹出“界面属性”窗口，如图1.4。

图1.4

设置界面属性：

●单击录入新界面的名称；

●输入对新界面描述说明；

●单击选择新界面的分类，系统提供多个iPensee平台内部的功能模块作为界面分类的选项，使界面管理更合理有条；

●单击选取新界面的图标，系统提供多种个性化的界面图标供用户选择，方便区分界面，使工作更有乐趣；

●人性化功能设置：

系统不但提供常规界面设置的属性选项，还提供一些人性化的功能属性如下，

“该界面名出现在菜单中”，单击选择此项，表示将该界面的名称列在“选择界面”窗口的列表中；

“隐藏日历栏”，在iPensee平台内调起界面时系统提供了自动显示日历栏的功能，如果用户需要此功能，单击选择此项；

“自动刷新”，系统提供了“自动刷新”功能，该功能是指在iPensee平台内调起界面时系统会根据用户所设定的刷新时间，自动对该界面进行刷新。

单击选择此功能，并输入间隔时间。

●设置完毕后，单击

按钮，确认并保存当前设置；

单击

按钮，取消操作并关闭窗口。

3．界面属性填写完毕后，进入界面设计操作界面，如图1.2，便可以开始进行界面创作。

4.2常用元件属性

想要设计一个个性的新界面，需要充分使用控件按钮等元件。

这些元件通常有些共同的属性，如下：

对齐方式：

确定空间在其父组件区内的对齐方式。

固定：

说明与组件连接的窗体位置点。

自动滚动：

此属性用来确定当鼠标划过控件时，页面的滚动条是否自动滚动。

自动调整大小：

说明组件是否可以根据其内容调整自己的大小。

BevelEdges：

用来读取或设置控件的哪个边为斜面的。

BevelInner：

设置控件的内部斜面的样式。

BevelOuter：

设置控件的外部斜面的样式。

BevelWidth：

设置斜面宽度。

BiDiMode：

BIDI模式，为从右向左写的语言提供支持。

边框类型：

如果边框类型选择bsSingle则边框为单线，如选bsnone就没有边框。

颜色：

读取或改变背景的颜色。

Constraints：

使用Constraint可以详细的指定控件宽度及高度的最大、最小值。

Ctl3D：

确定组件是否有三维效果。

光标：

当前组件上的光标形状。

DockSite：

说明窗口化组件是否是一个停放点。

DragCursor：

当前组件接受拖动时光标的的形状。

DragKind：

如果拖动模式是自动的，让用户选择拖动或停放。

DragMode：

确定组件的拖放行为。

Enabled：

确定组是否被激活。

字体：

确定组件内显示的文本字体。

高度：

组件的高度。

HelpContext：

与对话组件用于激活上下文相关帮助的上下文数值。

HelpKeyword：

此属性支持“关键字”主题的帮助系统。

HelpType：

通过设置此属性来明确应用程序是否通过ID或“关键字”来确定其帮助主题的默认值。

光标提示：

设置控件的提示信息。

水平滚动条：

对滚轴窗口控件隐藏或显示水平滚轴。

左：

组件左上角的水平坐标。

名称：

组件实例的唯一名称。

ParentBackground：

父背景。

ParentBiDiMode：

父BIDI模式。

ParentColor：

确定组件是否适用父组件的Color。

ParentCtl3D：

确定组件是否使用父组件的Ctrl3D。

ParentFont：

确定组件是否使用父组件的Font。

ParentShowHint：

确定组件是否适用父组件的ShowHint。

PopupMenu：

在组件上单击光标右键时出现的弹出式菜单。

显示光标提示：

确定是否显示提示功能。

TabOrder：

确定父组件的切换程序。

TabStop：

确定组件是否可以使用“TAB”键移动组件。

Tag：

储存一个整型变量的值，无实际意义。

上：

组件左上角的垂直坐标。

VertScrollBar：

使用此属性来设置垂直滚动窗口的隐藏、显示、熟练操作。

Visible：

确定组件是否可见。

宽度：

组件的宽度。

4.3标准控件

4.31文字

客户可以根据自己的需求设置界面文字的字体、大小及位置等。

操作方式：

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编写文字。

2．在窗口右侧的属性标签页中可以查看并设置该元件的属性及操作。

（单击查看菜单中的“全部属性”可以查看所有的属性，但是一般使用“部分属性”就可以完成常规操作了。

）在界面右侧元件属性区，有“属性”和“操作”两个标签页。

在“属性”标签页中设置元件的基本属性信息；

在“操作”标签页中设置元件的功能属性。

●属性标签页

单击“属性”标签页标题，进行元件基本属性设置。

重复属性见4.2属性标签页。

补充属性：

Alignment：

用于设置标签上的文字在水平方向上的对齐方式。

标题：

用于设置Label显示的文本内容。

FocusControl：

用于指定关联的组件。

layout：

用于设置标签上的文字在垂直方向上的对齐方式。

ShowAccelChar：

用于设置标签是否显示加速字符。

WordWrap：

显示在标签上的文字将自动绕回。

●操作

单击“操作”标签页标题，进入“操作”界面，如图1.5所示，系统根据不同的元件提供了不同的操作类型，分别有数据集、功能按钮、调起界面、系统操作、超级链接等，单击

下拉框，选择你所需要的操作，设置完毕后，单击

按钮，保存当前操作；

单击

按钮，取消当前操作。

图1.5

数据集：

数据集操作界面如图1.6所示，可以在数据集文本框内编写SQL代码，也可以单击

按钮进入“SQL”编辑器窗口，如图1.7。

图1.6

图1.7

功能按钮：

功能按钮的操作界面如图1.8，此功能是让用户可以直接调用iPensee系统中已经安装的功能插件，有些插件可能需要在调用时设置一些参数，具体可以参考该插件的发布方的说明文档。

在触发功能中，可选择相应的功能模块。

然后编辑参数（如果你不了解参数的意义，请不要随意改动参数！

）

图1.8

调起界面：

调起界面的操作界面如图1.9，此操作按钮具有调起iPensee平台其他界面的功能。

在“界面”中选取你所需的界面，再在“显示方式”中，选择调起界面时其显示方式。

图1.9

系统操作：

系统操作的操作界面如图1.10，SHELL是WINDOWS外壳文件名或URL。

在“指令”文本框里编写指令。

例如：

C:

\xyz\a.exe;

（运行：

exe可执行文件）

D:

\xyz\b.doc;

（调用WORD打开b.doc文件）

（打开网页）。

　图1.10

超级链接：

指iPensee特定的链接指令。

超级链接的操作界面如图1.11所示。

Data：

dataid（dataid为某业务信息的主ID号）即打开ID号为dataid的信息。

Ui：

uiid打开ID号为uiid的iPensee界面。

图1.11

4.32图像

客户可以根据界面设计需要插入相应的图片，使界面更充实、美观。

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编辑图片。

2．选取图片。

UI图像功能支持多种格式的图像文件，如JPG、BMP、ICO等。

在属性标签页中，单击“图像”属性，系统弹出如下窗口，单击“Load”按钮，选取外部的图片文件。

如图用户需要更换已选的图片，先单击“Clear”按钮，清空已选的图片，再单击“Load”按钮，导入新图片。

3.设置其他属性及操作

在窗口右侧的属性标签页中可以查看并设置该元件的属性及操作。

在界面右侧元件属性区，有“属性”和“操作”两个标签页。

单击“属性”标签页标题，如图1.12，进行元件基本属性设置。

图1.12

补充属性（重复属性见4.2属性标签页）：

图像居中：

将图像放在居中位置

IncrementalDisplay：

将其设置为TRUE，表明花长时间来下载很大的被压缩的图片。

图像：

指定图像的组成。

Proportional：

将其设置为TRUE，确保图像完全显示而不会发生像拉伸等扭曲现象。

拉伸图像：

设置对象的尺寸和图形是否自动伸展。

具体操作见4.31操作。

4.33形状

形状元件是在界面设计中辅助设计用的，可以使界面设计起来更随心所欲。

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编辑形状。

4.34连线

连线元件是在界面设计中辅助设计用的，可以使界面更具条理化。

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编辑连线。

Arrows：

箭头。

Control1：

头控件。

Control2：

尾控件。

LineColor：

设置连线的颜色。

LineStyle：

设置连线的类型。

LineWidth：

设置连线的宽度。

4.35嵌板

嵌板元件是在界面设计中也可以作为一个parent，在上面可以放其他的控件。

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编辑嵌板。

BorderWidth：

决定内边界与外边界之间的距离。

FullRepaint：

全部重画。

Locked：

锁定，设置控件可否编辑。

UseDockManager：

用DOCK管理器。

4.36按钮

按钮元件是界面设计中最常用的元件之一，它可以有切换、链接等多种功能。

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编辑按钮。

AllowAllUp：

描述同一组中的所有按钮是否都处于末被选中状态

Cancel：

取消

Default：

设置为TRUE，按钮做为默认按钮

Down：

描述一个按钮的状态是被选中还是末被选中的

Glyph：

描述显示在加速按钮上的图像

GroupIndex：

允许加速成按钮作为一组来使用

Margin：

描述图片边缘和按钮边缘相距的像素数

ModalResult：

是一个简单单击按钮关闭form的方法

NumGlyphs：

描述Glyph属性中包含的图片的数量

Offsets：

位移

Options：

用户可以定制对话框的外观和功能

Orientation：

定向

PointList：

点目录

RoundRectBias：

圆角半径

ShadeColors：

阴影颜色

ShadeStyle：

阴影类型

SmoothFont：

平滑字体

Spacing：

间距

TextOptions：

文本选项

4.37网页浏览器

网页浏览器是在界面设计需要将界面连到互联网时使用的。

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编辑浏览器。

4.38插件

插件元件是在界面设计时需要在界面中调用外部插件时使用的。

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编辑插件。

4.39标签页

标签页在界面设计时的应用很广泛，可以单独使用，也可以作为父控件使用，即在标签页上面放置其他元件，如文字、图片等等。

1．在“标准元件”标签页中，单击图标，在界面设计编辑区便可编辑标签页。

4.4数据集组件控件

4.41数据标签

数据标签是在数据集控件中显示数据库记录的内容。

1．在“数据集元件”标签页中，单击图标，在界面设计编辑区便可进行编辑了。

2．设置数据字段。

第一步：

在“数据源”标签页下，点击“后台数据”，选取数据源；

第二步：

在“属性”标签页中，在“数据字段”属性内输入字段名，也可以在“字段”标签页内选取字段。

3．其他重要设置。

在窗口右侧的标签页中可以查看并设置该元件的属性、数据源及字段。

在界面右侧元件属性区，有“属性”、“数据源”和“字段”三个标签页。

在“数据源”标签页中设置元件的数据源信息；

在“字段”标签页中设置元件的数据字段信息。

其属性内容大致与“文字”的属性内容一致，其区别如下：

数据字段：

包含数据的数据表字段。

DataSource：

将文本控件与数据集包含的域进行连接。

●数据源

用户须在ServiceData工具的数据源标签页中设置好数据源，操作方法见ServiceData操作手册。

然后在UI界面内设置数据集元件的数据源。

单击“数据源”标签页标题，进入“数据源”界面，如图1.13所示。

系统提供两种数据源，“后台数据”和“自定义数据”。

后台数据是该界面内所包含的业务元素，用户根据不同的数据集元件功能选择所需的业务元素数据。

自定义数据是指用户可以根据实际的需求来自定义数据集元件的关联数据，自定义数据必须用SQL语句来编写代码，用户可以单击

按钮，使用“SQL编辑器”来自定义数据源。

如果该数据集元件内的数据需要根据其他数据集元件的数据变化而变化的话，单击

下拉框，选择相应的主数据。

图1.13

4.42数据表格

数据表格是用来显示数据库中表或视图（SQL）的数据结果。

2．设置数据表格。

分为设置数据源和设计表格。

在“行属性”标签页中，单击“设计表格”按钮，系统弹出“表格设定”窗口。

单击“加入全部字段”按钮，系统自动导入数据源中所有的数据字段。

点击选中一个字段，在“属性”栏中，用户可以设置字段的基本属性，如标题可以改为中文，如下图所示，这样平台内调用数据表的时候，该字段名会显示会中文。

在窗口右侧的标签页中可以查看并设置该元件的属性、数据源及行属性。

在界面右侧元件属性区，有“属性”、“数据源”和“行属性”三个标签页。

在“行属性”标签页中设置元件的数据字段信息。

其特有属性如下：

ArrowsColor：

箭头颜色

AutoExpanOnSearch：

在查找时自动展开

AutoSearchColor：

自动搜索颜色

AutoSearchTextColor：

自动搜索文字颜色

BandColor：

band颜色

BandFont：

band字体

BandMaxRowCount：

band最大行计数

BandRowCount：

band行计数

Bands：

可以打开波段编辑器添加或者编辑波段的属性。

CustomizingRowCount：

定制行计数

DefaultFields：

默认字段

DefaultLayout：

默认布局

DefaultRowHeight：

默认行高度

FixedBandLineColor：

固定band线颜色

FixedBandLineWidth：

固定band线宽度

GridLineColor：

格子线颜色

GroupNodeColor：