为。NET开发人员构建NativeScript UI

简体中文 English

NativeScript是一个用JavaScript构建跨平台原生移动应用程序的框架。从JavaScript/TypeScript，XML和CSS的单一代码库中构建跨平台的真正原生应用程序的能力是令人兴奋的。正如我们在Part 1在本系列中，NativeScript为。NET开发人员提供了很多:在整个应用程序生命周期中对Visual Studio的强大支持；简单的JavaScript抽象和本机API；以及对构建业务逻辑的完整的TypeScript支持。

也许您还不相信，因为您最关心的是用户界面(UI)。构建一个抽象的，跨平台的UI肯定不是件容易的事吗？可能您的背景是XAML或。NET中的其他UI组合标记，并且您只是习惯于工具的丰富的开发人员生态系统。这些都是合理的担忧，但放松点。

当涉及到UI组合时，NativeScript支持您。它结合了简单的标记和抽象的特定于平台的呈现。如果您已经习惯了XAML的丰富性，那么我认为您将会对使用NativeScript构建本机UI感到非常熟悉。在本文中，我将从一个。NET开发人员的角度指导您构建一个NativeScript UI-我想您会对我们的发现感到兴奋。

UI通过XML

XML在数据传输方面可能会受到批评，但在描述标记方面却非常简单。如果您仔细想想，XAML和HTML都是XML类型，具有相应呈现引擎的细节。因此NativeScript选择XML来为您的移动应用程序构建跨平台UI。

跨平台UI

以一个assortment of UI widgets并用XML标记描述UI。NativeScript解析您的标记，并在运行时转过来在各自的平台上呈现相应的本机UI元素。这意味着当您指定使用ListView，NativeScript实际上是为每个移动平台呈现相应的本机ListView。这就是为什么您的NativeScript应用程序看起来是原生的一个巨大原因--因为它确实是原生的！

让我们看一个简单的示例，说明NativeScript UI标记在XML中是什么样子的:

<?xml version="1.0" encoding="UTF-8" ?>
<Page xmlns="http://www.nativescript.org/tns.xsd">
  <StackLayout>
    <Label text="Tap the button" style="horizontal-align: center"/>
    <Button text="TAP" />
    <Label text="message" textWrap="true" style="horizontal-align: center"/>
  </StackLayout>
</Page>

请参阅XML命名空间（xmlns）指向NativeScript？这个小指针可以在Visual Studio或其他编辑器中获得XML Intellisense.下面是由上面的UI XML标记生成的UI，标签在点击几下后显示一条计数器消息。

TNSiOSTNSAndroid

请记住，您只是构建了一个可视化树，在NativeScript解析标记后呈现该树。如果您愿意，您实际上可以通过JavaScript或Typescript完全用代码构建可视化树。如果您的应用程序试图动态地创建UI的某些部分，这可能会很有帮助。底线是你得到了完全的灵活性。

下面是一个通过代码呈现的简单UI:

var pagesModule = require("ui/page");
var labelModule = require("ui/label");
function createPage() {
    var label = new labelModule.Label();
    label.text = "Hello, world!";
    var page = new pagesModule.Page();
    page.content = label;
    return page;
}
exports.createPage = createPage;

本机UI呈现

现在，如果您希望自定义NativeScript提供的UI小部件，该怎么办？如果您真的喜欢一个只在单个平台上可用的特定本机UI元素，该怎么办？不用担心。

NativeScript允许您通过背后的代码--与XML UI标记同名的JavaScript或TypesScript文件--呈现任何本机UI元素。您可以简单地在标记中创建一个适当的占位符，并将本机UI元素添加到占位符中。

下面介绍如何在NativeScript应用程序中呈现原生iOS警报，以及相应的结果。JavaScript代码在运行时被解释，而NativeScript神奇地知道您在iOS特定的UIAlertView。

var alert = new UIAlertView();
alert.message = "Hello World";
alert.addButtonWithTitle("OK");
alert.show();

iOSAlert

通过CSS进行样式设计

现在您已经选择了要呈现的UI小部件，下一个问题是如何设计UI的样式？如果您了解web CSS，那么现在您可以使用相同CSS的子集来设计您的本地移动应用程序！

NativeScript允许您根据UI标记编写简单的CSS，从而对控件和整个UI进行样式化。例如，给定前面定义的UI XML标记，下面介绍如何在CSS中对其进行样式化。注意CSS选择器如何简单地使用抽象UI元素的名称（您也可以使用类来实现粒度）。

.title {
    font-size: 30;
    horizontal-align: center;
    margin:20;
}

.button {
    font-size: 42;
    horizontal-align: center;
}

.message {
    font-size: 20;
    color: #284848;
    margin:10 40;
    horizontal-align: center;
}

NativeScript UI标记在每个平台上作为相应的本机UI元素呈现。这就是为什么您的应用程序已经具有原生UI的外观和感觉的原因。但是，如果您想在各自的平台上进一步定制应用程序的样式，可以使用普通CSS。只需添加特定于平台的CSS文件，其名称如下:

  • platform.ios.css
  • platform.android.css

然后在应用程序范围内app.css文件中，只需添加以下代码行。

@import url('~/platform.css');

NativeScript足够聪明，可以找出特定于平台的CSS文件，并且只为每个平台部署相应的CSS文件。赢球大会！

与XAML的相似性

XAML是Microsoft开发人员世界中流行的UI标记语言已经有一段时间了。这种流行并不是没有原因的--XAML UI标记在广泛的应用程序中使用，从WPF，Silverlight，Windows Phone，Windows 8/8.1一直到最新的应用程序Universal Windows Platform。

如果您来自XAML开发背景，那么NativeScript应用程序的某些UI XML标记可能会很熟悉。这不是偶然的--事实上，UI标记非常类似XAML语法，并借用了XAML的一些最佳特性。你会有宾至如归的感觉。

无缝数据绑定

XAML受开发人员欢迎的一个主要原因是data binding-对象模型与渲染UI的无缝拼接。随着底层对象集合的变化，您必须不断刷新UI的日子一去不复返了。现代的数据绑定应该是双向的--对象更新UI，反之亦然。

NativeScript UI组合使用精确的same data binding心中有目标。只要您的对象继承自可观察的类（它实现了类似于INotifyPropertyChanged事件机制），您可以无缝地将数据绑定到您呈现的UI元素。是的，数据绑定可以单程还是双程。

下面是一个简单的示例，用于设置Text的属性TextField通过数据绑定:

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

var textField = require("ui/text-field");
var targetTextField = new textField.TextField();

var bindingOptions = {
    sourceProperty: "textSource",
    targetProperty: "text",
    twoWay: true
};
targetTextField.bind(bindingOptions, source);
source.set("textSource", "Text set via binding");

如果上面的代码看起来有点冗长，不用担心。可以设置数据绑定直接在UI XML标记中，与在XAML中相同。只需通过数据绑定（使用{{ ... }}语法，然后设置BindingContext在父元素或页上。

var observable = require("data/observable");
var source = new observableModule.Observable();
source.set("labelMessage", "Hello World!");

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = source;
}
exports.pageLoaded = pageLoaded;

<!-- UI Markup -->
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Label text="{{ labelMessage }}" />
    </StackLayout>
</Page>

UI布局

开发人员喜欢的XAML UI组合的另一个方面是布局。预定义的布局允许开发人员以预测的方式构造他们的UI组件，这种可预测性延伸到具有不同屏幕大小的多个设备上。

当然，NativeScript UI组合对several predefined layouts以下是NativeScript提供的内置布局:

  1. AbsoluteLayout允许您设置其子级的精确位置（左/上坐标）。
  2. DockLayout将其子级排列在其外部边缘，并允许其最后一个子级占用剩余空间。
  3. GridLayout定义由列和行组成的矩形布局区域。
  4. StackLayout水平或垂直排列其子级。方向是用orientation属性设置的。
  5. WrapLayout根据orientation属性将其子级定位在行或列中，直到空间被填满，然后将它们换行到新的行或列中。

只需抓取其中一个预定义布局，并将其用作父容器来容纳您的NativeScript UI小部件。查看这个伟大的资源NativeScript layouts任何你怀疑的时候。

您将从拥有XAML开发背景中受益，同时在NativeScript中感到宾至如归！

轻松的事件处理

事件管理是任何UI组合的核心部分--毕竟，您想要追求最大的用户交互性。NativeScript允许easy event handling从UI元素。

在UI XML标记中分配事件处理程序，并在后面的代码中响应事件:

<!-- UI Markup -->
<Page>
  <StackLayout>
    <Button tap="onTap" />
  </StackLayout>
</Page>

// Code Behind
function onTap(eventData) {
  console.log("Hello World!");
}
exports.onTap = onTap;

您可以创建绑定到UI元素的自定义事件，并通过自定义事件处理程序处理事件。本质上，您可以控制UI端到端的用户交互性。

移动应用程序需要大量的触摸事件手势。任何成功的移动应用程序都必须响应用户在UI元素上的手势。NativeScript在此提供帮助robust support for gestures。在NativeScript中，View-所有UI元素的基类，具有一个observe方法，该方法允许您订阅UI元素识别的手势。

以下是您可以注意的手势:

  1. 抽头
  2. 双击
  3. 长压机
  4. 刷牙
  5. 平底锅
  6. 夹持
  7. 轮换

让我们来看看订阅回应长按手势有多简单:

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.longPress, function (args) {
    console.log("Long Press");
});

ScreenBuilder

正如您所看到的，NativeScript提供了大量的选项来简化移动应用程序的UI组合。但是，您可能来自于一个沉重的。NET或桌面背景，您只是不确定如何开始为iOS/Android设备构建UI。有一个好的起点来建立起来不是很好吗？如果有一个所见即所得编辑器来构建你的跨平台UI不是很好吗？

输入ScreenBuilder-部分Telerik Platform。ScreenBuilder旨在为您提供一个简单的浏览器内所见即所得编辑器，使您无需编写任何代码，就能以可视化的方式开始构建您的移动应用程序。是的，它非常适合NativeScript原生应用。

如果您有Telerik平台订阅，只需访问platform.telerik.com才能开始。如果没有，你可以今天注册一个免费的Telerik平台试用，然后再来门户。

登录后，点击创建应用程序按钮创建自己的应用程序工作区，然后单击创建项目按钮向其添加NativeScript移动应用程序项目。注意你是如何从一个ScreenBuilder选项中得到一个开始的--继续接受这个提议吧。

SBProject

一旦ScreenBuilder加载，您将发现自己正在管理视图和导航在两个视图之间，同时还提供了一个在浏览器中显示应用程序外观的别致方法。您将从默认值开始主页佩奇。

SBProjectDash

当然，您可以添加不同类型的模板化视图，甚至可以将它们与数据挂钩:

SBAddViews

假设您想添加一个关于我们页面到您的移动应用程序…简单地从模板开始，并自定义内容或使用作为起点:

SBAboutViews

你可以在ScreenBuilder中看到一个关于我们的默认页面的预览，并且可以尽情地自定义它。

SBAboutInAction

一旦您添加了新的“关于我们”页面，回到应用程序的主页面，可以看到列出的主页和关于页面，并完成它们之间的导航。ScreenBuilder在浏览器中的表示是交互式的--您可以随意调整，直到您满意为止。

SBNavigation

你觉得你的应用程序和它的导航看起来太像一个平台了吗？只需点击设备下拉列表，然后切换到另一个平台，瞧，同一款应用的页面和导航在所选平台上看起来明显不同。

SBAndroid

一旦满意，只需提交更改并在中打开相同的项目AppBuilder--Telerik平台的主要app开发工具。您将得到一个真正的NativeScript项目，其中的页面和导航已经根据您的ScreenBuilder选择进行了配置。现在，您可以继续在浏览器中或任何AppBuilder IDEs。

SBProjectInAB

结论

NativeScript为您提供了一个框架，用于构建JavaScript/TypeScript，XML和CSS的单一代码库，从而实现跨平台的真正本机移动应用程序。对于。NET开发人员来说，用NativeScript构建UI组合可以是轻而易举的事。如果您来自XAML/。NET或web背景，那么您应该在通过丰富的数据绑定，CSS和高级工具构建NativeScript UI方面感到非常自在。

现在，您已经具备了构建一个真正原生的跨平台移动应用程序所需的所有部件，使用您已经了解的技术。去打造你的梦想应用吧！