Penggunaan Grid dalam Intel XDK

Cabaran utama yang dihadapi oleh seorang developer adalah menghasilkan rekabentuk aplikasi yang kemas, teratur dan menarik. Ia bukanlah sesuatu yang mudah kerana ia menuntut seorang developer agar membuat sedikit kajian sebelum rekabentuk antaramuka pengguna dibuat.

Pada pendapat saya,  kita perlu memahami konsep dan garis panduan penyediaan antaramuka skrin yang disediakan oleh penyedia platform (Android dan iOS). Ini adalah memastikan aplikasi kita tidak ditolak apabila kita memohon untuk muatnaik ke Play Store nanti.

Tahukah anda bahawa setiap aplikasi yang ingin di publish ke Apple AppStore perlu disaring oleh pihak Apple Developer terlebih dahulu?

create-new-project-04

Dalam entri saya yang lalu, kita telah memilih untuk menggunakan Twitter Bootstrap v3 Framework. Framework ini sangat memudahkan kita menghasilkan User Interface (UI) yang sangat kemas dan teratur.

getbootstrap

Dokumentasi dan cara penggunaan framework ini boleh dirujuk melalui dokumentasi yang disediakan di sini.

bootstrap-studio

Sekiranya anda mempunyai kemampuan dari sudut kewangan, saya amat menggalakkan anda untuk menggunakan Bootstrap Studio. Tool ini membantu anda menjimatkan masa anda. In shaa Allah saya akan berkongsi sedikit info tentang Bootstrap Studio ini di masa akan datang.

Fungsi Grid

Di dalam Twitter Bootstrap framewrok, sistem grid membolehkan aplikasi mudah alih yang dibangunkan nampak lebih menarik, fit, teratur mengikut saiz peranti yang kita gunakan (desktop, tablet dan telefon).

responsive-exampleContoh paparan antaramuka yang responsif

Untuk lebih mudah memahami, anda boleh merujuk di artikel di sini. Saya akan tunjukkan bagaimana penggunaan sistem grid ini dalam Intel XDK.

Penggunaan Row

Seperti biasa, saya akan gunakan projek kita yang lalu; KoleksiDoa. Buang text element yang kita telah tulis Hello World dalam entri ini.

delete-hello-world

Rujuk gambar di atas, anda akan lihat column akan berwarna biru. Sila tekan row di sebelah kiri. Anda akan lihat row pula yang berwarna biru. Perhatian ada garisan hijau di sekeliling text Hello World, kan? Ia menunjukkan had element yang kita hendak buang. Tekan icon trash (tong sampah itu). Ini adalah cara untuk delete row dan column. Secara automatik, text Hello World telah dibuang.

Kemudian, ikuti langkah ini:

Langkah 1:

  • Lihat di CONTROLS
  • Pilih LAYOUT
  • Cara 1:
    • Drag element ROW ke skrin kita
    • Drag pula element COLUMN ke dalam skrin kita.
  • Cara 2:
    • Right click ROW
    • Insert at Current Position
    • Right click COLUMN
    • Insert at Current Position

Saya memberi anda 2 cara untuk memasukkan setiap element samada menggunakan kaedah drag and drop ataupun menggunakan cara yang saya suka, right click then insert.

Langkah 1 menghasilkan 2 columns di dalam layout skrin anda. Kemudian, ikuti langkah seterusnya.

Langkah 2:

  • Lihat di CONTROLS
  • Pilih BUTTONS
  • Drag element Graphic Button ke dalam column pertama
  • Drag element Graphic Button ke dalam column kedua

graphic-button

Mencantikkan Graphic Buttons

Secara default, beginilah graphic button kita. Untuk mencantikkan kedudukan butang ini, anda perlu klik graphic button di column pertama terlebih dahulu.

Kemudian, rujuk di sebelah kanan skrin anda seperti gambar di bawah.

graphic-button-styles

Ini adalah Styles bagi element Graphic Button. Anda boleh customize mengikut kreativiti anda. Lihat Active Styles,  tekan pada pangkah [x] di ruangan default-graphic-sizing. Anda akan dapat lihat bentuk graphic button anda yang terkini.

graphic-button-new.PNG

Lihat Active Styles dan layout skrin menu saya.

Contoh Layout Menu

new-menu-button

Ini adalah contoh layout menu yang saya buat. Saya beri peluang untuk anda buat dulu. Sila tinggalkan komen sekiranya anda menghadapi sebarang masalah.

Sekiranya tidak keberatan, kongsikan dengan saya bagaimana anda buat ye.  Jumpa lagi.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s