همانطور که در قسمت قبل گفته شد، در این قسمت با روش کار jQuery Mobile و pluginهای مربوط به Cordova آشنا خواهیم شد.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1">
روال کار jQuery Mobile
از آنجایی که مستندات jQuery Mobile به قدر کافی کامل هست، نیازی نیست تا در مورد تک تک آنها مثال بزنیم و از اصل مطلب دور شویم. در هر مثالی که زده خواهد شد، در صورت استفاده از ویجتی خاص، با آن آشنا خواهیم شد.
لیست کامل اتریبیوت‌های -data به همراه مقادیری که می‌پذیرند
شما می‌توانید از امکانات Theme Roller برای شخصی سازی تم‌های مورد نیاز استفاده کنید.
Cordova Plugins
از این قسمت http://plugins.cordova.io/#/viewAll و این قسمت http://plugreg.com/plugins می‌توانید سراغ پلاگین‌های مورد نیاز خود بگردید. برای مثال وارد بخش کانفیگ پروژه شده و از قسمت plugins و تب Core یکسری از پلاگین‌هایی را که در Cordova گنجانده شده است، مشاهده میکنید. با کلیک بر روی دکمه‌ی Add می‌توانید آن را دانلود کرده و از APIهای آن استفاده کنید.
برای مثال پلاگین Notification را به پروژه اضافه می‌کنم. سپس یک فایل js را با نام custom.js به فولدر scripts در ریشه پروژه اضافه کرده و محتوای فایل‌های index.html , custome.js را به شکل زیر در نظر می‌گیرم:
$(function() {
$("#alert").on('tap', function(event) {
navigator.notification.alert("اطلاعات ذخیره شد",null, "alert", "تایید");
});
$("#prompt").on('tap', function(event) {
navigator.notification.prompt("برای تائید نام خود را وارد کنید", onPrompt, "prompt", "تایید", "لغو"],"نام خود"]);
});
function onPrompt(results) {
navigator.notification.alert(results.buttonIndex + "\n" + results.input1, null);
}
$("#confirm").on('tap', function(event) {
navigator.notification.confirm("حذف انجام شود؟", onConfirm, "confirm", ["بله", "خیر", "نمیدانم"]);
});
function onConfirm(buttonIndex) {
navigator.notification.alert(buttonIndex , null);
}
$("#beep").on('tap', function(event) {
navigator.notification.beep(1);
});
}); رخداد tap زمانی صادر میشود که کاربر، دکمه‌ی مورد نظر را لمس کند و یکی از رخدادهای jQuery Mobile میباشد. بعد از نصب پلاگین Notification، با استفاده از navigator.notification می‌توانید به متدهای مورد نظر که در بالا مشخص است، دسترسی پیدا کنید.
برای آشنایی با این پلاگین می‌توانید داکیومنت آن را مطالعه کنید.
در کد بالا با استفاده از متدهای callback توانسته‌ایم اطلاعاتی در مورد نوع عملکرد کاربر با notification ما بدست آوریم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CordovaApp01</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CordovaApp01 references -->
<link href="css/index.css" rel="stylesheet" />
<link href="jquery.mobile.rtl/css/themes/default/rtl.jquery.mobile-1.4.0.css" rel="stylesheet" />
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h2>
تست پلاگین Notification
</h2>
</div>
<div data-role="content">
<a href="#page2" data-transition="pop" data-rel="dialog" data-role="button" data-inline="true" data-icon="back">page 2</a>
<button data-role="button" id="alert" data-inline="true" >alert</button>
<button data-role="button" id="confirm" data-inline="true">confirm</button>
<button data-role="button" id="beep" data-inline="true" >beep</button>
<button data-role="button" id="prompt" data-inline="true" >prompt</button>
</div>
<div data-role="footer">
<h2>من فوتر هستم</h2>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="scripts/jquery-2.1.3.min.js"></script>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
<script src="jquery.mobile.rtl/js/rtl.jquery.mobile-1.4.0.js"></script>
<script src="scripts/custom.js"></script>
</body>
</html> در کد بالا 4 تا button دیده میشود که ویژگی data-role آنها مقدار button در نظر گرفته شده‌است تا توسط jQuery Mobile به عنوان button شناخته شوند و استایل‌های لازم بر روی آنها اعمال گردد. قرار است طبق کد js ایی که نوشته‌ایم، با لمس کردن هر کدام از دکمه‌ها، notification هایی نمایش داده شوند.
برای اینکار شبیه ساز YouWave را دانلود کرده و نصب کنید. سپس در قسمت toolbar ویژوال، گزینه‌ی Device را به جای شبیه ساز Ripple انتخاب کنید. نرم افزار youwave را اجرا کنید حال اگر برنامه را اجرا کنید با خطای زیر مواجه خواهید شد:
Error447C:\Users\Administrator\Documents\Visual Studio 2013\Projects\CordovaApp-01\CordovaApp-01\bld\Debug\platforms\android\cordova\node_modules\q\q.js:126CordovaApp-01 Error448throw e;CordovaApp-01 Error449^CordovaApp-01 Error450Error : DEP10201 : Failed to deploy to device, no devices found.CordovaApp-01
adb connect localhost:5558
<a href="#page2" data-transition="pop" data-rel="dialog" data-role="button" data-inline="true" data-icon="back">page 2</a>
در مقاله‌ی بعد، به مباحث Database در Cordova خواهیم پرداخت.
ادامه دارد...
