为 NativeScript 引入 DataForm（Beta 版）
2016 年 8 月 22 日 — 作者：Nikolay Diyanov
一个常见的移动应用程序用例是收集用户数据。例如，当向用户展示注册屏幕时，会显示许多不同的属性（以及数据格式）来收集必要的信息，如姓名（字符串）、年龄（数字）、出生日期（日期时间）和性别（一组预定义的字符串）。另一种情况是购买电影票，您需要选择电影、设置票数、日期等。
虽然每个表单都不同，但根据特定数据类型呈现属性、确保验证规则得到遵守以及保存信息的整体概念遵循一致且规范的表单。您是否希望有一个易于使用的组件，可以为最终用户提供以用户友好且便捷的方式输入所有这些数据的能力？为 NativeScript 引入 DataForm！
与创建您自己的表单相比，使用 DataForm 的主要优势在于实现速度（实际上，只需简单的配置即可显示一个条目表单）、更强大且易于支持的解决方案（由于代码大小大大减小）以及最后但并非最不重要的 - DataForm 组件会根据本机操作系统设计规范自动呈现输入字段。DataForm 可以根据输入数据模型自动生成必要的输入字段。您还可以根据需要调整默认编辑器和样式。请阅读以下内容以了解更多详细信息。从现在起，您将不再需要手动构建表单：）。
首先，让我们看看如何快速设置一个简单的 DataForm。
在我们的页面代码隐藏文件中，像这样设置视图模型
然后，只需将 DataForm 的数据源设置为数据视图模型。这将创建一个属性编辑器列表，其中每个编辑器对应于基础数据类型
这就是这一行 xml 代码的结果
DataForm 是一个非常强大的组件。让我们看看其他一些功能，这些功能也将添加到这个示例中。
如果内置编辑器不足够，您可以创建您自己的自定义编辑器，或从一系列可用编辑器中进行选择，并指示 DataForm 使用它。
例如，在入门部分，我们有一个类型为字符串的 Gender 属性。如果我们必须让最终用户使用软件键盘实际键入性别，那将很不方便。因此，使用这段简单的 xml 代码，我们可以告诉 DataForm，Gender 属性应该由分段编辑器进行编辑，提供三个预定义的值
请注意，在定义分组时，我们还应定义哪些属性/编辑器应驻留在这些分组中。
此操作的结果将为
分组可折叠的事实对于长属性列表非常方便，您可能希望专注于填充一个分组中的数据，而无需滚动整个属性列表。
然后...瞧！
您也可以查看 UI for NativeScript DataForm 文档 以了解有关该组件的更多信息。
虽然每个表单都不同，但根据特定数据类型呈现属性、确保验证规则得到遵守以及保存信息的整体概念遵循一致且规范的表单。您是否希望有一个易于使用的组件，可以为最终用户提供以用户友好且便捷的方式输入所有这些数据的能力？为 NativeScript 引入 DataForm！
与创建您自己的表单相比，使用 DataForm 的主要优势在于实现速度（实际上，只需简单的配置即可显示一个条目表单）、更强大且易于支持的解决方案（由于代码大小大大减小）以及最后但并非最不重要的 - DataForm 组件会根据本机操作系统设计规范自动呈现输入字段。DataForm 可以根据输入数据模型自动生成必要的输入字段。您还可以根据需要调整默认编辑器和样式。请阅读以下内容以了解更多详细信息。从现在起，您将不再需要手动构建表单：）。
首先，让我们看看如何快速设置一个简单的 DataForm。
入门
假设您有以下视图模型export class PersonViewModel {
private _person: Person;
constructor() {
}
get person() {
if (!this._person) {
this._person = new Person("John", 23, "[email protected]", "New York", "5th Avenue", 11, "Male");
}
return this._person;
}
}
export class Person {
public name: string;
public age: number;
public email: string;
public city: string;
public street: string;
public streetNumber: number;
public gender: string;
constructor(name, age, email, city, street, streetNumber, gender) {
this.name = name;
this.age = age;
this.email = email;
this.city = city;
this.street = street;
this.streetNumber = streetNumber;
this.gender = gender;
}
}
在我们的页面代码隐藏文件中，像这样设置视图模型
import viewModel = require("./../view-models/person-model");
export function onPageLoaded(args) {
var page = args.object;
page.bindingContext = new viewModel.PersonViewModel();
}
然后，只需将 DataForm 的数据源设置为数据视图模型。这将创建一个属性编辑器列表，其中每个编辑器对应于基础数据类型
<df:RadDataForm id="myDataForm" source="{{ person }}" />
这就是这一行 xml 代码的结果
DataForm 是一个非常强大的组件。让我们看看其他一些功能，这些功能也将添加到这个示例中。
一些预定义的编辑器。支持自定义编辑器。
DataForm 公开了大量的现成编辑器，用于您能想到的每种类型，例如
如果内置编辑器不足够，您可以创建您自己的自定义编辑器，或从一系列可用编辑器中进行选择，并指示 DataForm 使用它。
例如，在入门部分，我们有一个类型为字符串的 Gender 属性。如果我们必须让最终用户使用软件键盘实际键入性别，那将很不方便。因此，使用这段简单的 xml 代码，我们可以告诉 DataForm，Gender 属性应该由分段编辑器进行编辑，提供三个预定义的值
<df:RadDataForm.properties>
<df:EntityProperty name="gender" displayName="Gender" valuesProvider="Male, Female, Other">
<df:EntityProperty.editor>
<df:PropertyEditor type="SegmentedEditor" />
</df:EntityProperty.editor>
</df:EntityProperty>
</df:RadDataForm.properties>
验证器和反馈信息
DataForm 带有预定义的验证集供您使用。您可以验证字段是否为空、数据是否小于/大于特定长度、数据是否符合电子邮件标准等等。如果验证未通过，将显示自定义的信息消息。
提交模式
提交模式决定何时将您刚输入的值处理到基础数据对象中。选项包括：- 键入时
- 编辑器失去焦点时
- 手动提交（例如，单击按钮）
可折叠组
在入门部分，我们创建了一个表单来编辑人的各种属性。但是，如果根据特定标准对属性进行分组，是否会更加整洁？DataForm 支持我们可以轻松启用的组<df:PropertyGroup collapsible="true" name="Main Info" hidden="false">
<df:PropertyGroup.properties>
<df:EntityProperty name="name">
<df:EntityProperty.editor>
<df:PropertyEditor type="Text" />
</df:EntityProperty.editor>
</df:EntityProperty>
<df:EntityProperty name="age" >
<df:EntityProperty.editor>
<df:PropertyEditor type="Stepper"/>
</df:EntityProperty.editor>
</df:EntityProperty>
<df:EntityProperty name="email" >
<df:EntityProperty.editor>
<df:PropertyEditor type="Email" />
</df:EntityProperty.editor>
</df:EntityProperty>
<df:EntityProperty name="gender" displayName="Gender" index="3" valuesProvider="Male, Female, Other">
<df:EntityProperty.editor>
<df:PropertyEditor type="SegmentedEditor" />
</df:EntityProperty.editor>
</df:EntityProperty>
</df:PropertyGroup.properties>
</df:PropertyGroup>
请注意，在定义分组时，我们还应定义哪些属性/编辑器应驻留在这些分组中。
此操作的结果将为
分组可折叠的事实对于长属性列表非常方便，您可能希望专注于填充一个分组中的数据，而无需滚动整个属性列表。
样式
我们提出的 DataForm 将满足最终用户的需求，但它看起来仍然有些单调。为了解决这个问题，DataForm 提供了广泛的样式选项供您调整。以下是我们如何为分组和编辑器设置样式，以及最终的结果<df:PropertyGroup collapsible="true" name="Address" hidden="false" >
<df:PropertyGroup.titleStyle>
<df:GroupTitleStyle
fillColor="#333399"
labelTextSize="15"
ios:labelFontName="Times New Roman"
android:labelFontName="sans-serif"
labelFontStyle="Bold"
labelTextColor="White"/>
</df:PropertyGroup.titleStyle>
</df:PropertyGroup>
<df:EntityProperty name="city" >
<df:EntityProperty.editor>
<df:PropertyEditor type="Text" >
<df:PropertyEditor.style>
<df:PropertyEditorStyle
strokeColor="#8585ad"
strokeWidth="1"
fillColor="#99ccff"
labelHidden="false"
labelTextSize="18"
ios:labelFontName="Times New Roman"
android:labelFontName="sans-serif-light"
labelFontStyle="BoldItalic"
labelTextColor="#FFFFFF"/>
</df:PropertyEditor.style>
</df:PropertyEditor>
</df:EntityProperty.editor>
</df:EntityProperty>
然后...瞧！
示例和文档
可以在我们的 UI for NativeScript 示例仓库 中找到展示当前 DataForm 功能的运行示例。您也可以查看 UI for NativeScript DataForm 文档 以了解有关该组件的更多信息。