Tabbed pop-up window?

Question

Does the ArcGIS API for Flex support tabbed pop-up windows?  The ArcGIS Resource Center (ArcGIS API for Flex 2.5) states: "If more than one feature with pop-up information is located at the clicked point, you can view the pop-up content for each feature in turn in the same pop-up window."  However, it doesn't state how this is accomplished. The tab function is supported in ArcGIS Explorer, but I'm not seeing it in the API or Flex Viewer.

I'd like to configure my pop-ups for a point feature class (dynamic) to have tabs for two sets of attributes (two facilities on the same structure) at the same point location.  Has anyone developed with this type of tabbed pop-up configuration? Any ideas?

kenbuja · Answer

No, this was built pretty much from scratch a few years back that incorporates the TOC control developed by Tom Hill.

And don't forget to mark the posts that helpful by clicking on the up arrow!

luis4018 · Answer

Ken, thanks for the quick response, thats what I was looking for...I truly appreciate it. As a matter of fact, the entire layout of your app is what i am trying to do. Something simple and lite thats extremely user friendly. I am using the sample Dynamic Map Layers On/Off and keep getting a "Could not resolve <samples:MainTOC> to a component implementation." error. I created a Samples folder in my project and created two new components then copied pasted the code directly into them..dont have a clue why this wont work. I know this isnt the proper forum for this but was wondering if you based your application of that same sample code. Thanks, again.
Luis

kenbuja · Answer

In one of my projects, I run an IdentifyTask on the visible layers in a map service. The results from each layer are put into a grid on a separate tab. This is built on the fly, since the user has the ability to turn on different layers and since each layer has different attributes. Each grid has the event handlers added to them so that rolling over or clicking a cell will highlight the feature on the map.

This is the code I use to build the tabs and insert them into the infoWindow.
            protected function MainMap_mapClickHandler(event:MapMouseEvent):void
            {
                var identifyParams:IdentifyParameters = new IdentifyParameters();
                var clickGraphic:Graphic = new Graphic(event.mapPoint, clickPointSymbol);
                
                identifyParams.returnGeometry = true;
                identifyParams.tolerance = 5;
                identifyParams.width = MainMap.width;
                identifyParams.height = MainMap.height;
                identifyParams.geometry = event.mapPoint;
                identifyParams.mapExtent = MainMap.extent;
                identifyParams.spatialReference = MainMap.spatialReference;
                identifyParams.layerIds = layerLIS.visibleLayers.source;
                identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                clickGraphicsLayer.clear();
                MainMap.infoWindow.hide();
                
                graphicsLayer.clear();
                cursorManager.setBusyCursor();
                
                identifyTask.url = layerLIS.url;
                identifyTask.execute(identifyParams, new AsyncResponder(resultFunction, faultFunction, clickGraphic));
                
                function resultFunction(results:Array, clickGraphic:Graphic):void
                {
                    var myInfoRenderer:InfoRenderer = new InfoRenderer;
                    var mapPoint:MapPoint = MapPoint(clickGraphic.geometry);
                    var point:Point = MainMap.toScreen(mapPoint);
                    
                    if (results && results.length > 0)
                    {
                        var oldLayer:Number = -1;
                        var resultsArray:Array = [];
                        var result:IdentifyResult;
                        var resultGraphic:Graphic;
                        var tab:TabNavigator = new TabNavigator();
                        var newVBox:VBox = new VBox;
                        var newVBoxDG:VBox = new VBox;
                        var newText:Text = new Text;
                        var newDG:DataGrid = new DataGrid;
                        var graphic:Graphic;
                        
                        clickGraphicsLayer.add(clickGraphic);
                        
                        result = results[0];
                        oldLayer = result.layerId;
                        resultsArray.push(result.feature.attributes);
                        newText = new Text;
                        newText.text = result.layerName;
                        graphic = result.feature;
                        graphic.alpha = 0.3;
                        graphicsLayer.add(graphic);
                        tab.width = 400;
                        tab.height = 230;
                        
                        for (var i:int = 1; i < results.length; i++)
                        {
                            result = results;
                            graphic = new Graphic;
                            graphic = result.feature;
                            graphic.alpha = 0.3;
                            graphicsLayer.add(graphic);
                            if (result.layerId == oldLayer)
                            {
                                resultsArray.push(result.feature.attributes);
                            }
                            else
                            {
                                newDG = new DataGrid;
                                newVBox = new VBox;
                                newDG.dataProvider = resultsArray;
                                if (!(result.feature.attributes.source == undefined))
                                {
                                    for each (var dgCol:DataGridColumn in newDG.columns)
                                    {
                                        if (dgCol.dataField == "Source")
                                        {
                                            dgCol.itemRenderer = new ClassFactory(HyperLinkField);
                                        }
                                    }
                                }
                                
                                newDG.addEventListener(ListEvent.ITEM_CLICK, newDG_ItemRollOver, false, 0, true);
                                newDG.addEventListener(ListEvent.ITEM_ROLL_OUT, newDG_ItemRollOut, false, 0 ,true);
                                newDG.addEventListener(ListEvent.ITEM_ROLL_OVER, newDG_ItemRollOver, false, 0, true);
                                
                                newVBox.addElement(newText);
                                newVBox.addElement(newDG);
                                //                                newVBox.addElement(newVBoxDG);
                                newVBox.label = oldLayer.toString();
                                newVBox.label = oldLayer.toString();
                                tab.addElement(newVBox);
                                myInfoRenderer.addElement(tab);
                                
                                newText = new Text;
                                newText.text = result.layerName;
                                resultsArray = [];
                                resultsArray.push(result.feature.attributes);
                            }
                            oldLayer = result.layerId;
                        }
                        
                        newVBox = new VBox;
                        newVBoxDG = new VBox;
                        newDG = new DataGrid;
                        newDG.addEventListener(ListEvent.ITEM_CLICK, newDG_ItemRollOver, false, 0, true);
                        newDG.addEventListener(ListEvent.ITEM_ROLL_OUT, newDG_ItemRollOut, false, 0, true);
                        newDG.addEventListener(ListEvent.ITEM_ROLL_OVER, newDG_ItemRollOver, false, 0, true);
                        newVBox.addElement(newText);
                        newDG.dataProvider = resultsArray;
                        
                        if (!(results[0].feature.attributes.Source == undefined))
                        {
                            for each (var dgCol:DataGridColumn in newDG.columns)
                            {
                                if (dgCol.dataField == "Source")
                                {
                                    dgCol.itemRenderer = new ClassFactory(HyperLinkField);
                                }
                            }
                        }
                        newVBox.addElement(newDG);
                        //                        newVBoxDG.addElement(newDG);
                        //                        newVBox.addElement(newVBoxDG);
                        newVBox.label = oldLayer.toString();
                        tab.addElement(newVBox);
                        myInfoRenderer.addElement(tab);
                        
                        cursorManager.removeBusyCursor();
                        
                        MainMap.infoWindow.content = myInfoRenderer;
                        MainMap.infoWindow.label = "Results";
                        MainMap.infoWindow.show(MainMap.toMap(point));
                        MainMap.infoWindow.addEventListener(Event.CLOSE, infoWindow_Close, false, 0, true);
                    }
                }
            }