Skip navigation
philippschnetzer
Currently Being Moderated

Could not resolve...to a component implementation

Sep 21, 2010 7:47 AM

Hi All.  This is a common problem but I still could not resolve my issue by searching through the forums.

 

Using FlashBuilder 4.  Here is my error:


Could not resolve <widgets:RecordData> to a component implementation.

 

And here is my entire code:

 

<?xml version="1.0" encoding="utf-8"?>
-->
<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:esri="http://www.esri.com/2008/ags"
                    xmlns:viewer="com.esri.viewer.*"
                    xmlns:widgets="com.esri.solutions.*"               
                    x                    ="600"
                    y                    ="300"
                    widgetConfigLoaded    ="init()">
       
    <fx:Script>
        <![CDATA[
            import com.esri.ags.Graphic;
            import com.esri.ags.Map;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.geometry.Geometry;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.geometry.Polygon;
            import com.esri.ags.geometry.Polyline;
            import com.esri.ags.layers.GraphicsLayer;
            import com.esri.ags.layers.Layer;
            import com.esri.ags.symbols.PictureMarkerSymbol;
            import com.esri.ags.symbols.SimpleFillSymbol;
            import com.esri.ags.symbols.SimpleLineSymbol;
            import com.esri.ags.FeatureSet;
            import com.esri.ags.tasks.supportClasses.Query;
            import com.esri.ags.tasks.QueryTask;
            import com.esri.solutions.flexviewer.SiteContainer;
            import com.esri.solutions.flexviewer.utils.WidgetEffects;
           
            import mx.collections.*;
            import mx.controls.Alert;
            import mx.rpc.AsyncResponder;
            import mx.rpc.events.ResultEvent;
           
           
            //labels
            private var queryAlphaLine:Number = 0.6;// CC
            private var queryAlphaFill:Number = 0.3;// CC
            private var queryFillColor:Number = 0xFF0000;// CC
           
            private var loadingLabel:String;
           
            private var queryLayer:String;
           
            private var queryExpr:String;
           
            private var queryFields:String;
           
            private var queryTitleField:String;
           
            private var queryLinkField:String;
           
            private var queryRefreshRate:String;
           
            private var zoomScale:Number = 45000;
           
            private var graphicsLayer:GraphicsLayer;
           
            private var graphicPointSym:PictureMarkerSymbol;
           
            private var graphicLineSym:SimpleLineSymbol;// CC
            private var graphicPolySym:SimpleFillSymbol;// CC
           
            private var timer:Timer;
           
            private const ICON_URL:String = "com/esri/solutions/flexviewer/assets/images/icons/";
           
            private var textFilterLabel:String;
           
            [Bindable]
            private var filterFieldAlias:String;
           
            private var fldAliases:Object;
           
            [Bindable]
            private var msgVisible:Boolean = false;           
           
            //ANR// Step 1 copy paste below entry and change name appropriate for the field (follow my naming convention prefferably)
            [Bindable]
            private var groupData:Array;
           
            [Bindable]
            private var telData:Array;
           
            [Bindable]
            private var postalData:Array;
           
            [Bindable]
            private var cityData:Array;
           
            private function init():void
            {
                graphicPointSym = new PictureMarkerSymbol(widgetIcon, 30, 30)
                graphicsLayer = new GraphicsLayer();
                graphicsLayer.symbol = graphicPointSym;
                map.addLayer(graphicsLayer);
                if (configXML)
                {
                    //labels
                    loadingLabel = configXML.labels.loadinglabel || "Loading...";
                    textFilterLabel = configXML.labels.textFilterLabel || "Filter results";
                    filterFieldAlias = configXML.filterfield.alias || configXML.filterfield.name;                   
                    queryLayer = configXML.layer;
                    queryExpr = configXML.query;
                    if (!queryExpr)
                        queryExpr = "OBJECTID > 0";
                    queryFields = configXML.fields;
                    queryTitleField = configXML.titlefield;
                    queryLinkField = configXML.linkfield;
                    if (Number(configXML.zoomscale) > 0)
                        zoomScale = Number(configXML.zoomscale);
                   
                    if (Number(configXML.alpha) > 0) // CC
                    {
                        queryAlphaFill = configXML.alpha; // CC
                        queryAlphaLine = configXML.alpha + 0.3; // CC
                       
                        if (queryAlphaLine>1)// CC
                            queryAlphaLine = 1;// CC
                    }
                   
                    if (Number(configXML.fillcolor) > 0)
                        queryFillColor=configXML.fillcolor;
                   
                    graphicLineSym = new SimpleLineSymbol("solid", queryFillColor, queryAlphaLine, 2);// CC
                    graphicPolySym = new SimpleFillSymbol("solid", queryFillColor, queryAlphaFill, graphicLineSym);// CC   
                   
                    wTemplate.addTitlebarButton(ICON_URL + "i_table.png", "Results", showStateResults);
                    wTemplate.addTitlebarButton(ICON_URL + "i_searchtext.png", "Search", showStateSearch);                   
                   
                   
                   
                   
                   
                   
                   
                   
                   
                    //WidgetEffects.flipWidget(this, viewStack, "selectedIndex", 1, 400);
                   
                    getSample();
                }
               
            }       
           
            private function getSample():void
            {
                var queryTask:QueryTask = new QueryTask(queryLayer);
                var query:Query = new Query();
                //ANR// Step 2 add the name of the field to the string below.
                var outString:String = "Group,Tel,PostalCode,City";
               
                query.where = "group LIKE '%%'";
                query.outFields = outString.split(",");
                query.returnGeometry = false;
                queryTask.execute(query, new AsyncResponder(onResult, onFault)); 
                function onResult(featureSet:FeatureSet, token:Object = null):void               
                {  
                    if (featureSet.features.length == 0)
                    {
                        Alert.show("No Results found. Please try again.");
                    }
                    else
                    {           
                        //ANR// Step 3 initallize the array from Step 1 as below
                        groupData = new Array();
                        telData = new Array();
                        postalData = new Array();
                        cityData = new Array();
                       
                        for each (var myGraphic1:Graphic in featureSet.features)
                        {
                           
                            if (groupData.indexOf(myGraphic1.attributes.Group) == -1)
                            {
                                groupData.push(myGraphic1.attributes.Group);
                            }

                            if (telData.indexOf(myGraphic1.attributes.Tel) == -1)
                            {
                                telData.push(myGraphic1.attributes.Tel);
                            }

                            if (postalData.indexOf(myGraphic1.attributes.PostalCode) == -1)
                            {
                                postalData.push(myGraphic1.attributes.PostalCode);
                            }

                            if (cityData.indexOf(myGraphic1.attributes.City) == -1)
                            {
                                cityData.push(myGraphic1.attributes.City);
                            }
                            //ANR// Step 4 copy/paste/uncomment the block below and change 'groupData' to the name of the array added in step 1
                            // change other references to 'group' to the field that youre adding
//                            if (groupData.indexOf(myGraphic1.attributes.group) == -1)
//                            {
//                                groupData.push(myGraphic1.attributes.group);
//                            }
                        }
                       
                        cboGroup.dataProvider = groupData.sort();
                        cboTel.dataProvider = telData.sort();
                        cboPostalCode.dataProvider = postalData.sort();
                        cboCity.dataProvider = cityData.sort()
                        //ANR// Step 6 copy/paste/uncomment the line below and change 'cboGroup' to the name of the combo box defined in Step 4
                        // change 'groupData' to the name of the array defined in Step 1
                        //cboGroup.dataProvider = groupData.sort();
                       
                    }
                }
               
                //on fault
                function onFault(info:Object, token:Object = null) : void
                {       
                    Alert.show(info.toString());           
                }
            }
           
            private function SortDataGridData(strFieldNameToSort:String,recACToSort:ArrayCollectio n):ArrayCollection
            {
                try
                {
                    // CC -Orginal code by BJ and found at forum post http://forums.esri.com/Thread.asp?c=158&f=2421&t=285419&mc=6#msgid8861 59
                    var dataSortField:SortField = new SortField();
                    dataSortField.name=strFieldNameToSort;
                    var alphabetDataSort:Sort = new Sort();
                    alphabetDataSort.fields=[dataSortField];
                    recACToSort.sort=alphabetDataSort;
                    recACToSort.refresh();
                }
                catch(error:Error){    }
               
                return recACToSort;
            }
           
            private function searchFullExtent(value:String):void
            {
                var qWhere:String = "";
               
                try
                {
                    qWhere += value + " LIKE '%";
                   
                    switch (value)
                    {
                        case "Group":
                        {
                            qWhere += cboGroup.value.toString();
                            break;
                        }
                        case "Tel":
                        {
                            qWhere += cboTel.value.toString();
                            break;
                        }
                        case "PostalCode":
                        {
                            qWhere += cboPostalCode.value.toString();
                            break;
                        }
                        case "City":
                        {
                            qWhere += cboCity.value.toString();
                            break;
                        }
                        //ANR// Step 7 copy/paste/uncomment the section below, change "Group" to the exact argument specified
                        //on the 'Go' button in Step 4. change 'cboGroup' to the name you gave the combo box in Step 4
//                        case "Group":
//                        {
//                            qWhere += cboGroup.value.toString();
//                            break;
//                        }
                    }
                   
                    qWhere += "%'";
                   
                    if (qWhere != "")
                        qWhere += " AND ";
               
                }
                catch (error:Error)
                {
                    qWhere = "";               
                }
               
                queryFeatures(qWhere + queryExpr);
            }
           
            //query features
            private function queryFeatures(where:String):void
            {
                if (queryLayer)
                {
                    var queryTask:QueryTask = new QueryTask(queryLayer);
                    queryTask.disableClientCaching = true;
                    var query:Query = new Query();
                    query.outFields = queryFields.split(",");
                    query.returnGeometry = true;
                    query.where = where == "" ? queryExpr : where;
                    query.outSpatialReference = map.spatialReference;
                    queryTask.execute(query, new AsyncResponder(onResult, onFault)); 
                   
                   
                   
                   
                   
                   
                   
                    //WidgetEffects.flipWidget(this, viewStack, "selectedIndex", 0, 400);
                    showMessage(loadingLabel, true);   
                   
                    // on result
                    function onResult(featureSet:FeatureSet, token:Object = null):void               
                    {  
                        try
                        {                           
                            var recAC:ArrayCollection = createRecordData(featureSet);
                            recAC = SortDataGridData("title",recAC); // CC
                            addSharedData(widgetTitle, recAC);
                            wRepeater.dataProvider = recAC;
                            clearMessage();                       
                        }
                        catch (error:Error)
                        {
                            showMessage(error.message, false);
                        }   
                       
                    }
                   
                    //on fault
                    function onFault(info:Object, token:Object = null) : void
                    {                   
                        showMessage(info.toString(), false);        
                    }
                } 
            }
           
            //create record data new
            private function createRecordData(featureSet:FeatureSet):ArrayCollection
            {
                graphicsLayer.clear();
                var recAC:ArrayCollection = new ArrayCollection();
                if (!queryTitleField)
                    queryTitleField = featureSet.displayFieldName;
                var icon:String = widgetIcon;
               
                for each (var gra:Graphic in featureSet.features)                   
                {  
                    var obj:Object = gra.attributes;
                    var fld:String;
                    var value:String;
                    var title:String;
                    var content:String = "";
                    var arrayVerticalDataGridContent:Array = new Array();// CC
                    var link:String = "";
                    var point:MapPoint = getGeomCenter(gra);
                    fldAliases = featureSet.fieldAliases;
                   
                    ////////////////////////////////////////
                    // CC
                   
                    for (fld in obj)
                    {
                        value = obj[fld].toString();
                       
                        if (fld.toUpperCase() == queryTitleField.toUpperCase())
                        {
                            title = value;
                            if (!title)
                                title = widgetTitle;
                        }
                        else if (fld.toUpperCase() == queryLinkField.toUpperCase())
                        {
                            link = value;
                        }
                        else
                        {
                            // CC
                            // NOTE: Modified InfoPopuup.mxml line 84 to handle HTML input
                            if (fld.toUpperCase() != queryTitleField.toUpperCase()){
                                if (fldAliases[fld].toString() != 'Shape_Area' && fldAliases[fld].toString() != 'Shape_Length') {// CC
                                    content += "<font color='#DDDDDD'>[" + fldAliases[fld] + "]</font> <font color='#FFFF00'>" + value + "</font>\n";// CC
                                    //Push content into an array as an object so it can be displayed in a datagrid
                                    var infoNameValuePair:Object = {Name:fldAliases[fld],Value:value};
                                    arrayVerticalDataGridContent.push(infoNameValuePair)
                                }
                            }
                            // CC
                        }
                    }
                   
                    var infoData:Object =
                        {
                            icon: icon,
                            title: title,
                            content: content,
                            link: link,
                            point: point,
                            geometry: gra.geometry,
                                datacont: arrayVerticalDataGridContent //CC
                        };                
                    recAC.addItem(infoData);
                    //***
                    gra.addEventListener(MouseEvent.ROLL_OVER, mouseOverGraphic);
                    //gra.addEventListener(MouseEvent.ROLL_OUT, mouseOutGraphic);
                    gra.attributes = infoData;
                   
                    switch (gra.geometry.type)
                    {
                        case Geometry.POLYLINE:
                        {
                            gra.symbol = graphicLineSym;
                            break;
                        }
                           
                        case Geometry.POLYGON:
                        {
                            gra.symbol = graphicPolySym;
                            break;
                        }
                    }
                    graphicsLayer.add(gra);
                    //***
                }
               
                return recAC;
            }       
           
            //get geom center
            private function getGeomCenter(gra:Graphic):MapPoint
            {
                var pt:MapPoint;
                switch (gra.geometry.type)
                {
                    case Geometry.MAPPOINT:
                    {
                        pt = gra.geometry as MapPoint;
                        break;
                    }
                       
                    case Geometry.POLYLINE:
                    {
                        var pl:Polyline = gra.geometry as Polyline;
                        var pathCount:Number = pl.paths.length;
                        var pathIndex:int = int(pathCount / 2) - 1;
                        var midPath:Array = pl.paths[pathIndex];
                        var ptCount:Number = midPath.length;
                        var ptIndex:int = int(ptCount / 2) - 1;
                        pt = pl.getPoint(pathIndex, ptIndex);
                        break;
                    }
                       
                    case Geometry.POLYGON:
                    {
                        var poly:Polygon = gra.geometry as Polygon;
                        pt = poly.extent.center;
                        break;
                    }
                }
                return pt;
            }           
           
            //mouse over graphic
            private function mouseOverGraphic(event:MouseEvent):void
            {
                var gra:Graphic = event.currentTarget as Graphic;
                var infoData:Object = gra.attributes;
                this.showInfoWindow(infoData);
            }           
           
            //mouse out graphic
            private function mouseOutGraphic(event:MouseEvent):void
            {
                this.showInfoWindow(null);
            }   
           
            private var hitimer:uint;
           
            private function mouseOverRecord(event:MouseEvent):void
            {
                var infoData:Object = event.currentTarget.infoData;
                clearTimeout(hitimer);
                hitimer = setTimeout(showHighlight, 800, [infoData]);
            }
           
            private function mouseOutRecord():void
            {
                clearTimeout(hitimer);
                this.showInfoWindow(null);
            }           
           
            private function clickRecord(event:MouseEvent):void
            {
                var infoData:Object = event.currentTarget.infoData;
                var pt:MapPoint = infoData.point;
                if (map.scale > zoomScale)
                    map.scale = zoomScale;
                map.centerAt(pt);
            }           
           
            private function showHighlight(params:Array):void
            {
                var infoData:Object = params[0];
                var pt:MapPoint = infoData.point;
                //if (!map.extent.contains(pt))
                //map.centerAt(pt);
                this.showInfoWindow(params[0]);
            }           
           
            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
            {
                graphicsLayer.visible = false;
                this.showInfoWindow(null);
            }           
           
            private function widgetMinimizedHandler(event:Event):void
            {
                this.widgetClosedHandler(event);
            }
           
            private function widgetOpenedHandler(event:Event):void
            {
                graphicsLayer.visible = true;
            }
           
            private function showStateSearch(event:Event):void
            {
               
               
               
               
               
               
               
               
                //WidgetEffects.flipWidget(this, viewStack, "selectedIndex", 1, 400);
            }
           
            private function showStateResults(event:Event):void
            {
               
               
               
               
               
               
               
                //WidgetEffects.flipWidget(this, viewStack, "selectedIndex", 0, 400);
            }
        ]]>
    </fx:Script>
   

    <viewer:WidgetTemplate id="wTemplate" widgetClosed="widgetClosedHandler(event)"
                    widgetOpened="widgetOpenedHandler(event)"
                    widgetMinimized="widgetMinimizedHandler(event)">
       
        <mx:ViewStack id="viewStack" width="100%" height="99%" creationPolicy="all" >
            <mx:VBox width="100%" height="100%" verticalGap="4">
                <mx:HBox id="boxMessage" visible="{msgVisible}" includeInLayout="{msgVisible}" width="100%">
                    <mx:SWFLoader id="swfMessage" source="com/esri/solutions/flexviewer/assets/flash/loader.swf" visible="false" />
                    <mx:Text id="txtMessage" text="" styleName="WidgetText" width="90%"/>
                </mx:HBox>
                <mx:Repeater id="wRepeater">
                    <widgets:RecordData infoData="{wRepeater.currentItem}" mouseOver="mouseOverRecord(event)" mouseOut="mouseOutRecord()" click="clickRecord(event)"/>
                </mx:Repeater>
            </mx:VBox>
            <mx:VBox id="vboxQuery" width="100%" height="100%" verticalGap="4" visible="false">               
                <mx:Grid backgroundColor="#FFFFFF" backgroundAlpha="0" width="100%" paddingTop="10" paddingLeft="10" >
                    <mx:GridRow>
                        <mx:GridItem width="100">
                            <mx:Label text="Group:" styleName="WidgetText" />
                        </mx:GridItem>
                        <mx:GridItem width="175">
                            <mx:ComboBox id="cboGroup" editable="true" width="175" dropdownWidth="250"/>
                        </mx:GridItem>
                        <mx:GridItem width="50">
                            <mx:Button label="GO" click="searchFullExtent('Group')"/>
                        </mx:GridItem>
                    </mx:GridRow>
                    <mx:GridRow>
                        <mx:GridItem width="100">
                            <mx:Label text="Tel:" styleName="WidgetText" />
                        </mx:GridItem>
                        <mx:GridItem width="175">
                            <mx:ComboBox id="cboTel" editable="true" width="175" dropdownWidth="250"/>
                        </mx:GridItem>
                        <mx:GridItem width="50">
                            <mx:Button label="GO" click="searchFullExtent('Tel')"/>
                        </mx:GridItem>
                    </mx:GridRow>
                    <mx:GridRow>
                        <mx:GridItem width="100">
                            <mx:Label text="Postal Code:" styleName="WidgetText" />
                        </mx:GridItem>
                        <mx:GridItem width="175">
                            <mx:ComboBox id="cboPostalCode" editable="true" width="175" dropdownWidth="250"/>
                        </mx:GridItem>
                        <mx:GridItem width="50">
                            <mx:Button label="GO" click="searchFullExtent('PostalCode')"/>
                        </mx:GridItem>
                    </mx:GridRow>
                    <mx:GridRow>
                        <mx:GridItem width="100">
                            <mx:Label text="City:" styleName="WidgetText" />
                        </mx:GridItem>
                        <mx:GridItem width="175">
                            <mx:ComboBox id="cboCity" editable="true" width="175" dropdownWidth="250"/>
                        </mx:GridItem>
                        <mx:GridItem width="50">
                            <mx:Button label="GO" click="searchFullExtent('City')"/>
                        </mx:GridItem>
                    </mx:GridRow>
                    <!-- //ANR// Step 5 copy/paste/uncomment the section below to add a new row with
                        a label, combo box, and 'Go' button
                        change the label to anything (preferably the name of the field)
                        change the name of the combobox to something meaningful. might be best to stick to the naming convention (cboNameOfField)
                        change the argument of searchfullextent on the button to the name of your field-->
                    <!--mx:GridRow>
                        <mx:GridItem width="100">
                            <mx:Label text="Group:" styleName="WidgetText" />
                        </mx:GridItem>
                        <mx:GridItem width="175">
                            <mx:ComboBox id="cboGroup" editable="true" width="175" dropdownWidth="250"/>
                        </mx:GridItem>
                        <mx:GridItem width="50">
                            <mx:Button label="GO" click="searchFullExtent('Group')"/>
                        </mx:GridItem>
                    </mx:GridRow-->
                </mx:Grid>
            </mx:VBox>           
        </mx:ViewStack>
    </viewer:WidgetTemplate>
   
</viewer:BaseWidget>

 

 

 

 

 

Any ideas would be much appreciated!!!! Thanks!

 

Phil

 
Replies
  • Currently Being Moderated
    Sep 21, 2010 9:29 AM   in reply to philippschnetzer

    Are those components in a SWC?  I would expect them to also have a namespace

    that looks more like http://.....

     

    Otherwise, make sure the path to the components are correct.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points