Sencha Touch: Panduan Membuat Style & Theme di Sencha Touch

Saya sudah membuat beberapa posting yang terkait dengan sencha touch, yang terakhir adalah contoh aplikasi sencha touch + phonegap + iOS.

Jika Anda perhatikan kembali salah satu screen shot dari contoh aplikasi sencha touch pada posting tersebut, anda akan melihat aplikasi tersebut memiliki tampilan yang berbeda dari tampilan aplikasi sencha touch bawaannya. Pada contoh aplikasi sencha touch tersebut, saya merubah warna dasar sencha touch theme menjadi agak kemerahan.

Sencha Touch : Style Atau Theme?

Kapan menggunakan style dan kapan menggunakan theme:

Sencha Touch Style:

Style pada sencha touch app digunakan jika Anda ingin merubah tampilan dari komponen secara individu. Artinya perubahan tersebut hanya berlaku pada komponen tersebut dan tidak berlaku pada keseluruhan aplikasi.

Seperti yang kita bisa baca pada dokumentasi resmi sencha touch, kita bisa mendefinisikan style untuk setiap komponen yang kita gunakan secara terpisah atau sendiri sendiri dengan menggunakan css.

Sencha Touch Theme:

Theme pada sencha touch app digunakan jika kita ingin melakukan perubahan style pada app kita secara keseluruhan. Sencha touch menggunakan SASS dan compass untuk sistem theme nya. Untuk informasi lebih detail silahkan baca sencha touch theme di situs resminya

Contoh merubah style:

{
   xtype: 'panel',
   style: 'border: none; font: 12px Arial black',
   html: 'Hello World'
}

atau menggunakan class

{
   xtype: 'panel',
   cls: 'myStyle',
   html: 'Hello World'
}

Style tentu sangat bermanfaat jika kita ingin melakukan perubahan sedikit saja pada aplikasi sencha touch yang kita buat. Dan ini sangat sederhana karena menggunakan syntax CSS yang sudah kita pahami.

Sencha Touch Theme = SASS + COMPASS

SASS merupakan singakatan dari Syntactically Awesome Stylesheets. Dengan SASS memungkinkan kita bisa menambahkan variable, nesting, turunan dan inheritence pada standar CSS. Artinya lebih powerfull dari sekedar CSS biasa.

Contoh variable pada SASS menggunakan tanda $ seperti di PHP:

$blue: #4D74C1;
$red: #800000;
$baseMargin: 10px;
$basePadding: 5px;

Kemudian variable tersebut bisa kita gunakan pada deklarasi CSS pada SASS file kita. Dan lihat juga kita bisa menggunakan operator matematika pada variable yang sebelumya kita buat:

.box1 {
   border: 1px solid $blue;
   padding: $basePadding;
   margin: $baseMargin;
}

.box2 {
   border: 1px solid $blue;
   padding: $basePadding*2;
   margin: $baseMargin/2;
}

.box2 di atas memiliki padding yang dua kali dari .box1 dan margin setengahnya dari .box1

Untuk masalah warna, SASS memiliki built in fitur seperti darken, lighten, invert dll.

Sencha Touch Theme : Cara Modifikasi

Caranya mudah sekali :

1. Install SASS & Compass
• Sebelum nya Anda harus telah menginstall Ruby (Jika Anda pengguna Mac, Ruby sudah terinstall sejak lahir). Cara install Ruby di windows bisa klik Ruby Installer
• Command line install SASS dan Compass adalah sbb:

  sudo gem install haml
  sudo gem install compass

  di windows:

  gem install haml
  gem install compass

2. Selanjutnya kita buat file SCSS sendiri dan simpan dibawah folder /lib/resources/sass  dan berinama misalnya themebuatanku.scss
3. Selanjutnya kita perlu melakukan perubahan pada file index.html kita yang sebelumnya menginclude sencha-touch.css menjadi sencha-touch.css (sebenarnya bisa saja kita melakukan perubahan langsung di file sencha-touch.scss sehingga kita tidak perlu merubah file index.html nya)

   <link rel="stylesheet" type="text/css" href="lib/sencha-touch-2.0.0/resources/css/themebuatanku.css"/>

4. Lakukan perubahan pada file scss seperti pada langkah 2, sesuai dengan theme yang ingin Anda buat
5. Lakukan kompilasi ulang dengan command line, masuk ke folder tempa scss yang kita buat dan berikut ini command line nya:

   compass compile

6. Lakukan testing

Saya melakukan perubahan sangat sederhana pada file scss dengan merubah variabel $base_color: #546346;

Berikut ini adalah beberapa screen shot :

Lokasi folder file scss

Berikut ini tampilan saat proses compile file scss :

Proses Compile Compass Sencha Touch Theme

Dan berikut ini tampilan ketika sencha touch theme kita rubah:

Sencha Touch Theme Yang Sudah Di Rubah

Mudah bukan?

Semoga bermanfaat …dan selamat mencoba merubah style dan theme dari aplikasi sencha touch Anda

Salam

YY

Post To Facebook

Related Video

Pengunjung Datang Ke Blog Ini Mencari Info Tentang :

• sencha touch (11)
• apa itu phonegap (10)
• sencha adalah (6)
• contoh aplikasi phonegap (6)
• cara menginstal phonegap (5)
• cara pakai phonegap (3)
• panduan sencha (3)
• cara instal phonegap untuk blackberry (2)
• cara membuat aplikasi untuk iphone (2)
• cara mengatur aplikasi iphone (2)