3.3.3.1前端组件的分类

前端页面是由众多组件层层嵌套构成的，这些组件是任讯信息自主研发的一套前端UI组件，称为tfp组件，这些组件根据其功能和特点又分为几大类，它们的继承关系如下图所示：

从图中可知，所有组件都是从一个名为Component的根组件继承过来的，然后分为不可视组件和可视组件，不可视组件就是在界面里不显示任何内容的组件，例如服务请求组件和计数器组件；可视组件就是在界面里会显示具体内容的组件，分为以下几种类型：

[if !supportLists]l?[endif]容器组件：是指可以在其内部放置其他组件的容器型组件，例如布局组件、面板组件、表单组件、选项卡组件等。整个tfp页面最顶层的组件就是页面（Page）组件，它也是容器组件，其他组件都是放在页面组件或其子组件中的，一个页面有且只能有一个页面组件。

[if !supportLists]l?[endif]表单输入项：用来显示或录入动态数据的组件，例如单行文本、单选、多选、下拉列表等组件，其中隐藏域组件实际也不在界面里显示任何内容，但是习惯上将其作为输入项放在表单里，用来存放一些临时性的数据，所以没把该组件放到不可视组件中；可以通过组件编号.value获取或设置输入项的值，通过数据绑定格式属性可以设置输入项在绑定后台数据时采用的格式。

[if !supportLists]l?[endif]图表：用来显示图形化的统计报表，包括折线图、柱状图、条形图、饼状图等；

[if !supportLists]l?[endif]其他可视组件：还有一些可视化组件，不属于上面这些类型中的任何一种，包括可编辑表格、树形组件、文本标签、甘特图等。

3.3.3.2前端组件的三种运行环境

前端组件的代码在整个生命周期中会分别运行在下面三种环境中：

[if !supportLists]l?[endif]设计时：在TaskBuilder的前端页面设计器内对组件进行设计时，组件处于设计时阶段，在该阶段，组件不能进行实际的互动操作，例如不能显示或录入数据，只能用前端页面设计器提供的相关功能对组件的样式、属性和事件等信息进行设置，设置的信息最后都统一按照JSON格式保存到扩展名为tfp的文件内。

[if !supportLists]l?[endif]编译时：在用户访问tfp文件时，如果该文件还没有编译，或者编译后，tfp文件又进行了修改，则任擎会将该文件编译为HTML格式的文件，然后返回给浏览器，以便浏览器加载显示，在这个阶段，前端组件处于编译时环境，任擎会使用组件的渲染器进行编译。

[if !supportLists]l?[endif]运行时：当页面在浏览器里显示时，页面中的所有组件就进入了运行时状态，在运行时，组件可以绑定后台服务查询到的数据，可以让用户进行点击、输入、选择等操作。

3.3.3.3前端组件的构成

一个完整的前端组件由以下几部分构成：

3.3.3.3.1元数据（MetaData）

用来定义每种组件具体都有哪些属性、默认样式、事件和方法，属性包括名称、说明、数据类型、可选值和默认值等，事件包括名称、说明、参数名称和类型等，方法包括名称、说明、参数名称和类型等。元数据相当于组件的数据结构，在TaskBuilder里选中组件后，通过元数据可以决定在右侧的属性和事件设置面板里具体要显示哪些属性和事件，在JS脚本编辑器里调用组件方法时，也是通过分析组件的元数据来决定具体哪个组件有哪些方法可以调用，以及需要传递哪些参数等，下图是图片组件的元数据内容：

3.3.3.3.2数据模型（DataModel）

这里的数据模型是指用来存储前端组件的属性、样式和事件等信息的JSON对象，与前面介绍的用来存储数据库表或视图信息的数据模型不是一个东西。在TaskBuilder里设置组件的样式、属性和事件后，设置的信息都会保存到该组件对应的数据模型对象内，然后在保存tfp页面时，会转换为JSON格式的字符串保存到tfp文件中，在前端页面设计器底部点击“TFP源码”可以看到页面内所有组件的数据模型的JSON格式的信息。在运行时，可以通过 组件编号.dataModel获得组件的数据模型信息，但不建议直接修改该变量的值，因为单独修改数据模型中的属性或样式值不会造成组件对应的HTML元素的变化，应该通过设置组件控制器对象的属性、样式或调用其相关方法来实现，因为执行这些操作时，不仅会修改数据模型里对应的属性或样式值，还会同步修改组件的相关HTML元素。

所有tfp组件的数据模型都有以下属性：

[if !supportLists]l?[endif]id：组件编号，类型为字符串，同一个页面里，组件编号不能重复；

[if !supportLists]l?[endif]type：组件类型，类型为字符串，例如Panel（面板组件）、Label（文本标签）、Button（按钮）等；

[if !supportLists]l?[endif]styles：组件的CSS样式设置，类型为JSON对象，里面的每个属性对应一个CSS样式。

如果是容器组件，则会多一个名为components的属性，类型为数组，里面是子组件的JSON对象。其他属性则根据组件类型的不同而不同，例如所有输入项组件都有value属性，表示输入项的值，数据表格组件有columns属性，用来设置表格的列等。

另外，如果组件设置了事件，则在组件的数据模型对象中，还会出现事件类属性。

点击前端页面设计器底部的“TFP源码”可以查看页面内所有组件的数据模型代码，下图是一个按钮组件的数据模型代码：

3.3.3.3.3控制器（Controller）

我们通常情况下所说的组件实际上就是指该组件的控制器对象，不管是在设计时，还是编译时或运行时，都需要使用控制器对象来设置组件的数据和控制组件的行为。

在运行时，tfp前端框架会为页面里的每个tfp组件生成一个对应的控制器对象，可以用组件编号作为变量名来访问该组件的控制器对象，通过该对象，可以访问或操作组件的以下信息：

[if !supportLists]l?[endif]值：所有输入项类型的组件都有一个名为value的特殊属性，称为组件的值，可以通过 组件编号.value的形式获取或设置组件的值。

获取和设置输入项值的示例代码：

let txt = text1.value;//获取text1组件的值并赋值给txt变量

text1.value = 'Hello'; //将text1组件的值设置为“Hello”

[if !supportLists]l?[endif]属性：是指给每种组件定义的一些参数，在TaskBuilder的前端页面设计器里选中组件后，可以在右侧的属性设置面板里查看和设置这些属性。有些属性是通用的，例如所有组件都有组件编号（id）、组件类型（type）这两个属性，所有可视组件都有CSS样式类和自定义CSS样式属性，所有表单输入项都有数据绑定格式、组件备注、输入提示、必填、只读、禁用等属性。其他属性则根据组件类型的不同而不同。属性基本上都是在设计时设置的，某些组件的某些属性只能在设计时设置，不支持在运行时修改，具体请查看组件的说明。

设置组件属性的示例代码：

image1.src = '/images/logo.jpg';//设置名为image1的图片组件要显示的图片的路径

[if !supportLists]l?[endif]样式：是指可以控制组件外观显示的CSS样式设置项，例如宽度、高度、文字颜色、背景颜色、边框样式、边距等，在TaskBuilder的前端页面设计器里选中组件后，可以在设计器上部的样式设置面板里查看和设置这些样式。不可视组件不需要也不能设置样式。

设置组件样式的代码：

label1.css('color', 'red');//将名为label1的文本标签组件的文字颜色设置为红色

[if !supportLists]l?[endif]事件：是指在页面运行的过程中，由浏览器或者用户执行的某个操作触发的、与各个组件有关的事件，例如页面内容加载完毕事件、按钮点击事件、表单提交后事件等。在TaskBuilder的前端页面设计器里选中组件后，点击右侧边栏里的“事件”选项卡，可以在此查看或设置组件的各种事件，在事件输入框中双击鼠标可以查看和编辑事件处理函数的具体内容，例如点击确定按钮后提交表单，表单提交完毕后关闭当前对话框等。事件一般不需要通过脚本手动触发，所以就不提供示例代码了。

[if !supportLists]l?[endif]方法：是指各种组件对外提供的各项功能，以便在页面脚本中调用，例如调用表单组件的submit()方法可以提交表单，调用数据表格组件的reloadData()方法可以重新加载表格数据。

获取或设置组件的值、属性和样式，可以调用组件的方法，

代用组件方法的示例代码如下：

form1.submit();//提交表单组件form1中所有输入项的数据等等

3.3.3.3.4渲染器（Render）

是指用来生成组件HTML代码的JavaScript对象，可视组件都必须有渲染器，渲染器可以通过组件的数据模型里设置的属性、样式和事件等信息生成该组件对应的HTML代码。设计时会使用组件的渲染器动态生成组件的HTML代码并显示在页面中，编译时会使用组件的渲染器生成组件的HTML代码保存到整个页面的HTML文件中，运行时，正常不需要使用组件的渲染器，因为编译时已经把组件的HTML代码都生成了，但如果要使用tfp.new()方法动态创建组件，则也会用到组件的渲染器。

3.3.3.3.5样式文件

可视组件都有专门的CSS样式文件，用来定义组件内各个HTML元素的显示样式，有的组件还会针对深色背景和浅色背景提供两套CSS样式文件，以便针对不同的背景颜色提供不同的外观样式。

3.3.3.3.6资源文件

前端组件用到的图片、图标、以及第三方的css文件和js脚本等统称为组件的资源文件，这些文件属于辅助文件，不会编译打包到最终的HTML文件中，

在编译tfp文件时，会先用各个组件的渲染器根据自己数据模型里的信息生成整个页面的HTML代码，然后再将页面里所有组件的元数据、控制器和样式文件的代码全部打包压缩后放到该HTML文件中，这样，当浏览器打开该HTML页面时，就不需要再从服务器分别加载这些信息，可以实现页面的秒开。