Mootools merupakan sebuah framework Javascript
atau JavaScript libraries yang di gunakan untuk mempermudah seorang web
developer untuk mengembangkan berbagai macam aplikasi web yang membutuhkan
interaksi dengan user. Kerangka Mootools dipisahkan menjadi sekelompok perpustakaan
yang menyediakan fungsi dasar, dan sekumpulan plug-in yang memanfaatkan library
untuk menciptakan interaksi pengguna yang kaya (seperti sliding dan dragging efek).
Komponen-komponen
Mootools:
·
Core: Kumpulan fungsi inti yang dibutuhkan oleh
komponen lain.
·
More: Perluasan dari Core, berisi kumpulan add-on
·
Class: Libraryutama
untuk instansiasi object Class.
·
Native: Berisi fungsi yang menyederhanakan codingJavaScript.
·
Element: Kumpulan fungsi untuk interaksi
dengan elemen HTML.
·
Fx: Kumpulan fungsi untuk membuat animasi.
·
Request : Kumpulan fungsi untuk HTTP Request
·
Window: Menyediakan layanan agar
fungsi-fungsi MooTools dapat berjalan di semua web browser. (cross-browser)
Framework Javascript umumnya
memiliki dua keuntungan. Yang pertama adalah faktorisasi memisahkan kode untuk
tugas umum, sehingga menghemat programmer dari keharusan untuk mengulang kode yang
sebelumnya telah ditulis .
Keuntungan kedua dan mungkin terbesar dari framework Javascript
adalah bahwa mereka mengabstrakrikan masalah kompatibilitas browser. Framework menangani
memastikan bahwa Javascript benar dijalankan untuk browser saat ini. Desainer Web
tidak perlu khawatir tentang casing khusus untuk setiap browser yang bisa
mengunjungi halaman mereka. Hal ini sangat membantu dalam penciptaan permintaan
AJAX, yang memiliki sintaks yang sangat berbeda tergantung pada kode program
yang sedang berjalan didalam broser
Library inti dibangun bertujuan membuat tugas-tugas
rutin di Javascript lebih sederhana, seperti menyalin dan atau penggabungan Dictionaries
objek bersama, dan mengkonversi nya ke dalam array. Ada juga fungsi untuk cepat
mendapatkan timestamps dan variabel acak. Semua tugas umum memerlukan cukup
banyak kode menggunakan Javascript dasar. Misalnya, untuk menghasilkan integer
acak antara x dan y di Javascript tradisional, Anda harus menulis:
var result = Math.floor(Math.random() * (y - x + 1)) +
x
sedangkan dengan Mootools Anda hanya bisa menulis:
var result = $random(x, y)
Library core juga
menyediakan metode sederhana untuk memperoleh informasi browser tentang user. Meskipun
informasi ini tersedia melalui obyek navigator, obfuscation dan konvensi berbeda
membuat tugas mendeteksi browser dan sistem operasi sangat sulit. Untuk hard
kode semua aturan yang diperlukan, script ini mengambil lebih dari 110 baris namun,
karena tidak kompatibel, seringkali penting bagi pengembang untuk mengetahui apa
browser dan atau sistem operasi pengguna memiliki untuk menampilkan halaman dengan
benar. Mootools memiliki nilai boolean yang sederhana, misalnya, jika
Browser.Platform.trident //True if the browser
uses the IE trident engine
Browser.Platform.win //True if the platform is Windows
keduanya benar, pengembang tahu penggunanya menjalankan Internet Explorer
pada mesin Windows.
NATIVE
Library asli tersebut menyediakan fungsionalitas yang
diperluas untuk jenis dasar (Array, Fungsi, Nomor, String, Event), baik menambah
atau mengembangkan prototipe beberapa kelas dasar baru (Hash). Misalnya Library
String Mootools menyediakan fungsi reguler pencocokan expresi luas, bersama dengan
metode untuk mengkonversi antara nilai-nilai warna RGB dan string. Library Fungsi
memberikan dukungan luar biasa untuk menghasilkan closure dengan parameter yang
diberikan, variabel, dan bahkan memungkinkan pengembang untuk mengikat variabel
ini dalam konteks closure Kelas Hash menyediakan fungsionalitas peta dasar hash
untuk satu set pasangan nilai-kunci.
Salah satu fitur kunci dari Mootools adalah penekanan pada pengembangan berorientasi objek. Kelas library memberikan alat pengembang untuk meniru skema warisan yang terlihat dalam bahasa sepdrti Jawa. Kelas A diciptakan dari sebuah kamus objek yang berisi kata kunci seperti extends dari nilai-nilai mereka, atau nama metode bersama dengan metode mereka. Sebagai contoh, kita bisa menulis:
var Animal =
new Class({
initialize: function(feet) {
this.feet = feet;
}
});
var Horse = new Class({
Extends: Animal,
initialize: function(color) {
this.parent(4);
this.color = color;
},
setName: function(name) {
this.name = name;
}
});
var myAnimal = new Horse("Brown");
myAnimal.setName("Mr Ed");
alert(myAnimal.name); // Alerts "Mr
Ed"
Extends menyediakan akses ke objek induk, mirip dengan lain bahasa berorientasi objek pemrograman. Kita juga<.span> dapat membuat kelas menggunakan Implements daripada extends, yang hanya akan menyalin metode yang ada dalam kelas bernama langsung ke kelas saat ini. Salah satu aspek unik dari implements, adalah bahwa kita juga bisa menerapkan metode dinamis pada saat run-time dengan menggunakan metode library implement, jadi kita bisa taktik pada metode setName ke Kelas Person yang ada dengan menggunakan kode berikut:
Person.implement({
setName: function(name) {
this.name = name;
}
});
ia implements metode Kelas dengan demikian
memungkinkan kita untuk memodifikasi kelas yang ada pada-the-fly, termasuk yang
dibangun di Javascript "kelas" seperti Array dan Objek.
ELEMEN
Kelas Elemen menyediakan
fungsionalitas untuk melintasi dan memodifikasi Document Object Model (DOM). Fungsi
di sini adalah dalam banyak hal hanya cara kompaksi dan standardisasi Javascript
yang terkait dengan penggunaan DOM. Library ini menawarkan dolar singkatan ($) metode
untuk mencari item dengan id. Kelas Elemen Mootools juga memperpanjang Elemen DOM
yang ada untuk menawarkan fungsionalitas tambahan. Salah satu fitur bagus dari Mootools
adalah bahwa secara relatif mudah untuk memodifikasi DOM. Sebagai contoh, kita bisa
menulis:
var node = $('myNode'); //Equivalent to
document.getItemById('myNode');
var e1 = new Element('div', {id: 'myDiv'});
node.inject(div, 'top');
Yang akan mencari tag dengan id "myNode" dan menambahkan div baru bernama "myDiv" sebagai pos pertama.
UTILITIES
Library Utilitas berisi fungsi untuk membuat beberapa halaman
web-coding sehari-hari lebih mudah. Dua dari perpustakaan memberikan dukungan meningkat
untuk bekerja sama dengan DOM, ratu mendefinisikan sebuah event DomReady yang dilepaskan
ketika DOM selesai loading, dan satu lagi untuk elemen browsing dan turunan
mereka dengan lebih mudah. Library yang kedua menyediakan metode seperti memuat
dan n-anak untuk lebih mudah melintasi elemen anak. Library utilitas menyediakan
dukungan penuh Javascript Object Notation dukungan untuk serialisasi dan deserializing
objek Javascript. Ada juga perpustakaan Cookie untuk cepat dan tanpa kesulitan berurusan
dengan cookie Javascript, dan perpustakaan swiff untuk membuat obyek Flash sederhana.
FX
Library Fx memungkinkan pengembang untuk membuat efek animasi
di halaman web mereka dengan dinamis menyesuaikan properti CSS. Efek dasar
adalah Tween dengan transisi item ke nilai properti CSS baru selama periode waktu.
Sebagai contoh, kita bisa mengubah gaya warna sebuah link dari merah ke biru
menggunakan:
var myFx = new
Fx.Tween(myLinkElement);
// adjust the color style from red (#f00) to
blue (#00f)
myFx.start('color', '#f00', '#00f);
Kelas Morph memungkinkan
pengembang untuk menyesuaikan lebih dari satu properti sekaligus, dan kelas Transisi
memungkinkan pengguna untuk menentukan bagaimana merata untuk transisi dari nilai
awal dengan nilai akhir (misalnya, kita bisa mendapatkan secara eksponensial lebih
dekat dengan style end daripada linear mengalami kemajuan untuk itu).
REQUEST
Library request berfungsi sebagai satu
set objek dan event based bagus dari AJAX tool. Proses dasar untuk mengeluarkan
permintaan dimulai dengan penciptaan objek Permintaan baru dan menetapkan bahwa
objek pilihan (seperti URL permintaan) melalui kamus objek. Langkah selanjutnya
adalah mendaftarkan satu set handler untuk peristiwa yang mungkin terjadi pada Permintaan
(seperti menerima respon sukses, atau gagal). Langkah terakhir sebenarnya
mengirimkan permintaan tersebut. Library termasuk dukungan untuk menghasilkan permintaan
HTTP baku serta permintaan HTML dan JSON (yang secara otomatis akan encode dan
decode objek Javascript sebagai String).
PLUG-INS LIBRARY
Di perpustakaan Plug-in kita mulai melihat beberapa desain komponen yang berorientasi. Library Plugin berisi serangkaian komponen yang merangkum berbagai jenis fungsi untuk elemen DOM, semua dibangun di atas fungsi dari perpustakaan inti. Misalnya, komponen akordeon (ditunjukkan pada contoh di bawah) sebenarnya merangkum fungsi yang memungkinkan bagian yang berbeda untuk memperluas dan runtuh secara otomatis sebagai pengguna mengklik pada bagian yang berbeda.
Seperti dijelaskan di bawah, komponen Accordion dibuat dengan melewatkan dalam elemen-elemen yang harus dilakukan dapat diklik, dan unsur-unsur yang harus membuka dan menutup dalam menanggapi klik pengguna. Komponen kembali kemudian dapat digunakan dalam halaman web, dan rincian tentang bagaimana ekspansi dan runtuh terjadi benar-benar tersembunyi dari pengguna komponen.
Sumber :
0 komentar:
Posting Komentar