Flash builder 4.5支持Android平台之初体验

来源：互联网发布：td lte网络编辑：程序博客网时间：2024/05/21 00:51

Flash builder 4.5可以支持Android平台，俺尝试写了一些东西，算是第一次亲密接触。想法是这样的：将一些点的经纬度投射到Google Map上，并可浏览相关点的信息。

数据储存

数据库使用MS SQL server 2008 R2 X64版本，创建数据表【Map201105】，该表描述点信息：

CREATE TABLE [dbo].[Map201105](

[id] [int] IDENTITY(1,1) NOT NULL,

[bianhao] [int] NULL,

[zhengqibiaoshi] [nvarchar](255) NULL,

[kehumingcheng] [nvarchar](255) NULL,

[jiancheng] [nvarchar](255) NULL,

[dengluyu] [nvarchar](255) NULL,

[DVRtongdaohao] [int] NULL,

[qianduangaicanshu] [nvarchar](255) NULL,

[zhucedidian] [nvarchar](255) NULL,

[zhushebeiID] [nvarchar](255) NULL,

[jintouID] [nvarchar](255) NULL,

[ADSL] [nvarchar](255) NULL,

[GD163] [nvarchar](255) NULL,

[GXSJ] [nvarchar](255) NULL,

[BMQ] [nvarchar](255) NULL,

[XSJ] [nvarchar](255) NULL,

[CRMzhuangtai] [nvarchar](255) NULL,

[tongduan] [nvarchar](255) NULL,

[shigongfankui] [nvarchar](255) NULL,

[xitonghuidanqingkuang] [nvarchar](255) NULL,

[yanshou] [nvarchar](255) NULL,

[beizhu] [nvarchar](255) NULL,

[jingdu] [float] NULL,

[weidu] [float] NULL,

CONSTRAINT [PK_Map201105] PRIMARY KEY CLUSTERED

(

[id] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

这里注意[jingdu]和[weidu]列，表示在GoogleMap上投点坐标，由于使用手持GPS测量数据使用度分秒表示，所有俺创建另外一个表记录这些测量的数据，【Maplatlng】，

CREATE TABLE [dbo].[Maplatlng](

[id] [int] IDENTITY(1,1) NOT NULL,

[Map110id] [int] NULL,

[Lat] [int] NULL,

[Lat_du] [int] NULL,

[Lat_fen] [int] NULL,

[Lat_miao] [float] NULL,

[Lng] [int] NULL,

[Lng_du] [int] NULL,

[Lng_fen] [int] NULL,

[Lng_miao] [float] NULL,

CONSTRAINT [PK_Maplatlng] PRIMARY KEY CLUSTERED

(

[id] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

ALTER TABLE [dbo].[Maplatlng] WITH CHECK ADD CONSTRAINT [FK_Maplatlng_Map201105] FOREIGN KEY([Map110id])

REFERENCES [dbo].[Map201105] ([id])

ALTER TABLE [dbo].[Maplatlng] CHECK CONSTRAINT [FK_Maplatlng_Map201105]

列[Map110id]是关联表【Map201105】外键。

JAVA对象

使用Hibernate持久化数据，变成Java对象，Map201105映射文件：

<?xml version="1.0"?>

<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"

"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

<hibernate-mapping>

</id>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

<set fetch="select" inverse="true" lazy="false" name="maplatlngs"

sort="unsorted" table="Maplatlng">

<key>

</key>

<one-to-many class="com.les.Gmap.Maplatlng"/>

</set>

</class>

</hibernate-mapping>

Maplatlng映射文件：

<?xml version="1.0"?>

<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"

"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

<hibernate-mapping>

</id>

<many-to-one name="map201105" class="com.les.Gmap.Map201105" fetch="select">

</many-to-one>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</property>

</class>

</hibernate-mapping>

从映射文件可以看出两个映射类之间的关系是多对一关系。

LCDS配置

使用LCDS 3.1数据管理属性，配置文件data-management-config加入两个destination

<source>com.les.Gmap.GMapAssembler</source>

<scope>application</scope>

<item-class>com.les.Gmap.Map201105</item-class>

</metadata>

</network>

<fill-method>

<name>getOnArtist</name>

<params>java.lang.String,java.lang.Integer</params>

</fill-method>

</server>

</properties>

</destination>

<source>com.les.Gmap.GMaplatlngAssembler</source>

<scope>application</scope>

<item-class>com.les.Gmap.Maplatlng</item-class>

</metadata>

</network>

<fill-method>

<name>getOnArtist</name>

<params>java.lang.String,java.lang.Integer</params>

</fill-method>

</server>

</properties>

</destination>

第一个destination提供点的信息，特别是坐标信息，第二个destination提供经纬度数据

Flex呈现

新建一个Flex手机项目，选定Android平台，选择“卡片式应用程序”，一个卡片用于呈现地图，另一个呈现数据。

呈现Map的View：

<?xml version="1.0" encoding="utf-8"?>

<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:components="spark.components.*"

xmlns:services="services.*"

xmlns:supportClasses="spark.skins.mobile.supportClasses.*"

creationComplete="application1_creationCompleteHandler(event)" title="Map">

<fx:Declarations>

<s:CallResponder id="getOnArtistResult"/>

<services:Map201105Service id="map201105Service" result="listDataService_onselectresult(event)" fault="onfault(event)"/>

<s:ArrayCollection id="wx"/>

</fx:Declarations>

<s:VGroup left="10" right="10" top="10" bottom="10">

<s:HGroup id="HKBox" width="100%" height="5%">

<s:Label id="menucomment" text="水韵尚都" width="20%" textAlign="center"/>

<components:List id="combobox01" width="26%" height="48"

change="combobox01_changeHandler(event)"

dataProvider="{getOnArtistResult.lastResult}" labelField="jintouId"/>

<s:TextInput id="textinput01" width="39%" text="输入建筑工地名称" color="#221B46"

fontSize="18" focusIn="textinput01_focusInHandler(event)"

focusOut="textinput01_focusOutHandler(event)"/>

<s:Button id="button01" width="15%" label="搜索" click="button01_clickHandler(event)"/>

</s:HGroup>

<s:HGroup id="HDBox" width="100%" height="100%">

</s:HGroup>

</s:VGroup>

<fx:Script>

<![CDATA[

import com.google.maps.LatLng;

import com.google.maps.Map;

import com.google.maps.MapEvent;

import com.google.maps.MapOptions;

import com.google.maps.MapType;

import com.google.maps.controls.PositionControl;

import com.google.maps.controls.ScaleControl;

import com.google.maps.controls.ZoomControl;

import com.google.maps.overlays.Marker;

import com.google.maps.overlays.MarkerOptions;

import com.google.maps.styles.FillStyle;

import com.google.maps.styles.StrokeStyle;

import mx.events.FlexEvent;

import mx.rpc.events.FaultEvent;

import mx.rpc.events.ResultEvent;

import spark.events.IndexChangeEvent;

private var map:Map;

private function onMapReady(event:Event):void {

this.map.addControl(new PositionControl());

this.map.addControl(new ZoomControl());

this.map.addControl(new ScaleControl());

for each (var _wx:Object in getOnArtistResult.lastResult){

//trace(_wx.jingdu);

CreateSign(_wx.jiancheng,_wx.kehumingcheng,_wx.jingdu,_wx.weidu);

}

protected function map_mapevent_mappreinitializeHandler(event:MapEvent):void

{

var myMapOptions:MapOptions = new MapOptions();

myMapOptions.zoom = 8;

myMapOptions.center = new LatLng(23.0670,113.1370);

myMapOptions.mapType = MapType.SATELLITE_MAP_TYPE;

this.map.setInitOptions(myMapOptions);

}

private function CreateSign(_jiancheng:String,_kehumingcheng:String,_jingdu:Number,_weidu:Number):void {

var markerA:Marker = new Marker(new LatLng(_jingdu,_weidu),

new MarkerOptions({strokeStyle: new StrokeStyle({thickness: 1,

color: 0xff8030,

alpha: 0.7,

pixelHinting: false}),

fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),

radius: 8,

tooltip: _jiancheng,

label:_kehumingcheng,

hasShadow: true}));

this.map.addOverlay(markerA);

}

protected function application1_creationCompleteHandler(event:FlexEvent):void

{

getOnArtistResult.token =map201105Service.getOnArtist('中国金名都', 0);

}

private function listDataService_onselectresult(event:ResultEvent):void{

wx=ArrayCollection(event.result);

button01.enabled=true;

menucomment.text=wx[0].jiancheng;

map = new Map();

map.key = "Google Map key";

map.setSize(new Point(HDBox.width, HDBox.height));

map.sensor="false";

map.url="http://localhost";

map.addEventListener(MapEvent.MAP_READY, onMapReady);

map.addEventListener(MapEvent.MAP_PREINITIALIZE,map_mapevent_mappreinitializeHandler);

HDBox.addElement(map);

}

//处理错误函数

private function onfault(event:FaultEvent):void{

trace(event.fault.faultString, 'Error');

}

protected function button01_clickHandler(event:Event):void

{

// TODO Auto-generated method stub

if (textinput01.text!=''){

trace(textinput01.text);

var str:String;

str=textinput01.text;

HDBox.removeElement(map);

getOnArtistResult.token =map201105Service.getOnArtist(str, 0);

button01.enabled=false;

}

protected function textinput01_focusInHandler(event:FocusEvent):void

{

// TODO Auto-generated method stub

if (event.target.text=='输入建筑工地名称'){

event.target.text='';

}

protected function textinput01_focusOutHandler(event:FocusEvent):void

{

// TODO Auto-generated method stub

if (event.target.text==''){

event.target.text='输入建筑工地名称';

}

protected function textinput01_textinputHandle(event:TextEvent):void

{

//event.target.setStyle('color',0x10DAA2);

}

protected function combobox01_changeHandler(event:IndexChangeEvent):void

{

// TODO Auto-generated method stub

trace(wx[event.newIndex].jintouId);

var jingdu:Number;

var weidu:Number;

jingdu=wx[event.newIndex].jingdu;

weidu=wx[event.newIndex].weidu;

map.setCenter(new LatLng(jingdu,weidu));

map.setZoom(13);

}

]]>

</fx:Script>

</components:View>

呈现数据的View：

<?xml version="1.0" encoding="utf-8"?>

<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:components="spark.components.*"

xmlns:services="services.*"

title="主页视图">

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

import mx.rpc.events.ResultEvent;

protected function myDG_creationCompleteHandler(event:FlexEvent):void

{

getOnArtistResult.token = maplatlngService.getOnArtist('中国南方家园5期',0);

}

protected function textinput01_focusInHandler(event:FocusEvent):void

{

// TODO Auto-generated method stub

if (event.target.text=='输入建筑工地名称'){

event.target.text='';

}

protected function textinput01_focusOutHandler(event:FocusEvent):void

{

// TODO Auto-generated method stub

if (event.target.text==''){

event.target.text='输入建筑工地名称';

}

protected function button01_clickHandler(event:Event):void

{

// TODO Auto-generated method stub

if (textinput01.text!=''){

var str:String;

str=textinput01.text;

getOnArtistResult.token = maplatlngService.getOnArtist(str,0);

button01.enabled=false;

}

protected function maplatlngService_resultHandler(event:ResultEvent):void

{

// TODO Auto-generated method stub

button01.enabled=true;

}

]]>

</fx:Script>

<fx:Declarations>

<s:CallResponder id="getOnArtistResult"/>

<services:MaplatlngService id="maplatlngService" result="maplatlngService_resultHandler(event)"/>

</fx:Declarations>

<components:BorderContainer width="100%" height="100%">

<s:VGroup width="100%" height="100%">

<s:HGroup id="hgroup01" width="100%" height="10%">

<s:TextInput id="textinput01" width="60%" height="100%" text="输入建筑工地名称"

textAlign="center" focusIn="textinput01_focusInHandler(event)" focusOut="textinput01_focusOutHandler(event)"/>

<s:Button id="button01" width="40%" height="100%" label="搜索" click="button01_clickHandler(event)"/>

</s:HGroup>

<components:DataGrid id="myDG" width="100%" height="100%"

creationComplete="myDG_creationCompleteHandler(event)">

<components:columns>

<s:ArrayList>

<s:GridColumn dataField="id" headerText="镜头ID"></s:GridColumn>

<s:GridColumn dataField="map201105.jiancheng" headerText="简称"></s:GridColumn>

<s:GridColumn dataField="map201105.dvrtongdaohao" headerText="摄像机编号"></s:GridColumn>

<s:GridColumn dataField="latDu" headerText="纬度度"></s:GridColumn>

<s:GridColumn dataField="latFen" headerText="纬度分"></s:GridColumn>

<s:GridColumn dataField="latMiao" headerText="纬度秒"></s:GridColumn>

<s:GridColumn dataField="lngDu" headerText="经度度"></s:GridColumn>

<s:GridColumn dataField="lngFen" headerText="经度分"></s:GridColumn>

<s:GridColumn dataField="lngMiao" headerText="经度秒"></s:GridColumn>

</s:ArrayList>

</components:columns>

<s:AsyncListView list="{getOnArtistResult.lastResult}"/>

</components:DataGrid>

</s:VGroup>

</components:BorderContainer>

</components:View>

结果：

Mapview

DataView：

评价：

Flex文件比较大，生成地图时间约10秒。