智能表单设计器Web Free Form Designer:FreeForm表单控件使用方法之:基础控件

时间:2024-02-22 10:12:17
New Document

FreeForm表单控件使用方法

 

FreeForm控件一览

 

 

 

 

 

 

 

 

FreeForm表单引擎与InfoPath Service对比

InfoPath是微软SharePoint下的极重要的表单服务,其客户端Ofiice InfoPath发布于2007年。

FreeForm是昕友软件自主知识产权的XML Web表单引擎。

现在我们来对比FreeFormInfoPath的区别。

 

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是最常用的录入控件,FreeFormTextBox在用户使用便利性方面有所改良。

入口

1、 进入FreeForm的控件页,点击“Input”;

2、 点击“TextBox”,出现控件录入弹出框,

注:其他的控件也是通过这种弹出框方式添加,下面其他控件将不再赘述“入口”这一节。

首先录入Basic页,填写控件的基础信息,录入控件名称等属性。

注意,当录入Label TextHint的时候,TextBox的展现形式有所不同,这体现了用户使用的便利性,用户可以灵活选择展现方式。

 

 

仅录入Label Text

仅录入Hint

录入项

展现形式

 

录入Label Text HintDefault 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 [$ SS%)] =数字输入靠右对齐。

        [$ S] =(可选)货币符号和/或正负符号

        NNN.DDD =(必需)的整数部分.小数部分

        [S] =(可选)正负符号和/或百分比符号。

 

    LeftNumber[$ S] NNN.DDD [$ SS%)] =数字输入靠左对齐。

        [$ 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添加,比如要添加55列的表

如果是36列的表:

还可以控制表格的显示属性,比如高度、宽度。

 

效果:

 

待续……

 

 

 

在线演示:

Demonstrate the latest version(ver2011)

http://crmwin.com/FreeForm2011TestPage.html

.

我们的网站(昕友软件):http://crmwin.com