返回博客首页
← 所有文章

DataForm 现已正式发布

2016 年 9 月 21 日 — 作者 Nikolay Diyanov

大约一个月前，我们发布了 DataForm for NativeScript 的 Beta 版。在添加了一些新功能并解决了我们发现的问题后，我们很高兴地宣布正式发布 DataForm for NativeScript，它是 UI for NativeScript Pro 的一部分。

dataform-nativescript-complete

DataForm

在发布 Beta 版文章中，我向您展示了如何快速设置 DataForm、添加自定义编辑器、设置分组以及添加一些样式。现在，我将重点介绍当时没有用代码实现的功能。

验证和反馈

一组预定义的验证规则允许您快速为输入的数据设置某些要求。以下是如何轻松地为一个字段设置两个验证规则（NonEmptyValidator 和 MaximumLengthValidator），其中第一个规则不允许空值，第二个规则将数据限制在最多 12 个字符

dataform-validation

<df:EntityProperty name="username"  index="0">                
     <df:EntityProperty.validators>
         <df:NonEmptyValidator
             errorMessage="用户名不能为空。" />
         <df:MaximumLengthValidator
             errorMessage="用户名最多可以包含 12 个字符。"
             length="12" />
     </df:EntityProperty.validators>            
</df:EntityProperty>

其他支持的验证规则包括

  • LengthValidator。您可以设置输入数据的最小长度和最大长度
  • MinimumLengthValidator。您可以仅设置最小长度
  • RangeValidator。最终用户设置的数字应落在给定的范围内

至于验证错误文本，如您所见，这可以在 xml 中使用 errorMessage 属性轻松设置。

以上验证规则可以在 DataForm 级别触发

<df:RadDataForm id="myDataForm" source="{{ user }}" validationMode="Immediate">

使用以下 validationMode 值之一

  • Immediately。当您在编辑器中更改值时
  • OnLostFocus。当编辑器失去焦点时
  • Manual。在 commitAll 函数调用时

提交模式

使用 DataForm 的 commitMode 属性，可以在三种不同的情况下将 DataForm 中输入的值提交到基础数据对象

dataform.commitMode = dataFormModule.CommitMode.Immediate;

可用的模式是

  • Immediate。当最终用户编辑属性的值时，该值会反映到基础数据对象上。
  • OnLostFocus。当编辑器失去焦点时，该值会反映到基础数据对象上。
  • Manual。该值(s) 会在调用 commitAll 函数时反映到基础对象上。

访问编辑器

一些有用的编辑器 API 已在 DataForm 组件的第一个正式版本中发布。我们理解，编辑器的默认外观可能并不总是适合您的应用程序外观或区域设置。因此，我们公开了一个名为 editorUpdate 的事件，该事件在编辑器出现时被调用。以下是如何更改日期时间编辑器值的格式，并在上下按钮和显示值之间设置一些间距

dataform-adjustments

export function onEditorUpdate(args) {
   if (args.propertyName == "age") {
       changeEditorSpacing(args.editor);
   }

   if (args.propertyName == "birthDate") {
       changeDateFormatting(args.editor);
   }
}

export function changeEditorSpacing(editor) {
   if (application.ios) {
       var labelDef = editor.gridLayout.definitionForView(editor.valueLabel);
       labelDef.contentOffset = {
           horizontal: -25,
           vertical: 0
       };
   } else {
       editor.getHeaderView().setPadding(12, 12, 12, 48);
   }
}

export function changeDateFormatting(editor) {
   if (application.ios) {
       var dateFormatter = NSDateFormatter.alloc().init();
       dateFormatter.dateFormat = "yyyy-MM-dd";
       editor.dateFormatter = dateFormatter;
   } else {
       var simpleDateFormat = new java.text.SimpleDateFormat("yyyy-MM-dd", java.util.Locale.US);
       editor.setDateFormat(simpleDateFormat);
   }
}

要立即开始使用 DataForm，请从 NPM 获取 UI for NativeScript Pro 的免费试用版。

DataForm 的下一步计划

现在 DataForm 已经正式发布，下一步是将其启用到 Angular 2 中。您可能会期待这将在我们接下来的版本中实现。

还有一些需要提到的

与官方 Angular 2 和 NativeScript 2.3 兼容的版本

仅仅是为了提一下，您应该不会感到意外，我们与官方 Angular 2 兼容，该版本是在我们发布的前一天发布的。因此，您可以期待我们启用了 Angular 2 的组件能够与官方 Angular 2 无缝协作。当然，我们的组件是为最新的 NativeScript 2.3 打造的

调查

我们创建了 一项调查，以帮助我们了解如何才能让 NativeScript 更加适合您和您的应用程序。请花几分钟时间 填写调查，让我们知道您的想法。