1.2.3 ArcGIS Server JavaScript API 与 DOJO
2014-10-24 21:21
204 查看
1.2.3 ArcGIS Server JavaScript API 与 DOJO
构建于Dojo之上，充分利用了Dojo在屏蔽各种浏览器差异上的优势
ESRI javaScript API
dojo
FF IE
Safari others
Dojo主要由三大模块组成，Core：Ajax，事件，基于CSS的查询，动画以及JSON等相关操作API。
Dijit：是一个可更换皮肤，基于模板的web界面控制库，包含许多简单易用的小部件（widget）
DojoX：新颖的代码和空间， 如DateGrid，Chart，跨浏览器矢量绘图等。
dijit dojox
小部件
core UTIL
Dojo是一个分层的体系架构，与java类似，它把所有的API分成不同的包，当需要某个API时，只需导入这个API所在的包。
Dojo基础知识
定义了javascript对象之后，可以使用点操作符访问或设置对象中的每一个属性
var myHash = {
str_attr : "foo",
int_attr : 7,
bool_attr : true,
func_attr : function(){}
};
console.log(myHash.str_attr);
myHash.str_attr = "bar";
继承：
dojo.declare(
"shape",//类名
null,//无父类，使用null
{
color: 0,
setColor : function(color){
this.color = color;
}
}
);
使用：
var s = new Shap();
console.log(s.color);
s.setColor(0x000FF);
console.log(s.color);
dojo.declare(
"Circle",
Shape,
{
radius : 0,
constructor : function(radius){
this.radius = radius || this.radius;
},
setRadius : fucntion(radius){
this.radius = radius;
}
area : function(radius){
return Math.PI * this.radius * this.radius;
}
}
);
在dojo中，模块与子模块之间用“.” 进行分隔，对应到目录中，就是目录与子目录。
dojo.require("dijit.form.Button");
1.5.4 使用模块与包管理源代码
Shape.js
dojo.provide("com.GeoWeb2.Shape.Shape");
dojo.declare(
"com.GeoWeb2.Shape.Shape",
null,
{
color:0,
setColor:function(color){
this.color = color;
}
}
);
S2. 页面布局设计
能否成功利用Arcgis javascript api 开发geoweb应用，很大程度上取决于堆Dojo的掌握程度。
Dojo的小部件与布局小部件， 页面总体框架
Dojo中提供的布局小部件可以分为如下三类，主要在Dijit中。
1.面板： ContentPane，FloatingPane，ExpandoPane等。 后两者在DojoX中。
2.对齐方式容器：用以盛放屏面类小部件，并且可以设置这些小部件的排列方式。 BorderContainer, LayoutContainer,SplitContainer...
3.堆叠容器：此类的小部件可以把前小部件层叠在一起，而一次只显示一个屏面。AccordionContainer, TabContainer 与 StackContainer等
2.1.2 使用面板组织页面元素
ContentPane面板用法：
<head>
<title>
ContentPane
</title>
<style>
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/rundra.css";
</style>
<script type="text/javascript">
var djConfig = {parseOnLoad : true};
</script>
<script
type = "text/javascript" src = "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5">
</script>
<script
type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="rundra">
<div dojoType="dijit.layout.ContentPane" id="slot1" style="width:100px;height:200px;float:left">
<div dojoType="dijit.form.Button">
相关信息
</div>
</div>
</body>
静态创建dojo的小部件一般包括三个步骤：
***通过dojoType来关联
1.引入小部件标签属性解析功能模块。 由于页面中通过dojoType标签属性使用了Dojo的小部件，但是这并不是标准的html，浏览器不能直接对其解析，因此需要在页面加载完成以后，对整个页面的所有标签属性进行解析，将其转换为浏览器可以识别的标记，而这是通过将djConfig的parseOnLoad属性指定为true来实现。但这还是不够，解析小部件标签属性需要用到dojo.parse功能模块，因此还需要调用调用dojo.require将其包含进来。
2.在页面的<head></head>标签之间引入即将使用的小部件模块。
3.在页面中需要使用小部件的位置，写入小部件标签属性。 如果使用按钮小部件，则为<div dojoType="dijit.form.Button">OK</div>
2.1.2.2 FloatingPane面板
dojox.layout.FloatingPane是浮动面板，可以模拟windows窗口的效果。
<div dojoType="dijit.form.Button">
相关信息
<script type="dojo/method" event="onClick">
makeAboutBox();
</script>
</div>
head的javascript段中加入如下代码：
dojo.require("dojox.layout.floatingPane");
function(){
var floaterDiv = document.createElement("div");
dojo.body().appendchild(floatDiv);
floatDiv.appendChild(document.createElement("br"));
var textarea = document.createElement("div");
textarea.innerHtml="加载。。。";
var tmp = new dojox.layout.FloatingPane(
{
title:"<b>关于本应用程序</b>",
id : "aboutBox",
closeable : "true",
resizable : "true",
dockable : false,
resizeAxis : 'xy',
}, floaterDiv
);
tmp.startup();
tmp.resize({
w:350,
h:200
});
dojo.style(tmp.domNode, "top","100px");
dojo.style(tmp.domNode, "left", "100px");
dojo.syle(tmp.domNode,"z-index","500");
tmp.show();
dojo.xhrGet(
url: "about.html",
load:function(response,ioArgs){ //回调函数
textarea.innerHtml = response;
},
error:function(response,ioArgs){
alert("出错，原因是" + respose);
textarea.innerHtml = '不能找到指定的html';
},
handleAs : "text"
//返回的数据类型
);
tmp.bringToTop(); //将其显示在其他面板之上
}
eval()函数把text转换为JSON对象
构建于Dojo之上，充分利用了Dojo在屏蔽各种浏览器差异上的优势
ESRI javaScript API
dojo
FF IE
Safari others
Dojo主要由三大模块组成，Core：Ajax，事件，基于CSS的查询，动画以及JSON等相关操作API。
Dijit：是一个可更换皮肤，基于模板的web界面控制库，包含许多简单易用的小部件（widget）
DojoX：新颖的代码和空间， 如DateGrid，Chart，跨浏览器矢量绘图等。
dijit dojox
小部件
core UTIL
Dojo是一个分层的体系架构，与java类似，它把所有的API分成不同的包，当需要某个API时，只需导入这个API所在的包。
Dojo基础知识
定义了javascript对象之后，可以使用点操作符访问或设置对象中的每一个属性
var myHash = {
str_attr : "foo",
int_attr : 7,
bool_attr : true,
func_attr : function(){}
};
console.log(myHash.str_attr);
myHash.str_attr = "bar";
继承：
dojo.declare(
"shape",//类名
null,//无父类，使用null
{
color: 0,
setColor : function(color){
this.color = color;
}
}
);
使用：
var s = new Shap();
console.log(s.color);
s.setColor(0x000FF);
console.log(s.color);
dojo.declare(
"Circle",
Shape,
{
radius : 0,
constructor : function(radius){
this.radius = radius || this.radius;
},
setRadius : fucntion(radius){
this.radius = radius;
}
area : function(radius){
return Math.PI * this.radius * this.radius;
}
}
);
在dojo中，模块与子模块之间用“.” 进行分隔，对应到目录中，就是目录与子目录。
dojo.require("dijit.form.Button");
1.5.4 使用模块与包管理源代码
Shape.js
dojo.provide("com.GeoWeb2.Shape.Shape");
dojo.declare(
"com.GeoWeb2.Shape.Shape",
null,
{
color:0,
setColor:function(color){
this.color = color;
}
}
);
S2. 页面布局设计
能否成功利用Arcgis javascript api 开发geoweb应用，很大程度上取决于堆Dojo的掌握程度。
Dojo的小部件与布局小部件， 页面总体框架
Dojo中提供的布局小部件可以分为如下三类，主要在Dijit中。
1.面板： ContentPane，FloatingPane，ExpandoPane等。 后两者在DojoX中。
2.对齐方式容器：用以盛放屏面类小部件，并且可以设置这些小部件的排列方式。 BorderContainer, LayoutContainer,SplitContainer...
3.堆叠容器：此类的小部件可以把前小部件层叠在一起，而一次只显示一个屏面。AccordionContainer, TabContainer 与 StackContainer等
2.1.2 使用面板组织页面元素
ContentPane面板用法：
<head>
<title>
ContentPane
</title>
<style>
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/rundra.css";
</style>
<script type="text/javascript">
var djConfig = {parseOnLoad : true};
</script>
<script
type = "text/javascript" src = "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5">
</script>
<script
type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="rundra">
<div dojoType="dijit.layout.ContentPane" id="slot1" style="width:100px;height:200px;float:left">
<div dojoType="dijit.form.Button">
相关信息
</div>
</div>
</body>
静态创建dojo的小部件一般包括三个步骤：
***通过dojoType来关联
1.引入小部件标签属性解析功能模块。 由于页面中通过dojoType标签属性使用了Dojo的小部件，但是这并不是标准的html，浏览器不能直接对其解析，因此需要在页面加载完成以后，对整个页面的所有标签属性进行解析，将其转换为浏览器可以识别的标记，而这是通过将djConfig的parseOnLoad属性指定为true来实现。但这还是不够，解析小部件标签属性需要用到dojo.parse功能模块，因此还需要调用调用dojo.require将其包含进来。
2.在页面的<head></head>标签之间引入即将使用的小部件模块。
3.在页面中需要使用小部件的位置，写入小部件标签属性。 如果使用按钮小部件，则为<div dojoType="dijit.form.Button">OK</div>
2.1.2.2 FloatingPane面板
dojox.layout.FloatingPane是浮动面板，可以模拟windows窗口的效果。
<div dojoType="dijit.form.Button">
相关信息
<script type="dojo/method" event="onClick">
makeAboutBox();
</script>
</div>
head的javascript段中加入如下代码：
dojo.require("dojox.layout.floatingPane");
function(){
var floaterDiv = document.createElement("div");
dojo.body().appendchild(floatDiv);
floatDiv.appendChild(document.createElement("br"));
var textarea = document.createElement("div");
textarea.innerHtml="加载。。。";
var tmp = new dojox.layout.FloatingPane(
{
title:"<b>关于本应用程序</b>",
id : "aboutBox",
closeable : "true",
resizable : "true",
dockable : false,
resizeAxis : 'xy',
}, floaterDiv
);
tmp.startup();
tmp.resize({
w:350,
h:200
});
dojo.style(tmp.domNode, "top","100px");
dojo.style(tmp.domNode, "left", "100px");
dojo.syle(tmp.domNode,"z-index","500");
tmp.show();
dojo.xhrGet(
url: "about.html",
load:function(response,ioArgs){ //回调函数
textarea.innerHtml = response;
},
error:function(response,ioArgs){
alert("出错，原因是" + respose);
textarea.innerHtml = '不能找到指定的html';
},
handleAs : "text"
//返回的数据类型
);
tmp.bringToTop(); //将其显示在其他面板之上
}
eval()函数把text转换为JSON对象
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ArcGIS Server 9.3 JavaScript API实战（二）----一个具体的小系统示例介绍
- ArcGis Server Javascript API 安装配置实录
- ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）（续）纯代码
- arcgis api for javascript graphiclayer dojo框架下画图图层的显示与清除
- 离线部署ArcGIS Server 内置JavaScript Viewer的JS API
- ArcGIS Server javascript API 1.6 本地离线包
- ArcGIS Server开发教程系列（7）使用ArcGIS API for Javascript-Hello World
- ArcGIS API for JavaScript 需要在DoJo中加载的资源
- Arcgis server发布电子地图（7）ArcGIS API For Javascript之查询功能实践/打卡
- 关于ArcGIS API for JavaScript与Dojo
- ArcGIS Server 9.3 JavaScript API实战----一个具体的小系统示例介绍
- arcgis server javascript api 唯一值渲染
- ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）
- S1.1 Arcgis Server Javascript API 介绍
- 在本地部署离线ArcGIS JavaScript API的Library和SDK，以II7为例和ArcGIS Server（Java）
- ArcGIS Server10.1 Javascript API的本地部署
- 关于ArcGIS API for JavaScript与Dojo
- ArcGIS API for JavaScript 4.3 与ArcGIS Server联动使用【地图服务】
- ArcGIS API for JavaScript在IDEA增加dojo框架的代码提示功能
- 关于ArcGIS API for JavaScript与Dojo