NativeScript Architecture and Navigation - Історія редагувань

V kotyak в 09:33, 1 грудня 2018

2018-12-01T09:33:53Z

V kotyak в 09:33, 1 грудня 2018

2018-12-01T09:33:13Z

V kotyak в 10:17, 30 листопада 2018

2018-11-30T10:17:29Z

V kotyak: /* Навігація */

2018-11-30T08:37:26Z

‎Навігація

V kotyak: /* Навігація */

2018-11-30T08:17:33Z

‎Навігація

V kotyak в 07:58, 30 листопада 2018

2018-11-30T07:58:02Z

V kotyak в 11:27, 28 листопада 2018

2018-11-28T11:27:37Z

V kotyak в 11:15, 28 листопада 2018

2018-11-28T11:15:12Z

V kotyak: Створена сторінка: == Управління сторінками == NativeScript додаток складається зі сторінок, що представлені різ...

2018-11-28T10:16:44Z

Створена сторінка: == Управління сторінками == NativeScript додаток складається зі сторінок, що представлені різ...

Нова сторінка

== Управління сторінками ==

NativeScript додаток складається зі сторінок, що представлені різними екранами додатку.

Сторінка це екземпляр класу Page модуля tns-core-modules/ui/page

== Оголошення сторінки ==

NativeScript пропонує два шляхи створення сторінки.

=== Оголошеня в XML ===

Ви можете написати оголошення UI сторінки і її ініціалізацію в коді окремо.

Для цього потрібно створити XML файл для кожної сторінки, в якому буде описано її вигляд. Також потрібно ініціалізувати її в коді JSфайлу. Назви XML та JS файлів повинні співпадати.

XML

<Page loaded="onPageLoaded">

<StackLayout>

<Label text="Hello, world!"/>
</StackLayout>
</Page>

JS
// main-page.js
function onPageLoaded(args) {
console.log("Page Loaded");
}
exports.onPageLoaded = onPageLoaded;

=== Створення сторінки в коді ===
Якщо вам потрібно створити сторінку під час виконання додатку, необхідно створити функцію createPage яка поверне екземпляр сторінки.

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() {
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 = stack;
return page;
}
exports.createPage = createPage;

=== Визначення домашньої сторінки ===

Кожен додаток повинен мати єдину точку входу. Для визначення точки входу ви повинні передати NavigationEntry з ім'ям модуля в метод run. NativeScript знаходить XML файл з вказаною назвою, створює форму відповідну опису, потім знаходить JS файл з такою ж назвою та виконує його код.

// app.js
const application = require("tns-core-modules/application");
application.run({ moduleName: "app-root" });

Приклад створення вкладок для головного екрану в app-root.xml.


<TabView androidTabsPosition="bottom">
<TabViewItem title="First">
<Frame defaultPage="home/home-page" />
</TabViewItem>
<TabViewItem title="Second">
<Frame defaultPage="second/second-page" />
</TabViewItem>
</TabView>

Приклад створення сітки для головного екрану в app-root.xml.


<GridLayout rows="*, 2*">
<StackLayout row="0" backgroundColor="green">

<StackLayout/>
<StackLayout row="1">
<Frame defaultPage="home/home-page"/>
</StackLayout>
</GridLayout>

← Попередня версія		Версія за 09:33, 1 грудня 2018
Рядок 167:		Рядок 167:

	[[category:NativeScript]]		[[category:NativeScript]]
−
−	~~[[category:Навчальні проекти]]~~

← Попередня версія		Версія за 09:33, 1 грудня 2018
Рядок 158:		Рядок 158:
	}		}
	});		});
		+
		+
		+
		+
		+
		+
		+
		+
		+	[[category:NativeScript]]
		+
		+	[[category:Навчальні проекти]]

← Попередня версія		Версія за 08:37, 30 листопада 2018
Рядок 113:		Рядок 113:
	}		}
	exports.onTap = onTap;		exports.onTap = onTap;
		+
		+	=== Основи навігації ===
		+
		+	ДлЛя завантаження початкової сторінки додатку використовується властивість defaultPage елементу Frame. В прикладі нижче, додаток завантажить сторінку розміщену в <project-folder>/app/home/home-page.xml
		+
		+	<!-- app-root.xml -->
		+	<Frame id="firstFrame" defaultPage="home/home-page"/>
		+
		+	Для переходу між сторінками ви можете використовувати метод navigate з потрібного екземпляру Frame.
		+
		+	// e.g. home/home-page.js
		+	const frameModule = require("tns-core-modules/ui/frame");
		+	// Example using `getFrameById(frameId)` to get a `Frame` reference
		+	// As an alternative, we could use `topmost()` method or `page.frame` property
		+	const frame = frameModule.getFrameById("firstFrame");
		+	frame.navigate("second/second-page");
		+
		+	Існує кілька способів здійснення навігації, який ви використаєте, залежить від потреб вашого додатка.
		+
		+	=== Навігація за назвою сторінки ===
		+
		+	Можливо, найпростіший спосіб навігації - це вказати назву файлу сторінки, на яку ви хочете переміститися.
		+
		+	frame.navigate("details-page");
		+
		+	=== Функція навігації ===
		+
		+	Більш динамічний спосіб навігації базується на використанні функції яка повертає екземпляр сторінки до якої хочемо перейти.
		+
		+	const Page = require("tns-core-modules/ui/page").Page;
		+	const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;
		+	const Label = require("tns-core-modules/ui/label").Label;
		+	const getFrameById = require("tns-core-modules/ui/frame").getFrameById;
		+	const frame = getFrameById("firstFrame");
		+	frame.navigate({
		+	create: () => {
		+	const stack = new StackLayout();
		+	const label = new Label();
		+	label.text = "Hello, world!";
		+	stack.addChild(label);
		+
		+	const page = new Page();
		+	page.content = stack;
		+	return page;
		+	}
		+	});

← Попередня версія		Версія за 08:17, 30 листопада 2018
Рядок 97:		Рядок 97:
	const frameModule = require("tns-core-modules/ui/frame");		const frameModule = require("tns-core-modules/ui/frame");
	const topmostFrame = frameModule.topmost();		const topmostFrame = frameModule.topmost();
		+
		+	- Метод getFrameById модуля tns-core-modules/ui/frame. Цей метод дозволяє отримати посилання на Frame по id який ви вказали для нього. Врахуйте що такий пошук працює для вже перегланутих екранів, і не знайде екрани які ще не були відображені, наприклад модільні екрани.
		+
		+	const frameModule = require("tns-core-modules/ui/frame");
		+	const firstFrame = frameModule.getFrameById("firstFrame");
		+
		+	- властивість frame екземпляра Page. Кожен екземпляр Page містить інформацію про об'єкт екрану у властивості frame.
		+
		+	const Button = require("tns-core-modules/ui/button").Button;
		+	const Page = require("tns-core-modules/ui/page").Page;
		+	function onTap(args) {
		+	const button = args.object;
		+	const page = button.page;
		+	page.frame.navigate("second/second-page");
		+	}
		+	exports.onTap = onTap;

← Попередня версія		Версія за 07:58, 30 листопада 2018
Рядок 86:		Рядок 86:

	== Навігація ==		== Навігація ==
		+
		+	Класс Frame надає можливість здійснювати переходи між різними сторінками. Додаток може мати один або декілька екземплярів Frame залежно від бізнес логіки та вимог.
		+
		+	=== Отримання посилання на Frame ===
		+
		+	Навігація в NativeScript базується на Frame API і використовує navigate метод потрібного екрану. Для отримання посилання на екземпляр Frame потрібно використовувати наступні методи та властивості:
		+
		+	- topmost метод з tns-core-modules/ui/frame модуля. Метод повертає екземпляр останнього показаного екрану або , при використанні TabView, поточної вкладки. Для більш гнучкого контролю ви можете використовувати метод getFrameById або властивісті класу Page.
		+
		+	const frameModule = require("tns-core-modules/ui/frame");
		+	const topmostFrame = frameModule.topmost();

@@ Рядок 153: / Рядок 153: @@
          label.text = "Hello, world!";
          stack.addChild(label);
          const page = new Page();
          page.content = stack;

← Попередня версія		Версія за 11:27, 28 листопада 2018
Рядок 83:		Рядок 83:
	</StackLayout>		</StackLayout>
	</GridLayout>		</GridLayout>
		+
		+
		+	== Навігація ==

@@ Рядок 39: / Рядок 39: @@
   const Label = require("tns-core-modules/ui/label").Label;
   const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;
-−
   function createPage() {
      const stack = new StackLayout();
@@ Рядок 45: / Рядок 45: @@
      label.text = "Hello, world!";
      stack.addChild(label);
      const page = new Page();
      // Each page can have a single root view set via the  content property