QueryWidget.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
///////////////////////////////////////////////////////////////////////////
// Copyright (c) 2010-2011 Esri. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////
-->
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   xmlns:Query="widgets.Query.*"
                   xmlns:viewer="com.esri.viewer.*"
                   initialize="basewidget_initializeHandler()"
                   widgetConfigLoaded="basewidget_widgetConfigLoaded()">

    <viewer:states>
        <s:State name="resultsList"/>
        <s:State name="filterInput"/>
    </viewer:states>

    <viewer:transitions>
        <s:Transition autoReverse="true" toState="*">
            <s:Fade targets="{[resultsList, filterInput]}"/>
        </s:Transition>
    </viewer:transitions>

    <fx:Script>
        <![CDATA[
            import com.esri.ags.FeatureSet;
            import com.esri.ags.Graphic;
            import com.esri.ags.Map;
            import com.esri.ags.clusterers.IClusterer;
            import com.esri.ags.events.LayerEvent;
            import com.esri.ags.geometry.Geometry;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.layers.FeatureLayer;
            import com.esri.ags.layers.supportClasses.FeatureCollection;
            import com.esri.ags.layers.supportClasses.LayerDetails;
            import com.esri.ags.portal.PopUpRenderer;
            import com.esri.ags.portal.supportClasses.PopUpInfo;
            import com.esri.ags.portal.supportClasses.PopUpMediaInfo;
            import com.esri.ags.renderers.SimpleRenderer;
            import com.esri.ags.symbols.PictureMarkerSymbol;
            import com.esri.ags.symbols.SimpleFillSymbol;
            import com.esri.ags.symbols.SimpleLineSymbol;
            import com.esri.ags.symbols.Symbol;
            import com.esri.ags.tasks.supportClasses.Query;
            import com.esri.viewer.utils.ClustererParser;
            import com.esri.viewer.utils.ErrorMessageUtil;

            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ModuleEvent;
            import mx.formatters.DateFormatter;
            import mx.rpc.AsyncResponder;
            import mx.utils.StringUtil;

            import spark.components.supportClasses.ItemRenderer;

            import widgets.supportClasses.FeatureSetUtil;
            import widgets.supportClasses.ResultAttributes;
            import widgets.supportClasses.ResultItem;

            private const ICON_URL:String = "assets/images/";

            [Bindable]
            private var filterFieldAlias:String;
            [Bindable]
            private var msgVisible:Boolean = false;
            [Bindable]
            private var queryResultAC:ArrayCollection;

            private var filterField:String;
            private var infowidgetReady:Boolean = false;
            private var queryExpr:String;
            private var orderByFields:Array;
            private var supportsServerSideSorting:Boolean = false;
            private var queryLayer:FeatureLayer;
            private var layerDetails:LayerDetails;
            private var queryFields:XMLList;
            private var queryLinkField:String;
            private var queryLinkAlias:String;
            private var queryRefreshRate:String;
            private var queryTitleField:String;
            private var timer:Timer;
            private var zoomScale:Number = 50000;
            private var mouseDownStageX:Number;
            private var mouseDownStageY:Number;
            private var dateFormatter:DateFormatter = new DateFormatter();

            private var loadingLabel:String;
            private var textFilterClear:String;
            private var textFilterLabel:String;
            private var noResultLabel:String;
            private var featuresFoundLabel:String;
            [Bindable]
            private var filterButtonLabel:String;
            [Bindable]
            private var clearButtonLabel:String;

            private var resultFeatureLayer:FeatureLayer;
            private var resultMarkerSymbol:Symbol;
            private var resultLineSymbol:Symbol;
            private var resultFillSymbol:Symbol;
            private var shareResults:Boolean;

            private var popUpRenderer:PopUpRenderer = new PopUpRenderer();
            private var graphicToResultAttributes:Dictionary;
            private var currentFeatureSet:FeatureSet;

            private function basewidget_initializeHandler():void
            {
                if (isPartOfPanel) // if widget is part of "left", "right" or "bottom" panel
                {
                    this.percentWidth = this.percentHeight = 100;
                    wTemplate.percentWidth = wTemplate.percentHeight = 100;
                }
                else
                {
                    wTemplate.width = wTemplate.height = 300;
                }
            }

            private function basewidget_widgetConfigLoaded():void
            {
                if (configXML)
                {
                    loadingLabel = configXML.labels.loading || configXML.labels.loadinglabel || getDefaultString("loadingLabel"); // other widgets use "loadinglabel" in their xml and so should this, but since 2.1 was released with "loading", we'll keep QueryWidget slightly inconsistent
                    textFilterLabel = configXML.labels.filterresults || getDefaultString("filterTitleBarTooltip");
                    textFilterClear = configXML.labels.filterclear || getDefaultString("showallTitleBarTooltip");
                    filterButtonLabel = configXML.labels.filterbuttonlabel || getDefaultString("filterButtonLabel");
                    clearButtonLabel = configXML.labels.clearbuttonlabel || getDefaultString("clearButtonLabel");
                    noResultLabel = configXML.labels.noresultlabel || getDefaultString("noFeatures");
                    featuresFoundLabel = configXML.labels.featuresfoundlabel || getDefaultString("featuresFoundLabel");

                    filterField = configXML.filterfield.name;
                    filterFieldAlias = configXML.filterfield.alias || configXML.filterfield.name;
                    var layerURL:String = configXML.layer;
                    var useAMF:String = configXML.useamf;

                    queryExpr = configXML.query;
                    if (!queryExpr) // server requires query to have at least one of 'geometry', 'text', or 'where' properties set. In this widget we only use 'where', so make sure it is always set.
                    {
                        queryExpr = "1=1"; // ... is always true
                    }
                    queryFields = configXML.fields;
                    queryTitleField = configXML.titlefield;
                    queryLinkField = configXML.linkfield;
                    queryLinkAlias = configXML.linkfield.@alias[0];
                    queryRefreshRate = configXML.refreshrate;

                    //useproxy
                    var useProxy:Boolean;
                    if (configXML.useproxy.length() > 0)
                    {
                        useProxy = configXML.useproxy == "true";
                    }

                    if (Number(configXML.zoomscale) > 0)
                    {
                        zoomScale = Number(configXML.zoomscale);
                    }

                    //marker symbol
                    const resultMarkerSymbolURL:String = configXML.symbols.picturemarkersymbol.@url || widgetIcon;
                    const parsedResultMarkerSymbolHeight:Number = parseFloat(configXML.symbols.picturemarkersymbol.@height[0]);
                    const resultMarkerSymbolHeight:Number = isNaN(parsedResultMarkerSymbolHeight) ? 0 : parsedResultMarkerSymbolHeight;
                    const parsedResultMarkerSymbolWidth:Number = parseFloat(configXML.symbols.picturemarkersymbol.@width[0]);
                    const resultMarkerSymbolWidth:Number = isNaN(parsedResultMarkerSymbolWidth) ? 0 : parsedResultMarkerSymbolWidth;
                    const resultMarkerSymbolXOffset:Number = (configXML.symbols.picturemarkersymbol.@xoffset != null) ? configXML.symbols.picturemarkersymbol.@xoffset : 0;
                    const resultMarkerSymbolYOffset:Number = (configXML.symbols.picturemarkersymbol.@yoffset != null) ? configXML.symbols.picturemarkersymbol.@yoffset : 0;
                    resultMarkerSymbol = new PictureMarkerSymbol(resultMarkerSymbolURL, resultMarkerSymbolWidth, resultMarkerSymbolHeight, resultMarkerSymbolXOffset, resultMarkerSymbolYOffset);

                    //line symbol
                    const resultLineSymbolColor:uint = configXML.symbols.simplelinesymbol.@color || 0xFF0000;
                    const resultLineSymbolAlpha:Number = (configXML.symbols.simplelinesymbol.@alpha[0] != null) ? configXML.symbols.simplelinesymbol.@alpha : 0.8;
                    const resultLineSymbolWidth:Number = (configXML.symbols.simplelinesymbol.@width[0] != null) ? configXML.symbols.simplelinesymbol.@width : 2;
                    resultLineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, resultLineSymbolColor, resultLineSymbolAlpha, resultLineSymbolWidth);

                    // fill symbol
                    const resultFillSymbolColor:uint = configXML.symbols.simplefillsymbol.@color || 0xFF0000;
                    const resultFillSymbolAlpha:Number = (configXML.symbols.simplefillsymbol.@alpha[0] != null) ? configXML.symbols.simplefillsymbol.@alpha : 0.5;
                    const resultFillSymbolOutlineColor:uint = configXML.symbols.simplefillsymbol.outline.@color || 0xFF0000;
                    const resultFillSymbolOutlineAlpha:Number = (configXML.symbols.simplefillsymbol.outline.@alpha[0] != null) ? configXML.symbols.simplefillsymbol.outline.@alpha : 0.8;
                    const resultFillSymbolOutlineWidth:Number = (configXML.symbols.simplefillsymbol.outline.@width[0] != null) ? configXML.symbols.simplefillsymbol.outline.@width : 2;
                    resultFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, resultFillSymbolColor, resultFillSymbolAlpha, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, resultFillSymbolOutlineColor, resultFillSymbolOutlineAlpha, resultFillSymbolOutlineWidth));

                    var orderByFieldsText:String = configXML.orderbyfields[0];
                    if (orderByFieldsText)
                    {
                        orderByFields = orderByFieldsText.split(',');
                    }

                    // share results
                    shareResults = configXML.shareresults[0] && configXML.shareresults == "true";

                    if (layerURL)
                    {
                        queryLayer = new FeatureLayer();
                        queryLayer.addEventListener(LayerEvent.LOAD, queryLayer_loadHandler);
                        queryLayer.addEventListener(LayerEvent.LOAD_ERROR, queryLayer_loadErrorHandler);

                        if (useProxy && configData.proxyUrl)
                        {
                            queryLayer.proxyURL = configData.proxyUrl;
                        }
                        if (useAMF)
                        {
                            queryLayer.useAMF = useAMF == "true";
                        }
                        if (queryRefreshRate)
                        {
                            queryLayer.disableClientCaching = true; // turn on only if using a refresh timer
                        }
                        if (queryFields && queryFields[0].@all[0] == "true")
                        {
                            queryLayer.outFields = [ "*" ];
                        }
                        else if (queryFields)
                        {
                            var fields:XMLList = queryFields.field;
                            queryLayer.outFields = [];
                            for each (var fieldXML:XML in fields)
                            {
                                if (fieldXML.@name[0])
                                {
                                    queryLayer.outFields.push(fieldXML.@name[0]);
                                }
                            }
                        }
                        queryLayer.url = layerURL;
                    }
                    resultFeatureLayer = new FeatureLayer();
                    resultFeatureLayer.outFields = queryLayer.outFields;
                    resultFeatureLayer.visible = false;
                    resultFeatureLayer.isEditable = false;

                    var layerName:String = configXML.layername || widgetTitle;
                    resultFeatureLayer.name = shareResults ? layerName : "hiddenLayer_" + layerName;

                    var clustererParser:ClustererParser = new ClustererParser();
                    var clusterer:IClusterer = clustererParser.parseClusterer(configXML.clustering[0]);
                    if (clusterer)
                    {
                        resultFeatureLayer.clusterer = clusterer;
                    }
                    resultFeatureLayer.addEventListener(FlexEvent.HIDE, resultFeatureLayer_hideHandler);
                    map.addLayer(resultFeatureLayer);
                }

                if (filterField)
                {
                    wTemplate.addTitlebarButton(ICON_URL + "i_searchtext.png", textFilterLabel, toggleFilterPanel);
                    wTemplate.addTitlebarButton(ICON_URL + "i_clear.png", textFilterClear, doClear);
                    wTemplate.selectedTitlebarButtonIndex = 1;
                    this.currentState = "resultsList";
                }
            }

            private function queryLayer_loadHandler(event:LayerEvent):void
            {
                queryLayer.removeEventListener(LayerEvent.LOAD, queryLayer_loadHandler);
                queryLayer.removeEventListener(LayerEvent.LOAD_ERROR, queryLayer_loadErrorHandler);

                layerDetails = queryLayer.layerDetails;
                layerDetails.minScale = 0; // removing scale dependency
                layerDetails.maxScale = 0;
                supportsServerSideSorting = layerDetails && layerDetails.version >= 10.1
                    && layerDetails.supportsAdvancedQueries;
                createAndStartWidgetTimer();
                queryFeatures();
            }

            private function queryLayer_loadErrorHandler(event:LayerEvent):void
            {
                queryLayer.removeEventListener(LayerEvent.LOAD, queryLayer_loadHandler);
                queryLayer.removeEventListener(LayerEvent.LOAD_ERROR, queryLayer_loadErrorHandler);

                var errorMessage:String = getDefaultString("layerFailedToLoad",
                                                           event.layer.name,
                                                           ErrorMessageUtil.makeHTMLSafe(ErrorMessageUtil.buildFaultMessage(event.fault)));

                showError(errorMessage);
            }

            private function resultFeatureLayer_hideHandler(event:FlexEvent):void
            {
                hideInfoWindow();
            }

            private function infoError(event:ModuleEvent):void
            {
                this.showMessage(event.errorText, true);
            }

            private function createAndStartWidgetTimer():void
            {
                if (queryRefreshRate)
                {
                    if (!timer)
                    {
                        var seconds:Number = Number(queryRefreshRate);
                        var rate:Number = seconds * 1000;
                        timer = new Timer(rate);
                        timer.addEventListener(TimerEvent.TIMER, timerTick);
                    }
                    timer.start();
                }
            }

            private function stopWidgetTimer():void
            {
                if (timer && timer.running)
                {
                    timer.stop();
                }
            }

            private function startWidgetTimer():void
            {
                if (timer && !timer.running)
                {
                    timer.start();
                }
            }

            private function timerTick(event:TimerEvent):void
            {
                queryFeatures();
            }

            private function queryFeatures():void
            {
                if (queryLayer)
                {
                    graphicToResultAttributes = new Dictionary;

                    var query:Query = new Query();
                    query.where = queryExpr;
                    query.outSpatialReference = map.spatialReference;
                    if (supportsServerSideSorting && orderByFields)
                    {
                        query.orderByFields = orderByFields;
                    }

                    queryLayer.queryFeatures(query, new AsyncResponder(onResult, onFault));
                    showMessage(loadingLabel, true);

                    function onResult(featureSet:FeatureSet, token:Object = null):void
                    {
                        try
                        {
                            if (!supportsServerSideSorting
                                && orderByFields)
                            {
                                FeatureSetUtil.sortFeaturesByFieldName(featureSet, orderByFields);
                            }
                            
                            if (queryResultAC)
                            {
                                queryResultAC.removeAll();
                            }
                            queryResultAC = createQueryResults(featureSet);
                            addSharedData(widgetTitle, queryResultAC);

                            clearMessage();
                            if (queryResultAC.length < 1)
                            {
                                showMessage(noResultLabel, false);
                            }
                            else
                            {
                                showMessage(StringUtil.substitute(featuresFoundLabel, queryResultAC.length), false);
                            }
                        }
                        catch (error:Error)
                        {
                            showMessage(error.message, false);
                        }
                    }

                    function onFault(info:Object, token:Object = null):void
                    {
                        showMessage(info.toString(), false);
                    }
                }
            }

            private function createQueryResults(featureSet:FeatureSet):ArrayCollection
            {
                var result:ArrayCollection = new ArrayCollection();
                currentFeatureSet = featureSet;

                if (!queryTitleField)
                {
                    queryTitleField = featureSet.displayFieldName;
                }

                for each (var graphic:Graphic in featureSet.features)
                {
                    var resultAttributes:ResultAttributes =
                        ResultAttributes.toResultAttributes(queryFields, graphic, featureSet, queryLayer, layerDetails, widgetTitle, queryTitleField, queryLinkField, queryLinkAlias);
                    graphicToResultAttributes[graphic] = resultAttributes;

                    var searchResult:ResultItem = new ResultItem(graphic, resultAttributes);
                    result.addItem(searchResult);

                    var infoWindowRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
                    infoWindowRenderer.properties = { popUpInfo: configurePopUpInfo(resultAttributes)};
                    graphic.infoWindowRenderer = infoWindowRenderer;
                }
                resultFeatureLayer.visible = true;
                resultFeatureLayer.featureCollection = new FeatureCollection(featureSet, layerDetails);
                switch (featureSet.geometryType)
                {
                    case Geometry.MAPPOINT:
                    {
                        resultFeatureLayer.renderer = new SimpleRenderer(resultMarkerSymbol);
                        break;
                    }
                    case Geometry.POLYLINE:
                    {
                        resultFeatureLayer.renderer = new SimpleRenderer(resultLineSymbol);
                        break;
                    }
                    case Geometry.POLYGON:
                    {
                        resultFeatureLayer.renderer = new SimpleRenderer(resultFillSymbol);
                        break;
                    }
                }

                return result;
            }

            private function configurePopUpInfo(resultAttributes:ResultAttributes):PopUpInfo
            {
                var popUpInfo:PopUpInfo = new PopUpInfo;

                popUpInfo.title = resultAttributes.title;
                popUpInfo.description = resultAttributes.content;

                var link:String = resultAttributes.link;
                var linkAlias:String = resultAttributes.linkAlias
                if (link)
                {
                    var pos:Number = link.length - 4;
                    var sfx:String = link.substr(pos, 4).toLowerCase();
                    var isImageLink:Boolean = (sfx == ".jpg") || (sfx == ".png") || (sfx == ".gif");

                    if (isImageLink)
                    {
                        var popUpMediaInfo:PopUpMediaInfo = new PopUpMediaInfo;
                        popUpMediaInfo.imageLinkURL = link;
                        popUpMediaInfo.imageSourceURL = link;
                        popUpInfo.popUpMediaInfos = [ popUpMediaInfo ];
                    }
                    else
                    {
                        var linkText:String = linkAlias ? linkAlias : link;
                        popUpInfo.description += "<br/><a href='" + link + "'>" + linkText + "</a>";
                    }
                }

                return popUpInfo;
            }

            private var hitimer:uint;

            private function mouseOverQueryResult(event:Event):void
            {
                clearTimeout(hitimer);
                var queryResult:ResultItem = ItemRenderer(event.target).data as ResultItem;
                if (map.extent.containsXY(queryResult.center.x, queryResult.center.y)) // only show infowindow if query result in contained within map extent
                {
                    hitimer = setTimeout(showHighlight, 300, [ queryResult ]);
                }
                else
                {
                    hideInfoWindow();
                }
            }

            private function mouseOutQueryResult(event:Event):void
            {
                clearTimeout(hitimer);
            }

            private function clickQueryResult(event:Event):void
            {
                var queryResult:ResultItem = ItemRenderer(event.target).data as ResultItem;
                if (queryResult.geometry)
                {
                    if (queryResult.geometry.type == Geometry.MAPPOINT)
                    {
                        if (map.scale > zoomScale)
                        {
                            map.scale = zoomScale;
                        }
                    }

                    map.zoomTo(queryResult.center);
                }
                clearTimeout(hitimer);
                hitimer = setTimeout(showHighlight, 300, [ queryResult ]);
            }

            private function showHighlight(params:Array):void
            {
                var queryResult:ResultItem = params[0];
                var showHighlightPoint:MapPoint = queryResult.center as MapPoint;

                popUpRenderer.popUpInfo = configurePopUpInfo(queryResult.attributes);
                popUpRenderer.graphic = queryResult.graphic;

                map.infoWindow.content = popUpRenderer;
                map.infoWindow.contentOwner = popUpRenderer.graphic;
                map.infoWindow.show(showHighlightPoint);
            }

            private function showMessage(msg:String, swfVisible:Boolean):void
            {
                txtMessage.text = msg;
                swfMessage.visible = swfVisible;
                msgVisible = true;
            }

            private function clearMessage():void
            {
                msgVisible = false;
            }

            private function widgetClosedHandler(event:Event):void
            {
                if (shareResults)
                {
                    map.removeLayer(resultFeatureLayer);
                }
                else
                {
                    resultFeatureLayer.visible = false;
                }
                stopWidgetTimer();
                hideInfoWindow();
            }

            private function widgetOpenedHandler(event:Event):void
            {
                if (resultFeatureLayer)
                {
                    if (shareResults)
                    {
                        map.addLayer(resultFeatureLayer);
                    }
                    else
                    {
                        resultFeatureLayer.visible = true;
                    }
                }
                startWidgetTimer();
            }

            private function toggleFilterPanel():void
            {
                this.currentState = "filterInput";
            }

            private function doFilter():void
            {
                if (txtFilter.text)
                {
                    var features:Array = currentFeatureSet.features.filter(filterResultFeatureLayer);
                    var filteredFeatureSet:FeatureSet = new FeatureSet(features);
                    resultFeatureLayer.featureCollection = new FeatureCollection(filteredFeatureSet, layerDetails);
                    queryResultAC.filterFunction = filterDataList;
                }
                else
                {
                    resultFeatureLayer.featureCollection = new FeatureCollection(currentFeatureSet, layerDetails);
                    queryResultAC.filterFunction = null;
                }
                queryResultAC.refresh();

                // change it back to show the results
                wTemplate.selectedTitlebarButtonIndex = 1;
                this.currentState = "resultsList";
                if (queryResultAC.length < 1)
                {
                    showMessage(noResultLabel, false);
                }
                else
                {
                    showMessage(StringUtil.substitute(featuresFoundLabel, queryResultAC.length), false);
                }
            }

            private function doClear():void
            {
                wTemplate.selectedTitlebarButtonIndex = 1;
                txtFilter.text = '';
                doFilter();
            }

            private function filterResultFeatureLayer(item:Object, idx:uint, arr:Array):Boolean
            {
                return doesResultContainFilterText(graphicToResultAttributes[Graphic(item)]);
            }

            private function doesResultContainFilterText(resultAttributes:ResultAttributes):Boolean
            {
                const containsFilterText:RegExp = new RegExp(txtFilter.text, 'i');
                var shouldInclude:Boolean;

                if (filterField)
                {
                    shouldInclude = resultAttributes.attributes
                        && containsFilterText.test(resultAttributes.attributes[filterField]);
                }
                else
                {
                    shouldInclude = containsFilterText.test(resultAttributes.content);
                }

                return shouldInclude;
            }

            private function filterDataList(queryResult:ResultItem):Boolean
            {
                return doesResultContainFilterText(queryResult.attributes);
            }

            private function hideInfoWindow():void
            {
                if (map.infoWindow.contentOwner &&
                    ((map.infoWindow.contentOwner is Graphic && Graphic(map.infoWindow.contentOwner).graphicsLayer === resultFeatureLayer) || map.infoWindow.contentOwner is Map))
                {
                    map.infoWindow.hide();
                }
            }
        ]]>
    </fx:Script>

    <viewer:WidgetTemplate id="wTemplate"
                           closed="widgetClosedHandler(event)"
                           open="widgetOpenedHandler(event)">
        <s:Group id="resultsList"
                 width="100%" height="100%"
                 visible="false"
                 visible.resultsList="true">
            <s:layout>
                <s:VerticalLayout gap="1"/>
            </s:layout>
            <s:HGroup id="boxMessage"
                      width="100%"
                      includeInLayout="{msgVisible}"
                      visible="{msgVisible}">
                <mx:Image id="swfMessage"
                          source="assets/images/loader.swf"
                          visible="false"/>
                <s:Label id="txtMessage"
                         width="90%"
                         text=""/>
            </s:HGroup>
            <s:Scroller width="100%" height="100%">
                <Query:QueryResultDataGroup dataProvider="{queryResultAC}"
                                            queryResultClick="clickQueryResult(event)"
                                            queryResultMouseOut="mouseOutQueryResult(event)"
                                            queryResultMouseOver="mouseOverQueryResult(event)">
                    <Query:layout>
                        <s:VerticalLayout gap="2"
                                          horizontalAlign="justify"
                                          useVirtualLayout="true"/>
                    </Query:layout>
                </Query:QueryResultDataGroup>
            </s:Scroller>
        </s:Group>
        <s:Group id="filterInput"
                 width="100%" height="100%"
                 visible="false"
                 visible.filterInput="true">
            <s:layout>
                <s:VerticalLayout gap="4" horizontalAlign="center"/>
            </s:layout>
            <s:RichEditableText editable="false" text="{filterFieldAlias} : "/>
            <s:TextInput id="txtFilter"
                         width="98%"
                         enter="doFilter()"/>
            <s:HGroup width="100%" horizontalAlign="center">
                <s:Button click="doFilter()" label="{filterButtonLabel}"/>
                <s:Button click="doClear()" label="{clearButtonLabel}"/>
            </s:HGroup>
        </s:Group>
    </viewer:WidgetTemplate>

</viewer:BaseWidget>