返回博客首页
← 所有文章

深入了解 NativeScript UI 的 DataForm

2017年1月25日 — 作者：Rob Lauer

从 Visual Basic 诞生之初（好吧，甚至在那之前），开发人员就一直负责创建表单优先的数据用户界面。您在数据库中有一些数据，并且需要为您的最终用户提供一种简单的方法来管理这些数据。听起来熟悉吗？我们都做过很多次了，当您意识到必须创建另一个表单来管理数据时，您的胃可能会下沉一两英寸！

现在将移动性添加到等式中。您不仅要为 Web 开发，而且还要考虑移动用户将如何与相同的数据交互。文本字段是否太长（或不够长）？选择框是否有意义？他们能否正确点击复选框？哎呀，别算我！

这正是 NativeScript UI 如此令人兴奋的另一个原因。使用 NativeScript UI，我们建立在 Telerik 提供易于使用的组件的传统之上，这些组件以其易用性让开发人员感到高兴 - 并以其引人入胜的功能让最终用户感到高兴。

这篇文章是我们“NativeScript UI 周”的一部分，我们将介绍每个 NativeScript UI 组件的使用方法。今天是关于 DataForm 的，很快我们将为我们提供的每个组件提供一篇深入的文章

什么是 NativeScript UI？

NativeScript UI 是一套用于使用 NativeScript 框架编写的原生跨平台移动应用程序的高级 UI 组件。我们的目标是通过提供预构建的、随时可用的、易于在您的应用程序中实现的组件（以及同样易于样式以匹配您的应用程序的外观和感觉）来简化 NativeScript 应用程序开发。

让我们开始学习有关 DataForm 组件的所有内容。

DataForm（又名 RadDataForm）

DataForm 组件（在代码中称为 RadDataForm）允许您根据现有数据自动创建表单。例如，使用 RadDataForm 和一些 CSS，您可以非常轻松地创建如下所示的表单优先数据 UI

raddataform example

使用 RadDataForm，您不仅可以自动为您创建表单，还可以轻松地在标记或 JavaScript 中自定义这些表单。向表单添加验证以及对 UI 元素进行分组以使大型表单更易于管理也非常容易。

安装 NativeScript UI 的 DataForm

导航到您的 NativeScript 项目目录并使用以下命令安装 NativeScript UI DataForm（无需手动下载）

tns plugin add nativescript-ui-dataform

RadDataForm 入门

请注意，此处演示的所有代码都可以在 此 GitHub 存储库中找到。有关更多代码示例，请查看官方的 NativeScript UI 示例存储库。

插件安装好了吗？太好了！现在我们需要向我们要使用 RadDataForm 的页面的根元素添加一个 XML 命名空间。如果“XML 命名空间”让您感到害怕，请不要担心。您只需要向根<Page>元素添加一个属性，如下所示

<Page xmlns:df="nativescript-ui-dataform">

最后，我们需要将 RadDataForm 组件添加到我们的 XML 标记中，如下所示

<Page xmlns:df="nativescript-ui-dataform">
    <df:RadDataForm id="myDataForm" />
</Page>

当然，此标记实际上不会呈现任何有用的内容（尚未）。让我们添加一些数据并看看 RadDataForm 可以提供哪些神奇功能！

自动创建表单

RadDataForm 的优势在于能够在现有数据结构之上自动生成 UI。听起来好得令人难以置信？让我们让代码证明我们的观点，并从我们的 UI 标记开始

<Page xmlns:df="nativescript-ui-dataform" xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <ActionBar title="RadDataForm Demo" class="action-bar" />
    <df:RadDataForm id="myDataForm" source="{{ album }}" />
</Page>

这里没有什么太疯狂的

  • 我们将pageLoaded函数添加到loaded事件中（见下文）。
  • 我们插入了一个ActionBar以在我们的视图中显示标题。
  • 我们在其中添加了source="{{ album }}"，其中album是我们的 Observable 对象（见下文）。

接下来，我们需要一些 JavaScript 来使其全部工作

var Observable = require("data/observable").Observable;

var page;
var album = new Observable();
var pageData = new Observable();

exports.pageLoaded = function(args) {
    page = args.object;
    page.bindingContext = pageData;

    album = {
        bandName: "Arcade Fire",
        albumName: "Funeral",
        year: "2004",
        owned: true,
        myRating: "9.5"
    };

    pageData.set("album", album);
};

在此代码块中，我们有pageLoaded函数，该函数在我们的主视图/页面加载时执行。在此函数中，我们有一个名为album的 Observable 对象，其中包含一个音乐专辑的数据。

正在寻找 Angular 代码示例？请查看我们的 Angular 的完整文档 ！

请注意，出于演示目的，我们在后端硬编码数据。实际上，您需要通过您自己的 API 访问数据。Nic Raboy 在 这篇文章中提供了一些很棒的示例代码。

所有这些导致以下结果

raddataform simple example

现在请记住，这是我们数据之上的一个功能齐全的 UI！我们不仅从现有数据源绑定了数据，而且 UI 中的标签也正确地从驼峰式大小写转换了！

请注意，您看到的样式来自 NativeScript 的一部分的 核心浅色主题，以及使用 NativeScript 主题构建器进行的一些自定义。

自定义单个字段

虽然 RadDataForm 的默认行为在我们的数据之上提供完整的 UI 方面取得了长足的进步，但通常需要进行一些调整。

幸运的是，RadDataForm 允许我们自定义每个单独的表单字段标签、底层数据编辑器以及它们显示的顺序。让我们看看如何使用 EntityProperty 实现这一点。

对于每个数据实体，我可以指定一个EntityProperty。这些属性非常直观

<df:RadDataForm id="myDataForm" source="{{ album }}">
    <df:RadDataForm.properties>
        <df:EntityProperty name="albumName" displayName="Name of Album" index="0" />
        <df:EntityProperty name="bandName" displayName="Name of Band" index="1" />
        <df:EntityProperty name="year" displayName="Release Year" index="2" />
        <df:EntityProperty name="myRating" displayName="My Rating" index="3" />
        <df:EntityProperty name="owned" displayName="Do I Own This?" index="4" />
    </df:RadDataForm.properties>
</df:RadDataForm>

在这种情况下，我更改了这些字段的displayName（或标签）。我还使用index属性重新排序了项目的显示顺序。

查看文档以查看您可以编辑的所有属性，例如readOnly、hintText以及required + validators，我们将在本文后面讨论这些属性。

在我们继续之前，我们需要自定义某些表单元素使用的编辑器。编辑字符串（例如我们案例中的albumName和bandName）按原样是可以的。我也很高兴布尔型owned属性被转换为 iOS 上的开关和 Android 上的复选框。但是year和myRating中的数字值呢？让我们解决这个问题

<df:EntityProperty name="year" displayName="Release Year" index="2">
    <df:EntityProperty.editor>
        <df:PropertyEditor type="Number" />
    </df:EntityProperty.editor>
</df:EntityProperty>
<df:EntityProperty name="myRating" displayName="My Rating" index="3">
    <df:EntityProperty.editor>
        <df:PropertyEditor type="Slider">
            <df:PropertyEditor.params>
                <df:PropertyEditorParams minimum="0" maximum="10" />
            </df:PropertyEditor.params>
        </df:PropertyEditor>
    </df:EntityProperty.editor>
</df:EntityProperty>

对于year属性，我们正在切换到一个Number PropertyEditor。对于myRating属性，我们使用的是Slider（它本身具有您可以指定的minimum和maximum属性）。

raddataform custom editors

对表单元素进行分组

有时我们的表单会变得很长。太长了。尤其是在移动设备上，这会导致尴尬的用户体验。RadDataForm 允许我们 将表单元素分组在一起，以使长表单更易于管理

<df:RadDataForm id="myDataForm" source="{{ album }}">
    <df:RadDataForm.groups>
        <df:PropertyGroup collapsible="true" name="Album Info">
            <df:PropertyGroup.properties>
                <df:EntityProperty name="albumName" displayName="Name of Album" index="0" />
                <df:EntityProperty name="bandName" displayName="Name of Band" index="1" />
                <df:EntityProperty name="year" displayName="Release Year" index="2" />
            </df:PropertyGroup.properties>
        </df:PropertyGroup>
        <df:PropertyGroup collapsible="true" name="My Info">
            <df:PropertyGroup.properties>
                <df:EntityProperty name="myRating" displayName="My Rating" index="3" />
                <df:EntityProperty name="owned" displayName="Do I Own This?" index="4" />
            </df:PropertyGroup.properties>
        </df:PropertyGroup>
    </df:RadDataForm.groups>
</df:RadDataForm>

在此代码中，我们已将<df:RadDataForm.properties>元素替换为<df:RadDataForm.groups>元素，从而允许我们按组组织字段。（请注意，我们还删除了编辑器自定义，以使此处代码更易于阅读。）

这导致以下结果，其中第二个组已折叠

raddataform groups

验证表单条目

我们将要查看的最后一个 RadDataForm 功能是至关重要的表单条目验证。这里有两个方面需要考虑，一个字段是否是必需的以及您是否要验证该字段的内容。

让我们看看如何处理这两者

要指定一个字段是必需的，您只需将required="true"添加到EntityProperty中，如下所示

<df:EntityProperty name="albumName" displayName="Name of Album" index="0" required="true" />

我们还可以使用内置的 验证器验证各种场景

<df:EntityProperty name="year" displayName="Release Year" index="2">
    <df:EntityProperty.validators>
        <df:MinimumLengthValidator 
            errorMessage="Year must be at least 4 digits!" 
            length="4" />
        <df:MaximumLengthValidator 
            errorMessage="Year cannot be more than 4 digits!" 
            length="4" /> 
    </df:EntityProperty.validators>
</df:EntityProperty>

在这种情况下，我们添加了MinimumLengthValidator和MaximumLengthValidator以确保我们的年份正好是 4 位数字。我们将不得不处理 9999 年带来的后果：)。

raddataform validation

还有什么别的吗？

我希望您已经了解了在 NativeScript 应用程序中现有数据源之上添加令人愉悦的表单有多么容易。我们没有涵盖 RadDataForm 的一些有趣部分，例如 提交模式、堆栈与网格 表单布局、如何 设置样式以及能够 向表单标签添加图像。