Pengertian
Dojo Toolkit adalah javascript framework yang menyediakan library open source Javascript yang didesain untuk pengembangan aplikasi berbasis AJAX atau Javascript. Dojo mendukung berbagai format data dari server seperti JSON, XML, Text, dan HTML.
Dojo tuh dibagi menjadi 3 bagian :
– Dojo Core (dojo.*)
– Dojo Widget (dijit.*)
– Dojo Experimental (dojox.*)
Sejarah
Beberapa tahun setelah kebangkitan Javascript, 25 April 2004, ditulislah kode yang kemudian menjadi cikal bakal Dojo Toolkit, sebuah Javascript Framework yang menyediakan penyederhanaan fungsi scripting dengan javascript sampai ke pembuatan RIA (Rich Internet Application) yang kompleks.
Lisensi dari Dojo Toolkit yang memungkinkan agar komunitas dapat berkontribusi dan dimasukkan kedalam versi resmi menyebabkan Dojo Toolkit menjadi kesatuan yang utuh, yang bisa dikatakan unggul pada bidangnya.
Paket modular sangat membantu para web developer untuk membuat web yang interaktif dengan struktur yang mudah dimengerti. Ditambah lagi sebuah kesatuan antara Javascript library, dengan Widgeting system memperkokoh posisi Dojo Toolkit sebagai Javascript Framework sebenarnya.
Kelebihan
1.
very liberal license (BSD), mau dipake gimanapun
terserah, buat komersil dijual lagi juga boleh.
2.
terdiri dari 3 bagian : dojo (basenya librarynya
sendiri), dijit (UI toolkit), dan dojox (experimental dari dojo dan dijit yang
belum disupport semua browser)
3.
Kode deklaratif
[code][/code]
Gampang kan? ini mempermudah membuat UI yang
kompleks.
4.
Library yang besar dan lengkap. Misalnya dijit punya
banyak widget buat bikin UI yang bagus, IMO banyaknya setara dengan sencha
(extjs), jquery ui sih dikit banget dan ngga berkembang dari dulu karena
struktur pemrograman jquery yang ngga memungkinkan untuk bikin complex
javascript.
5.
Plugin dan library yang banyak itu didevelop oleh dojo,
third party juga ada tapi ngga banyak karena toh semuanya udah lengkap. Artinya
semua style dari widget2 tersebut sama semua dan dijamin bekerja dengan plugin2
yang lain. Ngga seperti jquery, kita ngga bisa ngejamin plugin yang satu bisa
jalan dengan plugin yang lain.
6.
Dojo juga bukan UI toolkit saja, tapi juga library yang
lain : Charting, data storage, Javascript audio/video player, SVG drawing,
XMPP, SQL, ....
7.
Kalo udah advanced javascriptnya, programming library
atau widget dengan dojo toolkit itu sangat menyenangkan dan flexible. OOP dojo
sangat flexible (sangat mirip dengan prototype) karena basically kalo pengen
bikin widget baru tinggal subclassing widget yang udah ada (mirip2).
8.
Kalo mengerti design pattern, yang digunakan disini
oleh dojo adalah observer pattern (sering dipakai di desktop programming untuk
UI). Intinya agan menyambungkan signal (atau event) ke slot (method dari object
lain). Ini tipikal dojo
[code]
dojo.connect( dijit.byId("button") ,
"onClick", dijit.byId("dialog"), "show" )
[/code]
Ini satu contoh misalkan anda punya satu button dan
satu dialog box. Ketika button tersebut diklik, maka dialog tersebut akan
ditampilkan. ini salah satu kekuatan dojo yang membuat dojo sangat fleksibel.
9.
Module system. Dojo punya module loader.
[code]
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("librarySendiri.Keren.Cool");
[/code]
10. Packaging
system. Anda bisa pack dojo dengan library2 yang hanya anda butuhkan menjadi
satu file.
Kelemahan
1.
kalau kita gak tau API dari tiap2 Dijit maka kita akan
kesulitan untuk membuat secara program.
2.
dokumen HTML kita tidak valid, karena atribut dojoType
tidak dikenali dalam aturan W3C. Penggunaan cara ini juga tidak fleksibel
karena Dijit yang kita gunakan sulit untuk kita modifikasi “on the fly”.
3.
Dojo Experimental atau Dojox merupakan Dijit yang masih
dalam tahap pengembangan tetapi sudah bisa digunakan hanya saja API masih bisa
berubah.
Fungsi
Bisa digunakan untuk fungsi-fungsi umum
seperti XHR (POST/GET), i18n, enkripsi, xml, date/time, efek animasi, dsb kita
cukup menggunakan dojo core.
Cara
Instalasi
Sebenarnya
kita tidak memerlukan webserver untuk menjalankan Dojo, namun pada beberapa
kasus, webserver memang diperlukan. Jadi dapatkan paket webserver (xampp) 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…
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 dengan nama
dojo_latihan.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>
Selamat
mencoba
https://khalifavi.wordpress.com/2010/09/05/sekilas-mengenai-dojo-toolkit/
http://pratama-22.blogspot.co.id/2011/12/dojo-toolkit.html
Tidak ada komentar:
Posting Komentar