Pendidikan Teknik Informatika Universitas Negeri Malang

Hai, bertemu lagi dengan saya tentang bagaimana membuat aplikasi Windows 8 dengan Bahasa JavaScript menggunakan template dari Visual Studio 2012 yang telah disediakan. Yang sebelumnya kita telah memodifikasi bagian groupeditems. Pada kali ini saya akan memberikan tutorial bagimana memodifikasi tampilan untuk groupDetail. Seperti sebelumnya kita harus mempersiapakan alat-alat kita. Tentu saja alat-alat kita Komputer dan Visual Studio kita.

Okeee..langsung saja kita praktikan bagaimana memodifikasi template Windows 8 Apps dengan bahasa JavaScript.

  • Buka GroupDetail.html di Visual Studio dibagian Solution Explorer. Kemudian cari elemen header yang mempunyai class “headertemplate” kemudian hapus elemet H2 dengan class “group-subtitle”.
  • Kemudian cari template item yang mendefinisikan thumbnail dari resep. Cari elemen DIV dengan class “itemtemplate”. Kemudian hapus elemen H6 yang ada dalam elemen DIV tersebut. Dan rubah textContent:title menjadi textContent:shortTitle.

1

  • Selanjutnya tambahkan sedikit elemen html untuk menambahkan Penjelasan. Agar lebih sempurna. Jika semua langkah di atas sudah dilakukan makan akan seperti gambar dibawah ini.

2

  • Kemudian kita memodifikasi css untuk group detail nya. Buka groupDetail.css di solution explorer kemudian cari class “groupdetailpage .itemlist .win-groupheader .groupimage” dan modifikasi seperti gambar dibawah ini.

3

  • Dan juga di file css. Modifikasi “.groupdetailpage .itemlist .item” menjadi seperti dibawah ini.4

Jika semua langkah di atas telah dilakukan, coba jalan program. Kemudian coba klik groupdetail kemudian perhatikan tampilan untuk groupdetail pasti sudah tertata lebih rapi dan sedikit lebih longgar.

Baiklah, saya rasa cukup dulu untuk sesi kali ini. Untuk Selanjutnya kita akan memodifikasi itemdetail. Mirip dengan cara untuk memodifikasi groupItems dan groupDetails namun sedikit lebih banyak untuk itemDetails ini. Sangat mudah jika dilakukan secara bertahap. Sampai bertemu kembali di sesi selanjutnya.

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

The WordPress.com Blog

The latest news on WordPress.com and the WordPress community.

%d bloggers like this: