apache-cordova-300x188

آموزش cordova – آموزش jquery – mobile

با سلام.
با یکی دیگر از آموزش های گروه برنامه نویسی پنگوئن در خدمت شما هستیم.
همان طور که در جلسه قبل مشاهده کردیم برای بهبود کارایی و جلوگیری از مشکلات ثانویه ، نیاز به استفاده از فریمورک های بهینه شده وب برای موبایل داریم.
بدین منظور jQuery Mobile را استفاده میکنیم.
در توضیح این که jQuery Mobile چیست باید گفت : jQuery Mobile یک فریمورک بهینه شده برای محیط های لمسی و برای ساخت نرم افزارهای موبایل تحت وب می باشد ، و بر روی تمام مرورگر های متداول گوشی های هوشمند از قبیل iOS , android , Windows Phone و… کار می کند . البته ما که می خواهیم تحت کوردوا (apache cordova) از آن استفاده کنیم مشکلی از جهت عدم پشتیبانی پیش نخواهد آمد.
خوبی jQuery Mobile این است که خودش توابع و کلاس های لازم را برای ساخت انواع صفحات و شکل ها و کنترل ها و… دارا می باشد و ما به سادگی میتوانیم از آن ها استفاده کنیم ، و این کار باعث کد زدن کمتر می شود. در واقع کاری که jQuery Mobile برای ما انجام می دهد این است که ما کمتر کد می زنیم و بیشتر کار انجام شده به دست می آوریم.
همانگونه که تاکنون باید متوجه شده باشید ، برای کاربا jQuery Mobile نیاز به آشنایی با HTML , CSS , JQUERY دارید که می توانید از آموزش های گروه برنامه نویسی پنگوئن استفاده کنید.
مزیت استفاده از jQuery Mobile و تلفیق آن با Apache Cordova این است که ما به جای استفاده از زبانهای مختلف مانند:
• Java برای Android و Blackberry
• Objective C برای iOS
• #C و سایر زبان های خانواده .NET برای Windows Phone
که زبان های مخصوص برای برنامه نویسی این سیستم عامل ها می باشند تنها با کمک HTML , CSS , JavaScript بتوانیم نرم افزار تولید کنیم.

 

آماده سازی محیط برنامه نویسی برای jQuery Mobile
بدین منظور می توانید از هر IDE (محیط یکپارچه توسعه نرم افزار) مانند Visual Studio , NetBeans , Eclipse و… که با آن راحت هستید استفاده کنید.
برای استفاده از jQuery Mobile باید لینک فایل های css وjs مربوط به jQuery Mobile را در صفحه خود قرار دهید. که این لینک دادن هم میتواند آنلاین باشد (لینک به یک فایل موجود در یک سرور) و هم آفلاین (استفاده از فایل های دانلود شده در سورس پروژه ).
در روش دوم که راحت تر می باشد و ما استفاده می کنیم باید چند عدد فایل js و css را به صفحه وب لینک دهیم که در ادامه آن ها را برای دانلود قرار داده ایم.
این فایل ها عبارتند از:
• jquery.mobile-1.4.5.min.js
• jquery-1.11.3.min.js
• jquery-1.11.3.min.js
همچنین برای مطمئن شدن از رندر مناسب و زوم لمسی کدهای زیر را  در <head> می نویسیم:

که در کل می شود:

 

برای ایجاد یک صفحه مینویسیم :

همانطور که دیدید خاصیت data-role را باید مشخص کنیم . اینجا برابر page قرار دادیم.
برای ایجاد header و footer و content باید

هایی با این خاصیت ها را در در داخل این page تنظیم کنیم.

در ادامه نیز برای بستن بقیه تگ ها می نویسیم :

در انتها کل کد می شود :

 

 

امیدواریم این آموزش مفید واقع گردد.
با تشکر.

در این لینک فایل پروژه برای دانلود قرار داده شده است.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *