Pengenalan Dojo Toolkit


OVERVIEW

Dojo Toolkit merupakan library open source JavaScript yang dapat digunakan untuk pengembangan aplikasi berbasis AJAX atau JavaScript. Dojo Toolkit merupakan salah satu framework Javascript yang menyediakan penyederhanaan fungsi scripting dengan javascript sampai ke pembuatan RIA (Rich Internet Application) yang kompleks. Didalam Dojo Toolkit menyediakan kumpulan kelas Javascript library yang lengkap mulai dari dasar JavaScript sampai fungsi lanjutan untuk meningkatkan interaktivitas pada web dan diperkuat dengan Widgeting system.
Dojo Toolkit didukung oleh SitePoint dalam pengembangannya, juga disisipkan dalam Zend Framework sebagai library javascript. Dojo Toolkit juga digunakan oleh perusahaan-perusahaan besar seperti IBM, AOL untuk pengembangan arsitektur mereka.
Fungsi – fungsi dasar dari Dojo Toolkit terletak didalam file dojo.js. Didalam file ini terdapat banyak feature seperti CSS-based queries, event handling, animations, Ajax, class-based programming dan lain-lain.

Dojo Toolkit dibagi menjadi 3 bagian :

  • Dojo Core (dojo)
  • Dojo Widget (dijit)
  • Dojo Extensions (dojox)

Dojo Core

Dojo Core adalah inti dari Dojo Toolkit. Kita bisa menggunakan fungsi-fungsi umum seperti XHR (POST/GET), i18n, enkripsi, xml, date/time, efek animasi, dll. Dojo merupakan kelas yang berisi komponen-komponen dasar JavaScript yang digunakan untuk menjalankan fungsi lanjutan yang ada pada Dojo widget dan Dojo extention (kelas dijit dan dojox) dan untuk membangun fungsi-fungsi javascript yang kita buat sendiri. Apabila kita ingin menyertakan library Dojo pada web yang sedang kita bangun, hal yang kita perlu lakukan hanya menyertakan (include) file dojo.js.

Dojo Widget / Dijit

Dojo Widget / Dijit merupakan aplikasi kecil (widget) “siap pakai” yang menggunakan fungsi-fungsi bawaan Dojo. Dijit membutuhkan file dojo.js dan modul-modul lainnya. Sesuai namanya, dijit berisi fungsi-fungsi yang sudah jadi dan langsung dapat digunakan (widget). Dijit digunakan untuk keperluan pembangunan UI. Pengguna hanya tinggal menyisipkan fungsi yang ada pada dijit ini tanpa perlu membangun fungsinya dari awal lagi. Kelas ini berisi fungsi-fungsi untuk membangun UI web. Apabila kita ingin menggunakan sebuah kelas widget dalam web kita, maka sebelumnya kita perlu mendeklarasikan kelas widget tersebut didalam kode.

Dojo Extensions

Dojo Extensions atau Dojox merupakan Dijit yang masih dalam tahap pengembangan tetapi sudah bisa digunakan hanya saja API masih bisa berubah. Biasanya Dojox merupakan extension dari Dijit dengan fitur yang lebih baik.

Dojo Utils

Dojo Utils merupakan tool untuk melakukan testing. Jadi kita bisa bikin test unit dari dijit yang kita buat dan kita test disitu.

SETTING DOJO TOOLKIT

Tanpa Download

Untuk menggunakan Dojo Toolkit sangatlah mudah, untuk komputer yang terkoneksi ke internet cukup dengan satu baris kode saja di file HTML. Kita bisa memilih Dojo yang terletak di CDN (Content Delivery Network) di Google atau AOL . Kita bisa menggunakan salah satunya :

Dojo From Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>

Dojo From AOL CDN:

<script src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>

Dengan Download

Pada saat tulisan ini dibuat, versi terbaru Dojo adalah 1.5. Instalasi Dojo untuk digunakan pada web sangat sederhana, yaitu cukup dengan meletakkan 1 folder library dojo pada folder web yang sedang dibangun dan mendeklarasikan penggunaan library dojo tersebut.  Library Dojo terbagi menjadi 3 yaitu dojo core (dojo), dojo widget (dijit), dan dojo extensions (dojox).
Kita terlebih dahulu harus mendownload paket Dojo Toolkit di http://dojotoolkit.org/download/.  Kita bisa memilih pilihan Dojo Toolkit Release kemudian extract file archive tersebut. Didalam file archive tersebut ada 3 folder yaitu : dojo, dijit dan dojox. Dicontoh ini saya memiliki satu folder projek dengan nama dojoroot (C:\xampp\htdocs\dojoroot) dan saya menempatkan 3 folder tersebut di dalam folder dojoroot. Dan jika saya membuat file html, saya tempatkan di folder dojoroot. Jadi mengeksekusinya dengan url : http://localhost/dojoroot/xxx.html. Di contoh ini saya setting seperti berikut ini :

Kemudian di script HTML kita tinggal menambahkan script dibawah ini :
<script type="text/javascript" djConfig="parseOnLoad: true" src="dojo/dojo.js"></script>

EXAMPLE

Hello world

Setelah kita selesai mendownload Dojo dan telah sesuai menyettingnya, kita bisa mulai dengan membuat page Hello World seperti dibawah ini :

<html>
<head>
   <title>Hello World</title>
   <script src="dojo/dojo.js"></script>
</head>
<body>
   <h1>Hello World Using Simple Dojo</h1>
</body>
</html>

Save file html tersebut dengan nama “test_dojo.html”, kemudian simpan di folder dojoroot(C:\xampp\htdocs\dojoroot). Kemudian execute melalui web browser dengan url : http://localhost/dojoroot/test_dojo.html

Hello World Button

<html>
<head>
  <title>Dojo: Hello World!</title>

  <!-- SECTION 1 -->
  <style type="text/css">
      @import "dijit/themes/tundra/tundra.css";
      @import "dojo/resources/dojo.css"
  </style>
  <script type="text/javascript" src="dojo/dojo.js"
    djConfig="parseOnLoad: true"></script>

   <!-- SECTION 2 -->
  <script type="text/javascript">
     // Load Dojo's code relating to the Button widget
     dojo.require("dijit.form.Button");
  </script>

</head>

<body class="tundra">
  <button dojoType="dijit.form.Button" id="helloButton">
      Click Me!
      <script type="dojo/method" event="onClick">
         alert('Hello World Using Dojo');
      </script>
  </button>

</body>
</html>

Text Animation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <head>
        <link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
        />
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
    </head>

    <body class=" claro ">
        <div id="showMe" style="padding: 10px;">
            click here to see how it works
        </div>
    </body>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true">
    </script>
    <script>
        dojo.ready(function() {
            dojo.query("#showMe").onclick(function(e) {
                var node = e.target;

                var a = dojo.anim(node, {
                    backgroundColor: "#363636",
                    color: "#f7f7f7"
                },
                1000);

                dojo.connect(a, "onEnd", function() {
                    dojo.anim(node, {
                        color: "#363636"
                    },
                    null, null, function() {
                        node.innerHTML = "wow, that was easy!";
                        dojo.anim(node, {
                            color: "white"
                        });
                    });
                });
            });
        });
    </script>
    <!-- NOTE: the following script tag is not intended for usage in real
    world!! it is part of the CodeGlass and you should just remove it when
    you use the code -->
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (document.pub) {
                document.pub();
            }
        });
    </script>

</html>

Easing Text Animation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <head>
        <link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
        />
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
    </head>

    <body class=" claro ">
        <div id="showMe2" style="padding: 10px; margin-left:2px;">
            Click to Animate me with built in easing functions.
        </div>
    </body>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true">
    </script>
    <script>
        dojo.require("dojo.fx");
        dojo.require("dojo.fx.easing");
        dojo.ready(function() {

            dojo.query("#showMe2").onclick(function(e) {

                dojo.animateProperty({
                    node: e.target,
                    properties: {
                        marginLeft: 200
                    },
                    easing: dojo.fx.easing.elasticOut,
                    duration: 1200,
                    onEnd: function(n) {
                        dojo.anim(n, {
                            marginLeft: 2
                        },
                        2000, dojo.fx.easing.bounceOut);
                    }
                }).play();

            });

        });
    </script>
    <!-- NOTE: the following script tag is not intended for usage in real
    world!! it is part of the CodeGlass and you should just remove it when
    you use the code -->
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (document.pub) {
                document.pub();
            }
        });
    </script>

</html>

Example Of Date, Combo Box, Check Box, Radio Button and Button

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Calendar Using Dojo</title>
        <link rel="stylesheet" type="text/css" href="dijit/themes/tundra/tundra.css"/>
        <script type="text/javascript" djConfig="parseOnLoad: true" src="dojo/dojo.js">
        </script>
        <script type="text/javascript">
            dojo.require("dijit.form.DateTextBox");
            dojo.require("dijit.form.ComboBox");
            dojo.require("dijit.form.CheckBox");
            dojo.require("dijit.form.RadioButton");
            dojo.require("dijit.form.Button");
        </script>
    </head>

    <body class="tundra">
        <p>Input Tanggal : </p>
        <input dojoType="dijit.form.DateTextBox"/>

        <br/>
        <p>Combo Box : </p>
        <select dojoType="dijit.form.ComboBox"
            autocomplete="true" value="Enter a state">
            <option selected="selected">California</option>
            <option>Illinois</option>
            <option>New York</option>
            <option>Nebraska</option>
        </select>

        <br/>
        <p>CheckBox : </p>
        <input id="ch1" dojoType="dijit.form.CheckBox"
        checked="checked" value="Y"/>
        <label for="ch1">Send me e-mail</label>

        <br/>
        <p>Radio Button : </p>
        <input id="rad1" dojoType="dijit.form.RadioButton"
        checked="checked" name="vendor" value="IBM"/>
        <label for="rad1">IBM</label>
        <input id="rad2" dojoType="dijit.form.RadioButton" name="vendor" value="MS"/>
        <label for="rad2">Microsoft</label>
        <input id="rad3" dojoType="dijit.form.RadioButton" name="vendor" value="Oracle"/>
        <label for="rad3">Oracle</label>

        <br />
        <p>Button : </p>
        <button dojoType="dijit.form.Button">OK</button>
        <button dojoType="dijit.form.Button">Cancel</button>
    </body>
</html>

<html>

<head>

<title>Hello World</title>

<script src=”dojo/dojo.js”></script>

</head>

<body>

<h1>Hello World Using Simple Dojo</h1>

</body>

</html>

Sumber : Dojo Toolkit
khalifavi.wordpress.com
Hello World Dojo
khalifa.blog.upi
students.ittelkom.ac.id
webagesolutions.com
blogger.kebumen.info
amaliarahmah.wordpress.com
javapassion.com

One thought on “Pengenalan Dojo Toolkit

  1. Pingback: Mainan Teknologi Web-Client Scripting (no 2) – 6701141030and6701144093

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