استفاده از ویجتها و نوار ابزارها-موسسه چشم انداز هزاره سوم ملل-آموزش GIS و RS
بسیاری از اپلیکیشنها غیر از ابزارهای ساده و پایهای مثل زوم و پیمایش، ابزارهای راهنمای نقشه و نوار مقیاس را نیز دارند. API، ویجتهای رابط کاربری را فراهم کرده که مستقیماً درون اپلیکیشن قابل استفاده هستند. این ویجتها، با کمی تغییرات در پیکربندی آمادهی به کارگیری در اپلیکیشن هستند.
ArcGIS API for JavaScript علاوه بر ویجتها، کلاسهایی برای رسم نوارابزار درون اپلیکیشن دارد. این کلاسها که به کلاسهای کمکی معروف اند، ابزارهایی را به رابط کاربری اپلیکیشن اضافه میکنند.
یک نمونه اپلیکیشن ساده با قابلیت پیمایش را در نظر بگیرید. شرکت Esri نمونههایی از نوارابزارها را در لینک https://developers.arcgis.com/ en/javascript/samples/toolbar_draw/ قرار داده است. نمونهای از این نوار ابزارها را در زیر میبینید:
در تصویر بالا یک نوار ابزار ترسیمی را میبینید که یک مولفهی رابط کاربری ساده است و درون اپلیکیشن قابل استفاده است. البته نمونهی کاملی نیست.
ArcGIS API for JavaScript یک کلاس کمکی نوار ابزار به نام esri/toolbars/Draw دارد. هم چنین یک کلاس کمکی برای پیمایش تصویر دارد. کاری که این کلاسهای کمکی انجام میدهند، کار کوچک و آسانی نیست. توسعه دهندگان با این کلاسهای کمکی در وقت خود صرفه جویی میکنند.
در این بخش مباحث زیر را پوشش میدهیم:
1- اضافه کردن نوار ابزار به اپلیکیشن
2- ویجتهای رابط کاربری
3- ویرایش عارضه
اضافه کردن نوار ابزار به اپلیکیشن
با استفاده از کلاسهای کمکی API، دو نوار ابزار پایه شامل Navigation و نوار ابزار Draw برای اضافه کردن به اپلیکیشن وجود دارد.
همچنین یک نوار ابزار ویرایشی برای ویرایش گرافیکها و عوارض وجود دارد. این نوار ابزار ویرایشی را در بخش بعدی توضیح خواهیم داد.
مراحل ایجاد نوار ابزار
نوار ابزارهای Navigation و Draw کلاسهای کمکی هستند که طی چند مرحله میتوانید این نوارابزارها را به اپلیکیشن اضافه کرده و استفاده کنید. کلیدهای زیاد موجود در این نوار ابزارها ممکن است کمی گیج کننده باشند، با طی مراحل زیر میتوانید فقط کلیدهای مورد نیازتان را درون نوارابزار قرار دهید.
1- طرح بندی هر کلید مانند (اندازه، رنگ، سایه، انحنا و …) را توسط CSS ایجاد کنید.
2- کلیدهای درون نوار ابزار را ایجاد کنید.
3- نمونهای از esri/toolbars/Navigation یا esri/toolbars/Draw را بسته به نوع نوارابزاری که مد نظرتان است، اضافه کنید.
4- رویدادهایی مانند (کلیک، قرار گرفتن ماوس روی کلید و …) که روی کلید انجام میشود را به یک تابع مسئول متصل کنید.
طرح بندی کلید
هر کلیدی که در نوارابزار قرار میگیرد به یک تصویر یا متن و یا هردو نیاز دارد. عرض و ارتفاع کلید و اندازهی کلید مهم است. هر کدام از این ویژگیها درون تگ <style> قابل تعریف و تنظیم هستند. در قطعه کد زیر تعدادی کلید که در نوار ابزار Navigation تعریف شده اند، طرح بندی شده اند. میخواهیم به کلید بزرگنمایی با کمی تغییرات در طرح بندی، ظاهر جدیدی بدهیم. یک تصویر با نام nav_zoomout.png به این کلید تخصیص میدهیم تا این تصویر بر روی دکمه ظاهر شود. همچنین برای این دکمه یک ID با نام zoomoutIcon تعریف کردهایم که مختص همین دکمه خواهد بود. همانطور که در کد میبینید برای دکمهی کوچک نمایی نیز یک ID با نام zoominIcon قرار دارد که سبک خاصی را به دکمهی کوچک نمایی اعمال میکند. در هنگام ایجاد دکمه ویژگی iconClass را با مقدار zoominIcon تنظیم کنید تا در زمان ارجاع به تگ <style>، تنظیمات مربوط به zoominIcon به دکمه اعمال شود.
<style type=”text/css”>
@import
“https://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css”;
.zoominIcon{ background-image:url(images/nav_zoomin.png);
width:16px; height:16px; }
.zoomoutIcon{ background-image:url(images/nav_zoomout.png);
width:16px; height:16px; }
.zoomfullextIcon{ backgroundimage:url(images/nav_fullextent.png); width:16px;
height:16px; }
.zoomprevIcon{ backgroundimage:url(images/nav_previous.png); width:16px;
height:16px; }
.zoomnextIcon{ background-image:url(images/nav_next.png);
width:16px; height:16px; }
.panIcon{ background-image:url(images/nav_pan.png);
width:16px; height:16px; }
.deactivateIcon{ backgroundimage:url(images/nav_decline.png); width:16px;
height:16px; }
</style>
ایجاد دکمه
همانطور که در کد زیر آمده است، کلیدها میتوانند درون تگ <div> تعریف شوند. در زمان ایجاد دکمه، باید یک سبک CSS تعریف کنید و کلید را به این سبک ارجاع دهید. کلید از ویژگی iconClass برای ارجاع به کد CSS استفاده میکند. در مثال ما، در این ویژگی مقدار zoominIcon قرار میگیرد که قبلاً این مقدار درون تگ <style> کدنویسی و طرح بندی شده است. برای این دکمه درون تگ <style>، تصویر پس زمینه و طول و عرض دکمه تعیین کرده ایم. خطوط کد مشخص شدهی زیر، مربوط به کلید هستند.
<div id=”mainWindow” data-dojo-type=”dijit/layout/BorderContainer”
data-dojo-props=”design:’headline'”>
<div id=”header”data-dojo-type=”dijit/layout/ContentPane”
data-dojo-props=”region:’top'”>
<button data-dojo-type=”dijit/form/Button”
iconClass=”zoominIcon”>Zoom In</button>
<button data-dojo-type=”dijit/form/Button”
iconClass=”zoomoutIcon” >Zoom Out</button>
<button data-dojo-type=”dijit/form/Button”
iconClass=”zoomfullextIcon” >Full Extent</button>
<button data-dojo-type =”dijit/form/Button”
iconClass=”zoomprevIcon” >Prev Extent</button>
<button data-dojo-type=”dijit/form/Button”
iconClass=”zoomnextIcon” >Next Extent</button>
<button data-dojo-type=”dijit/form/Button”
iconClass=”panIcon”>Pan</button>
<button data-dojo-type=”dijit/form/Button”
iconClass=”deactivateIcon” >Deactivate</button>
</div>
</div>
کد بالا چندین دکمه با کنترل Button ایجاد میکند. این کنترل توسط Dijit فراهم شده است. Dijit زیر پروژهای از Dojo است.
ایجاد نوار ابزار پیمایش
بعد از تنظیم شکل ظاهری دکمه، باید یک نمونه از کلاس کمکی esri/toolbars/Navigation ایجاد کنیم و رخدادهای مسئول را بنویسیم. پس در ابتدا باید به منبع esri/toolbars/navigation ارجاع دهیم. نمونه کد زیر، به نوارابزار Navigation ارجاع میدهد، نوار ابزار را ایجاد کرده و رویداد کلیک را به دکمه متصل میکند و همهی ابزارها را فعال میکند. خطوط کد مرتبط در زیر مشخص شده است. توضیحاتی نیز همراه با خط کدها برای درک بهتر آمده است.
<script>
var map, toolbar, symbol, geomTask;
require([
“esri/map”,
“esri/toolbars/navigation”,
“dojo/parser”, “dijit/registry”,
“dijit/layout/BorderContainer”, “dijit/layout/ContentPane”,
“dijit/form/Button”, “dojo/domReady!”
], function(
Map, Navigation,
parser, registry
) {
parser.parse();
map = new Map(“map”, {
basemap: “streets”,
center: [-15.469, 36.428],
zoom: 3
});
map.on(“load”, createToolbar);
// loop through all dijits, connect onClick event
// listeners for buttons to activate navigation tools
registry.forEach(function(d) {
// d is a reference to a dijit
// could be a layout container or a button
if ( d.declaredClass === “dijit.form.Button” ) {
d.on(“click”, activateTool);
}
});
//activate tools
function activateTool() {
var tool = this.label.toUpperCase().replace(/ /g, “_”);
toolbar.activate(Navigation[tool]);
}
//create the Navigation toolbar
function createToolbar(themap) {
toolbar = new Navigation(map);
});
</script>
کد بالا مراحل اضافه کردن نوارابزار پیمایشی را با استفاده از JavaScript API نشان میدهد. مولفههای نوارابزار با استفاده از کتابخانهی Dijit به سادگی ایجاد میشوند. کلاس Draw برای ترسیم هندسههایی مانند نقطه، خط و پولیگون است.
ویجتهای رابط کاربری
JavaScript API ویجتهایی مانند BasemapGallery، Bookmarks، Print، Geocoder، Gauge، Measurement، Popup، Legend، Scalebar، OverviewMap، Editor، Directions HistogramTimeSlider، HomeButton، LayerSwipe، LocateButton، TimeSlider و Analysis را برای بهبود اپلیکیشن فراهم کرده است.
ویجتها متفاوت از دکمهها و ابزارهای موجود در کلاسهای کمکی Navigation و Draw هستند. ویجتها با اضافه کردن مقداری کد قابل استفاده هستند. این کدها از تعدادی کلاس کمکی که شامل کدهای HTML، CSS و JavaScript هستند، تشکیل شدهاند.
برگرفته از کتاب تولید و طراحی اپلیکیشن های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک