Jadi, ini adalah sedikit referensi tentang Dojo Toolkit yang akan saya gunakan.
Disini saya hanya akan mencoba beberapa cara memanfaatkan Dojo
Dojo yang mana?
Dojo toolkit adalah javascript framework yang menyediakan library yang cukup banyak. Dibagi menjadi 3 bagian penting, yaitu Dojo core, base, Dijit, DojoX.
Dojo base adalah bagian library yang mengatur tentang hal dasar pada dojo, dan harus dipanggil setiap kali kita akan menggunakan Dojo toolkit, bisa dikatakan ini adalah library wajib. Fungsi yang terdapat di base ini adalah fungsi ajax, fungsi penting dojo, dan DOM.
Dojo core menyediakan fungsi untuk parsing widget, efek animasi tingkat lanjut, drag ‘n drop. I18n, history handling, dll. Core ini menggunakan dojo base, namun dalam penggunaannya, hanya terdapat sedikit perbedaan saja.
Dijit, sebuah kata singkat dari Dojo Widget, memokuskan (katadasar:fokus) pengembangannya untuk tampilan, menyimpan library untuk container(set layout), form, dialog, text editor, calendar, color palette, dll.
DojoX, disebut juga Dojo eXtension atau eXperimental, disimpan library fungsi yang belum pantas disimpan di paket utama base/core atau Dijit, namun tidak jarang juga library DojoX merupakan kombinasi penggunaan kedua library tersebut.
Jadi kira-kira begitulah Dojo yang akan kita kenal, namun itu tadi hanya sedikit penjelasan saja. Untuk mengenal dojo lebih lanjut, ada baiknya kita langsung ke bagian praktek: Initializing Dojo
Initializing Dojo…
Selamat datang di dunia Dojo, tempat dimana ajax, efek, dan DOM javascript tidak perlu dipelajari dengan susah payah. Bagaimanapun juga, sebelum digunakan kita harus mendapatkan Dojo toolkit terlebih dahulu. Untuk mendapatkannya, kita bisa klik disini, ambil release terbaru (saat ini dibuat release sudah mencapai 1.7.1), amannya download release src, agar isinya lengkap dengan building tools, dan jangan lupa juga jika perlu download demo sample, juga docs-nya. Agar kita tidak perlu lagi mencari petunjuk di internet. 
Instalasi
Sebenarnya kita tidak memerlukan webserver untuk menjalankan Dojo, namun pada beberapa kasus, webserver memang diperlukan. Jadi dapatkan paket webserver (xampp, lamp) dan install di sistem kita…
Setelah itu jangan lupa ekstrak dojo library yang tadi kita dapatkan di folder htdocs, agar nanti dapat digunakan dengan bebas…
Penempatan (Persetujuan)
Menempatkan dojo sebetulnya bisa dimanapun kehendak kita, namun hal ini menjadi penting pada saat pemanggilan file… Agar seragam, marilah kita simpan ini di htdocs\dojo, lalu kita akan memulai belajar di direktori htdocs\cobadojo.
Memulai Dojo
Untuk memulai dojo, saya menggunakan notepad++ dan google chrome, mengingat keduanya memiliki power dan tetap ringan
Untuk itu, coba untuk membuat file baru di direktori utama kita (htdocs\cobadojo) dengan nama dojo_pertama.html dengan isi file sebagai berikut.
<html>
<head>
<title>percobaan pertama dojo</title>
<link rel="stylesheet" type="text/css" href="../dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="../dojo/dijit/themes/tundra/tundra.css" />
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="../dojo/dojo/dojo.js"></script>
<script type="text/javascript" language="javascript">
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<div style="position:relative;top:10px;left:10px;width:80%;">
<button dojoType="dijit.form.Button" id="myButton">
Pencet saya!
<script type="dojo/method" event="onClick">
alert('button sudah ditekan!');
</script>
</button>
</div>
</body>
</html>
Semuanya sebenarnya hanyalah html biasa, perbedaannya akan saya jelaskan pada beberapa baris saja.
Baris 4-5 adalah baris import css yang akan digunakan, sebenarnya bisa lebih sederhana lagi.
Baris 6-10 adalah baris konfigurasi dojo, kita menggunakan variabel parseOnLoad: true (biasanya digunakan untuk memroses dijit)
Baris 11, baru kita memanggil file dojo yang sebenarnya. (path tentunya sudah disesuaikan dengan persetujuan awal penempatan)
Baris 12-14 menjelaskan bahwa pada kali ini kita membutuhkan library button yang asalnya dari dijit (dijit.form.Button)
Baris 16, menetapkan bahwa isi body menggunakan class tundra yang sudah di-import di css.
Baris 18-23 membuat button dijit dengan id myButton dan menampilkan kata “Pencet saya!” dengan script yang sudah ditentukan, yaitu menampilkan peringatan “button sudah dipencet!”
Mencoba Dialog
Tampilan seperti kotak dialog maupun tooltips tentunya berhubungan dengan tampilan, maka dari itu library ini adalah bagian dari Dijit. Untuk memanggil dialog ataupun tooltips, yang kita perlukan adalah beberapa tambahan pada script dojo_pertama.html. Ada baiknya kita gandakan file dojo_pertama.html menjadi dojo_dialog.html dengan isi sebagai berikut.
<html>
<head>
<title>percobaan dialog dojo</title>
<link rel="stylesheet" type="text/css" href="../dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="../dojo/dijit/themes/tundra/tundra.css" />
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="../dojo/dojo/dojo.js"></script>
<script type="text/javascript" language="javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
</script>
</head>
<body class="tundra">
<div style="position:relative;top:10px;left:10px;width:80%;">
<button dojoType="dijit.form.Button" id="myButton">
Pencet saya!
<script type="dojo/method" event="onClick">
dijit.byId("dialog1").show();
</script>
</button>
</div>
<div dojoType="dijit.Dialog" id="dialog1" title="hai"draggable="false">
ini isi dialog
</div>
</body>
</html>
Silahkan Tinggalkan Komentar tentang artikel ini
css sama dojo.js ga d cantumin
ReplyDeletega jelas ini blog