mx:DataGrid と mx:ComboBox の覚書

FLEX のデータグリッドと、所謂「プルダウン」であるコンボボックスの挙動について、留意事項

その１。ComboBox は次のようにしてパラメータをガチャンと切り替えてみる

change="callDataBase(event);"

アヒルの水かきのような水面下の振る舞いは、次のように

var company:String = comboBox.selectedItem.value;
var xmlString:URLRequest = new URLRequest("http://www.abc.com/database.php?kaisha=" + company);

XML を生成する php のMySQL へのクエリはこんなあんばい

$query = "SELECT * FROM stations WHERE company = '$company' ORDER BY roman";

その２。DataGrid には以下のようにしてデータを表示させるが

infoGrid.addItem({namae:namae, roman:roman, Marker:stationMarker});

上記の ComboBox で項目を切り替えるたびコラムがどんどんメタボリックになってしまうので

infoGrid.removeAll();

というふうに適所で節制を強いればスマートな容姿に。

このGoogle Maps の MXML は、最終的に以下のような感じ

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*"
 layout="absolute" width="100%" height="100%">
<mx:HDividedBox width="100%" height="100%" backgroundColor="haloOrange">
  <mx:VBox width="210" height="100%" resizeEffect="Resize">
  <mx:HBox width="100%">
    <mx:ComboBox id="comboBox" change="callDataBase(event);" selectedIndex="0">
      <mx:dataProvider>
        <mx:Array>
          <mx:Object label="東京メトロ" value="metro" />
          <mx:Object label="都営各線" value="toei" />
          <mx:Object label="ＪＲ東日本" value="jr" />
        </mx:Array>
      </mx:dataProvider>
    </mx:ComboBox>
  </mx:HBox>
  <mx:HBox width="100%">
    <mx:TextInput id="address" text="" enter="doGeocode(event);" />
    <mx:Button id="submitButton" label="Go!" useHandCursor="true" buttonMode="true" click="doGeocode(event);" />
  </mx:HBox>
    <mx:DataGrid id="mapGrid" dataProvider="{infoGrid}" verticalScrollPolicy="on" width="100%"
        height="100%" sortableColumns="true" itemClick="showDesc(event)">
      <mx:columns>
        <mx:Array>
          <mx:DataGridColumn headerText="駅名" dataField="address" width="100">
            <mx:itemRenderer>
              <mx:Component>
                <mx:Text width="100%" selectable="false" htmlText="{data.address}"/>
              </mx:Component>
            </mx:itemRenderer>
          </mx:DataGridColumn>
          <mx:DataGridColumn headerText="Name" dataField="ename" />
        </mx:Array>
      </mx:columns>
    </mx:DataGrid>
  </mx:VBox>
  <mx:VBox width="100%" height="100%" resizeEffect="Resize">
    <maps:Map id="map" key="ABQIAAAAAObg9x..........." 
    mapevent_mapready="onMapReady(event)" width="100%" height="100%"/>
  </mx:VBox>
</mx:HDividedBox>
<mx:Script>
<![CDATA[
  import com.google.maps.InfoWindowOptions;
  import com.google.maps.overlays.Marker;
  import com.google.maps.overlays.MarkerOptions;
  import com.google.maps.LatLng;
  import com.google.maps.LatLngBounds;
  import com.google.maps.Map;
  import com.google.maps.MapEvent;
  import com.google.maps.MapZoomEvent;
  import com.google.maps.MapMouseEvent;
  import com.google.maps.MapType;
  import com.google.maps.controls.*;
  import com.google.maps.services.*;
  import com.google.maps.overlays.Marker;
  import mx.controls.Alert;
  import mx.collections.ArrayCollection;
  public var userMarker:Array = [];
  [Embed(source="markericon.png")] private var plotIcon:Class;
  [Bindable] private var infoGrid:ArrayCollection = new ArrayCollection();
  private function onMapReady(event:Event):void {
    this.map.setCenter(new LatLng(35.685, 139.75), 9);
    this.map.addControl(new NavigationControl());
    this.map.removeMapType(MapType.HYBRID_MAP_TYPE);
    this.map.enableScrollWheelZoom();
    this.map.enableContinuousZoom();
    this.map.addControl(new MapTypeControl());
    callDataBase(event);
  }
  private function callDataBase(event:Event):void {
    var company:String = comboBox.selectedItem.value;
    var xmlString:URLRequest = new URLRequest("http://www.abc.com/database.php?kaisha=" + company);
    var xmlLoader:URLLoader = new URLLoader(xmlString);
    xmlLoader.addEventListener("complete", readXml);
  }
  public function readXml(event:Event):void {
    infoGrid.removeAll();
    map.clearOverlays();
    var markersXML:XML = new XML(event.target.data);
    var markers:XMLList = markersXML..marker;
    var markersCount:int = markers.length();
    var bounds:LatLngBounds = new LatLngBounds();
    var i:Number;
    for (i=0; i < markersCount; i++) {
      var marker:XML = markers[i];
      var namae:String = marker.@namae;
      var roman:String = marker.@roman;
      var latlng:LatLng = new LatLng(marker.@lat, marker.@lng);
      bounds.extend(latlng);
      createMarker(latlng, namae, roman);
    }
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
  }
  public function createMarker(latlng:LatLng, namae:String, roman:String): void {
    var customIcon:Object = new plotIcon();
    var stationMarker:Marker = new Marker(latlng, new MarkerOptions({
      icon: customIcon,
      iconAlignment: MarkerOptions.ALIGN_VERTICAL_CENTER | MarkerOptions.ALIGN_HORIZONTAL_CENTER
    }));
    var html:String = "<font face='Arial'><b>" + namae + "</b> <i>" + roman + "</i></font>";
    stationMarker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {
      stationMarker.openInfoWindow(new InfoWindowOptions({contentHTML:html}));
    });
    infoGrid.addItem({namae:namae, roman:roman, Marker:stationMarker});
    map.addOverlay(stationMarker);
  }
  public function showDesc(event:Event):void {
    var stationMarker:Marker = mapGrid.selectedItem.Marker;
    stationMarker.dispatchEvent(new MapMouseEvent(MapMouseEvent.CLICK, stationMarker, stationMarker.getLatLng(), true, true));
  }
  private function doGeocode(event:Event):void {
    var geocoder:ClientGeocoder = new ClientGeocoder();
    geocoder.addEventListener(
      GeocodingEvent.GEOCODING_SUCCESS,
      function(event:GeocodingEvent):void {
        var placemarks:Array = event.response.placemarks;
        if (placemarks.length > 0) {
          map.setCenter(placemarks[0].point, 13);
              var marker:Marker = new Marker(placemarks[0].point);
              marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
              marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
            });
            map.addOverlay(marker);
        }
      });
      geocoder.addEventListener(
        GeocodingEvent.GEOCODING_FAILURE,
        function(event:GeocodingEvent):void {
          Alert.show("Geocoding failed");
          trace(event);
          trace(event.status);
      });
    geocoder.geocode(address.text);
  }
]]>
</mx:Script>
</mx:Application>

今月のお勉強、おしまい。何の役に立つか不明。

mx:DataGrid と mx:ComboBox の覚書

Google Maps API

Category

Recent Posts