私は Dojo を初めて使用し、Dojo フレームワークに基づく Esri の Javascript API を使用してマップ アプリケーションを開発しようとしています。
私は、アプリケーションのさまざまな部分をさまざまな JS ファイルに分離し、Dojo の AMD ローダーを使用してそれらをロードすることから始めて、ゼロから始めることにしました。
ここに私がこれまでに持っているものがあります.whileページは現在動作しており、Firebugはjavascriptファイルが正しくアクセスされていることを確認していますが、dojoアプリケーションのjavascriptはどれも動作していません.
以前にこれを扱ったことがあり、正しい方向に私を向けることができれば、本当に感謝しています.
メイン HTML ページ:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="nihilo">
<!--[if lt IE 9]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="header">
<div id="logo">
<a href="http://www.co.washington.mn.us/"><img src="img/clearlogo.png" alt="Washington County Logo" /></a>
</div>
<div class="login">
<a id="loginLink" href=""></a>
</div>
<div id="title">
<h1></h1>
</div>
</div>
<div id="clear" style="clear:both;"></div>
<div class="container">
<div id="sidebar">
<div class="inner">
<div id="edit" >
<h2 id="addText" >Add Features:</h2>
<div id="editor">
</div>
</div>
<h2>Find Address:</h2>
<div id="searchAddr"></div>
<h2>Find Name:</h2>
<div id="searchName"></div>
</div>
</div>
<div id="map">
</div>
<div class="clear"></div>
</div>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>-->
<script>
var dojoConfig = {
parseOnLoad: false,
packages: [
{name: "app", location: "/new_app/js/app"}
],
has: {
"dojo-firebug": true,
"dojo-debug-messages": true
},
};
</script>
<script src="//serverapi.arcgisonline.com/jsapi/arcgis/3.5/" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/sha512.js"></script>
</body>
</html>
主な JS:
require([
"app/ui",
"app/app"
], function(UI, App) {
var ui = new UI();
var app = new App();
app.start();
});
UIJS:
define([
"dojo/dom",
"dijit/Dialog",
"dijit/form/Form",
"dojo/_base/connect",
"dijit/form/Button",
"dojo/request",
"dojo/dom-attr",
"dojo/json",
"dojo/domReady!"], function(declare, Dialog) {
// Class with custom properties and methods
return declare(null, {
loginText: '<div id="loginForm"><label for="email">User:</label> <input id="email" type="text" name="email" /><br /><label for="password">Password:</label> <input id="password" type="password" name="password" id="password"/><br /><button id="submitLogin">Login</button></div>',
messageDialog: new Dialog({
title: "Message",
style: "width:400px;"
}),
loginDialog: new Dialog({
title: "User Login",
content: loginText,
style: "width: 400px;"
}),
loginButton: new Button({
label: "Login",
onClick: login()
}, "submitLogin"),
start: function() {
checkLogin();
},
login: function() {
ui.loginDialog.hide();
var username = dojo.byId("email");
var password = dojo.byId("password");
dojo.attr(password, "value", hex_sha512(dojo.attr(password, "value")).toUpperCase());
request.post("index.php", {
data: {
a: "login",
p: dojo.attr(password, "value"),
email: dojo.attr(username, "value"),
},
handleAs: "json",
timeout: 10000
}).then(function(response) {
checkLogin();
});
},
checkLogin: function() {
request.post("index.php", {
data: {
a: "login_check"
},
handleAs: "json",
timeout: 10000
}).then(function(result) {
link = dom.byId("loginLink");
if (result.login == "success") {
link.innerHTML = "Logout";
dojo.attr(link, "href", "?a=logout");
if (ui.loginDialogHandle)
dojo.disconnect(ui.loginDialogHandle);
}
else {
link.innerHTML = "Login";
dojo.attr(link, "href", "#");
ui.loginDialogHandle = dojo.connect(link, "onclick", ui.loginDialog, "show");
}
});
}
})
});
アプリ JS:
define([
"esri/map"
], function(Map) {
return declare(null, {
map: null,
start: function() {
map = new esri.Map("map", {
center: [-92.881154, 45.166838],
zoom: 14,
basemap: "gray"
})
}
})
});