Tampilan UI pada Tabris JS, setara dengan Intent pada Android, disebut Page.

Komponen-komponen UI Tabris JS dapat ditampilkan langsung pada UI utama aplikasi, yaitu tabris.ui.contentView, namun dalam aplikasi yang lebih kompleks perlu didesain UI yang lebih terorganisir dan terstruktur, sehingga memberikan UX (User Experience) yang lebih baik dalam menggunakan aplikasi.

Page merupakan layer UI yang setara Intent di Android, yang dapat dibuat dan ditampilkan ketika diperlukan dan di-dispose (dibuang) ketika tidak lagi diperlukan - untuk menjaga performa aplikasi tetap baik.

Di Tabris JS, Page merupakan class turunan dari Composite, yang merupakan class turunan juga dari class Widget, sehingga property, event dan method yang tersedia pada class Composite dan Widget dapat pula digunakan pada class Page.

Untuk menggunakan Page, class Page harus dideklarasikan dulu dengan const {Page} = require('tabris');

Umumnya property dan event yang digunakan pada class Page adalah:

  • autoDispose dengan nilai true|false untuk menentukan apakah Page otomatis di-dispose saat Page tidak lagi aktif di UI, misalnya ketika tombol Home atau Back ditap oleh user. Nilai defaultnya adalah true, karenanya ketika kita mendesain aplikasi di mana Page digunakan kembali, nilai property ini harus diset ke false.
  • image merupakan gambar/icon yang akan ditampilkan di navigation bar ketika page sedang aktif. Property ini berupa string (URL nama file) atau objek. Di Windows property ini tidak didukung.
  • title adalah judul page yang tampil di navigation bar ketika page aktif.

Sedangkan event-event onAppear dan onDisappear umunya digunakan untuk menginisialisasi page (misalnya me-load data, mengecek informasi login, dsb) ketika page diaktifkan di UI dan menyimpan informasi serta hal-hal lainnya ketika page akan dinonaktifkan dari UI.

Membuat Page

Siapkan sebuah projek baru sebelum kita mulai.

Buka file src/app.js dan kosongkan isinya, kemudian ketik kode berikut pada file tersebut:

// deklarasi class NavigationView, Page, Button dan UI
const {NavigationView, Page, Button, ui} = require('tabris');

NavigationView diperlukan karena page harus ditampilkan di situ. NavigationView ini akan meng-handle back button pada Android, menampung daftar page yang tersedia pada aplikasi (saat runtime) dan mengatur perpindahan (navigasi) antar page.

Oke, tambahkan sebuah NavigationView:

let navView = new NavigationView({
  left:0, top: 0, right: 0, bottom: 0
}).appendTo(ui.contentView);

NavigationView di atas kita beri nama navView, yang menempati keseluruhan tampilan UI. Pada NavigationView ini kita pasang sebuah page dengan nama page1:

let page1 = new Page({
  title: 'Page Baru'
}).appendTo(navView);

Sekadar meramaikan, mari kita tambahkan sebuah button pada page1:

let btn = new Button({
  top: 20,
  centerX: 0,
  text: 'Close Page'
}).appendTo(page1);

dan kira-kira apa fungsi button btn ini? Yah, katakanlah untuk menutup page tadi dengan memanggil method dispose() dari page1:

btn.on('select', function(){
  page1.dispose();
});

Bila tidak ada kesalahan pengetikan, silahkan jalankan projek Anda:

tabris run ios|android

Semoga kompilasi sukses!
Berikut tampilan aplikasi di atas pada iOS simulator:
Tampilan Page pada aplikasi mobile Tabris JS

Selamat berkreasi!