Membuat Aplikasi Windows 8 – 7 – Namespace dan Class

Assalamu’alaikum :)

Postingan kali ini masih seputar topik Membuat Aplikasi Windows 8, yaitu mengenal apa itu WinJS.Namespace.

Sebelumnya, ketika anda membuka file default.js pernahkah anda bertanya-tanya apa maksud dari:

Untuk apa sih membuat fungsi anonymous lalu memasukkan semua kode JavaScript kita ke dalam fungsi tersebut? Itu adalah gaya ngoding yang disebut dengan JavaScript Module Pattern. Tujuannya adalah untuk meminimalisir penggunaan global variable, dengan cara memasukkan seluruh kode yang kita punya ke dalam fungsi tersebut. Dengan begitu semua kode yang kita punya hanya akan tersedia di dalam fungsi tersebut saja.

Misalnya, di dalam default.js anda akan menemukan sebuah variable  var app = WinJS.Application; . Variable ini hanya bisa diakses oleh member yang ada di fungsi tersebut saja. Tidak bisa diakses dari file JavaScript lain. Sehingga ini meminimalisir penggunaan global variable. Kenapa diminimalisir? Karena penggunaan Global Variable itu tidak baik, pada umumnya.

Penjelasan lebih dalam mengenai teknik ini bisa di baca di: http://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-in-anonymous-functions-li

Lalu bagaimana kalau kita ingin membuat Global Variable? Ada dua cara… Yang pertama anda bisa menuliskan variable global anda di luar Module Pattern tersebut, atau, anda bisa memilih menggunakan library yang sudah disediakan oleh Visual Studio. WinJS.Namespace dan WinJS.Class. Saya lebih suka pakai cara yang kedua, kenapa? Terlihat lebih rapi :)

WinJS.Namespace

Untuk membuat sebuah variable Global, kita dapat menggunakan WinJS.Namespace. Untuk membuat sebuah Namespace, kita menggunakan syntax:

WinJS.Namespace.define("NAMA_NAMESPACE_KITA",{/* OBJECT atau MEMBER dari Namespace kita */});

Misalnya saja saya membuat sebuah file JavaScript baru, namanya testNamespace.js dengan isi seperti ini:

Kriteria di atas tidak fiktif, itu asli :malu:

Seperti yang kita lihat di atas, kita membuat sebuah Namespace yang bernama AbangFadli lalu Namespace itu memiliki member age, galak, baik dan getPesan.

Kita bisa mengaksesnya dari file lain (misalnya default.js) dengan mengetikkan  AbangFadli.<something>  di mana something digantikan dengan member dari namespace AbangFadli.

NOTE: Jangan lupa untuk mengimport / menginclude file JSnya ke dalam file HTML.

Namespace AbangFadli

Semua member ada kan? Mulai dari age, baik, galak dan getPesan juga ada. Tetapi, variable pesan tidak ada, karena memang kita tidak memasukkannya ke dalam Namespace, melainkan hanya ada di file testNamespace.js. Tapi dengan fungsi getPesan()  kita bisa mengambil isi dari variable pesan tersebut.

Untuk mempelajari lebih jauh tentang Namespace, bisa ke : http://msdn.microsoft.com/en-us/library/windows/apps/br212652.aspx

WinJS.Class

WinJS Class fungsinya untuk membuat Class (You don’t say :nohope:). Syntax yang digunakan adalah:

WinJS.Class.define(/* FUNGSI CONSTRUCTOR */,/* Instance Member */,/* Static Member */);

Di mana argumen pertama untuk sebuah fungsi constructor, argumen kedua adalah member yang bisa diakses ketika object sudah di-inisialisasikan dengan kata lain kita bisa mengaksesnya melalui variable objectnya, sedangkan yang ketiga adalah static member, yaitu member yang bisa diakses tanpa harus meng-inisialisasikan objectnya (menggunakan new) atau dengan kata lain kita mengaksesnya melalui kelasnya. Tentunya yang sudah belajar bahasa pemogramman yang menggunakan Class bisa menangkap maksud dari ketiga argumen tersebut :D

WinJS.Class ini bisa digunakan di dalam WinJS.Namespace agar bisa diakses dari file lain, contohnya:

Di sini kita mendefinisikan sebuah Class yang memiliki Instance Member jumlahBlog dan alamat. Di dalam konstruktor, kalau ada member baru yang ditambahkan seperti nama dan kelamin maka akan dimasukkan sebagai Instance Member.

Lalu kita juga memiliki isManusia sebagai static Member.

Di dalam Namespace “Blogger” kita juga sudah ditambahkan member Pemilik agar kita bisa mengakses Static Member, dan kita tambahkan getList di mana ini adalah fungsi untuk mengambil sebuah array yang sudah kita definisikan di bawah.

Dan ketika kita coba akses di default.js kita bisa mengakses Instance Member dengan menggunakan getList() dan bisa mengakses Static Member menggunakan Pemilik.

Instance Member VS 2012

Static Member VS 2012

Penjelasan lebih lanjut mengenai WinJS.Class bisa dilihat di sini: http://msdn.microsoft.com/en-us/library/windows/apps/br229776.aspx

Okay, itu dia penjelasan singkat (singkat apanya :hammer:) mengenai WinJS.Namespace dan WinJS.Class. Semoga bermanfaat dan see you next time :D

REFERENSI:
Kraig Brockschmid. Programming Windows 8 Apps with HTML, CSS, and JavaScript, 2012.
http://msdn.microsoft.com/en-us/library/windows/apps/br212667.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/br229776.aspx

AbangFadli, out :cool:

Wassalamu’alaikum :kr

Incoming search terms:

  • MembuatAplikasiWindows8-7-NamespacedanClass
Ilmu jangan disimpan sendiri, bagikan ke teman-teman anda:

Comments

comments

Ahmad Fadli Basyari

Mahasiswa IT di President University. Memiliki hobi membuat aplikasi mobile, blogging dan menonton film.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA *

[+] kaskus emoticons nartzco