پشتیبانی از همه موبایل‌ها با طراحی تعاملی

پشتیبانی از همه موبایل‌ها با طراحی تعاملی-موسسه چشم انداز-آموزش کاربردی GIS و RS

مقدمه

اپلیکیشن‌های موبایل از دستگاه‌های مختلف مانند تلفن‌های هوشمند، تبلت و فبلت‌ها قابل دسترس و قابل اجرا هستند. با استفاده از طراحی تعاملی اپلیکیشن‌های موبایل بر روی همه‌ی دستگاه‌های موبایل به راحتی و به خوبی ظاهر می‌شوند. در این بخش قدم به قدم یک اپلیکیشن تعاملی ساده ایجاد می‌کنیم.

در این فصل مطالب زیر را پوشش می‌دهیم:

1- رویکردهای پشتیبانی از همه دستگاه‌های موبایل

2- یک CSS جادویی

3- طراحی تعاملی با استفاده از فریم ورک bootstrap

4- بررسی کردن اپلیکیشن

5- رویکردهای پشتیبانی از همه دستگاه‌های موبایل

در بخش 2 مختصراً در مورد طراحی تعاملی صحبت کردیم. طراحی تعاملی، رویکردی برای توسعه  وب اپلیکیشن‌ها است که توانایی اجرای اپلیکیشن بر روی همه دستگاه‌ها را فراهم می‌کند. بر روی همه دستگاه‌ها به خوبی اجرا و نمایش داده شده و کاربر پسند است. در این بخش بر روی معروف ترین فریم ورک تعاملی Bootstrap متمرکز می‌شویم. سبک‌های ساخته شده با فریم ورک Bootstrap با انواع اندازه‌ی صفحه، قدرت تفکیک پیکسلی مختلف، تراکم پیکسلی مختلف و تغییر جهت دستگاه سازگار هستند. Bootstrap بر پایه سیستم شبکه بندی fluid است. این سیستم بر اساس درصدها است. سیستم شبکه بندی پیش فرض 12 ستون دارد که عرض این سیستم 940 پیکسل دارد. در واقع مجموع تعداد پیکسل‌های این 12 ستون، 940 پیکسل است.

شبکه مانند صفحه‌ای است که به تعدادی ستون تقسیم شده است. ممکن است روی یک تبلت 10 اینچی فقط 3 ستون و در یک تبلت 6 اینچی دو ستون و در یک صفحه تلفن هوشمند یک ستون از این 12 ستون قابل نمایش باشد. همانطور که یک صفحه نمایش کوچک‌تر می‌شود، محتویات صفحه فشرده‌تر و متراکم‌تر می‌شود. تصویر زیر نمایش یک صفحه یکسان بر روی تبلت و تلفن هوشمند را نشان می‌دهد.

علاوه بر رویکرد طراحی تعاملی، رویکرد دیگری برای پشتیبانی از نمایش اپلیکیشن بر روی اندازه‌های متفاوت صفحه نمایش وجود دارد که رویکرد افزایش تصاعدی نام دارد. در بخش دوم jQuery Mobile را توضیح دادیم. فریم ورک jQuery Mobile دو رویکرد طراحی تعاملی و افزایش تصاعدی را پشتیبانی می‌کند.

ویژگی‌های رویکرد افزایش تصاعدی عبارتند از :

• برای صفحاتی با اندازه‌های خاص نوشته می‌شوند.
• شکل صفحه را با UX کنترل می‌کنند.
• برای استفاده در برنامه‌های چند جزئی مناسب اند.
• از ظاهر و رفتار برنامه‌های بومی تقلید می‌کنند.

دو رویکرد طراحی تعاملی و افزایش تصاعدی، ساختار تعاملی و سازگاری متفاوتی نسبت به یکدیگر دارند. رویکرد تعاملی بر انعطاف و شبکه‌بندی تکیه دارد در حالی که رویکرد افزایش تصاعدی بر اندازه صفحات از پیش تعریف شده تکیه دارد. طراحی تعاملی، برای سازگاری با دستگاه‌ها و اندازه صفحات مختلف از CSS و اسکریپت نویسی استفاده می‌کند.

جادوی CSS ها

CSS، قلب دو رویکرد تعاملی و افزایش تصاعدی است و استانداردی برای طرح بندی سایت‌ها است که فریم ورک Bootstrap نیز بر پایه‌ی این استاندارد است. اینکه یک عنصر در کجای یک صفحه وب قرار بگیرد یا چه رنگ و طرحی داشته باشد بر عهده استاندارد CSS است. توسعه دهندگان با استفاده از این استاندارد برای یک دستگاه خاص، طرح مناسبی را ارائه می‌دهند. در جاهای مختلف کد می‌توانیم از این استاندارد استفاده کنیم. مثلاً در کد زیر استفاده از این استاندارد به صورت یک لینک در HTML آمده است:

<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)”href=”responsiveArcGIS1.css” />

پارامتر media در کد قبلی شامل دو قسمت است. قسمت اول برای نوع رسانه است که در اینجا صفحه موبایل است و قسمت دیگر، ویژگی حداکثر اندازه عرض صفحه است که با مقدار 480 پیکسل تنظیم شده است. اگر قدرت تفکیک پیکسلی نمای افقی صفحه یا همان ویژگی max-device-width کوچکتر یا مساوی 480 پیکسل است، آنگاه می‌توانیم برنامه را بر روی صفحه موبایلی مانند iPhone 3 ببینیم و سپس دستگاه فایلArcGIS1.css  را بارگذاری می‌کند. و اگر بزرگتر از 480 پیکسل است، آنگاه لینک بالا کلاً نادیده گرفته می‌شود. پارامتر رسانه می‌تواند شامل یک فایل CSS نیز باشد که درون این فایل، پارامتر رسانه به صورت زیر معرفی می‌شود و سپس باید به این فایل CSS درون کد ارجاع دهید.

@media screen and (max-device-width: 480px) {

Body{ font-size: 0.5em;}}

پارامتر رسانه برای دستگاه‌های مختلف به صورت مختلف زیر نیز بیان می‌شود:

• برای دستگاه‌های خیلی کوچک شامل (تلفن‌های هوشمند که تعداد پیکسل‌های عرض صفحه کمتر از 768 پیکسل است): در این دستگاه‌ها نیازی به تعریف پارامتر رسانه نیست؛ زیرا 768 پیکسل، مقدار پیش فرض فریم ورک Bootstrap است.
• برای دستگاه‌های کوچک شامل (تبلت‌ها که تعداد پیکسل‌های عرض صفحه بیشتر مساوی 768 پیکسل است): کد زیر را در یک فایل CSS می‌نویسیم:

@media (min-width: @screen-sm-min) { … }

• برای دستگاه‌های متوسط شامل (Desktop‌ها که تعداد پیکسل‌های عرض صفحه بیشتر مساوی 992 پیکسل است: کد زیر را در یک فایل CSS می‌نویسیم:

@media (min-width: @screen-md-min) { … }

• برای دستگاه‌های بزرگ شامل (Desktop‌های بزرگ تعداد پیکسل‌های عرض صفحه بیشتر مساوی 1200 پیکسل است): کد زیر را در یک فایل CSS می‌نویسیم:

@media (min-width: @screen-lg-min) { … }

دیگر پارامترهای رسانه‌‌ی موجود در فریم ورک Bootstrap را در لینک زیر ببینید:

http://getbootstrap.com/css/#grid-media-queries

رویکرد افزایش تصاعدی در jQuery Mobile از قوانین و مضمون‌ها استفاده می‌کند. قوانین، نوع نگه دارنده‌هایی مانند( صفحه، سربرگ ، پاصفحه و …) و مضمون ها، عناصر دیداری مانند( فونت، رنگ ، سایه و …) را کنترل و تعیین می‌کنند. کاربر با استفاده از مضمون، اشیائی مانند دکمه دلخواه خود را طراحی می‌کند. قطعه کد زیر یک عنصر نگاهدارنده درون صفحه را نشان می‌دهد که نگاهدارنده شامل ارجاع به قوانین و مضمون است.

<div data-role=”page” id=”home”>
<div data-role=”collapsible” data-collapsed=”true” data-theme=”a”/>
</div>

قطعه کد  CSSزیر، نگاهدارنده را طرح بندی می‌کند. تگ div  در کد زیر یک نگاه دارنده است که این تگ با قانونش شناسایی شده و کد طرح بندی به این تگ اعمال می‌شود. در حالی که تگ div می­ توانست با id خود شناسایی شود که در آن صورت بایستی به صورت .home شناسایی شود.

html,body, div[data-role =”page”]

{

Background-color:red;

Height:300px;}

انتخاب رویکرد افزایش تصاعدی یا همان jQuery Mobile بستگی به علاقه و شرایط توسعه دهنده دارد و در این کتاب بر این رویکرد متمرکز نمی‌شویم. وب سایت jQuery Mobile را در لینک زیر ببینید:

jQuery Mobile

طراحی تعاملی با فریم ورک Bootstrap

زمان کندوکاو Bootstrap فرا رسیده است. پس بیائید با یک مثال شروع کنیم. کد این مثال با کدهای قبلی فصل‌های پیشین متفاوت است. در ابتدا باید در Viewport ویژگی width=device-width را اضافه کرد.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

تعداد پیکسل عرض صفحه در مقدار device-width قرار می‌گیرد و نشان می‌دهد این تعداد پیکسل، چه درصدی از 100 درصد عرض صفحه است. در قدم بعدی باید فایل جاوا اسکریپت و  CSSمختصرشده را اضافه کنیم.

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script>

فرآیند مختصرکردن فایل، پارامترهای غیر ضروری را بدون آنکه تغییری در عملکرد فایل ایجاد کند، حذف می‌کند. اندازه کتابخانه کوچک‌تر شده و سرعت دانلود را در مرورگر بالا می‌برد.

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

<html>
<head>
<meta name=”viewport” content=”width=device-width, initialscale=1.0″>
<title>Simple Responsive Map</title>
<!– stylesheets –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.1/css/bootstrap.min.css”>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.1/css/bootstrap-theme.min.css”>
<link rel=”stylesheet” href=”http://js.arcgis.com/3.12/esri/css/esri.
css”>
<!– script –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/
jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/
bootstrap.min.js”></script>
<script src=”http://js.arcgis.com/3.12compact/”></script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([“esri/map”, “esri/layers/FeatureLayer”, “dojo/parser”,
“dojo/dom”, “dojo/domReady!”], function(Map, FeatureLayer, parser,
dom) {
parser.parse();
//map object
var map = new Map(“map”, {
center: [-118, 34.5],
zoom: 7,
basemap: “streets”
});
var marathon = new FeatureLayer(“http://services.
arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/
FeatureServer/0”,
{
mode: FeatureLayer.MODE_ONDEMAND,
outFields:[“*”]
});
map.addLayers([marathon]);
});
</script>
</head>
<body>
<div id=”map”></div>
</body>
</html>

کد فوق در فایل MobileResponsiveMapBase.html قرار دارد.

حال صفحه را با اضافه کردن تگ div درون تگ body طرح بندی می‌کنیم.

تگ div، صفحه‌ی HTML را به چند بخش تقسیم می‌کند و سپس با CSS، عناصر موجود در این بخش­‌ها را طرح بندی می‌کنیم.

اضافه کردن عناصر تعاملی به صفحه

در تصویر زیر، ابزارهای یک رابط تعاملی در سربرگ صفحه قرار گرفته ­اند.

در اپلیکیشن بالا، دو تگ div و nav وجود دارند که سربرگ صفحه را نگه می‌دارند. این سربرگ شامل ابزارهای تعاملی است. تگ nav شامل مجموعه لینک‌ها و بلوک اصلی لینک‌ها است. اطلاعات بیشتر در مورد تگ nav در لینک زیر قرار دارد.

http://www.w3schools.com/tags/tag_nav.asp

برای اعمال classهای Bootstrap به عناصر صفحه از ویژگی class استفاده می‌شود. کد زیر سربرگ موجود در تصویر بالا را ایجاد می‌کند.

<div class=”bs-example”>
<nav id=”myNavbar” class=”navbar navbar-default”
role=”navigation”>
</nav>
</div>
<!– Map –>
<div id=”map” ></div>

در کد بالا، تگ <nav> یک ویژگی class دارد که به نوار پیمایشی اشاره می‌کند. این ویژگی یکی از مولفه‌ها‌ی Bootstrap است.

قابلیت toggleable چیست؟ عنصری با این قابلیت را می‌توانید با ضربه انگشت یا لمس، انتخاب کنید و در مکان دلخواه روی صفحه بیاندازید. در واقع قابلیت جابجا شدن بر روی صفحه را دارند.

همانطور که در اسناد Bootstrap آمده است؛ نوارهای پیمایشی، مولفه ­هایی هستند که در اپلیکیشن مانند سربرگ‌های پیمایشی عمل می‌کنند. قابلیت toggleable دارند و روی صفحه به‌صورت افقی قرار می‌گیرند. می‌توان عرض این نوارهای پیمایشی را در تگ meta زیاد کرد. برای دستیابی به ویژگی role=”navigation”  به HTML5 نیاز داریم. HTML5 انواع مختلف گروه عناصر دارد. عناصر یک گروه برای رسیدن به هدف واحدی در کنار هم قرار گرفته‌اند و با هم استفاده شده و مکمل همدیگر هستند. تگ <nav> هم یکی از این گروه عناصر است. به نوار پیمایشی ابزارهایی مانند: کادر متنی برای موقعیت جغرافیایی، منوی کشویی، جعبه جستجو، دکمه و هم چنین یک نماد اضافه می‌کنیم. برای این کار درون تگ <nav> کد زیر را اضافه می‌کنیم.

<nav id=”myNavbar” class=”navbar navbar-default navbar-fixed-top”
role=”navigation”>
<div class=”container”>
<div class=”navbar-header”>
<!– Logo –>
<img src=”http://plagatux.es/wp-content/
uploads/2013/10/photo1.jpg” alt=”” class=”navbar-brand”/>
</div>
<!– Tools –>
<div class=”collapse navbar-collapse” >
</div>
</div>
</nav>

دومین تگ div که پارامتر class آن را به مقدار collapse navbar-collapse تنظیم کرده‌ایم، برای نگه داشتن ابزار‌ها است. وقتی پارامتر class برابر مقدار collapse navbar-collapse باشد و پهنای عرضی که در viewport برای این نوار پیمایشی تعیین کردیم؛ کم باشد آنگاه ابزارهای این نوار پیمایشی در نمای عمودی موبایل کاربران به صورت کرکره‌ای ظاهر می‌شوند. این موضوع را بعداً بیشتر توضیح می‌دهیم. در نتیجه تگ div باید به صورت زیر باشد:

<!– Tools –>
<div class=”collapse navbar-collapse” id=”bs-example-navbarcollapse-1″>
<ul class=”nav navbar-nav”>
<li><a href=”#”>GeoLocate</a></li>
<li class=”dropdown”>
<a href=”#” data-toggle=”dropdown” class=”dropdown-toggle”>Tools
<b class=”caret”></b></a>
<ul class=”dropdown-menu”>
<li><a href=”#” >Legend</a></li>
</ul>
</li>
</ul>
<ul class=”nav navbar-nav navbar-right”>
<form class=”navbar-form navbar-left” role=”search”>
<div class=”form-group”>
<input id=”searchText” type=”text” class=”form-control”
value=”380 New York St, Redlands”>
</div>
<a href=”#” >Search</a>
</form>
</ul>
</div>

هر عنصر HTMLدارای ویژگی class است. فریم ورک Bootstrap با استفاده از ویژگیclass‌، اپلیکیشن را تعاملی می‌کند. مولفه‌ها و class‌های Bootstrap را در لینک زیر ببینید:

http://getbootstrap.com/components/.

کدهای بالا را به کد مبنایی برنامه این فصل اضافه می‌کنیم. تصویر زیر اجرای اپلیکیشن را نشان می‌دهد.

کد این اپلیکیشن در فایل MobileResponsiveMap1.html قرار دارد.

حال پنجره مرورگر را تغییر اندازه می‌دهیم.

ماوس را به گوشه پائینی سمت راست ببرید و دکمه ماوس را نگه دارید و پنجره را تغییر اندازه دهید. تغییر اندازه‌ی مرورگر در یک دستگاه موبایل و نحوه‌ی نمایش آن را بررسی می‌کنیم.

وقتی پنجره را از اندازه مشخصی کوچکتر کنیم، سربرگ و ابزارهای آن ناپدید می‌شوند. در این مواقع بهتر است تا ابزارهای سربرگ به صورت کرکره‌ای در نمای عمودی ظاهر شوند. برای این کار کد زیر را به بالای تگ <img> اضافه می‌کنیم.

<button type=”button” class=”navbar-toggle” data-toggle=”collapse”
data-target=”#bs-example-navbar-collapse-1″>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>

این کد، یک دکمه ایجاد می‌کند که با کلیک این دکمه نوار ابزار به صورت کرکره‌ای باز می‌شود. وقتی پنجره مرورگر را تغییر اندازه می‌دهید، نوار ابزار ناپدید می‌شود اما مطابق تصویر سمت چپیک دکمه ظاهر می‌شود. با زدن دکمه، تصویر سمت راست نمایش داده می‌شود.

در تصویر سمت چپ، اپلیکیشن در یک صفحه کوچک اجرا می‌شود و نوار ابزار بسته است و در واقع سربرگی دیده نمی‌شود ولی یک دکمه تعبیه شده و کاربر با ضربه زدن بر روی دکمه، نوار ابزار را بصورت تصویر سمت راست می‌بیند.

حالا قدرت Bootstrap را می‌بینید. با استفاده از یک تگ ساده div اپلیکیشنی تعاملی و قابل اجرا بر روی انواع دستگاه‌ها ساختیم.

کد این اپلیکیشن در فایل  MobileResponsiveMap2.htmlقرار دارد.

این اپلیکیشن شروع خوبی بود. در ادامه عملکرد‌های پیشرفته‌تری ایجاد می‌کنیم.

ابزار‌های تعاملی

حال گزینه‌ی موقعیت جغرافیایی ترکیبی را درست می‌کنیم.

با کلیک کاربر روی لینک Geolocate موجود در سربرگ، تابع geolocate() اجرا می‌شود.

<li><a href=”#” onclick=”geolocate()”>GeoLocate</a></li>

حال توابع Geolocate که در بخش قبلی استفاده شده‌اند را در یک تگ <script> جدید می‌گذاریم.

<script>
//GeoLocate
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(zoomToLocati
on, locationError);
}
}
function zoomToLocation(location) {
var pt = esri.geometry.geographicToWebMercator(new esri.
geometry.Point(location.coords.longitude, location.coords.latitude));
map.centerAndZoom(pt, 16);
}
function locationError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert(“Location not provided”);
break;
case error.POSITION_UNAVAILABLE:
alert(“Current location not available”);
break;
case error.TIMEOUT:
alert(“Timeout”);
break;
default:
alert(“unknown error”);
break;
}
}
//end GeoLocate
</script>

کد کامل این برنامه در فایل MobileResponsiveMap3.html قرار دارد.

حوزه متغیرها مبحث مهمی است. متغیرها با توجه به جایی که تعریف می‌شوند، قابل استفاده و قابل مشاهده هستند. این موضوع را حوزه متغیر می‌نامند. اگر بخواهیم یک متغیر یا شی در تمام توابع قابل استفاده باشد، حوزه استفاده آن را به صورت عمومی(سراسری) به صورت زیر تعیین می‌کنیم.

<script>
var map;
var locator;
</script>

قطعه کد بالا دو متغیر map و locator را به صورت عمومی تعریف می‌کند. این تگ اسکریپت باید قبل از همه تگ‌های اسکریپت حاوی توابع در کد نوشته شود. شی map و متغیر locator را در هر کجای کد می‌توان استفاده کرد.

در قدم بعدی باید یک سرویس geocode یا همان جستجوی آدرس اضافه کنیم. بنابراین از کد موجود در برنامه‌ی فصل قبل استفاده می‌کنیم. کد زیر را در زیر شی FeatureLayer بنویسید.

locator = new Locator(“http://geocode.arcgis.com/arcgis/rest/services/
World/GeocodeServer”);
locator.on(“address-to-locations-complete”, showResults);

شی locator نشان دهنده سرویس geocode است که توسط سرور  REST فراهم می­ شوند.

در قدم بعدی قطعه کد زیر را درون یک اسکریپت جدید می‌نویسیم:

<script>
//Address Search
//Execute find address request
function findAddress(searchText) {
//Clear any existing graphics
var address = {
“SingleLine”: searchText
};
locator.outSpatialReference = map.spatialReference;
var options = {
address: address,
outFields: [“Loc_name”]
};
locator.addressToLocations(options);
}
//Display the address search results
function showResults(evt) {
var geom;
if(evt.addresses.length > 0)
{
map.graphics.clear();
geom = evt.addresses[0].location;
if ( geom !== undefined ) {
map.centerAndZoom(geom, 12);
}
}
}
</script>

SingleLine موجود در بالای گزینه‌های آدرس، مکانی که باید مختصات جغرافیایی آن برگردانده شود را مشخص می‌کند. SingleLine می‌تواند آدرس یک خیابان، نام مکان یا یک کدپستی باشد. در این مثال، SingleLine شامل آدرس ورودی کاربر است. وقتی متد addressToLocations صدا زده می‌شود، Locator جستجو را تا زمان انطباق یک مکان با آدرس ورودی کاربر ادامه ‌می‌دهد.

در نهایت دکمه submit را به روز رسانی می‌کنیم. با کلیک این دکمه یک تابع را صدا می‌زنیم. پس در رویداد onclick این دکمه، یک تابع قرار می‌دهیم. متغیر searchText که حاوی آدرس ورودی کاربر است به تابع findAddress فرستاده می‌شود. در نهایت تگ دکمه را به صورت زیر می‌نویسیم:

<button type=”submit” class=”btn btn-default”
onclick=”findAddress(dojo.byId(‘searchText’).value);”>Submit</button>

کد کامل اپلیکیشن در فایل MobileResponsiveMap4.html قرار دارد.

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

قبل از اضافه کردن آخرین ابزار، تغییرات کوچکی به برنامه اعمال می‌کنیم. در تصویر زیر قسمتی از ابزار زوم در زیر سربرگ مخفی شده است.

بهتر است ابزار جابجا شود و هم پوشانی ابزار با سربرگ را حذف کنیم. پس قطعه کد زیر را به تگ <style> اضافه می‌کنیم.

#map_zoom_slider{
top:10% !important;
}

حال تکه کد دیگری نیز اضافه می‌کنیم. اگر ایالتی را با ضربه‌ی انگشت انتخاب کنیم پنجره پاپ‌آپ برای نشان دادن توضیحات ظاهر نمی‌شود زیرا کد پاپ‌آپ را به برنامه اضافه نکردیم.

حال پاپ‌آپ توضیحات عارضه را به اپلیکیشن اضافه می‌کنیم. برای این کار ماژول InfoTemplate را اضافه می‌کنیم. پس کد زیر را اضافه کنید:

var template = new InfoTemplate();
//Feature layer
var marathon = new FeatureLayer(“http://services.arcgis.
com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/
FeatureServer/0”,
{
mode: FeatureLayer.MODE_ONDEMAND,
outFields:[“*”],
infoTemplate: template
});

کد کامل اپلیکیشن در فایل MobileResponsiveMap5.html قرار دارد.

تصویر زیر اجرای تکه کد بالا را نشان می‌دهد.

تا اینجا یک ابزار دیگر نیز به برنامه اضافه کردیم. حال می‌خواهیم قسمتی از کد راهنمای نقشه را در این اپلیکیشن استفاده ‌کنیم. به جای استفاده از قسمتی از صفحه برای قراردادن راهنمای نقشه، یک فضای تمام صفحه را به راهنمای نقشه اختصاص می‌دهیم و کاربر با زدن یک دکمه بین div نقشه و div راهنمای نقشه، سوئیچ می‌کند. در واقع در یک فضای تمام صفحه، نقشه دیده شود و با کلیک دکمه در همین فضای تمام صفحه، نقشه محو می‌شود و راهنمای نقشه ظاهر می‌شود. از دو تگ Div استفاده می‌کنیم که در هر لحظه فقط محتوای یکی از Divها قابل دیدن است و این دو عنصر Div در یک صفحه قرار دارند.

تصویر سمت چپ محتویات تگ div (نقشه) و تصویر سمت راست محتویات تگ   div(راهنمای نقشه) را نشان می‌دهد.

کد کامل اپلیکیشن در فایل MobileResponsiveMap6.html قرار دارد.

بهتر است کدهایی که اخیراً اضافه شده را مجدد بررسی کنیم.

در ابتدا باید ویجت راهنمای نقشه را به تابع require اضافه کنیم.

require([“esri/map”, “esri/layers/FeatureLayer”, “esri/tasks/locator”,
“dojo/parser”, “dojo/dom”, “esri/InfoTemplate”, “esri/dijit/Legend”,
“dojo/domReady!”], function(Map, FeatureLayer, Locator, parser, dom,
InfoTemplate, Legend)

یک تگ div در زیر تگ map اضافه می‌کنیم.

<div id=”legendDiv”></div>

حالا باید بین نمای نقشه و نمای راهنمای نقشه سوئیچ کنیم. بنابراین در هنگام بارگذاری و مقدار دهی اولیه‌ی نقشه، باید یک سربرگ ظاهر شود و روی سربرگ برچسب “legend” بگذاریم، تا با انتخاب این برچسب به تگ div راهنمای نقشه سوئیچ کنیم. برای این کار، قطعه کد زیر را در انتهای تابع require قرار دهید.

document.getElementById(“legendDiv”).style.display = “none”;

حالا باید شی راهنمای نقشه را ایجاد کنیم. قطعه کد زیر را در بالای کد راهنمای نقشه اضافه کنید. کد زیر ویجت راهنمای نقشه را اضافه می‌کند.

//Legend
map.on(“layers-add-result”, function (evt) {
var layerInfo = dojo.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new esri.dijit.Legend({
map: map,
layerInfos: layerInfo
}, “legendDiv”);
legendDijit.startup();
}
});

legendDijit یک برچسب و یک سمبل را برای هر لایه‌ای از نقشه نشان می‌دهد. این برچسب و سمبل بر اساس نوع لایه متفاوت است. راهنمای نقشه برای انواع لایه‌های زیر پشتیبانی می‌شود.

1. ArcGISDynamicMapServiceLayer
2. ArcGISTiledMapServiceLayer
3. FeatureLayer
4. CSVLayer
5. KMLLayer
6. WMSLayer

برنامه نویس با استفاده از گزینه‌ی layerInfos لایه‌های نمایش داده شده و سمبل و برچسب آن‌ها را کنترل می‌کند. حال وقتی گزینه‌ی legend را از لیست انتخاب می‌کنیم باید به صفحه راهنمای نقشه هدایت شویم. پس رویداد onclick را در تگ <li> مربوط به legend می‌گذاریم.

<li><a href=”#” onclick=”showLegend(this)”; >Legend</a></li>

وقتی از لیست، گزینه‌ی legend را انتخاب می‌کنیم، تابع showLegend صدا زده می‌شود. یک اسکریپت جدید برای این تابع می‌نویسیم.

<script>
//Legend show/hide
function showLegend(evt) {
switch (document.getElementById(“legendDiv”).style.display) {
case “none”:
document.getElementById(“legendDiv”).style.display = “block”;
document.getElementById(“map”).style.display = “none”;
evt.innerText = “Map”;
break;

case “block”:
document.getElementById(“legendDiv”).style.display = “none”;
document.getElementById(“map”).style.display = “block”;
evt.innerText = “Legend”;
break;
}
}
</script>

در کد بالا هر زمان که کاربر از لیست بازشو گزینه‌ی legend را انتخاب می‌کند، تگ div مربوط به legend ظاهر شده و تگ div مربوط به map مخفی می‌شود و در لیست بازشو به جای legend، مقدار map قرار می‌گیرد. باید سمبل لایه‌ها را به پایین سربرگ منتقل ‌کنیم. پس کد زیر را به تگ <style> اضافه می‌کنیم.

#legendDiv{
top:10% !important;
}

!important در تگ بالا اولویت را مشخص می‌کند. بدین معنی که صرفنظر از هر اولویت دیگری، کد CSS این div بالاترین اولویت را دارد.

تا اینجا یک اپلیکیشن تعاملی ساختیم که ابزارهای موقعیت جغرافیایی، جستجوی آدرس و ابزارهای راهنمای نقشه را دارد. ضروری است تا اپلیکشن را پس از ساخت بر روی انواع دستگاه‌های موبایل، بررسی کنید.

برگرفته از کتاب تولید وب اپلیکیشن های موبایل با ArcGIS

نویسنده: دکتر محمد بافقی زاده

نشر: انتشارات اکادمیک