ページ

NativeScriptアプリケーションは、個別のアプリケーション画面を表す複数のページで構成されています。

ページは、 "Page" モジュールのPageクラスのインスタンスです。ページ間を移動するには、 "Frame"モジュールのメソッドを使用できます。この記事では、ページの作成とページへのアクセス、関連するイベントデータでのページイベントの使用、ページナビゲーションの実装に関するガイドラインを提供します。

ページ作成

ページは、アプリケーションの個別の画面を表します。各ページはPageクラスのインスタンスです。

NativeScriptは、ページをインスタンス化する2つのアプローチを提供します。

XMLでページを作成する

ページのUI宣言とコードを個別に定義できます。

このアプローチを適用するには、ページのレイアウトを保持するXMLファイルを各ページに作成します。したがって、コードはJSまたはTSファイルになります。 XMLとJSまたはTSファイルの名前は一致する必要があります。

XML
JAVASCRIPT
TYPESCRIPT

<Page loaded="onPageLoaded">
    <Page.actionBar>
        <ActionBar title="Page Creation"/>
    </Page.actionBar>
    <!-- Each page can have only a single root view -->
    <StackLayout>
        <!-- content here -->
        <Label text="Hello, world!"/>
    </StackLayout>
</Page>

function onPageLoaded(args) {
    console.log("Page Loaded");
    const page = args.object;
}
exports.onPageLoaded = onPageLoaded;

// main-page.ts
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";

export function onPageLoaded(args: EventData): void {
    console.log("Page Loaded");
    const page = args.object as Page;
}

コードでページを作成する

このアプローチを適用するには、ページのインスタンスを返すcreatePageという名前の関数を作成する必要があります。 NativeScriptは、 createPageをファクトリ関数と見なします。

JAVASCRIPT
TYPESCRIPT

const Page = require("tns-core-modules/ui/page").Page;
const Label = require("tns-core-modules/ui/label").Label;
const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;

function createPage() {
    // Creating of the page content
    const stack = new StackLayout();
    const label = new Label();
    label.text = "Hello, world!";
    stack.addChild(label);

    const page = new Page();
    // A page can have only one single root view set via the content property (in this case a StackLayout)
    page.content = stack;

    return page;
}
exports.createPage = createPage;

import { Page } from "tns-core-modules/ui/page";
import { Label } from "tns-core-modules/ui/label";
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";

export function createPage(): Page {
    const stack = new StackLayout();
    const label = new Label();
    label.text = "Hello, world!";
    stack.addChild(label);

    const page = new Page();
    // Each page can have a single root view set via the content property
    page.content = label;
    return page;
}

デモソース

ページ参照

現在のPageインスタンスへの参照を取得することは、一般的なシナリオです。以下の例は、 Page参照を取得するためのさまざまなアプローチを示しています。

ページイベントを介した参照

共通のナビゲーションイベントと、ビューのloadedおよびunloadedイベントを使用して、ページ参照を取得できます。

JAVASCRIPT
TYPESCRIPT

function onPageLoaded(args) {
    console.log("Page Loaded!");
    const page = args.object;
    console.log("Page reference from loaded event: ", page);
}
exports.onPageLoaded = onPageLoaded;

function onNavigatedTo(args) {
    console.log("Page onNavigatedTo!");
    const page = args.object;
    console.log("Page reference from navigatedTo event: ", page);
}
exports.onNavigatedTo = onNavigatedTo;

import { EventData } from "tns-core-modules/data/observable";
import { Page, NavigatedData } from "tns-core-modules/ui/page";

export function onPageLoaded(args: EventData) {
    console.log("Page loaded");
    const page = args.object as Page;
    console.log("Page reference from loaded event: ", page);
}

export function onNavigatedTo(args: NavigatedData) {
    console.log("Page navigatedTo");
    const page = args.object as Page;
    console.log("Page reference from navigatedTo event: ", page);
}

ページプロパティを介した参照

各NativeScriptビューには、ページ参照を取得するために使用できるpageプロパティがあります。

JAVASCRIPT
TYPESCRIPT

function onStackLoaded(args) {
    console.log("Root StackLayout Loaded!");
    const stack = args.object;
    const page = stack.page;
    console.log("Page reference from page child element: ", page);
}
exports.onStackLoaded = onStackLoaded;

function onButtonTapped(args) {
    console.log("Button Tapped!");
    const button = args.object;
    const page = button.page;
    console.log("Page reference from button tap event: ", page);
}
exports.onButtonTapped = onButtonTapped;

import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
import { Button } from "tns-core-modules/ui/button";

export function onStackLoaded(args: EventData) {
    console.log("Root StackLayout loaded");
    const stack = <StackLayout>args.object;
    const page = stack.page;
    console.log("Page reference from page child element: ", page);
}

export function onButtonTapped(args: EventData) {
    console.log("Button tap");
    const button = <Button>args.object;
    const page = button.page;
    console.log("Page reference from button tap event: ", page);
}

currentPageプロパティを介した参照

各Frameインスタンスには、ページ参照を取得するcurrentPageプロパティがあります。

JAVASCRIPT
TYPESCRIPT

const getFrameById = require("tns-core-modules/ui/frame").getFrameById;

function onNavigatingTo(args) {
    console.log("Page navigatingTo");
    const rootFrame = getFrameById("root-frame");
    const page = rootFrame.currentPage;
    console.log("Page reference from currentPage property of Frame: ", page);
}
exports.onNavigatingTo = onNavigatingTo;

import { getFrameById } from "tns-core-modules/ui/frame";

export function onNavigatingTo(args: EventData) {
    console.log("Page navigatingTo");
    const rootFrame = getFrameById("root-frame");
    const page = <Page>rootFrame.currentPage;
    console.log("Page reference from currentPage property of Frame: ", page);
}

デモソース

ページイベント

ページ間を移動するときにトリガーされる4つのページ固有のイベントがあります。

"navigatingTo" - ページに入るときにトリガーされます（ナビゲーション開始時）。
"navigatedTo" - ページに入るときにトリガーされます（ナビゲーション終了時）。
"navigatingFrom" - ページを離れるとトリガーされます（ナビゲーション開始時）。
"navigatedFrom" - ページを離れるとトリガーされます（ナビゲーション終了時）。

XML
JAVASCRIPT
TYPESCRIPT

<Page navigatedFrom="onNavigatedFrom"
      navigatedTo="onNavigatedTo"
      loaded="onPageLoaded"
      navigatingFrom="onNavigatingFrom"
      navigatingTo="onNavigatingTo"
      unloaded="onUnloaded"
      layoutChanged="onLayoutChanged">
</Page>

function onNavigatingTo(args) {
    console.log(args.eventName);
    console.log(args.object);
    console.log(args.context);
    console.log(args.isBackNavigation);
}
exports.onNavigatingTo = onNavigatingTo;

function onPageLoaded(args) {
    console.log(args.eventName);
    console.log(args.object);
}
exports.onPageLoaded = onPageLoaded;

function onLayoutChanged(args) {
    console.log(args.eventName);
    console.log(args.object);
}
exports.onLayoutChanged = onLayoutChanged;

function onNavigatedTo(args) {
    console.log(args.eventName);
    console.log(args.object);
    console.log(args.context);
    console.log(args.isBackNavigation);
}
exports.onNavigatedTo = onNavigatedTo;

function onNavigatingFrom(args) {
    console.log(args.eventName);
    console.log(args.object);
    console.log(args.context);
    console.log(args.isBackNavigation);
}
exports.onNavigatingFrom = onNavigatingFrom;

function onUnloaded(args) {
    console.log(args.eventName);
    console.log(args.object);
}
exports.onUnloaded = onUnloaded;

function onNavigatedFrom(args) {
    console.log(args.eventName);
    console.log(args.object);
    console.log(args.context);
    console.log(args.isBackNavigation);
}
exports.onNavigatedFrom = onNavigatedFrom;

import { EventData } from "tns-core-modules/data/observable";
import { NavigatedData } from "tns-core-modules/ui/page";

export function onNavigatingTo(args: NavigatedData) {
    console.log(args.eventName);
    console.log(args.object);
    console.log(args.context);
    console.log(args.isBackNavigation);
}

export function onPageLoaded(args: EventData) {
    console.log(args.eventName);
    console.log(args.object);
}

export function onLayoutChanged(args: EventData) {
    console.log(args.eventName);
    console.log(args.object);
}

export function onNavigatedTo(args: NavigatedData) {
    console.log(args.eventName);
    console.log(args.object);
    console.log(args.context);
    console.log(args.isBackNavigation);
}

export function onNavigatingFrom(args: NavigatedData) {
    console.log(args.eventName);
    console.log(args.object);
    console.log(args.context);
    console.log(args.isBackNavigation);
}

export function onUnloaded(args: EventData) {
    console.log(args.eventName);
    console.log(args.object);
}

export function onNavigatedFrom(args: NavigatedData) {
    console.log(args.eventName);
    console.log(args.object);
    console.log(args.context);
    console.log(args.isBackNavigation);
}

前方ナビゲーション	後方ナビゲーション

注釈： loaded, unloaded, layoutChangedの各イベントは、 UIコンポーネントのライフサイクルイベントであり、"View"クラス（Pageを含む）を拡張するすべてのクラスに共通です。これらは、すべてのNativeScript要素（レイアウト、ボタン、UIプラグインなど）で使用できます。

デモソース