Anda di sini

Pemrograman

Tutorial UI NativeScript - Buat Tampilan Aplikasi Android Native Dengan CSS

Aditya Suranata - 08 Desember 2016 23:54:45 0

Sebelum memulai mengkoding aplikasi Groceries penting untuk memahami bagaimana struktur dari susunan folder aplikasi NativeScript. Dengan memamahminya, akan sangat membantu untuk tahu dimana kita seharusnya menempatkan file-file baru, begitu juga dengan apa saja isi dari aplikasi NativeScript dibalik layar.

Lanjutkan dengan membuka folder sample-Groceries menggunakan teks editor dan mari kita mulai menggali.

Kilasan Isi Tulisan

2.1: Struktur direktori

2.2: Starting up

2.3: Menambahkan elemen-elemen UI

2.4: Layouts

2.5: Global CSS

2.6: Component-specific CSS

2.7: File-file gambar

2.1: Struktur Directory

Agar semuanya tetap simpel, mari mulai dengan melihat struktur luar dari aplikasi Groceries:

.
+-- sample-Groceries
    +-- app
    |   +-- ...
    +-- hooks
    |   +-- ...
    +-- node_modules
    |   +-- @angular
    |   +-- nativescript-angular
    |   +-- tns-core-modules
    |   +-- ...
    +-- platforms
    |   +-- android
    |   +-- ios
    +-- package.json
    +-- references.d.ts
    +-- tsconfig.json

Penjelasan fungsi dari berbagai file dan folder itu:

  • app: Folder ini berisi semua sumber daya pengembangan yang diperlukan untuk membangun aplikasi. Kamu akan meluangkan sebagian besar waktu mu untuk menyunting file-file yang ada di sini.
  • hooks: Folder ini berisi berbagai seri file yang digunakan oleh NativeScript CLI untuk melakukan preprocess kode TypeScript menjadi kode JavaScript. Folder ini untuk saat ini dapat diabaikan, tapi setelah menyelesaikan tutorial ini mungkin kamu akan perlu untuk bereksperimen dengan preprocessor yang telah disediakan langsung oleh NativeScript, seperti Babel untuk JavaScript atau SASS untuk CSS.
  • node_modules: Folder ini berisi keperluan (denpedencies) modul npm aplikasi mu, termasuk juga Angular 2, TypeScript, dan modul-modul lainnya yang diperlukan NativeScript untuk membangun aplikasi mu.
  • node_modules/@angular: Folder ini berisi kode sumber Angular 2. NativeScript tidak merubah kode sumber Angular 2 dengan cara apapun, namun NativeScript membangun di atas Angular 2 dengan modul npm nativescript-angular.
  • node_modules/nativescript-angular: Folder ini berisi modul yang mengintegrasikan fungsi khusus dari NativeScript dengan Angular 2. Kode sumber dari modul ini tersedia langsung di https://github.com/NativeScript/nativescript-angular.
  • node_modules/tns-core-modules: Folder ini berisi modul NativeScript yang digunakan oleh aplikasi mu, yang mana merupakan berbagai modul JavaScript yang disediakan langsung oleh NativeScript yang akan kamu gunakan untuk membangun aplikasi mu. Setiap modul berisi kode untuk platform khusus yang diperlukan untuk mengimplementasikan beberapa fitur--seperti misalnya kamera, http calls, file system, dan lainnya--semuanya terekspose melalui API yang bersifat platform-agnostic (misal method camera.takePicture() bisa dipanggil dari semua platform). Kita akan menemukan beberapa contoh untuk ini pada tutorial selanjutnya. Kode sumber untuk modul tersebut tersedia secara langsung di https://github.com/NativeScript/nativescript.
  • platforms: Folder ini berisi kode untuk platform khusus yang diperlukan oleh NativeScript untuk membangun aplikasi native iOS dan Android. Sebagai contoh pada folder android kamu akan menemukan file seperti AndroidManifest.xml dan file executable .apk. Begitu pula, folder ios berisi file proyek Groceries Xcode dan executable .ipa. Perlu dicatat, untuk komputer bersistem operasi Windows dan Linux tidak memiliki folder ios karena platform ios hanya dapat ditarget melalui komputer bersistem operasi Apple Mac OS X.
  • packages.json: File ini berisi detil konfigurasi aplikasi mu, seperti app id, versi NativeScript yang kamu gunakan, dan juga modul npm mana saja yang digunakan oleh aplikasi mu. Kita akan membahas lebih jauh untuk cara bagaimana menggunakan file ini ketika kita berbicara tentang menggunakan modul-modul npm pada tutorial selanjutnya.
  • references.d.ts: File ini berisi semua file deklarasi TypeScript yang digunakan aplikasi. Kita akan menggali lebih dalam mengenai apa itu file-file deklarasi, dan bagaimana menggunakannya pada tutorial selanjutnya ketika kita membahas modul-modul NativeScript.
  • tsconfig.json: File ini berisi konfigurasi TypeScript aplikasi mu. Kecuali jika kamu sudah ahli menggunakan TypeScript, namun jika belum tahu sama sekali sebaiknya untuk saat ini filenya dibiarkan dulu. File ini bisa disesuaikan dengan selera mu. Namu perlu dicatat, "experimentalDecorators" dan "emitDecoratorMetadata" adalah flags yang penting agar NativeScript dan Angular 2 dapat bekerja dengan baik, jadi pastikan untuk tidak merubah atau menghilangkannya. Kamu dapat merujuk ke halaman wiki resmi dari TypeScript untuk detil dokumentasi mengenai apa yang dapat kamu lakukan pada file tsconfig.json.

NativeScript CLI mengatur folder platforms untuk mu sejalan dengan kamu mengembangkan dan menjalankan aplikasi mu; maka dari itu, cara terbaik untuk menangani folder platforms adalah anggap folder tersebut sebagai generated code yang dibuat otomatis. Oleh karena itu, aplikasi Groceries tentunya menyertakan folder platforms pada file .gitignore untuk mengecualikannya dari version control Git.

Selanjutnya, mari gali lebih dalam pada folder app, sejalan dengan fungsinya sebagai tempat menaruh file aplikasi dan akan menjadi tempat dimana kamu akan menghabiskan sebagian besar waktu mu.

.
+-- sample-Groceries
    +-- app
    |   +-- App_Resources
    |   |   +-- Android
    |   |   +-- iOS
    |   +-- pages
    |   |   +-- login
    |   |   |   +-- login.html
    |   |   |   +-- ...
    |   |   +-- ...
    |   +-- shared
    |   |   +-- ...
    |   +-- utils
    |   |   +-- ...
    |   +-- app.css
    |   +-- app.component.ts
    |   +-- main.ts
    |   +-- ...
    +-- ...

Penjelasan dari kegunaan berbagai file dan folder:

  • App_Resources: Folder ini berisi sumber daya untuk platform tertentu seperti file icon, splash screen, dan file file konfigurasi. NativeScript CLI bertugas untuk memasukan sumber daya tersebut ke tempat yang tepat di folder platforms ketika kamu menjalankan perintah tns run.
  • pages: Folder ini, khusus untuk app Groceries, berisi kode untuk membangun halaman app mu. Setiap halaman terbuat dari file TypeScript, file HTML, dan file-file CSS opsional. App Groceries dimulai dengan dua folder untuk dua halamannya, sebuah halaman login, dan halaman daftar barang.
  • shared: Folder ini, juga khusus untuk app Groceries, berisi semua file yang diperlukan untuk berbagi antara app NativeScript dan app web berbasis Angular 2. Untuk Groceries ini termasuk beberapa class untuk dapat berkomunikasi dengan backend service, beberapa modul object, dan file config.ts yang digunakan untuk berbagi variabel konfigurasi seperti API key. Kita akan membahas folder shared, begitu juga dengan code sharing antara app native dan app web secara mendetil pada tutorial selanjutnya.
  • app.css: File ini berisi style global untuk aplikasi mu. Kita juga tentu akan mendalami mengenai topik app styling pada tutorial berikutnya.
  • app.component.ts: Komponen primer Angular yang mengarahkan aplikasi kita. Untuk saat ini filenya hanya memiliki contoh hello world sederhana yang hanya akan kita lihat sementara saja.
  • app.module.ts: File ini berisi konfigurasi utama untuk aplikasi mu. Kamu akan menambahkan daftar baru di sini sejalan dengan tutorial ini.
  • main.ts: Starting point dari aplikasi Angular 2 -- web maupun native.

Untuk mendapatkan rasa bagaimana sebuah app berbasis NativeScript sebenarnya dimulai, mari jelajahi beberapa file awal.

2.2: Starting up

Beberapa file awal yang kamu jalankan di app NativeScript hampir sama dengan beberapa file awal yang juga kamu jalankan dalam aplikasi web berbasis Angular 2. Mari awali dengan main.ts karena file ini adalah yang pertama dieksekusi. Buka file app/main.ts mu; kamu harusnya melihat kode berikut:

import { platformNativeScriptDynamic } from "nativescript-angular/platform";

import { AppModule } from "./app.module";

platformNativeScriptDynamic().bootstrapModule(AppModule);

Disini perintah TypeScript import digunakan untuk menyertakan fungsi -- platformNativeScriptDynamic() -- dan sebuah TypeScript class -- AppModule -- yang masing-masing didefinisikan pada file yang berbeda. Fungsi platformNativeScriptDynamic() didapat dari modul npm "nativescript-angular", yang mana seperti yang dijelaskan sebelumnya berisi kode untuk mengintegrasikan antara NativeScript dan Angular 2. Dimana Angular 2 memiliki fungsi platformBrowserDynamic() sendiri yang berguna untuk menyetel sebuah app web berbasis Angular 2, sedangkan NativeScript juga punya fungsi platformNativeScriptDynamic() yang gunanya untuk menyetel app native Angular 2.

TIP: Seandainya jika kamu penasaran tentang apa yang sebenarnya dilakukan fungsi platformNativeScriptDynamic() untuk memulai app native iOS dan Android, ingatlah bahwa semua kode ini bersifat open source untuk mu sehingga kamu bebas mengeskplorasinya kapan pun. Fungsi platformNativeScriptDynamic() khususnya didefinisikan di dalam file platform.ts pada repositori NativeScript/nativescript-angular di GitHub.

Terlepas dari apakah kamu menggunakan platformBrowserDynamic() pada web, atau platformNativeScriptDynamic() di NativeScript, fungsi bootstrapModule() berikut adalah apa yang sebenarnya menyebabkan app nya dapat berjalan. Fungsi bootstrapModule() memperkirakan modul Angular yang berisi konfigurasi utama untuk aplikasi mu. Dalam kasus ini, kamu meneruskan sebuah referensi ke modul AppModule yang didefinisikan di file app.module.ts.

TIP: Pada sebuah app/aplikasi NativeScript kamu dapat mengikuti konvensi yang sama ketika menulis kode yang juga kamu lakukan pada app web berbasis Angular 2. Disini kita menggunakan konvensi penamanan file-file komponen dari Angular 2 sendiri dengan akhiran .component.ts.

Selanjutnya, buka file app/app.module.ts dari aplikasi mu; kamu harusnya melihat isinya seperti berikut:

import { NgModule } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/platform";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [NativeScriptModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Jangan khawatir dengan file ini untuk sekarang, karena kita akan sering kembali kesini pada tutorial ini untuk menjelaskan berbagai syntax yang kamu lihat.

Saat ini, cukup catat bahwa properti dari NgModule yaitu bootstrap terset ke AppComponent. Bagian kecil konfigurasi ini meneruskan kontrol ke class AppComponent pada file app/app.component.ts dari app mu. Buka file itu selanjutnya dan kamu akan melihat kode seperti berikut:

import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  template: "<Label text='hello NativeScript'></Label>"
})
export class AppComponent {}

File ini berisi sebuah komponen Angular 2, yang mana merupakan blok primer dari aplikasi Angular 2, termasuk app berbasis NativeScript. Mari pecah satu-satu apa yang dilakukan pada file ini.

Pertama, sekali lagi di sini kamu melihat perintah TypeScript import untuk menyertakan fungsionalitas yang didefinisikan secara eksternal -- pada kasus ini, class Component dari Angular 2 sendiri. Pada Angular 2 sebuah komponent mengatur view, atau potongan kecil dari antarmuka yang dilihat oleh user. Sebuah komponen dapat digunakan untuk mendefinisikan sebuah elemen UI individual, atau keseluruhan halaman, dan tentunya kamu akan menambahkan banyak kode logic pada komponen-komponen tersebut dan menggunakan mereka untuk membangun keseluruhan aplikasi. Namun untuk saat ini komponen-komponen ini dibuat sederhana dulu untuk tujuan demonstrasi.

CATATAN: Mengapa TypeScript? Sangat dianjurkan agar kamu menggunakan TypeScript pada app Angular 2 NativeScript mu, karena merupakan tatanan masyarakat kelas satu baik pada NativeScript dan Angular 2. Faktanya, NativeScript dan Angular 2 keduanya dibangun menggunakan TypeScript. Dengan NativeScript CLI proses kompilasi file-file TypeScript mu dibuat mulus, sebagaimana setiap kali kamu melakukan livesync, run atau build appnya, file-file semua dikompilasi ulang dari bentuk TypeScript ke JavaScript. Maka dari itu pada bebera IDE, seperti Visual Studio Code, kamu mungkin lebih memilih untuk menyembunyikan file-file JavaScript yang telah terkompilasi otomatis tersebut dari proyek mu sehingga kamu dapat lebih fokus ke kode TypeScriptnya.

Perhatikan cara menarik bagaimana class Component digunakan -- dengan penggunaan syntax @Component. Ini adalah sebuah TypeScript decorator, yang mana memungkinkan mu untuk menambahkan keterangan pada sebuah class atau method TypeScript dengan tambahan informasi. Untuk saat ini, kamu dapat membayangkannya sebagai cara untuk menambahkan beberapa konfigurasi metadata pada class AppComponent yang saat ini masih kosong. Khususnya, properti template decorator @Component memberitahu NativeScript bagaimana cara merender komponen ini pada layar. Faktanya, syntax <Label text="hello NativeScript"></Label> adalah penyebab dari tulisan "hello NativeScript" pada sesi sebelumnya ketika kamu mencoba menjalankan aplikasi ini untuk pertama kali.

Tapi, syntax ini mungkin terlihat sedikit aneh jika kamu punya latarbelakang seorang pengembang website. Pada web, elemen HTML <label> tidak memiliki atribut text, jadi mengapa disini bisa ada? Mari kita selami lebih dalam lagi dengan cara mencari tahu bagaimana elemen UI dari NativeScript bekerja.

CATATAN: Penasaran dengan @Component decorator's selector property? Properti ini mendefinisikan bagaimana sebuah komponen dapat digunakan di didalam template komponen lainnya. Sebagai contoh sebuah komponen yang mendefinisikan selectornya dengan selector: "foo-bar" dapat digunakan oleh komponen lain sebagai template: "<foo-bar></foo-bar>". NativeScript cukup pintar untuk menggunakan komponen Angular 2 pertama mu secara otomatis; maka dari itu, properti selector dari komponen pertama ini tidak berhubungan.

2.3: Menambahkan elemen-elemen UI

Perbedaan utama antara membangun sebuah app berbasis Angular 2 untuk web dan sebuah app Angular 2 dengan NativeScript adalah pada elemen-elemen UI yang kamu gunakan. App NativeScript tidak perlu menggunakan web browser dan otomatis tidak ada DOM; maka dari itu, elemen-elemen seperti <div> dan <span> tidak akan berpengaruh.

Tapi kamu tidak perlu khawatir mesku tidak ada DOM di NativeScript, karena NativeScript sudah menyediakan setelan lengkap lemen-elemen UI, masing-masing diimplementasikan dengan kontrol native iOS dan Android. Sebagai contoh, kontrol <Label> dari contoh kita sebelumnya sebenarnya dirender menjadi android.widget.TextView pada Android. Hal mengagumkan tentang pemikiran menggunakan NativeScript, adalah bahwa detil-detil native tersebut bersifat transparan untuk digunakan sebagai seorang developer. Kamu cukup menulis <Label> dan biarkan NativeScript yang menangani detil renderingnya.

Kembali ke proses pembangunan app Groceries. Halaman pertama dari Groceries sebenarnya ditujukan untuk login screen, jadi mari kita rubah isi yang sekarang yaitu <Label> dengan hal lain yang terlihat seperti halaman login pada aplikasi mobile.

Menambahkan elemen UI ke file app.component.ts

Buka file app/app.component.ts dan ganti isinya dengan kode berikut:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <TextField hint="Email Address" keyboardType="email"
      autocorrect="false" autocapitalizationType="none"></TextField>
    <TextField hint="Password" secure="true"></TextField>
    
    <Button text="Sign in"></Button>
    <Button text="Sign up for Groceries"></Button>
  `
})
export class AppComponent {}
CATATAN: Perhatikan karakter back-tick ( ` ) yang digunakan pada properti template. Karakter ini digunakan untuk menentukan literal template ES2015, yang didukung oleh TypeScript, dan yang memungkinkan mu untuk menulis string multi-baris tanpa harus menggunakan tanda petik string yang njlimet.

PERINGATAN: Hati-hati dalam menulis penutup dari masing-masing element UI dan jangan gunakan deklarasi self-closing seperti <Button text="Sign in" />. Batasan ini terkait dengan library parse5 yang digunakan Angular 2 untuk mem-parse template, dan kamu dapat membaca lebih jelas mengenai hal ini di GitHub.

Kode diatas menambahkan dua elemen UI NativeScript, yaitu text field dan sebuah tombol. Mirip dengan elemen-elemen HTML, elemen UI NativeScript menyediakan atribut yang memungkinkan mu untuk menentukan prilaku dan tampilanya. Kode yang baru saja kamu tambahkan menggunakan atribut-atribut berikut:

  1. <TextField>
    • hint: Menampilkan placeholder teks yang memberitahu user apa yang harus diketik.
    • keyboardType: Jenis keyboard yang harus ditampilkan ke user untuk melakukan input. keyboardType="email" menampilkan keyboard yang cocok untuk mengetik alamat email. NativeScript saat ini mendukung lima jenis keyboard untuk text field.
    • autocorrect: Attribut boolean yang menentukan apakah sistem operasi mobile harus melakukan autocorrect terhadap masukan user. Pada kasus penggunaan text field untuk alamat email, fungsi autocorrect tentu tidak diinginkan.
    • autocapitalizationType: Menentukan bagaimana sistem operasi harus mengkapitalisasi masukan user. autocapitalizationType="none" membuat fungsi autocapitalization tidak aktif. NativeScript mendukung empat jenis kapitalisasi otomatis pada text field.
    • secure: Sebuah atribut boolean yang menentukan apakah teks dari text field harus disamarkan, yang mana sering digunakan pada field password.
  2. <Button>
    • text: Control text yang akan ditampilkan pada tombol.

Setelah app mu terupdate dengan perubahan ini, kamu mungkin berharap dapat langsung melihat bagaimana tampilan login screennya, namun ketika dijalankan yang kamu lihat di layar hanyalah sebuah elemen <Button>:

Apanya yang salah? Dalam NativeScript ketika kamu menggunakan lebih dari satu elemen UI, kamu perlu memberitahu NativeScript bagaimana cara menempatkan elemen-elemen tersebut di layar. Karena kamu belum melakukannya, NativeScript dengan salah mengasumsikan kalau elemen yang paling terakhir--yaitu <Button>--untuk membentang menutupi seluruh layar. Untuk mengatur elemen-elemen tersebut, mari lanjut ke fitur NativeScript prihal menyusun elemen di layar: NativeScript layout.

TIP:
> Porsi kode sampel dari dokumentasi NativeScript merupakan tempat yang bagus untuk menemukan contoh-contoh berbagai komponen UI NativeScript yang mudah dipahami dan dapat di copy-paste. Halaman kode sampel untuk TextField dan Button adalah titik yang tepat untuk memulai.

> Jika latarbelakang mu adalah seorang pengembang web atau hybrid, kamu mungkin perlu membaca tutorial dari Nic Raboy mengenai Upgrading Hybrid Apps to Native with NativeScript, tutorial ini sangat berguna, di sana dijelaskan perbandingan dan kontra antara web dan native prihal implementasi antarmukanya.

2.4: Layouts

NativeScript menyediakan beberapa layout container berbeda yang memungkinkan mu untuk menempatkan elemen UI secara tepat dimana kamu ingin mereka muncul.

  • Absolute Layout, memungkinkan untuk memposisikan elemen berdasarkan koordinar eksplisit x dan y. Ini berguna ketika kamu perlu menempatkan elemen pada lokasi yang pasti, sebagai contoh menampilkan sebuah widget indikator aktifitas pada bagian pojok kiri atas dari app.
  • Dock Layout, berguna ketika kita ingin menempatkan elemen UI pada sisi luar dari aplikasi. Contohnya, sebuah container yang ter-dock pada bagian bawah dari layar akan menjadi lokasi yang bagus untuk menampilkan iklan.
  • Grid Layout, memungkinkan mu untuk membagi antarmuka menjadi beberapa seri baris dan kolom, mirip dengan <table> pada markup HTML.
  • Stack Layout, memungkinkan mu untuk menumpukan child UI element baik secara vertikal maupun horisontal.
  • Wrap Layout, memungkinkan child UI elemen untuk mengalir dari satu baris atau kolom ke yang selanjutnya ketika ruangnya sudah penuh.

Untuk halaman login, semua yang kita perlukan adalah sebuah <StackLayout> sederhana untuk menumpuk elemen UI dari atas ke bawah satu sama lain. Pada tutorial selanjutnya, kamu akan menggunakan beberapa layout lain yang lebih lanjut.

Menambahkan stack layout pada halaman login

Buka file app/app.component.ts lalu tambahkan elemen <StackLayout> pada properti template dari komponen. Hasilnya harusnya menjadi seperti berikut:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
     <StackLayout>
       <TextField hint="Email Address" keyboardType="email"
         autocorrect="false" autocapitalizationType="none"></TextField>
       <TextField hint="Password" secure="true"></TextField>
       
       <Button text="Sign in"></Button>
       <Button text="Sign up for Groceries"></Button>
     </StackLayout>  
  `
})
export class AppComponent {}

Setelah dirubah seperti kode diatas, aplikasi mu akan menampilan elemen UInya secara tertumpuk.

Meskipun elemen UInya sudah berada pada posisi yang tepat, mereka masih perlu beberapa jarak dan warna agar terlihat lebih menarik. Untuk itu mari lanjut ke fitur NativeScript lainnya: CSS.

TIP:
> Silahkan merujuk ke dokumentasi NativeScript untuk diskusi mengenai bagaimana layout NativeScript bekerja, dan berbagai atribut yang dapat kamu gunakan untuk menyesuaikan mereka.

> Baca juga artikel dari Jen Looper mengenai demystifying NativeScript layouts untuk penjelasan lebih jelas mengenai layout NativeScript dan contoh penggunaannya.

2.5: Global CSS

NativeScript menggunakan subset/himpunan dari CSS untuk merubah tampilan visual dari app mu. Mengapa sebuah subset? Dalam NativeScript yang kamu bangun adalah aplikasi native baik di iOS maupun Android, dan beberapa properti CSS tentu tidak dimungkinkan untuk mereplikasi dengan API native iOS dan Android, atau akan berdampak pada pengurangan performa secara keseluruhan. Meski demikian, tidak perlu khawatir; karena sebagian besar properti CSS didukung penggunaannya, dan syntax CSS nya juga sama -- jadi kesan kita dalam melakukan styling aplikasi native pada NativeScript sama dengan melakukan styling app berbasis web.

TIP: Dokumentasi NativeScript memiliki daftar lengkap mengenai properti CSS yang didukung dan dapat kamu gunakan.

Kamu dapat menggunakan tiga mekanisme untuk menambahkan properti CSS pada komponen UI NativeScript: application-wide CSS, component-specific CSS, dan inline style attribut. Pada sesi ini kita akan cakupkan hanya application-wide, atau global CSS, dan pada sesi selanjutnya kita akan membahas tentang bagaimana menggunakan aturan CSS untuk komponen-konponen individu.

TIP: Meskipun inline styling sangat bagus untuk uji coba cepat -- misal <StackLayout style="background-color: green;"> -- kamu harus menghindari penggunaanya secara umum karena atribut style cenderung mengotori template mu dan menyebabkan banyak kerumitan, khususnya jika kamu ingin menerapkan banyak aturan / CSS rules.

Membuat global style

Buka file app/app.css dan paste kode berikut:

Page {
  background-color: white;
  font-size: 15;
}
TextField {
  padding: 10;
  font-size: 13;
}

Jika kamu sudah terbiasa membuat web, maka syntax ini tentu sudah terasa tidak asing lagi. Kamu merujuk ke dua komponen UI melalui nama tag mereka (Page dan TextField), lalu kemudian menerapkan aturan CSS dengan format nama/nilai.

CATATAN: Dalam NativeScript, UI elemen <Page> tunggal akan membungkus template dari setiap komponen Angular pada level halaman, yang mana akan kamu pelajari ketika kita memperkenalkan routing pada tutorial ini. Untuk saat ini, ketahuilah bahwa sebuah elemen <Page> ada sebagai dasar template dari AppComponent mu, dan bahwa kamu dapat mentarget elemen <Page> tersebut dengan CSS sebagaimana yang dapat kamu lakukan terhadap elemen UI lainnya.

Meskipun seringkali kamu ingin agar aturan CSS mu untuk diterapkan sama antara app iOS dan Android, namun terkadang kamu perlu menerapkan aturan CSS mu hanya untuk satu platform saja. Misal, text field pada iOS memiliki garis tepi / border, tapi di Android tidak ada. Mari cari tahu bagaimana cara membuat styling untuk platform khusus di NativeScript.

Menambahkan CSS untuk platform tertentu

Tambahkan kode berikut pada baris pertama dari file app/app.css:

@import url("~/platform.css");
PERHATIAN: NativeScript konsisten dengan implementasi browser mengenai pernyataan @import harus mendahului aturan CSS lainnya dalam sebuah file.

Selanjutnya, buka file app/platform.android.css dan paste kode berikut:

TextField {
  border-bottom:1px solid #eee;
}

NativeScript mendukung pernyataan CSS @import untuk melakukan impor satu CSS file ke dalam file lainnya. Jadi baris kode ini menambahkan aturan CSS dari platform.css ke app.css. Tapi kamu mungkin menyadari bahwa Groceries tidak punya file dengan nama platform.css--namun hanya ada app/platform.android.css dan app/platform.ios.css. Apa yang sebenarnya terjadi?

Ketika kamu mengeksekusi tns run, atau tns livesync, NativeScript CLI memproses kode yang ada di folder app dan menyimpan hasilnya di folder proyek native yang berlokasi di platforms/ios dan platforms/android. Disinilah konvensi penamaan muncul: sementara memindahkan file, CLI dengan cermat memilih file-file .android.* dan .ios.*. Untuk memberikan gambaran khusus mengenai proses ini, CLI memindahkan platform.ios.css kedalam platforms/ios dan merubah namanya menjadi platform.css; begitu juga, CLI memindahkan platform.android.css kedalam platforms/android dan sekali lagi merubah namanya menjadi platform.css. Konvensi ini memberikan kenyamanan dalam hal mencabangkan kode untuk masing-masing iOS dan Android secara terpisah, dan ini mendukung semua jenis file di NativeScript -- tidak hanya untuk file CSS. Kamu akan melihat beberapa contoh lagi mengenai konvensi ini nanti dalam tutorial ini.

Dengan perubahan tersebut, kamu akan melihat appnya sedikit mengalami perubahan, dapat terlihat pada teks fieldnya memiliki garis tepi berwarna biru muda.

Meski sudah diberikan styling, appnya masih terlihat jelek, tapi nanti jadinya akan jauh lebih bagus setelah kita menambahkan styleing pada level kompoenen. Mari kita coba bagaimana cara kerjanya.

2.6: Component-specific CSS

Mirip dengan di web, terkadang pada app NativeScript perlu ditulis aturan CSS untuk menerapkan autrannya secara keseluruhan, dan terkadang juga perlu hanya untuk porsi khusus dari antarmuka. Pada sesi sebelumnya kamu melihat bagaimana menggunakan file NativeScript app.css untuk menulis aturan styling global, dan pada sesi ini kamu akan belajar bagaimana menggunakan properti komponen styleUrls yang cakupannya dibatasi hanya untuk komponen-komponen individual.

Menambahkan component-specific CSS

Buka file app/app.component.tsdan tambahkan properti styleUrls, sehingga hasil akhirnya seperti berikut:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <StackLayout>
      <TextField hint="Email Address" keyboardType="email"
        autocorrect="false" autocapitalizationType="none"></TextField>
      <TextField hint="Password" secure="true"></TextField>

      <Button text="Sign in"></Button>
      <Button text="Sign up for Groceries"></Button>
    </StackLayout>
  `,
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class AppComponent {}

Selanjutnya, buka file app/pages/login/login-common.css dan paste kode berikut ini:

StackLayout {
  margin-left: 30;
  margin-right: 30;
  padding-bottom: 15;
  background-color: white;
}
Image {
  margin-top: 5;
  margin-bottom: 20;
}
Button, TextField {
  margin-left: 16;
  margin-right: 16;
  margin-bottom: 10;
}
.submit-button {
  background-color: #CB1D00;
  color: white;
  margin-top: 20;
}

Pada Angular 2, properti styleUrls mengarah pada sebuah array dari stylesheet yang harus digunakan untuk melakukan styling pada sebuah komponen. Pada kasus ini, kita menyuruh Angular untuk menggunakan dua stylesheet, login-common.css dan login.css--nanti pada akhirnya akan diimplementasikan menjadi login.ios.css dan login.android.css, menggunakan konvensi penamaan yang sama seperti yang dijelaskan sebelumnya.

Mengapa tiga file? Sama seperti kita membagi file global app.css, platform.ios.css, dan platform.android.css, struktur ini memberikan kemampuan yang sama untuk menempatkan styling login umum dalam logon-common.css, login styling khusus iOS di login.ios.css, dan login styling khusus Android di login.android.css.

Hal yang mengesankan dalam penempatan aturan CSS pada level komponen adalah kamu dapatmenggunakan CSS selector yang ringkas seperti Button dan TextField, dan tidak perlu khawatir kalau aturan itu juga mempengaruhi semua tombol dan text field pada aplikasi mu, sebagaimana Angular 2 memastikan aturan-aturan tersebut tetap berada dalam cakupan komponennya masing-masing.

Sebelum kamu melihat seperti apa sekarang app mu terlihat, ada satu perubahan kecil yang mesti dilakukan. Perhatikan bahwa selektor terakhir yang digunakan pada login-common.css adalah .submit-button. Sama dengan CSS di web, dalam NativeScript kamu dapat menggunakan baik atribut id maupun class untuk mentarget elemen antarmuka tertentu, tapi saat ini tidak ada elemen UI pada aplikasi mu yang memiliki class "submit-button". Jadi, mari kita rubah dulu.

Menambahkan atribut class

Buka file app/app.component.ts, cari baris <Button text="Sign in"></Button> pada template komponennya, dan ganti dengan kode dibawah:

<Button text="Sign in" class="submit-button"></Button>

Dengan penambahan class ini, aplikasinya akan mulai terlihat sedikit lebih cantik.

Seperti yang terlihat, dalam NativeScript kamu punya banyak pilihan mengenai cara bagaimana kamu dapat menerapkan aturan CSS. Kamu bisa terapkan secara global untuk kedua platform pada file app.css, untuk iOS pada platform.ios.css, atau untuk Android pada platform.android.css. Dan kamu juga dapat menerapkan aturan pada level komponen, sementara tetap mempertahankan fleksibelitas untuk mentarget platform lain jika diperlukan.

Untuk lanjut dalam hal polis-mem-polis daripada tampilan login screen ini, mari cari tahu bagaimana caranya kita menambahkan sebuah gambar menggunakan logo app ini.

2.7.: File-file Gambar

Dalan NativeScript kamu menggunakan UI elemen <Image> dan atribut src nya untuk menambahkan gambar pada halaman. Atribut src memungkinkan mu untuk menentukan gambar mu dalam tiga cara. Pertama (dan yang paling sederhana) adalah dengan mengarahkan ke URL dari gambar:

<Image src="https://www.nativescript.org/images/default-source/landingpages/logo.png"></Image>

Kedua dengan mengarahkan gambar yang ada di folder app. Sebagai contoh jika kamu punya sebuah gambar di app/images/logo.png, kamu dapat menggunakannya dengan cara:

<Image src="~/images/logo.png"></Image>

Cara ketiga, dan yang digunakan oleh Groceries, adalah dengan menggunakan gambar dalam daftar sumber daya platform khusus. Mari tambah sebuah gambar pada halaman login dan kita diskusikan secara jelas cara kerjanya.

Menambahkan sebuah logo

Pada file app.component.ts, tambahkan <Image> dibawah tag atau anak pertama dari <StackLayout> yang sudah ada:

<Image src="res://logo_login" stretch="none" horizontalAlignment="center"></Image>

Syntax res:// memberitahu NativeScript untuk menggunakan sumber daya platform tertentu, dalam kasus ini sumber daya / resourcenya merupakan sebuah file gambar atau image. Sumber daya khusus platform tertentu ada di folder app/App_Resources. Jika kamu melihatnya kamu akan menemukan beberapa gambar yang berbeda, ada juga beberapa yang namanya logo_login.png.

Meski lebih rumit daripada menambahkan gambar secara langsung dari folder app, dengan menggunakan gambar platform spesifik memberikan mu kontrol lebih lengkap pada gambar yang tampil pada dimensi perangkat yang berbeda. Sebagai contoh iOS memungkinkan kita untuk menyediakan tiga gambar berbeda untuk perangkat dengan kerapatan pixel yang berbeda. Maka dari itu kamu akan menemukan logo dengan nama logo_login.png, logo_login@2x.png, dan logo_login@3x.png dalam folder App_Resources/iOS. Untuk Android kamu juga menemukan gambar serupa pada folder App_Resources/Android/drawable-hdpi (untuk "high" dpi, atau high dot-per-inch), dan App_Resources/Android/drawable-ldpi (untuk low-dpi).

Setelah file-file itu ditempatkan di tempatnya NativeScript framework tahu bagaimana cara memilih file yang tepat; semua yang harus kamu lakukan adalah merujuk gambarnya menggunakan res:// dan dasar nama filenya--misal res://logo_login. Berikut adalah tampilan dari halaman login setelah ditambahkan logo.

Pada tahap ini UI mu terlihat lebih cantik secara visual, tapi app ini sebenarnya belum melakukan apa-apa. Mari kita lanjutkan mengenai bagaimana menggunakan TypeScript untuk menambahkan beberapa fungsionalitas pada tutorial berikutnya.

TIP: Telah tersedia sebuah tools bernama NativeScript Image Builder yang ditulis oleh komunitas dapat membantu mu untuk menghasilkan gambar-gambar dengan konvensi penamaan dan ukuran resolusi yang tepat untuk iOS dan Android.

1.035
Image

Aditya Suranata

Aditya suka menulis, bukan hanya sekedar hobi, menulis menjadi medianya untuk mencurahkan pikiran dan perasaan. Di TutorKeren.com kebanyakan menyumbang tulisan sesuai dengan minat dan keahliannya yaitu pada kategori pemrograman dan elektronika. Selain itu juga gemar menulis mengenai hal-hal umum, seperti ilmu alam, sosial dan beberapa pengalamannya yang mungkin bisa berguna untuk orang lain.

Artikel Menarik Lainnya
Mari Gabung

Halo Emo 51 , Ada yang ingin disampaikan? Jangan sungkan untuk gabung diskusi ini. Silahkan Login dulu atau Daftar baru.