ユーザーインターフェイスの基本

var application = require("tns-core-modules/application");
// Start the application. Don't place any code after this line as it will not be executed on iOS.
application.run({ moduleName: "my-page" });

import application = require("tns-core-modules/application");
// Start the application. Don't place any code after this line as it will not be executed on iOS.
application.run({ moduleName: "my-page" });

// To import the "tns-core-modules/ui/frame" module:
let getFrameById = require("tns-core-modules/ui/frame").getFrameById;
const frame = getFrameById("myFrame");
// Navigate to page called “my-page”
frame.navigate("my-page");

// To import the "tns-core-modules/ui/frame" module:
import { getFrameById } from "tns-core-modules/ui/frame";
const frame = getFrameById("myFrame");
// Navigate to page called “my-page”
frame.navigate("my-page");

<Frame id="myFrame"/>

// To import the "ui/frame" module and "main-view-model":
let getFrameById = require("tns-core-modules/ui/frame").getFrameById;
const frame = getFrameById("myFrame");

const HelloWorldModel = require("./main-view-model").HelloWorldModel;
// Navigate to page called “my-page” and provide "bindingContext"
frame.navigate({
	moduleName: "my-page",
	bindingContext: new HelloWorldModel()
});

// To import the "ui/frame" module and "main-view-model":
import { getFrameById } from "tns-core-modules/ui/frame";
const frame = getFrameById("myFrame");

import { HelloWorldModel } from "./main-view-model"
// Navigate to page called “my-page” and provide "bindingContext"
frame.navigate({
	moduleName: "my-page",
	bindingContext: new HelloWorldModel()
});

// e.g. main-page.js
let getFrameById = require("tns-core-modules/ui/frame").getFrameById;
const frame = getFrameById("myFrame");
// Navigate to page called “sub-page” and provide "bindingContext"
frame.navigate({
	moduleName: "sub-page",
	context: { title: "NativeScript is Awesome!"}
});

// e.g main-page.ts
import { getFrameById } from "tns-core-modules/ui/frame";
const frame = getFrameById("myFrame");
// Navigate to page called “sub-page” and provide "bindingContext"
frame.navigate({
	moduleName: "sub-page",
	context: { title: "NativeScript is Awesome!"}
});

// sub-page.js
function onNavigatedTo(args) {
	const page = args.object;
	page.bindingContext = page.navigationContext;
}
exports.onNavigatedTo = onNavigatedTo;

// sub-page.ts
import { Page } from "tns-core-modules/ui/page";
export function onNavigatedTo(args) {
	const page = <Page>args.object;
	page.bindingContext = page.navigationContext;
}

<!-- sub-page.xml -->
<Page xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo">
	<Label text="" textWrap="true" />
</Page>

const view = require("tns-core-modules/ui/core/view");
let count = 0;
function buttonTap(args) {
	count++;
	let button = args.object;
	let parent = button.parent;
	if (parent) {
		let lbl = view.getViewById(parent, "Label1");
		if (lbl) {
			lbl.text = "You tapped " + count + " times!";
		}
	}
}
exports.buttonTap = buttonTap;

import { EventData } from "tns-core-modules/data/observable";
import { getViewById } from "tns-core-modules/ui/core/view";
import { Label } from "tns-core-modules/ui/label";
import { View } from "tns-core-modules/ui/core/view";

let count = 0;
export function buttonTap(args: EventData) {
	count++;
	let button = <View>args.object;
	let parent = button.parent;
	if (parent) {
		let lbl = <Label>getViewById(parent, "Label1");
		if (lbl) {
			lbl.text = "You tapped " + count + " times!";
		}
	}
}

var Button = ...
...
exports.Button = Button;

export let Button = ...

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

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

// Event handler for Page "loaded" event attached in main-page.xml
export function pageLoaded(args: EventData) {
	// Get the event sender
	const page = <Page>args.object;
}

var getViewById = require("tns-core-modules/ui/core/view").getViewById;
function pageLoaded(args) {
	var page = args.object;
	var tabView1 = getViewById(page, "tabView1");
	tabView1.selectedIndex = 1;
}
exports.pageLoaded = pageLoaded;

import { EventData } from "tns-core-modules/data/observable";
import { getViewById } from "tns-core-modules/ui/core/view";
import { Page } from "tns-core-modules/ui/page";
import { TabView } from "tns-core-modules/ui/tab-view";

// Event handler for Page "loaded" event attached in main-page.xml
export function pageLoaded(args: EventData) {
	// Get the event sender
	var page = <Page>args.object;
	var tabView1 = <TabView>getViewById(page, "tabView1");
	tabView1.selectedIndex = 1;
}

// app/components/my-control.ts
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout/stack-layout";
import { Label } from "tns-core-modules/ui/label/label";
import { Button } from "tns-core-modules/ui/button/button";

export class MyControl extends StackLayout {
	constructor() {
		super();

		let counter: number = 0;
		const lbl = new Label();
		const btn = new Button();
		btn.text = "Tap me!";
		btn.on("tap", (args) => {
			lbl.text = "Tap " + counter++;
		});

		this.addChild(lbl);
		this.addChild(btn);
	}
}

// app/components/my-control.js
var __extends = this.__extends || function (d, b) {
	for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
	function __() { this.constructor = d; }
	__.prototype = b.prototype;
	d.prototype = new __();
};
var stackLayout = require("tns-core-modules/ui/layouts/stack-layout");
var label = require("tns-core-modules/ui/label");
var button = require("tns-core-modules/ui/button");
var MyControl = (function (_super) {
	__extends(MyControl, _super);
	function MyControl() {
		_super.call(this);
		var counter = 0;
		var lbl = new label.Label();
		var btn = new button.Button();
		btn.text = "Tap me!";
		btn.on(button.Button.tapEvent, function (args) {
			lbl.text = "Tap " + counter++;
		});
		this.addChild(lbl);
		this.addChild(btn);
	}
	return MyControl;
})(stackLayout.StackLayout);
exports.MyControl = MyControl;

<!-- app/main-page.xml -->
<Page xmlns:comps="components" navigatingTo="navigatingTo">
	<comps:my-control />
</Page>

// app/main-page.ts
import { EventData } from 'tns-core-modules/data/observable';
import { Page } from 'tns-core-modules/ui/page';
import { HelloWorldModel } from './main-view-model';

export function navigatingTo(args: EventData) {
	let page = <Page>args.object;

	// the page binding context will be accerss in components/my-toolbar
	page.bindingContext = new HelloWorldModel();
}

// app/main-page.js
var main_view_model_1 = require("./main-view-model");
function navigatingTo(args) {
	var page = args.object;
	// the page binding context will be accerss in components/my-toolbar
	page.bindingContext = new main_view_model_1.HelloWorldModel();
}
exports.navigatingTo = navigatingTo;

<!-- app/components/my-control.xml -->
<StackLayout class="p-20" loaded="onLoaded">
	<Label text="This custom component binding is coming from the parent page" textWrap="true" />
	<Label text="Tap the button (custom component)" class="h1 text-center"/>
	<Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
	<Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
</StackLayout>

// app/components/my-control.ts
import { EventData } from "tns-core-modules/data/observable";

export function onLoaded(args: EventData) {
	console.log("Custom Component Loaded");

	// you could also extend the custom component logic here e.g.:
	// let stack = <StackLayout>args.view;
	// stack.bindingContext = myCustomComponentViewModel;
}

// app/components/my-control.js
function onLoaded(args) {
	console.log("Custom Component Loaded");

	// you could also extend the custom component logic here e.g.:
	// let stack = args.view;
	// stack.bindingContext = myCustomComponentViewModel;
}
exports.onLoaded = onLoaded;

// app/main-view-model.ts
import { Observable } from "tns-core-modules/data/observable";

export class HelloWorldModel extends Observable {

	private _counter: number;
	private _message: string;

	constructor() {
		super();

		// Initialize default values.
		this._counter = 42;
		this.updateMessage();
	}

	get message(): string {
		return this._message;
	}

	set message(value: string) {
		if (this._message !== value) {
			this._message = value;
			this.notifyPropertyChange('message', value)
		}
	}

	public onTap() {
		this._counter--;
		this.updateMessage();
	}

	private updateMessage() {
		if (this._counter <= 0) {
			this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!';
		} else {
			this.message = `${this._counter} taps left`;
		}
	}
}

// app/main-view-model.js
var Observable = require("tns-core-modules/data/observable").Observable;

function getMessage(counter) {
	if (counter <= 0) {
		return "Hoorraaay! You unlocked the NativeScript clicker achievement!";
	} else {
		return counter + " taps left";
	}
}

function createViewModel() {
	var viewModel = new Observable();
	viewModel.counter = 42;
	viewModel.message = getMessage(viewModel.counter);

	viewModel.onTap = function() {
		this.counter--;
		this.set("message", getMessage(this.counter));
	}

	return viewModel;
}

exports.createViewModel = createViewModel;

import * as builder from "tns-core-modules/ui/builder";
let myComponentInstance = builder.load({
	path: "~/components/my-control",
	name: "MyControl"
});

let builder = require("tns-core-modules/ui/builder");
let myComponentInstance = builder.load({
	path: "~/components/my-control",
	name: "MyControl"
});

import * as builder from "tns-core-modules/ui/builder";
let myComponentInstance = builder.load({
	path: "~/components/my-control",
	name: "MyControl"
});

let builder = require("tns-core-modules/ui/builder");
let myComponentInstance = builder.load({
	path: "~/components/my-control",
	name: "MyControl"
});

import * as builder from "tns-core-modules/ui/builder";
let myComponentInstance = builder.load({
	path: "~/components/my-control",
	name: "MyControl",
	attributes: {
		bindingContext: myBindingModel
	}
});

let builder = require("tns-core-modules/ui/builder");
let myComponentInstance = builder.load({
	path: "~/components/my-control",
	name: "MyControl",
	attributes: {
		bindingContext: myBindingModel
	}
});

## Gestures
All [UI Gestures](/ui/ns-ui-widgets/gestures)
(gestures.md) can be defined in XML. For example:
```XML
<Page>
	<Label text="Some text" tap="myTapHandler" />
</Page>

import { GestureEventData } from "tns-core-modules/ui/gestures";

export function myTapHandler(args: GestureEventData) {
	const context = args.view.bindingContext;
}

function myTapHandler(args) {
	const context = args.view.bindingContext;
}
exports.myTapHandler = myTapHandler;

function navigatingTo(args) {
	const page = args.object;
	page.bindingContext = { myTitle: "NativeScript is Awesome!"};
}
exports.navigatingTo = navigatingTo;

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

export function navigatingTo(args: EventData) {
	const page = <Page>args.object;
	page.bindingContext = { myTitle: "NativeScript is Awesome!"};
}

function navigatingTo(args) {
	const page = args.object;
	page.bindingContext = {
		myProperty: "Some text",
		myFunction: () => {
			// Your code
		}
	};
}
exports.navigatingTo = navigatingTo;

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

export function navigatingTo(args: EventData) {
const page = <Page>args.object;
	page.bindingContext = {
		myProperty: "Some text",
		myFunction: () => {
			// Your code
		}
	};
}

const view = require("tns-core-modules/ui/core/view");
function navigatingTo(args) {
	const page = args.object;
	page.bindingContext = { myItems: [{ name: "Name1" }, { name: "Name2" }, { name: "Name3" }] };

	// Will work!
	let listView1 = view.getViewById(page, "listView1");

	// Will not work!
	let label1 = view.getViewById(page, "label1");
}
exports.navigatingTo = navigatingTo;

import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { getViewById } from "tns-core-modules/ui/core/view";
import { ListView } from "tns-core-modules/ui/list-view";
import { Label } from "tns-core-modules/ui/label";

export function navigatingTo(args: EventData) {
const page = <Page>args.object;
	page.bindingContext = { myItems: [{ name: "Name1" }, { name: "Name2" }, { name: "Name3" }] };

	// Will work!
	const listView1 = <ListView>getViewById(page, "listView1");

	// Will not work!
	const label1 = getViewById(page, "label1");
}