Dart کتابخانه ای است که توسط شرکت گوگل ارائه شده است و گفته می‌شود، قرار است جایگزین جاوا اسکریپت گردد و از آدرس https://www.dartlang.org قابل دسترسی می‌باشد. این کتابخانه، دارای انعطاف پذیری فوق العاده بالایی است و کد نویسی Java Script را راحت‌تر می‌کند. در حال حاضر هیچ مرورگری به غیر از Chromium از این تکنولوژی پشتیبانی نمی‌کند و جهت تسهیل در کدنویسی، باید از ویرایشگر Dart Editor استفاده کنید. این ویرایشگر کدهای نوشته شده را به دو صورت Native و JavaScript Compiled در اختیار مرورگر قرار می‌دهد. در ادامه با نحوه‌ی کار و راه اندازی Dart آشنا خواهید شد.
ابتدا Dartو ویرایشگر مربوط به آن را توسط لینک‌های زیر دانلود کنید:
دانلود نسخه 64 بیتی دارت + ویرایشگر
دانلود نسخه 32 بیتی دارت + ویرایشگر
بعد از اینکه فایلهای فوق را از حالت فشرده خارج کردید، پوشه ای با نام dart ایجاد می‌نماید. وارد پوشه dartشده و DartEditorرا اجرا کنید.
توجه:جهت اجرای dartبه JDK 6.0یا بالاتر نیاز دارید
در مرحله بعد نمونه کدهای Dartرا از لینک زیر دانلود نمایید و از حالت فشرده خارج کنید. پوشه ای با نام one-hour-codelab ایجاد می‌گردد.
از منوی File > Open Existing Folder…پوشه one-hour-codelabرا باز کنید.
توضیحات
- پوشه packagesو همچنین فایلهای pubspec.yamlو pubspec.lock شامل پیش نیازها و Package هایی هستند که جهت اجرای برنامه‌های تحت Dartمورد نیاز هستند. Dart Editorاین نیازمندی‌ها را به صورت خودکار نصب و تنظیم می‌کند.
توجه: اگر پوشه Packagesرا مشاهده نکردید و یا در سمت چپ فایلها علامت Xقرمز رنگ وجود داشت، بدین معنی است که packageها به درستی نصب نشده اند. برای این منظور بر روی pubspec.yaml کلیک راست نموده و گزینه Get Pubرا انتخاب کنید. توجه داشته باید که بدلیل تحریم ایران توسط گوگل باید از ابزارهای عبور از تحریم استفاده کنید.
- 6 پوشه را نیز در تصویر فوق مشاهده می‌کنید که نمونه کد piratebadgeرا بصورت مرحله به مرحله انجام داده و به پایان می‌رساند.
- Dart SDKشامل سورس کد مربوط به تمامی توابع، متغیرها و کلاس هایی است که توسط کیت توسعه نرم افزاری Dart ارائه شده است.
- Installed Packagesشامل سورس کد مربوط به تمامی توابع، متغیرها و کلاس‌های کتابخانه‌های اضافه‌تری است که Applicationبه آنها وابسته است.
گام اول: اجرای یک برنامه کوچک
در این مرحله سورس کدهای آماده را مشاهده می‌کنید و با ساختار کدهای Dartو HTMLآشنا می‌شوید و برنامه کوچکی را اجرا می‌نمایید.
در Dart Editorپوشه 1-blankbadgeرا باز کنید و فایلهای piratebadge.htmlو piratebadge.dartرا مشاهده نمایید.
کد موجود در فایل piratebadge.html
<html><head><meta charset="utf-8"><title>Pirate badge</title><meta name="viewport"
content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="piratebadge.css"></head><body><h1>Pirate badge</h1><div>
TO DO: Put the UI widgets here.</div><div><div>
Arrr! Me name is</div><div><span id="badgeName"> </span></div></div><script type="application/dart" src="piratebadge.dart"></script><script src="packages/browser/dart.js"></script></body></html>توضیحات
- در کد HTML، اولین تگ <script>، فایل piratebadge.dartرا جهت پیاده سازی دستورات dartبه صفحه ضمیمه می‌نماید
- Dart Virtual Machine (Dart VM)کدهای Dartرا بصورت Nativeیا بومی ماشین اجرا می‌کند. Dart VMکدهای خود را در Dartiumکه یک ویرایش ویژه از مرورگر Chromiumمی‌باشد اجرا می‌کند که می‌تواند برنامه‌های تحت Dartرا بصورت Native اجرا کند.
- فایل packages/browser/dart.jsپشتیبانی مرورگر از کد Nativeدارت را بررسی می‌کند و در صورت پشتیبانی، Dart VMرا راه اندازی می‌کند و در غیر این صورت JavaScript کامپایل شده را بارگزاری می‌نماید.
کد موجود در piratebadge.dart
void main() {
// Your app starts here.
}- این فایل شامل تابع main می‌باشد که تنها نقطه ورود به application است. تگ <script> موجود در piratebadge.html برنامه را با فراخوانی این تابع راه اندازی می‌کند.
- تابع main()یک تابع سطح بالا یا top-levelمی‌باشد.
- متغیرها و توابع top-levelعناصری هستند که خارج از ساختار تعریف کلاس ایجاد می‌شوند.
جهت اجرای برنامه در Dart Editorبر روی piratebadge.html کلیک راست نمایید و گزینه Run in Dartiumرا اجرا کنید. این فایل توسط Dartium اجرا می‌شود و تابع main()را فراخوانی می‌کند و صفحه ای همانند شکل زیر را نمایش می‌دهد.
گام دوم: افزودن فیلد input
توجه داشته باشید که در این مرحله یا می‌توانید تغییرات مورد نظر خود را در طی آموزش بر روی پوشه‌ی 1-blankbadgeاعمال کنید و یا به پوشه‌های تهیه شده در نمونه کد موجود در همین پروژه مراجعه نمایید.
در این مرحله یک تگ <input>به تگ <div class=”widgets”>اضافه کنید.
...<div><div><input type="text" id="inputName" maxlength="15"></div></div> ...
سپس کتابخانه dart:html را به ابتدای فایل piratebadge.dart اضافه کنید.
import 'dart:html';
توضیحات
- دستور فوق کلاس‌ها و Resourceهای موجود در کتابخانه dart:htmlرا اضافه می‌کند.
- از حجیم شدن کدهای خود نگران نباشید، زیرا فرایند کامپایل کدهای اضافی را حذف خواهد کرد.
- کتابخانه dart:htmlشامل کلاسهایی جهت کار با عناصر DOMو توابعی جهت دسترسی به این عناصر می‌باشد.
- در مباحث بعدی یاد می‌گیرید که با استفاده از کلمه کلیدی showفقط کلاسهایی را import کنید که به آن نیاز دارید.
- اگر کتابخانه ای در هیچ بخش کد استفاده نشود، خود Dart Editorبه صورت warning اخطار می‌دهد و می‌توانید آن را حذف کنید.
دستور زیر را در تابع mainبنویسید تا رویداد مربوط به ورود اطلاعات در فیلد inputرا مدیریت نمایید.
void main() {
querySelector('#inputName').onInput.listen(updateBadge);
}توضیحات
- تابع querySelector()در کتابخانه dart:html تعریف شده است و یک المنت DOMرا جستجو می‌نماید. پارامتر ورودی آن یک selectorمی‌باشد که در اینجا فیلد inputرا توسط #inputNameجستجو نمودیم که یک ID Selectorمی‌باشد.
- نوع خروجی این متد یک شی از نوع DOMمی‌باشد.
- تابع onInput.Listen() رویدادی را برای پاسخگویی به ورود اطلاعات در فیلد inputتعریف می‌کند. زمانی که کاربر اطلاعاتی را وارد نماید، تابع updateBadge فراخوانی می‌گردد.
- رویداد inputزمانی رخ می‌دهد که کاربر کلیدی را از صفحه کلید فشار دهد.
- رشته‌ها همانند جاوا اسکریپت می‌توانند در " یا ' قرار بگیرند.
تابع زیر را به صورت top-level یعنی خارج از تابع main تعریف کنید.
...
void updateBadge(Event e) {
querySelector('#badgeName').text = e.target.value;
}توضیحات
- این تابع محتوای المنت badgeNameرا به محتوای وارد شده در فیلد input تغییر می‌دهد.
- پارامتر ورودی این تابع شی eاز نوع Eventمی‌باشد و به همین دلیل می‌توانیم این تابع را یک Event Handler بنامیم.
- e.targetبه شی ای اشاره می‌کند که موجب رخداد رویداد شده است و در اینجا همان فیلد inputمی‌باشد
- با نوشتن کد فوق یک warningرا مشاهده می‌کنید که بیان می‌کند ممکن است خصوصیت valueبرای e.target وجود نداشته باشد. برای حل این مسئله کد را بصورت زیر تغییر دهید.
...
void updateBadge(Event e) {
querySelector('#badgeName').text = (e.target as InputElement).value;
}توضیحات
- کلمه کلیدی asبه منظور تبدیل نوع استفاده می‌شود که e.targetرا به یک InputElement تبدیل می‌کند.
همانند گام اول برنامه را اجرا کنید و نتیجه را مشاهده نمایید. با تایپ کردن در فیلد inputبه صورت همزمان در کادر قرمز رنگ نیز نتیجه تایپ را مشاهده می‌نمایید.