智能表单设计器Web Free Form Designer：FreeForm表单控件使用方法之：基础控件
Posted on 2011-06-22 00:29 智能在线表单设计器 Web Form Builder 阅读(7334) 评论(8) 编辑 收藏 举报FreeForm表单控件使用方法
FreeForm控件一览
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
FreeForm表单引擎与InfoPath Service对比
InfoPath是微软SharePoint下的极重要的表单服务，其客户端Ofiice InfoPath发布于2007年。
FreeForm是昕友软件自主知识产权的XML Web表单引擎。
现在我们来对比FreeForm和InfoPath的区别。
|
|
InfoPath |
FreeForm |
|
服务器端寄存环境 |
|
|
|
|
IIS+.Net Framework（必需） SharePoint Service（必需） InfoPath Service（必需） Database（必需）
|
IIS+.Net Framework（必需） Non Database Or Database（可选） |
|
数据库支持 |
|
|
|
|
SQL Server（唯一可选方式） |
XML或 SQL Server 或 My SQL或 Oracle或 DB2 |
|
Web访问方式 |
|
|
|
|
浏览器访问 |
浏览器访问 |
|
客户端访问方式 |
|
|
|
|
Office InfoPath（唯一可选方式） |
EXE文件 浏览器 |
|
Web 控件支持 |
|
|
|
|
在Web 模式下 InfoPath只有少的可怜的11种输入控件，且极难开发扩展控件(有质疑“极难”的请告知现有的商业或免费InfoPath扩展控件) |
内置53种控件，且可支持任意商业或免费的Silverlight控件，目前商业或免费的Silverlight控件数不胜数。 详见：“FreeForm控件一览 ” |
|
开源 |
|
|
|
|
不开源 |
子项目EffectControls目前已经开源,访问地址：http://effectControls.codeplex.com |
|
关键字 |
|
|
|
|
封闭 |
开放 |
FreeForm表单控件使用方法
普通输入控件 Input
TextBox文本框
描述
TextBox是最常用的录入控件，FreeForm的TextBox在用户使用便利性方面有所改良。
入口
1、 进入FreeForm的控件页，点击“Input”；
2、 点击“TextBox”，出现控件录入弹出框，
注：其他的控件也是通过这种弹出框方式添加，下面其他控件将不再赘述“入口”这一节。
首先录入Basic页，填写控件的基础信息，录入控件名称等属性。
注意，当录入Label Text和Hint的时候，TextBox的展现形式有所不同，这体现了用户使用的便利性，用户可以灵活选择展现方式。
|
|
仅录入Label Text |
仅录入Hint |
|
录入项 |
|
|
|
展现形式 |
|
|
|
|
录入Label Text 和Hint和Default Value |
均不录入 |
|
录入项 |
|
|
|
展现形式 |
|
|
展现形式
显示特性
点击“Display”页
这里控制控件的显示特性，比如我们修改属性
控件显示如下，我们可以看到，字体大小变为20，颜色是蓝色，对齐方式是右对齐。
对宽度和高度进行调整：
控件显示如下：
验证
FreeForm提供了涵盖广泛的控件验证，包括几乎万能的正则表达式验证，
注：不仅是TextBox控件可以验证，其他的控件也是通过这种方式验证，下面其他控件将不再赘述。
点击“Standard Validation”进入验证页
比如我们要规定产品价格必须小于等于100，那么可以这么定义：
另外，我们还规定“产品售价”必须是两位整数和两位小数组成的数字，我们可以用正则表达式来定义。
常用的正则表达式可以参考附件：常用正则表达式。
验证检查
设计检查可以模拟运行时的环境，将错误提示出来。
另外点击验证出错的控件，可以即时显示ToolTip消息。
另外，将错误输出到列表
自动计算
注：不仅是TextBox控件可以验证，其他的控件也是通过这种方式验证，下面其他控件将不再赘述。
MaskedTextBox 格式录入框
描述
MaskedTextBox是预先定义好格式的录入框，比如5位整数、2位小数、某字母和数字组合的8位字符等，可以预防用户输入错误的数据格式。
例一
我们在Mask Express中录入：A999，含义是必须输入一位字母加三位数字
显示结果：
录入后：
例二
在Mask Express中录入：R{A}(8)，含义是必须输入8位字母
显示结果：
录入后：
例三
在Mask Express中录入：LeftNumber(7.2S%)，含义是必须输入7位数字和2位小数，而且后面自动有%符号。
显示结果：
录入后：
使用技巧
字符列表的有效输入：
9 =只有数字
A =只有字母
C =只自定义 - 匹配与过滤字FilterText
Z =数字+自定义
#=字母+自定义
X =任何数字
特殊字符：
\ =转义字符
有效修饰字符：
@ =修饰指标（仅在开始）
U =转换输入为大写
L =转换输入为小写
有效预定义：
RightNumber（[$ S] NNN.DDD [$ S或S％）] =数字输入靠右对齐。
[$ S] =（可选）货币符号和/或正负符号
NNN.DDD =（必需）的整数部分.小数部分
[S％] =（可选）正负符号和/或百分比符号。
LeftNumber（[$ S] NNN.DDD [$ S或S％）] =数字输入靠左对齐。
[$ S] =（可选）货币符号和/或正负符号
NNN.DDD =（必需）的整数部分.小数部分
[S％] =（可选）正负符号和/或百分比符号。
R{?}([U|L]NNN) =重复NNN次。
? =任何有效输入字符。
[U|L] =可选的输入转换为大写或小写。
ShortDate =输入短格式日期。
LongDate =输入长格式日期。
ShortTime=输入短格式时间。
LongTime=输入长格式时间。
ShortTimeAMPM =输入短格式日期带AMPM。
LongTimeAMPM =输入长格式日期带AMPM。
Label 标签
描述
标签控件
CheckBox复选框
描述
复选框控件
RadioButton单选框
描述
单选框控件
Password密码框
描述
密码框控件
IntTextBox整数录入框
描述
整数录入框控件
DecimailTextBox小数录入框
描述
小数录入框控件
ComboBox组合框
描述
组合框控件
显示：
ListBox列表框
描述
列表框控件
DatePicker日期选择框
描述
日期选择框控件
TimePicker时间选择框
描述
时间选择框控件
RichText富文本框
描述
富文本框控件
HyperlinkButton
特效输入控件 Effect Input
EffectControls简介
EffectControls是昕友软件开发的一套Silverlight特效动画效果控件，目前已经开源，访问地址：
http://effectControls.codeplex.com
效果预览：
EffectControls简介：
DropShadowEffect
用于控件阴影的显示
正常状态：
BlurEffect
正常状态：
鼠标经过：
FadeEffect
正常状态：
鼠标进入：
鼠标经过：
RotationXEffect
正常状态：
鼠标经过：
RotationYEffect
类似RotationX1Effect
RotationZEffect
效果
RandomColor
正常状态：
鼠标经过：
NoBorderLineEffect
正常状态：
鼠标经过：
UnderLineEffect
正常状态：
鼠标经过：
EffectTextBox
描述
EffectTextBox特效输入框控件是具有样式效果的输入控件，特效包括阴影、雾化、淡入、色彩边框等。
入口
1、进入FreeForm的控件页，点击“Effect”页；
2、点击“EffectTextBox”，出现控件录入弹出框，
注：其他的控件也是通过这种弹出框方式添加，下面其他控件将不再赘述。
首先录入Basic页，填写控件的基础信息，录入控件名称等属性。
在弹出框的下方，可以看到Effect选项，调整选项可以看到效果的预览。
|
|
|
|
|
|
展现形式
分别添加一些控件，可以看到效果：
EffectLabel
描述
特效标签控件
EffectCheckBox
描述
特效复选框控件
EffectSlider
描述
特效滑块控件
以下控件效果类似，不再赘述。
EffectRadioButton
EffectIntTextBox
EffectDecimalTextBox
EffectComboBox
EffectListBox
EffectDatePicker
EffectTimePicker
EffectProgressBar
EffectHyperlinkButton
高级输入控件 Expert Input
高级输入控件是加强显示效果的控件，更加直观和有特色。
Button
描述
按钮控件
WebBrowser
描述
浏览器控件
ProgressBar
描述
进度条控件
Rating
描述
评分控件
SliderGauge
描述
可拖拽进度条控件，这个控件和进度条控件类似，区别是进度条可以拖拽。
Gauge
描述
指标控件
Slider
描述
可拖拽进度条控件，这个控件和可拖拽进度条控件类似。
Calendar
描述
日历控件。
GlobalCalendar
描述
国际日历控件。
Chart
描述
图表控件
线体控件 Line
图标控件Icon
图标控件用于美化表单
列表控件 List
DbConnection
RepeatTable
描述
重复表格控件
添加方法
在List控件页下，点击RepeatTable添加，比如要添加5行5列的表
如果是3行6列的表：
还可以控制表格的显示属性，比如高度、宽度。
效果：
待续……
在线演示：
