ArcGIS API for Flex的Navigation slider的风格样式及定位
来源:互联网 发布:node mysql 留言板 编辑:程序博客网 时间:2024/05/27 20:21
文by:MoMo(cymoe@163.com)
最近一直在看ArcGIS API for Flex的相关资料,下了ESRI的sample在机器上跑的时候,突然很想动手改改UI风格和元素在界面中的定位,却被那个Navigation slider弄得有些郁闷(主要是不知该如何下手)。说起Navigation slider,其实它就是GIS界面上那个可以拖动滑块实现放大缩小功能的导航条——它主要由三个UI元素组成:滑块(slider)、缩小按钮(zoom-in button)、放大按钮(zoom-out button)。
查了些资料,总结了两种在flex builder4中修改Navigation slider样式风格和定位的方法:
首先,在flex中可通过引用地图代码的方式先实现地图加载(前提:你的电脑已连在因特网上),在Flash builder4中新建工程,并新建“MXML 应用程序”型的mxml页,在页面源代码中插入以下的引用:
编译运行后可看到ESRI的地图界面,那个Navigation slider默认状态下是位于界面的左上角,呈半透明黑色的垂直条状。
为方便讲解,我在截图中将它着色为红色半透明状态以示区别,并在<esri:Map中添加了logoVisible="false"控制,让右下角的ESRI LOGO处于不显示状态,贴图如下:
下面开始进入正题——接下来要做的事情是:将左上角的这个Navigation Slider移动到右上角。
方法一:
1. 在mxml文件中给<esri:Map id="map"这个标签添加styleName,可暂时先将这个css类名定义为mapStyle。
于是上文提到的那段代码,现在可写成如下形式:
2. 接下来,需要在.css文件中添加对mapStyle这个类的属性控制代码:
这样我们就实现了把Navigation Slider做了界面重定位,通过在CSS的mapStyle类中再添加一个新类名的定制,给navigation slier定义了navigationStyle类来控制上、左、右的距离,实现定位。
实际上,修改Navigation Slider内部的的背景色和放大缩小按钮外观,也同样是通过这种方式,添加相关css类名进行属性,实现对外观的控制(例如在navigationStyle内部添加navigation-slider-style-name:navigationSlider;这样便可进一步针对.navigationSlider这个类进行相关属性定制)。
备注:
关于这种方式的UI定制可参考《ArcGIS+Flex+API的地图应用》一文,其中的“ArcGIS Flex API –设置控件的样式”章节的表述较为详细,文中的Navigation Toolbar即Navigation Slider,并针对滑块、放大按钮、缩小按钮、导航条的工具提示样式分别设定了css类名分别为:NavigationSlider, NavigationMinusButton, NavigationPlusButton, ToolTip。
方法二:
上文中的“方法一”实际上是针对flex3开发环境时用的比较多的经典办法,从ESRI过去的一些旧资料中就可以略知一二。但自从esri发布FLEX API2.0之后,在flex4的开发环境下可直接在css新版语法中通过添加命名空间的方式进行定制,具体步骤如下:
1、在css文件中添加命名空间,代码如下:
2、按照flex4的css规则进行样式定制,代码如下:
这就实现了对Navigation Slider这个工具条的定位控制。
补充:
关于Navigation slider内部元素的UI定制
在flex4中,要实现定制内部的滑块和放大缩小按钮的UI,主要步骤如下:
1、在css文件中实现对Navigation类的类引用(classReference)定义,即:用styleName属性引用NavigationSkin:
2、在src文件夹下新建UIcomponents文件夹,在该文件内新建几个spark组件皮肤(即内部代码是<s:Skin开头的的mxml页),分别命名为NavigationSkin.mxml,NavigationZoomInButtonSkin.mxml,NavigationZoomOutButtonSkin.mxml(注:这几张页面可通过ESRI官网的sample下载到)。
这几张页面之间的关系不言而喻——NavigationSkin.mxml页通过设定skinClass的方式包含了NavigationZoomInButtonSkin和NavigationZoomOutButtonSkin。
在NavigationSkin.mxml中建立一个VGroup,依次加入放大按钮、滑块、缩小按钮,引用这三个组件的代码如下:
此外,要改变Navigation Slider的背景色和透明度,则只需在spark皮肤中进行相关更改即可,本例中是直接修改NavigationSkin.mxml的这一行<s:SolidColor alpha="0.5" color="0x2B7EA7"/>,alpha代表透明度,0x2B7EA7代表颜色为#2B7EA7:
如此更改后的界面截图如下:
备注:
要进一步定制Navigation Slider的放大缩小按钮的外观风格,可进入NavigationZoomInButtonSkin.mxml和NavigationZoomOutButtonSkin.mxml做进一步的UI定制,例如替换掉图标,只需修改"@Embed(source=”的图片引用路径即可。
最后附上:在线参考的Concepts - ArcGIS API for Flex,网址是http://help.arcgis.com/en/webapi/flex/help/index.html
在该页找到如下图所示的目录选项,即可实现对的Navigation Slider风格样式定制方法:
- ArcGIS API for Flex的Navigation slider的风格样式及定位
- ArcGIS API for Flex的Navigation slider的风格样式及定位
- arcgis api for js共享干货系列之二自定义Navigation控件样式风格
- arcgis api for js入门开发系列十 自定义Navigation控件样式风格(含源代码)
- Flex arcgis中的Navigation样式
- ArcGIS API for Flex (使用ArcGIS API for Flex 创建一个新的地图项目)
- ArcGIS Viewer for Flex(浏览器的样式) .(转帖)
- ArcGIS API for Flex 扩展 - 获取Polygon的中心点坐标
- ArcGIS API for Flex入门 - 3.数据的绑定
- ArcGis server api for flex widget的 理解
- ArcGis server api for flex widget的 理解--自定义组件。
- arcgis api for flex 两种鹰眼的实现方法
- 关于ArcGIS Server API for Flex 模糊查询的方法
- ArcGIS API for Flex实现的实时监控功能
- ArcGIS Api For Flex 划选查询功能的实现
- ArcGIS API for Flex 扩展 - 获取Polygon的中心点坐标
- ArcGIS API for Flex(三) 地图之间的切换
- ArcGIS API For Flex创建比例尺ScaleBar样式
- POJ 1045 Bode Plot
- 命令行参数的使用、goto标签的使用以及for循环中局部变量声明问题
- SQL2008不允许修改表结构
- 一个C++拷贝构造函数的例子
- sd卡转载
- ArcGIS API for Flex的Navigation slider的风格样式及定位
- 如何在一个事件中,打开一个新窗体【附打开一个既存窗体】
- Linux中怎样去定义别名
- mysql菜鸟常遇问题(转自老叶的博客)
- js传递中文参数乱码(ajax,pot,ge)
- MyEclipse连接MySQL的方法
- LNK图标漏洞木马出现新变种 可利用快捷方式远程攻击
- 外键约束方式(转)
- SharpZipLib 数据压缩