Arcgis apis for flex项目实例—开发篇（5）：查询

前文已完成了基本的地图工具，现在要开始一个GIS项目的核心内容——查询。按这个项目的设计，查询要分为政区查询和关键字查询两类，其实都大同小异，这里就只按关键字查询来写了。

查询在一个系统中一般有几个要素，一是要有条件输入，这里就是一个文本框和一个搜索按钮；二是要有结果列表，项目设计的左侧区域就承担了这个任务，计划用一个list来实现；三是要有地图展示，地图展示主要是把查询结果在地图上用符号标注出来，并且能提供一个infowindow来展示详细信息。本节内容不包括第三点，与地图的一些联动在下节单独介绍。

首先我要调整一下框架的布局，主要是左侧栏，先看mxml。

AHTour.mxml：

            <!—将左侧扩充为300的宽度-->
    <s:BorderContainer left="0" top="80" bottom="0" width="300" backgroundColor="#FFFFFF"
                       borderWeight="2">
        <mx:TabNavigator id="b_left" left="5" right="5" top="5" bottom="5">
            <s:NavigatorContent width="100%" height="100%" label="景点查询">
                <!--提供一个group用于界面的切换-->
                <s:Group id="mainContent" left="10" right="10" top="5" bottom="10">
                    <component:LeftSearchPage left="0" right="0" top="0" bottom="0" QueryStart="QueryStartHandler(event)">
                    </component:LeftSearchPage>

                </s:Group>
            </s:NavigatorContent>
        </mx:TabNavigator>
    </s:BorderContainer>
    <s:BorderContainer id="b_map" left="300" right="0" top="80" bottom="0">
    </s:BorderContainer>

代码中我略去了政区查询的布局，核心就是左侧栏扩充为300的宽度，这是为了显示的需要，map的border相应的left也置为300。而后就是我把Tab中的内容用一个group框了起来，并把之前的textInput和搜索按钮放到一个组件LeftSearchPage中去，这是为了方便控制界面得切换，LeftSearchPage代码在后面给出。

先来看查询，因为是要查询数据库，要用到后台代码。我在spring mvc当中做了一个查询，spring mvc不是本文重点，我只贴部分核心代码:

    //dao层中的查询
    public List<?> getDataByCol(String tabName, String colName,String colValue) {
        String sqlStr = "select * from "+tabName+" where "+ colName + " like ‘%"+ colValue+"%‘";
        return jdbcTemplate.queryForList(sqlStr);
    }
    //service层中调用dao
    public List<?> getDataByCol(String tabName,String colName,String colValue)
    {
        return     baseDao.getDataByCol(tabName, colName, colValue);
    }
    //数据获取controller
    @SuppressWarnings({ "rawtypes", "unchecked" })
    @RequestMapping("/query")
    public @ResponseBody HashMap Query(HttpServletRequest request, @RequestParam("keyword")String keyword) throws Exception
    {
        HashMap map = new HashMap();
        byte bb[];
        bb = keyword.getBytes("ISO-8859-1"); //以"ISO-8859-1"方式解析字符串
        keyword= new String(bb, "UTF-8"); //再用"utf-8"格式表示字符串
        map.put("result", baseService.getDataByCol("sp_tour", "name", keyword));
        map.put("success", true);
        return map;
    }

写完服务后，形成一个http接口提供数据：http://localhost:8080/ahlv/base/query.html?keyword=XXXX，用合肥野生动物园做关键字可以获得这样的结果：

{
    "result":[
        {
            "NAME":"合肥野生动物园",
            "URL":"http://tour.ahta.com.cn/Scenic---view2011---1475.shtml",
            "REGION":"合肥市",
            "LON":117.16,
            "LAT":31.83
        }
    ],
    "success":true
}

下面回到前台，我们先设计一个用于查询的类，先上代码：

QueryTool.as

    //要注册两个事件，在完成时传递结果，失败时传递错误信息
    [Event(name="QueryCompleted", type="tool.CustomEvent")]
    [Event(name="QueryFailed", type="tool.CustomEvent")]
    public class QueryTool extends EventDispatcher
    {
        public function QueryTool()
        {
        }
        public function Query(keyword:String):void
        {
            var httpRequest:HTTPService = new HTTPService();
            httpRequest.url = "http://localhost:8080/ahlv/base/query.html";
            httpRequest.method = "GET";
            httpRequest.addEventListener(ResultEvent.RESULT,resultHandler);
            httpRequest.addEventListener(FaultEvent.FAULT，faultHandler);
            httpRequest.send({keyword:keyword});
            function resultHandler(event:ResultEvent):void
            {
                var resultObj:Object = JSON.parse(event.result.toString());
                //判断是否失败
                if(!Boolean(resultObj.success))
                {
                    dispatchEvent(new CustomEvent(CustomEvent.QueryFailed,"查询失败！"));
                    return;
                }
                //将结果转换为graphic
                var resultArray:ArrayCollection = new ArrayCollection();
                for each(var gobj:Object in resultObj.result)
                {
                    var picSymbol:PictureMarkerSymbol = new PictureMarkerSymbol("image/locator.png",22,28,0,14,0);
                    var graphic:Graphic = new Graphic(new MapPoint(Number(gobj.LON),Number(gobj.LAT)),picSymbol,gobj);
                    resultArray.addItem(graphic);
                }

                dispatchEvent(new CustomEvent(CustomEvent.QueryCompleted,resultArray));
            }
        } 

        protected function faultHandler(event:FaultEvent):void
        {
            dispatchEvent(new CustomEvent(CustomEvent.QueryFailed,event.fault.faultString));
        }
    }

这里用到了CustomEvent这个事件类，这也是会被项目中反复用到的一个类，来看一下它的定义。这个自定义事件类是标准写法，上面定义了四种事件类型，现在要用的是QueryCompleted和QueryFailed，其他的后面很快会用到。

CustomEvent.as

    public class CustomEvent extends Event
    {
        public static const QueryCompleted:String = "QueryCompleted";
        public static const QueryStart:String = "QueryStart";
        public static const BacktoFront:String = "BacktoFront";
        public static const QueryFailed:String = "QueryFailed";
        public var data:Object;
        public function CustomEvent(type:String,data:Object = null)
        {
            super(type,bubbles,cancelable);
            this.data = data;
        }

        override public function clone():Event{    

            return new CustomEvent(type,data);    

        }
    }

当然光能拿到数据还不够，还需要配置好数据显示的列表，这就需要一个LeftResultPage，这个Page就是在查询成功后替换LeftSearchPage，用于显示结果列表。

LeftSearchPage.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          width="270" gap="0">
    <!--注册事件用于点击返回按钮回到首页-->
    <fx:Metadata>
        [Event(name="BacktoFront", type="tool.CustomEvent")]
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
            import tool.CustomEvent;

            [Bindable]
            private var result:ArrayCollection;
            protected function back_clickHandler(event:MouseEvent):void
            {
                dispatchEvent(new CustomEvent(CustomEvent.BacktoFront));
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:Group width="100%" height="30">
        <s:Label left="0" text="{‘共查到‘+ result.length+‘个结果‘}" verticalCenter="0"/>
        <mx:LinkButton right="0" label="返回" click="back_clickHandler(event)"
                       verticalCenter="0"/>
    </s:Group>
    <s:List id="list_Result" width="100%" height="100%" itemRenderer="renderer.listRenderer" dataProvider="{result}"></s:List>
</s:VGroup>

这里用到了一个listRenderer，这是要实现一个比较复杂的list项必须的，好吧，不要怕烦，写一下这个renderer。注意这里的data是一个graphic，要照着graphic取属性的格式来写。

listRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true" width="250" height="70">

    <s:Image left="10" source="image/locator.png" verticalCenter="0"/>
    <s:VGroup left="42" right="10" top="10" bottom="10">
        <s:Label color="#19AF01" fontSize="14" text="{data.attributes.NAME}"/>
        <s:Label color="#8D8D8D" text="{data.attributes.REGION}"/>
    </s:VGroup>
</s:ItemRenderer>

再来看看如何使用这个查询类来进行查询，首先看一看LeftSearchPage是怎么写的。

LeftSearchPage.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Metadata>
        [Event(name="QueryStart", type="tool.CustomEvent")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;

            import tool.CustomEvent;
            protected function query_clickHandler(event:MouseEvent):void
            {
                if(txt_Keyword.text.length > 0)
                    dispatchEvent(new CustomEvent(CustomEvent.QueryStart,txt_Keyword.text));
                else
                    Alert.show("请输入关键字！");
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:TextInput id="txt_Keyword" left="5" right="65" top="0" height="22" prompt="请输入关键字"/>
    <s:Button right="10" top="0" width="50" height="22" label="查询"
              click="query_clickHandler(event)"/>
</s:Group>

这边定义了QueryStart事件，在搜索按钮点击时把关键字传递给AHTour.mxml，这是为了方便页面切换和处理过期数据，把查询类放到主页面中去执行，子页面只控制自己的界面元素。下面看AHTour里需要加的QueryStartHandler和backtofrontHandler两个事件监听：

AHTour.mxml

            //主页Query
            private function QueryStartHandler(event:CustomEvent):void
            {
                // TODO Auto-generated method stub
                var query:QueryTool = new QueryTool();
                query.Query(event.data.toString());
                query.addEventListener(CustomEvent.QueryCompleted,queryCompletedHandler);
                query.addEventListener(CustomEvent.QueryFailed,queryFailedHandler);
                function queryCompletedHandler(event:CustomEvent):void
                {
                    var queryResult:LeftResultPage = new LeftResultPage();
                    queryResult.map = map;
                    queryResult.result = event.data as ArrayCollection;
                    //返回主页的事件监听
                    queryResult.addEventListener(CustomEvent.BacktoFront,backtofrontHandler);
                    queryResult.bottom = 0;
                    queryResult.top = 0;
                    mainContent.removeAllElements();
                    mainContent.addElement(queryResult);
                }
                function queryFailedHandler(event:CustomEvent):void
                {
                    Alert.show(event.data.toString());
                }
            }

            private function backtofrontHandler(event:Event):void
            {
                var searchPage:LeftSearchPage = new LeftSearchPage();
                searchPage.left = 0;
                searchPage.right = 0;
                searchPage.top = 0;
                searchPage.bottom = 0;
                //启动查询的事件监听
                searchPage.addEventListener(CustomEvent.QueryStart,QueryStartHandler);
                mainContent.removeAllElements();
                mainContent.addElement(searchPage);
            }

这样就可以了，查询结果可以显示于这个列表中，点击列表的返回按钮又可以返回到查询页，触发下一次查询。看一下结果：

这一节内容有点长，主要是因为布局和事件带来了附加的代码。现在还只是把结果显示了出来，下一节将介绍把这个结果与地图联动的一系列做法。