ArcGIS API For JavaScript官方文档之Dojo——⑤Dojo Layouts

翻译 2018年04月15日 17:34:19

Dojo layout dijits

1、使用Dijit layout widgets

    dojo的layout dijits提供了一种使用最少努力创建灵活布局的方法。ArcGIS JavaScript API 包含DOJO UI库,因此您可以使用Dojo layout dijits创建应用程序,这些应用程序将map和分析功能整合到一个可视化且具有吸引力的设计中。

    ArcGIS JavaScript API的示例提供了一种很好的方法来学习如何使用api中可用的特定map和分析功能。不幸的是,当构建具有此功能的web应用程序时,有时需要花费更多的时间来解决如何安排页面上的各种HTML UI元素,而不是使用arcgis JavaScript编写代码。

    除了用于用户交互的map或者显示分析结果的元素之外,每个应用程序通常都提供一个或多个UI元素。由于arcgis javascript api包含了所有dojo UI库,所以您可以使用Dojo BorderContainer轻松地以标准方式列出这些元素。

    每个BorderContainer中的实例允许最多5个不同区域:top、bottom、right、left和center。每个区域通常包含下列dojo布局元素之一:

  • AccordionContainer
  • ContentPane
  • SplitContainer
  • StackContainer
  • TabContainer

    若要将一个区域分为多个部分,您可以创建嵌套的BorderContainers。

    BorderContainer的"design"属性定义了如何排列子元素。"design"属性的有效值为"headline"和"sidebar"。如果值设置为headline,则top和bottom区域优先,并拉伸至100%width。

    

    将"design"属性值设置为"sidebar",将right和left区域延伸至100%的height。


    每个子元素的位置都是用"region"属性设置的。需要注意的是,对于top和bottom区域,您不应该设置宽度,只设置高度。对于right和left区域不设置高度,只设置宽度。中心区域不应该设置宽度或高度,因为该元素将填充剩余空间。

    设计考虑:

  • BorderContainer的“gutters”属性默认为true,它将在所有子元素周围添加一个5pxmargin。
  • 使用CSS确保html和body标签使用整个视图口。
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
  • 再body标签中设置Dojo的theme和应用程序background color
<body class="soria" style="background-color: steelblue; overflow: hidden;">
  • body标签内部的第一个元素应该是BorderContainer,如果需要,使用"style"属性添加总margin
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 96%; height: 95%;
margin: 2%; border:solid 3px silver;">
  • 使用Dojo ContentPane来为map div使用,因此它与其他UI元素相对正确地定位。ContentPane提供了一个“resize”事件来重新定位和调整地图大小。
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:solid thin silver;
overflow:hidden;"></div>
    帮助文档的示例代码部分包含几个布局示例,这些示例展示使用BorderContainer构建的简单用户界面。

ArcGIS API for JavaScript 开发教程+DOJO指南+配置教程

  • 2014年10月20日 14:14
  • 14.87MB
  • 下载

关于ArcGIS API for JavaScript与Dojo

一、为什么说ArcGIS API for JavaScript是构建于Dojo之上的? 1. 编写ArcGIS API for JavaScript的ESRI开发者使用Dojo来简化他们的开发过程,...
  • jinxiumeihappy
  • jinxiumeihappy
  • 2014-09-16 16:20:33
  • 1750

第三篇 Arcgis api for js之dojo框架使用

学习要点: 1、dojo框架; 2、dojo框架下类的定义与继承; 3、dojo资源: http://dojotoolkit.org/api/ http://dojotoolkit.org/downl...
  • neil89
  • neil89
  • 2015-08-27 15:01:08
  • 8945

ArcGIS API for JavaScript 需要在DoJo中加载的资源

The amount of Dojo you use when you work with the ArcGIS API for JavaScript is up to you, but at a m...
  • lc_2014c
  • lc_2014c
  • 2015-06-06 17:18:49
  • 1096

解决ArcGISServer JavaScript API dojo未定义

ArcGISServer JavaScript API是才用的utf-8编码,当我们建的网站设置成gb2312编码时,就会报dojo未定义的错误,此时只需在引入JavaScript api时声明utf...
  • zjt107
  • zjt107
  • 2012-02-08 12:15:03
  • 3983

arcgis for js 从入门到放弃二:dojo初识和arcgis的多种写法

关于arcgis api 和dojo的关系,只需知道该js api是构建于dojo上,从而充分利用dojo来屏蔽各浏览器差异。 这个框架又大又冷门。不过所幸,玩arcgis对dojo不需要懂太多,很多...
  • qq_36722175
  • qq_36722175
  • 2017-07-08 15:27:07
  • 1264

ArcGIS API for JavaScript在IDEA增加dojo框架的代码提示功能

最近在研究ArcGIS API for JavaScript,但好像不可避免的要遇到dojo框架的学习与使用,因为ArcGIS API for JavaScript 就是基于dojo开发的。今天...
  • shengshengshiwo
  • shengshengshiwo
  • 2018-03-19 00:04:24
  • 51

通过ARCGIS for Javascript api 加载数据 ,并显示在dojo的FilteringSelect上

首先创建一个FeatureLayer,不加载到地图上,调用feature layer的query 方法 var treeList = new esri.layers.FeatureLayer...
  • lowkeyway
  • lowkeyway
  • 2012-03-20 19:43:48
  • 2794

dijit之TooltipDialog

dijit之TooltipDialog
  • qingqingzijinxin
  • qingqingzijinxin
  • 2016-08-07 16:44:23
  • 776

AcrGS For JavaScript API Info Window With Chart(带饼图的提示框)————(二十二)

描述:    在Info Window中显示饼图的示例   引用联接:http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sam...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2013-01-14 16:06:39
  • 3214
收藏助手
不良信息举报
您举报文章:ArcGIS API For JavaScript官方文档之Dojo——⑤Dojo Layouts
举报原因:
原因补充:

(最多只允许输入30个字)