It were not
best that we should all think alike; it is
difference of
opinion that makes horse races.
— Pudd'nhead
Wilson's Calendar
Dojo, dijit, widget —
странные слова и странная библиотека.
Но, как бы то ни было, ArcGIS
Javascript API предполагает использование
этих инструментов. А инструменты эти
очень непросто осваивать, в силу их
масштабности и слабой распространенности.
Не хватает документации и примеров.
Поэтому здесь я оставлю шаблон виджета
в стиле dijit.
Допустим,
виджет будет называться «agsdir» и его
файлы будут базироваться в папке
javascript\vs\dijit\
внутри
вебприложения.
Тогда скрипт
будет называться agsdir.js:
define("vs/dijit/agsdir",
['dojo/_base/declare', 'dijit/_WidgetBase', 'dijit/_Templated',
'dojo/_base/array', "dojo/dom-construct", "dijit/_TemplatedMixin",
"dijit/layout/ContentPane", "dijit/layout/LayoutContainer", "dijit/form/ValidationTextBox",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!./templates/agsdir.html"
],
function(declare, _WidgetBase, _Templated,
array, domConstruct, _TemplatedMixin,
ContentPane, LayoutContainer, ValidationTextBox,
_WidgetsInTemplateMixin,
dirTemplate) {
var AGSDIR = declare("vs.dijit.agsdir", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
constructor: function(params, srcNodeRef) {
params = params || {};
if (!params.map) {
throw new Error('no map defined in params for AGSDIR');
}
dojo.mixin(this, params);
},
templateString: dirTemplate,
baseClass: "layersAGSDir",
buildRendering: function() {
this.inherited(arguments);
},
postCreate: function() {
this.inherited(arguments);
},
startup: function() {
this.inherited(arguments);
var frm = dijit.byId('agsdirURLform');
frm.on("submit", dojo.hitch(this, function() {
try {
var val = dijit.byId('agsdirURLtb').get('value').trim();
this.processUI(val);
} catch(ex) {
this.log('agsdirURLform on submit, error: ' + ex.message + ex. description + ex.stack);
}
return false;
}));
dojo.byId('agsdirURLtb').focus();
}
}); // declare AGSDIR
return AGSDIR;
}); // define("vs/dijit/agsdir"
|
Внутри функции
«startup» вызывается метод «processUI». Не ищите
в этом примере реализацию этого метода,
напишите его сами — он должен делать
полезную работу. Имеющую прикладной
смысл.
Как нетрудно
заметить, скрипту нужен шаблон формы
templates/agsdir.html:
<div id="agsDirLayoutContainer" data-dojo-type="dijit/layout/LayoutContainer" data-dojo-props="design:'headline'">
<div id="agsDirTopPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<!-- текстовое поле "URL-адрес |cgis.allgis.org (arcgis/rest/services) |" -->
<table cellpadding="0" cellspacing="0"><tbody>
<tr>
<td><label>URL-адрес:</label></td>
<td> </td>
<td colspan="2">
<div id="agsdirURLform" data-dojo-type="dijit/form/Form">
<script type="dojo/on" data-dojo-event="submit">
console.log('agsdirURLform.submit');
return false;
</script>
<input name="agsdirURLtb" id="agsdirURLtb" type="text" required="true"
value="cgis.allgis.org"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="regExp:'[^\\s]+',
invalidMessage:'http://cgis.allgis.org/arcgis/rest/services',
promptMessage:'cgis.allgis.org/arcgis/rest/services',
missingMessage:'http://cgis.allgis.org',
placeHolder:'http://server/arcgis/rest/services'" />
<button id="agsdirURLsubmit"
data-dojo-type="dijit/form/Button"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel: false"
type="submit">
Go
</button>
</div> <!-- form -->
</td>
</tr>
</tbody></table>
</div> <!-- agsDirTopPane -->
</div>
|
CSS рассматривать
не будем, эти вопросы решаются вполне
традиционно.
С виджетом
понятно. А как его создать, внедрить в
страницу?
Где-то в файле
index.html, перед подключением dojo:
<script type="text/javascript">
var path_location = location.pathname.replace(/\/[^/]+$/, '');
var dojoConfig = {
parseOnLoad: true,
packages: [{
name: "utilities",
location: path_location + '/javascript'
}, {
name: "vs",
location: path_location + '/javascript/vs'
}]
};
</script>
|
Что дает нам
неймспейсы «vs» и «utilities».
Далее, где-то
в скрипте приложения, по событию нажатия
на кнопку, допустим, пишем код создания
экземпляра виджета:
require(["vs/dijit/agsdir"], function(agsdir) {
var agsdirDijit = dijit.byId('agsdirDijit');
if(agsdirDijit) { ; }
else {
agsdirDijit = new agsdir({
id : 'agsdirDijit',
map : map
});
dojo.byId('agsdirPanel').appendChild(agsdirDijit.domNode);
}
if (dojo.isIE === 8) {
setTimeout(function () {
agsdirDijit.startup();
}, 100);
} else {
agsdirDijit.startup();
}
});
|
Как несложно
заметить, где-то в HTML должен быть элемент
с id='agsdirPanel', предназначенный для
всобачивания в него созданный виджет.
Как-то так.
original post http://vasnake.blogspot.com/2013/09/dijit.html
Комментариев нет:
Отправить комментарий