Arsip Kategori: Dojo Toolkit

Animasi di Dojo Toolkit

Sebenarnya saya sedikit ragu tentang apa dulu yang saya perlihatkan setelah posting pembuka beberapa waktu lalu, tapi akhirnya saya tentukan saja kalau yang akan kita bahas sekarang adalah Animasi menggunakan Dojo Toolkit. Dari animasi paling dasar, hingga ke animasi tingkat menengah.

Langsung Beraksi

Tanpa basa-basi, dengan hanya memanggil dojo.js saja, sebenarnya kita sudah bisa melakukan animasi dasar. Mari kita buktikan

<html>
<head>
    <title>Animasi Dasar menggunakan Dojo Toolkit</title>
    <script type="text/javascript" src="../js/dojo-toolkit/dojo/dojo.js"></script>
</head>
<body>
    <a href="#" id="hilang">hilangkan</a> | <a href="#" id="tampil">tampilkan</a>
    <div id="teks-1">teks yang akan dihilangkan</div>
    <script type="text/javascript">
        // memastikan jika dojo sudah terpanggil
        dojo.addOnLoad(function(){

            // memasang event handler saat link hilangkan diklik
            dojo.connect(dojo.byId('hilang'), 'onclick', function(){
                // hilangkan teks
                dojo.fadeOut({
                    node: 'teks-1',
                    duration: 500
                    }).play();
            });

            // memasang event handler saat link tampilkan diklik
            dojo.connect(dojo.byId('tampil'), 'onclick', function(){
                // tampilkan teks
                dojo.fadeIn({
                    node: 'teks-1',
                    duration: 500
                }).play();
            });

        });
    </script>
</body>
</html>

Dan inilah hasilnya, jika kita meng-klik link hilangkan maka teks dibawah akan fade out, dan sebaliknya jika kita meng-klik link tampilkan, teks dibawah itu akan tampil kembali dengan efek fade in.

Ini gambarnya:

Efek yang Lain

Efek yang lain bisa menggunakan animateProperty, yaitu animasi manipulasi property css. Tidak jauh berbeda dengan contoh pertama, tapi sekarang kita coba dengan ukuran font

<html>
<head>
    <title>Animasi Dasar 2 (animateProperty) menggunakan Dojo Toolkit</title>
    <script type="text/javascript" src="../js/dojo-toolkit/dojo/dojo.js"></script>
</head>
<body>
    <a href="#" id="besar">besarkan</a> | <a href="#" id="kecil">kecilkan</a>
    <div id="teks-1">teks yang akan dimainkan</div>
    <script type="text/javascript">
        // memastikan jika dojo sudah terpanggil
        dojo.addOnLoad(function(){

            // memasang event handler saat link besarkan diklik
            dojo.connect(dojo.byId('besar'), 'onclick', function(){
                // besarkan teks
                dojo.animateProperty({
                    node: 'teks-1',
                    properties:{
                        fontSize: 34
                    }
                    }).play();
            });

            // memasang event handler saat link kecilkan diklik
            dojo.connect(dojo.byId('kecil'), 'onclick', function(){
                // kecilkan teks
                dojo.animateProperty({
                    node: 'teks-1',
                    properties:{
                        fontSize: 16
                    }
                    }).play();
            });

        });
    </script>
</body>
</html>

Ini gambarnya:

Masih Belum Cukup?

Sebenarnya dengan menggunakan animateProperty kita bisa mencoba banyak variasi animasi, tapi jika kita ingin lebih praktis lagi, kita bisa menggunakan fungsi tambahan dari modul dojo.fx (modul untuk easing, wipeIn, wipeOut, slideTo, Toggler, chain, dan combine).

Tapi untuk contoh, kita akan tampilkan animasi wipeOut dan easing dengan chain

<html>
<head>
    <title>Animasi Menengah menggunakan Dojo Toolkit</title>
    <script type="text/javascript" src="../js/dojo-toolkit/dojo/dojo.js"></script>
    <style type="text/css">
        #box-1, #box-2{
            display:block;
            position:relative;
            width:100px;
            height:100px;
            max-height:200px;
            background-color:#d55;
        }
    </style>
</head>
<body>
    <a href="#" id="wipeout">wipeOut</a>
    <div id="box-1"></div>
    <br />
    <div id="box-2"></div>
    <script type="text/javascript">
        // load terlebih dahulu dojo.fx dan easing
        dojo.require('dojo.fx');
        dojo.require('dojo.fx.easing');


        // memastikan jika dojo sudah terpanggil
        dojo.addOnLoad(function(){

            // memasang event handler saat link wipeOut diklik
            dojo.connect(dojo.byId('wipeout'), 'onclick', function(){

                // animasi box-1 disimpan di variabel box1
                var box1 = dojo.fx.wipeOut({
                    node: 'box-1',
                    duration: 500,
                    easing : dojo.fx.easing.quadIn
                });

                // animasi box-1 disimpan di variabel box1
                var box2 = dojo.fx.wipeOut({
                    node: 'box-2',
                    duration: 500,
                    easing : dojo.fx.easing.quadIn
                });

                dojo.fx.chain([box2, box1]).play();

            });

        });
    </script>
</body>
</html>

Ini gambarnya:

Masih Kurang Juga?!

Tapi jika masih kurang memukau, kita bisa menampilkan animasi yang lebih kompleks lagi dengan memanggil modul dari Dojox, yaitu dojox.fx (modul untuk wipeTo, sizeTo, slideBy, crossFade, highlight, fadeTo, dll).

Sebagai contoh, kita coba tampilkan crossFade dan highlight

<html>
<head>
    <title>Animasi Menengah 2 menggunakan Dojo Toolkit</title>
    <script type="text/javascript" src="../js/dojo-toolkit/dojo/dojo.js"></script>
    <style type="text/css">
        #box-1, #box-2{
            display:block;
            position:relative;
            width:100px;
            height:100px;
            max-height:200px;
            background-color:#d55;
        }
    </style>
</head>
<body>
    <a href="#" id="crossfade">crossFade</a>
    <div id="box-1"></div>
    <div id="box-2" style="opacity:0"></div>
    <script type="text/javascript">
        // load terlebih dahulu dojox.fx
        dojo.require('dojox.fx');

        // memastikan jika dojo sudah terpanggil
        dojo.addOnLoad(function(){

            // memasang event handler saat link crossFade diklik
            dojo.connect(dojo.byId('crossfade'), 'onclick', function(){

                // highlight link crossFade
                dojox.fx.highlight({
                    node: this
                }).play();

                // animasi crossFade box-1 dan box-2
                dojox.fx.crossFade({
                    nodes: ['box-1', 'box-2'],
                    duration: 500,
                }).play();


            });

        });
    </script>
</body>
</html>

Ini gambarnya:

Tambahan Eksperimen

Dojox sudah menyediakan modul dojox.fx yang lengkap, tapi jika anda masih ingin tahu lebih dalam lagi, silahkan anda cek di halaman test animasi dojo toolkit, bagian dojox.fx (tersedia juga scroll, Shadow, flip, split, text, dan masih berkembang).

Kemana Lagi Setelah Ini?

Masih banyak yang bisa dibongkar tentang animasi menggunakan Dojo Toolkit ini, semuanya bisa diatur sesuai dengan keperluan kita. Tapi jangan berhenti disini, untuk lebih lanjut saya sarankan untuk ke sumber-sumber berikut:

Iklan

Sekilas Mengenai Dojo Toolkit

Dojo Toolkit Logo
Dijit Theme Tester

Penggugah Selera

Siapa yang sekarang tidak tahu bahwa perkembangan web sangatlah pesat, juga bagian-bagiannya, CSS sudah sampai ke CSS3, HTML sudah HTML5, juga Javascript masing-masing dikembangan sesuai dengan kebutuhan manusia, yang ringan namun esensi, seperti membaca koran, ensiklopedi, bahkan sampai kehidupan sosial kini bisa dilakukan lewat Internet.

Semuanya dapat dilakukan dengan teknologi web 2.0, yang diantaranya Javascript untuk meningkatkan Pengalaman / Kesan Penggunaan (UX ~ User eXperience)

Javascript memang sudah lama berkembang, setelah dianggap anak tiri dalam dunia pemrograman sebelum tahun 2000, akhirnya penggunaan Javascript kembali dilirik setelah Google mempopulerkan AJAX (Asynchronous Javascript and XML) di fitur Google Suggest-nya.

Awal dari Dojo Toolkit

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.

Penyederhanaan Javascript

Selain Dojo Toolkit, mungkin kita pernah mendengar ataupun bahkan mencoba jQuery, mootools, prototype, scriptaculous, ExtJS (sekarang Sencha), YUI, dll. Yang kesemuanya adalah mengenai javascript. Tapi masing-masing memiliki kelebihan dan kekurangan dalam satu sisi dan lainnya.

Pada penggunaan praktis dan cepat jQuery terhitung paling populer, namun yang disediakan oleh jQuery ini terbatas pada fungsi DOM, Ajax, animasi, dan fungsi dasar lainnya, untuk widget harus menggunakan jQuery UI, sedangkan fungsi lainnya terdapat banyak plugin yang tersebar di penjuru internet.

Mootools, prototype, scriptaculous, berperan kurang lebih sama dengan jQuery, menyediakan fungsi dasar DOM, Ajax, animasi dan beberapa fungsi dasar lain, dan bisa diberikan fungsi lain dengan menyisipkan plugin yang tersebar di internet.

ExtJS (Sencha) dan YUI bisa dikatakan lebih mirip dengan Dojo Toolkit, menyediakan fungsi-fungsi dasar, juga menyediakan widgeting system.

Dojo Toolkit di Dunia Nyata

Didukung penuh oleh SitePoint dalam pengembangannya, juga disisipkan dalam Zend Framework sebagai library javascript, berarti kemampuannya sudah tidak bisa dianggap remeh lagi. Digunakan juga oleh IBM, AOL untuk bagian dari infrastuktur mereka.

Dilihat dari jumlah pengguna yang banyak dari perusahaan menengah keatas, maka Dojo Toolkit cocok bila dikatakan sebagai Ajax Framework untuk enterprise.

Dojo Toolkit untuk Mobile

Dengan terus berkembangnya teknologi web ini, juga tren yang mulai mengarah ke mobile device, Dojo Toolkit semenjak versi 1.5 menyertakan dojox.mobile agar pengguna mobile device merasa betah dan nyaman dalam menggunakan aplikasi yang dibangun dengan Dojo Toolkit. Meskipun dojox.mobile baru lahir, tapi dengan kekuatan komunitas, dan konsistensi paket bundel, Dojo Toolkit tidak bisa dianggap remeh.

Mari Mulai

Memanggil Dojo Toolkit bisa dikatakan sangatlah mudah untuk komputer yang terkoneksi ke internet, cukup dengan satu baris kode saja di file HTML.

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

Dengan memanggil dari sumber CDN Google, sekarang fungsi Dojo sudah bisa digunakan.

<script type="text/javascript">
dojo.ready(function(){
    // disini fungsi dojo bisa dipanggil
});
</script>

tapi jika anda tidak terkoneksi ke internet, yang bisa dilakukan adalah mendownload terlebih dahulu paket Dojo Toolkit di dojotoolkit.com, dan panggil dalam baris kode berikut

<script src="<i>path_ke_dojo</i>/dojo.js"></script>

Dengan begitu, dojo sudah bisa digunakan, tapi mengingat bahwa dojo digunakan untuk empowering the web, alangkah baiknya jika path tersebut mengarah ke http web server (Apache, Nginx, IIS).

Ke Mana Lagi Sekarang

Jika anda masih belum puas tentang awal ini, sumber-sumber dibawah ini juga bisa digunakan sebagai referensi lanjutan.

Sebenarnya anda tidak perlu mencari lagi referensi lain, karena setiap pekannya saya akan jelaskan satu dan lain hal tentang Dojo Toolkit di blog ini.