طراحی اپلیکیشن با الگوهای ArcGIS و Dojo-موسسه چشم انداز-آموزش کاربردی GIS و RS
یکی از چالش‌های توسعه دهندگان و برنامه نویسان، سبک اپلیکیشن و طراحی رابط کاربری است. ArcGIS API for JavaScript و Dojo به توسعه دهندگان برای طرح بندی و رابط کاربری کمک می‌کنند. Esri تعدادی سبک و الگوی قابل استفاده را فراهم کرده است. در ادامه تکنیک‌هایی یاد می‌گیرید تا طرح بندی و رابط کاربری اپلیکیشن را به سرعت و به راحتی تنظیم و اعمال کنید.
Dijit
ArcGIS Javascript API بر اساس فریم ورک جاوااسکریپتی Dojo ساخته شده است. بعضی از کتابخانه‌های Dojo مانند سبک BorderContainer مربوط به رابط کاربری هستند. Dijit مجموعه عناصر رابط کاربری است که می‌توانید به اپلیکیشن اضافه کنید و رابط کاربری را کنترل کنید. BorderContainer مانند یک نگه دارنده‌ای است که نگه دارنده‌های دیگری درون خود دارد؛ مانند یک تگ <Div>که چندین تگ <div> دیگر درون خود دارد. BorderContainer به دو روش طراحی می‌شود. 1- headline 2- sidebar می‌توانید نوع روش طراحی را با خصوصیت design تعیین کنید. هر دو روش طراحی را می‌توان به 5 ناحیه تقسیم بندی کرد. 1 – بالا 2-پائین 3- چپ 4- راست 5- مرکز. هر منطقه با یک عنصر طراحی پر می‌شود. می‌توانید برای کنترل بیشتر بر روی سبک اپلیکیشن، یک منطقه را بزرگ‌تر بگیرید. مثلاً در نظر بگیرید یک BorderContainer درون یک BorderContainer اصلی دارید و دقیقاً این BorderContainer دومی در مرکز BorderContainer اصلی قرار دارد. می توانید مرکز BorderContainer دومی را به چند بخش تقسیم کنید.
کد زیر نوع طراحی headline را تعیین می‌کند. تنظیمات و پیکربندی که در کد زیر می‌بینید، مناطق بالا و پائین کل عرض صفحه را پر می‌کنند. برای این کار باید ویژگی height را با مقادیر top و bottom تنظیم کنید.
<div id=”main-pane” dojoType=”dijit.layout.BorderContainer”
design=”headline”>
در کد زیر ویژگی design را با مقدار sidebar تنظیم کردیم. Sidebar مناطق چپ و راست را به اندازه‌ی 100% ارتفاع پنجره گسترش می‌دهد. در این مثال باید ویژگی width را مانند ویژگی height، 100% در نظر بگیریم.
<div id=”main-pane” dojoType=”dijit.layout.BorderContainer”
design=”sidebar”>
در مثال دیگر منطقه‌ی مرکزی، مقداری از فضای در دسترس را پر می‌کند. این فضای قابل دسترس به اندازه‌ی مناطق دیگر بستگی دارد. تصویر زیر هر دو نوع headline و sidebar را نشان می‌دهد.
عناصر سبک Dojo
هر منطقه‌ای از BorderContainer (top، bottom، left، righ و center) می‌تواند با عناصر Dojo پر شود. این عناصر عبارتند از: AccordionContainer، SplitContainer،StackContainer و TabContainer.
می توانید مجموعه‌ای تو در تو از این عناصر بسازید و این مجموعه را درون فضای قابل دسترس صفحه تقسیم کنید. در این مجموعه بسته به مکان قرارگیری هر عنصر، عناصر به دو نوع والد و فرزند تقسیم می‌شوند. عناصر فرزند با استفاده از ویژگی region در منطقه‌ی مورد نظر قرار می‌گیرند. در کد زیر به خطوط پررنگ دقت کنید. ویژگی region با left تنظیم شده است که عنصر ContentPane را در سمت چپ صفحه ایجاد می‌کند. ContentPane یک عنصر سبک پایه است و مانند یک نگهدارنده عمل می‌کند. خط کد مشخص شده در کد زیر، TabContainer شامل اشیاء ContentPane است.
<div dojotype=”dijit.layout.ContentPane” id=”leftPane”
region=”left”>
<div dojotype = “dijit.layout.TabContainer”>
<div dojotype=”dijit.layout.ContentPane” title = “Tab 1″
selected=”true”>
Content for the first tab
</div>
<div dojotype=”dijit.layout.ContentPane” title = “Tab 2” >
Content for the second tab
</div>
</div>
</div>
تصویر زیر محتویات و مکان ایجاد شده توسط ContentPane و TabContainer را نشان می‌دهد.
AccordionContainer مجموعه‌ای از سربرگ‌های عنوان دار (در تصویر بالا Tab2 و Legend) را نگهداری می‌کند؛ اما در هر لحظه محتویات یکی از سربرگها قابل نمایش است. وقتی کاربر بر روی سربرگ مورد نظرش کلیک کند، محتویات همان سربرگ نمایش داده می‌شود. این سربرگها، نگهدارنده‌های جالبی هستند که حجم زیادی از اطلاعات را در جای کوچکی نگه می‌دارد. ArcGIS API for JavaScript یک صفحه‌ی کمکی حاوی یک سربرگ Samples دارد که شامل 12 اسکریپت ساده است و برای سبک اپلیکیشن استفاده می‌شوند. در بخش بعدی، یکی از این سبک‌ها را با اپلیکیشن ادغام می‌کنیم.
استفاده از سبک‌های Esri در اپلیکیشن
در این تمرین سبک مورد نظرمان را از Esri دانلود می‌کنیم و آن را با عناصری که توسط Dojo فراهم شده، ویرایش می‌کنیم.
1- در قدم اول باید مطمئن باشید که به وب سرور دسترسی دارید. اگر به وب سرور دسترسی ندارید و بر روی سیستمتان نصب نشده است در لینک https://httpd.apache.org/download. cgi وب سرور آپاچی را نصب کنید. وب سرورهای دیگری مانند IIS نیز استفاده می‌شوند. فرض می‌کنیم از وب سرور آپاچی استفاده کرده اید.
2- برای دسترسی به وب سرور در مرورگر https://localhost را بنویسید تا به صفحه‌ی وب سرور خود هدایت شوید. این وب سرور به پوشهی htdocs که در مسیر C:\ Program Files\Apache Software Foundation\Apache2.2\ است، اشاره می‌کند.
3- برای دسترسی به 12 اسکریپت فراهم شده‌ی Esri به لینک https://developers.arcgis.com/en/javascript/jssamples/ بروید. در جعبه‌ی جستجو Layouts را بنویسید تا لیستی از سبک‌های آماده را ببینید.
4- به پائین لیست بروید تا سبک Layout with left pane را ببینید. همانطور که در تصویر زیر می‌بینید روی عکس این آیتم کلیک کنید.
5- روی لینک Download as a zip file کلیک کنید تا دانلود شود.
6- یک پوشهی جدید با نام layout در مسیر C:\Program Files\ApacheSoftware Foundation\Apache2.2\htdocs بسازید. دقت کنید این پوشه را در زیر پوشهی htdocs بسازید. فایل دانلود شده را از حالت فشرده خارج کنید و در پوشهی layout قرار دهید. این فایل دانلود شده شامل فایل index.html و یک فایل css و چند پوشهی تصویر است.
7- در مرورگر به آدرس https://localhost/layout/index.html بروید. سبک زیر را خواهید دید.
8- فایل index.html را در در ویرایشگر متنی خود باز کنید.
9- فایل را پیمایش کنید تا به تگ <body> برسید.
10- بالاترین سطح نگهدارنده‌ی این صفحه، نگهدارنده‌ی BorderContainer است که در تگ <div> شامل قرار می‌گیرد. عناصر سبک دیگر باید در تگ <div> قرار بگیرند. بخش مشخص شده در کد زیر بالاترین سطح BorderContainer را تعیین می‌کند. دقت کنید که نوع طراحی را headline تعیین کردیم که در نتیجه نواحی بالا و پائین، کل عرض صفحه را پر خواهند کرد.
<body class=”claro”>
<div id=”mainWindow”
data-dojo-type=”dijit.layout.BorderContainer”
data-dojo-props=”design:’headline'”
style=”width:100%; height:100%;”>
<div id=”header”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’top'”>
<div id=”title”>
</div>
</div>
<div data-dojo-type=”dijit.layout.ContentPane”
id=”leftPane” data-dojo-props=”region:’left'”>
<div data-dojo-type=”dijit.layout.TabContainer”>
<div data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”title:’Tab 1′, selected:’true'”>
Content for the first tab
</div>
<div data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”title:’Tab 2′”>
Content for the second tab
</div>
</div>
</div>
<div id=”map” data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’center'”></div>
<div id=”footer”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’bottom'”>
<span id=”dataSource”>
</span>
</div>
</div>
</body>
11- درون BorderContainer چندین عنصر با دیجیت ContentPane طرح بندی شده اند. ContentPane هم متن و هم عناصر صفحه مانند TabContainer یا AccordionContainer را نگه می‌دارد.
<body class=”claro”>
<div id=”mainWindow”
data-dojo-type=”dijit.layout.BorderContainer”
data-dojo-props=”design:’headline'”
style=”width:100%; height:100%;”>
<div id=”header” data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’top'”>
<div id=”title”>
</div>
</div><div data-dojo-type=”dijit.layout.ContentPane”
id=”leftPane” data-dojo-props=”region:’left'”>
<div data-dojo-type=”dijit.layout.TabContainer”>
<div data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”title:’Tab 1′, selected:’true'”>
Content for the first tab
</div>
<div data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”title:’Tab 2′”>
Content for the second tab
</div>
</div>
</div>
<div id=”map” data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’center'”></div>
<div id=”footer” data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’bottom'”>
<span id=”dataSource”>
</span>
</div>
</div>
</body>
دقت کنید که در کد قبلی هر عنصر ContentPane یک ناحیه برای عناصر طرح بندی دارد. در این مثال، همه‌ی نواحی قابل دسترس به غیر از ناحیه‌ی سمت راست را تعیین و طرح بندی کردیم.
کد مشخص شده‌ی زیر محتویات ناحیه‌ی سمت چپ را تعیین می‌کند. یک عنصر ContentPane برای نگهداری متن و دیگر عناصر ایجاد شده است. درون این عنصر ContentPane، یک عنصر TabContainer ایجاد کردیم و دو سربرگ به این عنصر تخصیص دادیم. هر کدام از این سربرگها توسط یک ContentPane ایجاد می‌شوند.
<body class=”claro”>
<div id=”mainWindow”
data-dojo-type=”dijit.layout.BorderContainer”
data-dojo-props=”design:’headline'”
style=”width:100%; height:100%;”>
<div id=”header”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’top'”>
<div id=”title”>
</div>
</div>
<div data-dojo-type=”dijit.layout.ContentPane”
id=”leftPane” data-dojo-props=”region:’left'”>
<div data-dojo-type=”dijit.layout.TabContainer”>
<div data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”title:’Tab 1′, selected:’true'”>
Content for the first tab
</div>
<div data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”title:’Tab 2′”>
Content for the second tab
</div>
</div>
</div>
<div id=”map”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’center'”></div>
<div id=”footer”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’bottom'”>
<span id=”dataSource”>
</span>
</div>
</div>
</body>
12- در اپلیکیشن‌های متداول یک سربرگ را به راهنمای نقشه تخصیص می‌دهند. در تصویر زیر محتویات یک سربرگ شامل راهنمای نقشه است.
13- حالا که مفاهیم اساسی عناصر سبک را یاد گرفتید، می‌توانید محتویاتی به ناحیه‌ی سمت راست اضافه کنید. خطوط کد مشخص شده را اضافه کنید.
<body class=”claro”>
<div id=”mainWindow”
data-dojo-type=”dijit.layout.BorderContainer”
data-dojo-props=”design:’headline'”
style=”width:100%; height:100%;”>
<div id=”header”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’top'”>
<div id=”title”>
</div>
</div>
<div data-dojo-type=”dijit.layout.ContentPane”
id=”leftPane” data-dojo-props=”region:’left'”>
<div data-dojo-type=”dijit.layout.TabContainer”>
<div data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”title:’Tab 1′, selected:’true'”>
Content for the first tab
</div>
<div data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”title:’Tab 2′”>
Content for the second tab
</div>
</div>
</div>
<div data-dojo-type=”dijit.layout.ContentPane”
id=”rightPane” data-dojo-props=”region:’right'”>
Content for right pane
</div>
<div id=”map” data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’center'”></div>
<div id=”footer”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’bottom'”>
<span id=”dataSource”>
</span>
</div>
</div>
</body>
14- در پوشهی فشرده‌ای که دانلود کردید، یک فایل برای طرح بندی اپلیکیشن به نام layout.css وجود دارد. آن را در یک ویرایشگر متنی باز کنید.
15- عبارت #rightPane را پیدا کنید. با فشردن همزمان کلیدهای Ctrl و F پنجره‌ی جستجو باز خواهد شد. در کادر متنی موجود در پنجره عبارت #rightPane را وارد کنید. سپس دکمه‌ی find را بزنید. در بلوک کد #rightPane، ویژگی‌هایی برای تعیین رنگ پس زمینه، سبک چارچوب، رنگ متن و عرض ناحیه مشخص شده است.
#rightPane {
background-color:#FFF;
color:#3f3f3f;
border:solid 2px #224a54;
width:20%;
}
16- فایل را ذخیره کنید.
17- مرورگر وب را باز کنید و به آدرس https://localhost/layout/index.html بروید. حال باید محتویات جدیدی در ناحیه‌ی راست اپلیکیشن ببینید.
ناحیه سمت راست فعلاً فقط مقداری متن در خود جای داده است؛ اما می‌توانید محتویات مورد نظرتان مانند ویجت‌های رابط کاربری (Dijit ها) را اضافه کنید. در قدم بعدی یک AccordionContainer درون ناحیه‌ی راست قرار داده ایم.
18- حال می‌خواهیم یک AccordionContainer به ناحیه‌ی راست اضافه کنیم.
19- ابتدا به منبع AccordionContainer مانند خط کد مشخص شده‌ی زیر ارجاع می‌دهیم.
dojo.require(“dijit.layout.BorderContainer”);
dojo.require(“dijit.layout.ContentPane”);
dojo.require(“dijit.layout.TabContainer”);
dojo.require(“esri.map”);
dojo.require(“esri.arcgis.utils”);
dojo.require(“esri.IdentityManager”);
dojo.require(“dijit.layout.AccordionContainer”);
20- حال باید AccordionContainer را به سمت راست ContentPane اضافه کنیم. خطوط کد مشخص شده‌ی زیر به ContentPane که در مرحله‌ی 14 ایجاد کردیم، اضافه می‌شوند.
<div data-dojo-type=”dijit.layout.ContentPane”
id=”rightPane” data-dojo-props=”region:’right'”>
<div data-dojo-type=”dijit.layout.AccordionContainer” >
<div data-dojo-type=”dijit.layout.ContentPane” title=”Pane 1″>
Content for Pane 1
</div>
<div data-dojo-type=”dijit.layout.ContentPane” title=”Pane2″>
Content for Pane 2
</div>
<div data-dojo-type=”dijit.layout.ContentPane” title=”Pane3″>
Content for Pane 3
</div>
</div>
</div>
21- مرورگر را برای دیدن تغییراتی که در کد دادید، refresh کنید. در این تمرین سبک اپلیکیشن را با استفاده از سبک‌های آماده‌ی Esri ایجاد کردیم.
برگرفته از کتاب تولید و طراحی اپلیکیشن های Web GIS و Mobile GIS با استفاده از ArcGIS API for JavaScript
نویسنده: دکتر محمد بافقی زاده
نشر: انتشارات اکادمیک