Selasa, 24 Mei 2016

JAVASCRIP FRAMEWORK DOJO TOOLKIT



 

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

sumber :
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