مقدمه
در این دوره آموزشی قصد دارم با استفاده از مثال های متنوع کارکرد ها و نحوه استفاده از کتابخانه غنی Ext Js را آموزش دهم.
این دوره آموزشی شامل مباحث زیر می شود که هر کدام ممکن است 2 الی 3 جلسه به طول بینجامد و به مرور در وبلاگ قرار خواهد گرفت:
1- شروع کار با Ext Js
2- مفاهیم پایه
3- کامپوننت های اصلی Ext Js (فرم ها و انواع فیلدهای موجود در فرم ها (شامل textfield، numberfield، chebox، radio و HtmlEditor)، اعتبار سنجی فرم ها و هر آنچه در یک فرم مورد نیاز است.)
4- کار با داده ها
5- کار با گرید ها
6- کامپوننت های پیشرفته Extjs
7- کار با نمودارها
8- کار با تم ها و ریسپانسیو دیزاین در Ext Js
Ext Js چیست؟
زمانی که جاوااسکریپت به وجود آمد بسیاری خوشحال بودند و کارهای بسیار جالبی با آن می کردند اما به مرور زمان متوجه شدند که نگهداری و توسعه کدهای جاوااسکریپت در نرم افزارهایی که روز به روز در حال گسترش است بسیار سخت خواهد بود از این کتابخانه ها و فریم ورک هایی را برای سهولت استفاده و کاهش کدهای جاوااسکریپت تولید کردند. تعداد فریم ورک جاوااسکریپت سمت سرور و تعدادی فریم ورک سمت کلاینت ایجاد شد. Ext Js یک فریم ورک جاوااسکریپت سمت کلاینت است.
چرا Ext Js؟؟ (مزایای استفاده از ext js)
پشتیبانی از انواع مرورگرها
شاید شما ساعت ها برای متناسب کردن عملکرد برنامه با مروگرهای مختلف (خصوصاً اینترنت اکسپلورر) کرده باشید. یا جایگیری عناصر را با استفاده از css بارها تغییر دادهاید تا نتیجه در تمام مرورگرها تقریبا! یکسان شود. چرا شما به جای اینکه روی این مسائل تمرکز کنید روی منطق برنامه خود تمرکز نمیکنید؟ به نظر شما این اتلاف وقت نیست؟ زمانی که میتوانستید در جهت بهبود و افزایش بهره وری برنامه بکنید باید صرف بالا و پایین کردن پیکسلهای عناصر صفحه بکنید (که واقعاً کار طاقتفرسایی است!!!). اگر از یک فریمورک جاوااسکریپتی حرفه ای مثل extjs استفاده کنید دیگر نیاز به فکر کردن به این مسائل را ندارید، خودش تمام کارها را انجام می دهد شما فقط روی منطق برنامه تمرکز کنید.
کامپوننت های قدرتمند
Ext Js با تعداد بسیار بسیار زیادی کنترل و کامپوننت آماده ارائه شده که تمام نیاز شما به هر کامپوننتی را مرتفع می کند، این کامپوننتها شامل گرید، تب پنل، درخت، انتخابکننده تاریخ، انواع نمودار و ... می باشد که سرعت توسعه را بسیار بالا میبرد.
انقیاد دو طرفه
انقیاد دو طرفه یعنی اینکه وقتی در ظاهر برنامه مقداری تغییر کرد مدل مربوط به آن نیز به صورت اتوماتیک تغییر کند. همچنین اگر مدل شما توسط برنامه تغییر کرد در ظاهر هم آن تغییر نمایان شود.
مثلا شما یک فرم ویرایش باز میکنید، باید اطلاعات را از مدل خواند�� و در فیلدهای مربوطه نمایش دهید و پس از اعمال تغییرات و ثبت اطلاعات از سوی کاربر اطلاعات را خوانده و مدل را مقداردهی کنید، Ext Js تمام این کارها را به صورت اتوماتیک برای شما انجام میدهد.
الگوی معماری برای جاوااسکریپت
همانقدر که کدها به سمت کلاینت رفتند نگهداری از کدهای جاوااسکریپت سمت کلاینت سختتر شد. با آمدن MVC یا (Model View Controller) و MVVM یا (Model View, View Model) به سمت کلاینت نگهداری از کدهای جاوااسکریپت به مراتب آسان تر شد. این الگوهای معماری در ادامه همین جلسه مورد بررسی قرار خواهد گرفت.
ساده سازی عملیاتهای پیچیده
میدانید ارسال یک درخواست AJAX در جاوااسکریپت به صورتی که در همه مرورگرها اجرا شود چند خط کد می شد؟ برای بررسی پیچیدگی آن میتوانید متد AJAX از هر فریمورک جاوااسکریپتی که می خواهید را بررسی کنید. یا مثلا ساخت یک گرید در جاوااسکریپت یا امکاناتی مثل صفحه بندی، مرتب سازی، فیلتر کردن، گروه بندی، فیلدهای قابل ویرایش، قابلیت کار با صفحه کلید و ...
دسترسی آسان به عناصر صفحه (DOM)
در جاوااسکریپت میتوانید به عناصر صفحه یا DOM elements دسترسی داشتهباشید ولی پیچیدگیهای خاص خودش را دارد.
مسیریابی سمت کلاینت (routing)
در نرم افزارهای وب routing عبارت است از اتصال url برنامه به منطق آن به صورتی که هر کس یک url را دید تشخیص دهد که قرار است چه نتیجه ای دریافت نماید. مسیریابی معمولا برای سمت سرور به کار می برد. در سمت کلاینت مسیریابی مختص SPAها (Single Page Application) هاست.
قابلیت دستیابی پذیری (accessibility)
قابلیت دستیابی پذیری یعنی محتوای یک برنامه باید برای افراد کم توان از نظر بصری و کسانی که با استفاده از تکنولوژیهای کمکی (مانند انوا screen reader ها) قابل اسفاده باشد. ساخت برنامه ای با قابلیت دستیابی پذیری بالا بسیار سخت است.
در امریکا اگر برنامه ای نوشته شود که مورد استفاده ادارات ایالتی یا فدرال قرار گیرد باید حتما قابلیت دستیابی پذیری داشته باشد. تعداد بسیار کمی فریمورک جاوااسکریپتی این قابلیت را در اختیار شما قرار میدهند.
کنسرسیوم وب جهان گستر (W3C) یک مشخصات تکنیکی تحت عنوان WAI-ARIA یا (Web Accessibility Initiative - Accessible Rich Internet Applications) ایجاد کرده است. این مشخصات راههایی که باعث می شود یک صفحه وب برای افراد ناتوان قابلیت استفاده را داشته باشد مشخص کرده است. Ext JS به صورت بسیار خوبی از این ویژگی ها و مشخصات پیروی کرده است و تمام کنترل ها و ویجت های Ext JS قابلیت دستیابی پذیری دارند و شما نیاز به هیچ کار اضافه ای ندارید.
معرفی اجمالی Ext JS
Ext JS یک فریمورک است که به تنهایی می توانید تمام UI یک برنامه بسیار بزرگ را پیاده کنید و به هیچ چیز دیگری نیاز نداشته باشید. تمام قابلیت های ذکر شده در بالا را برای شما فراهم می آورد. مستندسازی بسیار بسیار عالی و قدرتمند با قابلیت دانلود که میتوانید اطلاعات تمام API های فریمورک را در آن مشاهده نمایید. Ext JS در ابتدا به عنوان یک کتابخانه الحاقی به YUI توسط Jack Slocum ایجاد شد و اکنون محصولی از Sencha Inc است.
در Ext JS شما تقریبا تمام کدهایتان را در جاوااسکریپت مینویسید و خیلی نیازی به HTML ندارید. Ext JS با تعداد بسیار زیادی کامپوننت اراپه میشود و زمان بسیار بسیار زیادی را برای شما صرفهجویی می کند. ما در این سری آموزشی از Ext JS Version 6 استفاده می کنیم که در حال حاضر آخرین نسخه از این فریمورک است. مهمترین تغییری که در Ext JS 6 رخ داده این است که دو محصول Sencha با هم ادغام شده اند: Ext JS و Sencha Touch. در ضمن Ext JS 6 با یک کامپایلر جدید SAAS با نام Fushion و بهبودهایی در نمودارهای 3D و ... آممده است.
Sencha Touch محصولی از Sencha است که برای ساخت نرمافزارهای تحت وب که روی دستگاههای موبایل و تبلت نمایش داده میشود استفاده میشد. Ext JS 4 و Ext JS 5 برای ایجاد نرمافزارهای تحت وب در مورورگرهای دسکتاپی استفاده می شد اما می توان برای نرم افزارهای قابل نمایش در موبایل و تپلت هم از آنها استفاده کرد با این وجود از امکانات مربوط به touch صفحه و بهره وری بهینه از شتاب دهی سخت افزاری موجود در مویابل ها بی بهره خواهید بود بنابراین بهتر بود برای نوشتن ظاهر موبايل نرمافزار از Sencha Touch استفاده کنید.
قبلاْ Ext JS و Sencha Touch دو نرم افزار جداگانه بودند که کدهای هسته یکسانی داشتند ولی از جهات مختلف با هم متفاوت بودند ولی در حال حاضر این دو با هم ادغام شده اند و تحت عنوان Ext JS 6 و در قالب ۲ تولکیت به نامهای classic برای مرورگرهای دسکتاپ و modern برای مرورگرهای موبایل منتشر شده که کار را برای نوشتن برنامه ای متناسب با همه مرورگرهای دسکتتاپ و موبایل و تبلت آسان منوده است. هر گاه کاربری با موبایل نرمافزار را مشاهده کند با ظاهری که توسط تول کیت modern ایجاد شده مواجه می شود و هرگاه با مرورگر دسکتاپی به برنامه مراجعه کند به ظاهر ایجاد شده توسط تولکیت classic منتقل خواهد شد.
نکته:
toolkit ها مجموعه عناصر بصری (کنترل ها و کامپوننت ها) هستند که متناسب با مرورگر بهینه شده اند.
بنابراین در Ext JS 6 شما می توانید تعداد زیادی کد یکسان داشته و فقط گاهی باید یک سری view را به صورت مجزا برای موبایل و دسکتاپ بنویسید.
ادامه موضوعات درباره دانلود Ext JS 6 و ایجاد اولین نرم افزار Ext JS توسط Sencha CMD را در جلسه آینده خواهم گفت.
پ ن:
Sencha CMD ابزاری است که برای راحت تر کردن کار با فریمورک Ext JS توسط توسعه دهندگانش ایجاد شده و بسیاری از کارهای متداول را راحت تر و سریع تر میکند. این نرم افزار هم در جلسه آینده بیشتر مورد بررسی قرار میگیرد.