Metro Apps Hello World menggunakan HTML dan CSS!
Halo!
Pada kesempatan ini saya mau memberikan tutorial tentang membuat Metro-apps pertamamu menggunakan CSS dan HTML. Yup, menarik bukan? Para designer dan developer web yang biasa pakai HTML kini juga bisa membuat aplikasi desktop sendiri~
Sebelum bisa memulai, pastikan anda telah membaca artikel ini.
Pertama-tama, mari mulai membuat project JavaScript baru di Visual Studio.
Membuat Project Baru
1. Buka Visual Studio Express 2012 RC
2. File -> New Project
3. Pada menu dropdown di kiri layar, kembangkan menu 'Installed', lalu pilih 'JavaScript'.
4. Ada beberapa pilihan template project. Pilih 'Blank App'.
5. Namai project anda dengan nama 'HelloWorld' kemudian pilih folder tempat meletakkan project anda.
6. Klik OK.
Blank App adalah template paling sederhana yang disediakan oleh Visual Studio. Pada template ini sudah tersedia beberapa file sebagai berikut :
package.appxmanifest, file manifest yang mendeskripsikan aplikasimu, berisi juga pengaturan-pengaturan penting seperti logo aplikasi, kapabilitas apps, dll.
Beberapa image file untuk logo (logo.png dan smalllogo.png)
Image untuk merepresentasikan aplikasi anda di Windows Store (storelogo.png)
Image untuk splashscreen (layar yang ditampilkan pada saat app dimulai) (splashscreen.png)
CSS dan file untuk Windows Library for JavaScript (file-file di folder References)
File default.html dan default.js yang dijalankan ketika aplikasi dimulai
File yang akan sering anda otak-atik adalah file default.html dan default.js ini yang menjadi rangka utama dari aplikasi anda.
Memodifikasi Start Page anda
File default.html akan memiliki bentuk default seperti ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- HelloWorld references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
Sama seperti web development menggunakan HTML pada umumnya, anda tinggal memodifikasi isi didalam tag <body>.
Mungkin beberapa dari anda sudah mengenal tag-tag standar seperti <h1>, <h2>, dan <p>. Mari kita coba pergunakan dan lihat hasilnya.
Ubah konten dalam <body> seperti sebagai berikut:
<body>
<h1>Halo, Dunia!</h1>
<h2>Saatnya seluruh dunia untuk Go Metro!</h2>
<p>Metro Application is the next big thing! Ayo curi start, pelajari metro design principle dan teknik-teknik developmentnya.</p>
</body>
Kemudian, tekan F5 untuk membangun program. Hasilnya adalah sebagai berikut :
Mengubah tampilan menggunakan CSS
Selamat! Anda telah membuat aplikasi metro pertama anda :D
Memang terlihat sepele sih.. dan kelam... err, kalau begitu mari kita hias :)
Buka file default.html anda dan sisipkan tag <div class='header'> seperti berikut :
<body>
<div class="header">
<h1>Halo, Dunia!</h1>
<h2>Saatnya seluruh dunia untuk Go Metro!</h2>
<p>Metro Application is the next big thing! Ayo curi start, pelajari metro design principle dan teknik-teknik developmentnya.</p>
</div>
</body>
Kemudian, buka file default.css pada folder css, kemudian tambahkan kode berikut :
.header {
padding : 50px 50px 50px 50px;
background-color : #ffd800;
color : #000;
}
Definisi kelas '.header' pada file CSS akan mempengaruhi semua elemen yang berada langsung di dalam elemen dengan kelas 'header' tersebut. Pada file CSS, kita mendefinisikan bahwa elemen berkelas 'header' akan memiliki background kuning dengan teks hitam, serta memiliki area kosong (padding) sebesar 50px di sekelilingnya.
Tekan F5, dan hasilnya adalah sebagai berikut.
Yak selamat lagi! Anda telah berhasil menghias aplikasi metro pertama anda :3
Kali ini sampai di sini dulu. Untuk selanjutnya kita akan membahas lebih lanjut mengenai eventhandler menggunakan JavaScript dan lebih jauh lagi mengenai styling menggunakan CSS.
Sampai ketemu lagi!