خانه > آموزش, طراحی وب > آموزش MooTools (بخش اول)

آموزش MooTools (بخش اول)

آموزش موتولز که دوست خوبم سینا فتحی اونو آماده کرده است رو رو شروع می کنم، امیدوارم که مفید واقع بشه.

1-مقدمه
با ظهور و گسترش وب2 ، لزوم پرداختن به مقوله ی طراحی و نحوه ی تعامل با کاربران به یکی از دغدغه های طراحان سایت، تبدیل شده است. در این راستا بیشتر طراحان از زبان جاوا اسکریپت به منظور ایجاد پویایی در سایت ها استفاده می کنند. یکی از مشکلاتی که زبان جاوا اسکریپت در این زمینه دارد، سختی کار با آن می باشد. این امر طراحان را به این امر واداشت که کتابخانه ای به منظور توسعه جاوا اسکریپت طراحی کنند. در اواخر سال 2005 اولین کتابخانه جاوا اسکریت با نام Prototype عرضه شد، که به دلیل معایبی که داشت، (برای مثال سازگاری پایین با انواع مرورگرها) هرگز مورد اقبال عمومی قرار نگرفت. پس از آن کتابخانه های زیادی در این رابطه ایجاد شدند که پرطرفدارترین آنها JQuery می باشد.
Mootools 1.2 یک کتابخانه ی قدرتمند و در عین حال سبک جاوا اسکریپت می‌باشد که به منظور سهولت توسعه جاوا اسکریپت طراحی شده است. از جهتی می توان موتولز را به عنوان توسعه دهنده CSS در نظر گرفت. برای مثال CSS امکان تغییر یک ویژگی از hover را فراهم می‌کند، جاوا اسکریپت قابلیت استفاده از رویدادهای دیگری را فراهم می کند (مانند click، MouseOver، KeyStokes و …) و موتولز این کار را بسیار ساده می کند.
در این مقاله فرض بر این است که خواننده هیچ آشنایی قبلی با Mootools و JavaScript ندارد. اما آشنایی مقدماتی با CSS و HTML الزامی است.
به علاوه، موتولز علاوه بر تغییر ویژگی‌های یک المنت، قابلیت هایی دارد که به طراحان امکان افزودن پویایی به صفحات وب را می دهد. البته قابلیت های موتولز در این موارد خلاصه نمی شود و امکانات دیگری همچون استفاده از توابع، آرایه ها، ارث بری و… را فراهم می کند.
1-1- مزایا
مهمترین مزایایی که موتولز نسبت به سایر کتابخانه های جاوا اسکریپت دارد، شامل موارد زیر است:
• سبک
• کم حجم
• سازگاری بالا: پشتیبانی از مرورگرهای IE 6+، Firefox، Safari، Opera، Camino
• سریع
• استفاده نسبتاً آسان
• طراحی ماژولار
• شیء گرا

1-2- نصب موتولز
مراحل نصب و استفاده از موتولز به ترتیب زیر است:
1- دانلود هسته کتابخانه Mootools 1.2 از طریق سایت http://www.mootools.net
2- قرار دادن هسته کتابخانه موتولز در سرور یا در فضای کاری (کپی کردن فایل موبوط به هسته کتابخانه در دایرکتوری جاری پرونده)
3- فراخوانی فایل هسته کتابخانه موتولز در تَگ Head پرونده جاری، به صورت زیر

<script src=”mootools1.2core.js” type=”text/javascript”>

به دو طریق می‌توانیم کدهای موتولز را مورد استفاده قرار دهیم:
1- قرار دادن کد مابین تگ‌های script در تگ head صفحه html جاری

<script><!-—کد موتولز مورد نظر  –></script>
2- استفاده از یک فایل مستقل جاوا اسکریپت و فراخوانی آن در تگ head صفحه html جاری

<script src="myJavaScriptFile.js"></script>

می‌توان از هر دو طریق بالا استفاده کرد، معمولاً توابع را همراه با رویداد domready و در داخل تگ script فراخوانی می‌کنیم، اما توابع را در یک فایل جاوا اسکریپت خارجی ایجاد می‌کنیم.
همانطور که ذکر شد توابع موتولز باید در داخل رویداد domready فراخوانی شوند:
window.addEvent('domready', function() {
exampleFunction();
});

می‌توان توابع را خارج از رویداد domready تعریف کرد و در داخل آن فراخوانی‌کرد:
var exampleFunction = function() {
alert('hello')
};

window.addEvent('domready', function() {
exampleFunction();
});


2-ساختار فایل موتولز
همان طور که قبلاً ذکر شد، ساختار فایل موتولز، ماژولار می باشد. این بدین معناست که موتولز از چندین بخش تشکیل شده است، لذا طراح می تواند بخش یا بخش های مورد نیاز خود را به پروژه اضافه نماید. این امر باعث افزایش سرعت لود کدهای موتولز می باشد.
به طور کلی فایل موتولز از دو بخش جدا از هم تشکیل شده است: هسته ، افزونه ها
با دانلود فایل موتولز از سایت اصلی آن، شما فقط فایل هسته را خواهید داشت. خود هسته نیز از چندین بخش تشکیل شده است که برخی از آنها را نام می بریم:

• Native: این بخش از کتابخانه شامل ابزاری است که امکان ایجاد و تغییر آرایه ها، توابع، اعداد، رشته ها و رویدادها را به برنامه نویس میدهد.
• Class: با استفاده از این بخش می توان از قابلیت های شیءگرایی موتولز استفاده نمود.
• Element: ابزاری برای برای کار با المنت های DOM، دسترسی به موقعیت و مشخصه های آنها و تغییر CSS Style آنها.
• Utilities: این بخش انواع انتخاب گرها، رویداد domready و همچنین ابزاری برای مدیریت فراخوانی های AJAX و استفاده از کوکی ها را فراهم می کند.
• Fx: با استفاده از قابلیت های این بخش می توان به اشیای DOM موجود در صفحه، پویایی و تحرک بخشید.
• Request: این بخش نیز شامل ابزاری برای تعامل آسان با XMLHttpRequest می باشد.

ادامه بحث در بخش دوم (معرفی selector ها و توابع پایه)

  1. فوریه 7, 2010 در 5:37 ب.ظ.

    مطلب خوبی بود. با ذکر منبع بهتر هم می شد!😉
    من همیشه MooTools رو به فریم ورکهای دیگه ترجیح می دهم و یکی از کاربرانش هستم ولی انصافا «سبک» و «کم حجم» جزو مزایای MooTools نیست! مگه اینکه مثلا بخوایم با ExtJs مقایسه اش کنیم…

    موفق باشید

    • هوشمند
      فوریه 7, 2010 در 9:12 ب.ظ.

      ممنون
      راستش من خودم بیشتر با جی کوری کار کردم و عملی با موتولز کار نکردم.
      منبعش هم از سایت های گوناگونی بوده که ترجمه شده است.

  2. سینا فتحی
    فوریه 15, 2010 در 10:30 ب.ظ.

    همانطور که در مقاله ذکر شده ، ساختار موتولز ماژولار هست، از این مسئله می توان نتیجه گرفت که Mootools می تواند سبک و کم حجم باشد. زیرا لزومی نداره که کل فایل موتولز به پروژه اضافه بشه، بلکه می توان فقط بخشی از آن که مورد استفاده قرار میگیره رو اضافه کرد

    با تشکر

  1. No trackbacks yet.

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s

%d وب‌نوشت‌نویس این را دوست دارند: