nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

PopUpRendererSkin.mxml with Radio Buttons

MarkHanway1

I have added the Flex 2.4 API PopUprendererSkin.mxml and the supporClasses to the 2.4 Sample Flex Viewer. I am able to open another widget and have customized pictures, fields, etc. I would like to add a Radio Button Group that allows control of 2 Feature layers that are listed in my config.xml. Has anyone had success in toggling layers in the PopUpRendererSkin.mxml?

Thanks in advance,

Mark Hanway

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

Mark,

You need to make sure you are very clear with your questions and have an exact desired direction you are attempting to achieve when you ask question on the forums. If you post generic questions or comments (like "showing additional as well") you are less likely to receive any response.

Toggling a operational layer on or off is very simple and can easily be done in the popup Skin:

            override protected function commitProperties():void             {                 super.commitProperties();                  var featureLayer:FeatureLayer = hostComponent.featureLayer;                 var formattedAttributes:Object = hostComponent.formattedAttributes;                 var graphic:Graphic = hostComponent.graphic;                 var map:Map = hostComponent.map;                 var popUpInfo:PopUpInfo = hostComponent.popUpInfo;                 var validMediaInfos:Array = hostComponent.validPopUpMediaInfos;                 var geometry:Geometry = graphic ? graphic.geometry : null;                 var layerDetails:LayerDetails = featureLayer ? featureLayer.layerDetails : null;                  vGroup.removeAllElements();                 vGroup.addElement(ToggleLayers);                 if (popUpInfo)                 {                     if (popUpInfo.title)                     {                         titleText.text = StringUtil.substitute(popUpInfo.title, formattedAttributes);                         if (titleText.text)                         {                             vGroup.addElement(titleText);                             vGroup.addElement(titleLine);                         }                     }                      var htmlText:String;                     if (popUpInfo.description)                     {                         htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);                         if (htmlText)                         {                             var descriptionText:Text = new PopUpText();                             descriptionText.percentWidth = 100;                             descriptionText.styleSheet = textStyleSheet;                                                          cleanAndSetHtmlText(descriptionText, htmlText);                             trace(descriptionText.htmlText);                             vGroup.addElement(descriptionText);                         }                     }                     else                     {                         var descriptionForm:Form;                         for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)                         {                             if (fieldInfo.visible)                             {                                 var formItem:FormItem = new FormItem();                                 formItem.label = fieldInfo.label || fieldInfo.fieldName;                                                                  var label:Label;                                 htmlText = formattedAttributes[fieldInfo.fieldName];                                 if (htmlText)                                 {                                     // convert attribute field values that just contain URLs into links                                      var match:Array = htmlText.match(/^\s*((https?|ftp):\/\/\S+)\s*$/i);                                     if (match && match.length > 0)                                     {                                         label = new Label();                                         htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";                                     }                                     else                                     {                                         label = new PopUpText();                                     }                                     cleanAndSetHtmlText(label, htmlText);                                     label.selectable = true;                                     label.styleSheet = this.textStyleSheet;                                     label.width = 150;                                     formItem.addChild(label);                                 }                                 if (!descriptionForm)                                 {                                     descriptionForm = new Form();                                     descriptionForm.percentWidth = 100;                                     descriptionForm.horizontalScrollPolicy = ScrollPolicy.OFF;                                     descriptionForm.verticalScrollPolicy = ScrollPolicy.OFF;                                     descriptionForm.styleName = "formStyle";                                 }                                 descriptionForm.addChild(formItem);                             }                         }                         if (descriptionForm)                         {                             vGroup.addElement(descriptionForm);                         }                     }                      if (validMediaInfos && validMediaInfos.length > 0)                     {                         vGroup.addElement(mediaBrowser);                         mediaBrowser.attributes = graphic.attributes;                         mediaBrowser.formattedAttributes = formattedAttributes;                         mediaBrowser.popUpFieldInfos = popUpInfo.popUpFieldInfos;                         mediaBrowser.popUpMediaInfos = validMediaInfos;                     }                      if (popUpInfo.showAttachments && graphic && featureLayer                         && layerDetails && layerDetails.hasAttachments && layerDetails.objectIdField)                     {                         vGroup.addElement(attachmentInspector);                         attachmentInspector.showAttachments(graphic, featureLayer);                     }                      if (map && geometry)                     {                         vGroup.addElement(zoomToButton);                     }                 }             }                          protected function layerRBgroup_changeHandler(event:Event):void             {                 var map:Map = hostComponent.map;                 map.getLayer("Public Safety").visible = !map.getLayer("Public Safety").visible;                 map.getLayer("Bridges").visible = !map.getLayer("Bridges").visible;             }                      ]]>     </fx:Script>      <fx:Declarations>         <!--- @private -->         <mx:Text id="titleText"                  width="100%"                  fontWeight="bold"/>          <!--- @private -->         <s:Line id="titleLine" width="100%">             <s:stroke>                 <s:SolidColorStroke id="titleLineSymbol"                                     color="black"                                     weight="1"/>             </s:stroke>         </s:Line>          <!--- @private -->         <supportClasses:PopUpMediaBrowser id="mediaBrowser"                                           width="100%"                                           skinClass="com.esri.ags.skins.supportClasses.PopUpMediaBrowserSkin"/>          <!--- @private -->         <esri:AttachmentInspector id="attachmentInspector"                                   width="100%"                                   addEnabled="false"                                   deleteEnabled="false"/>          <!--- @private -->         <mx:LinkButton id="zoomToButton"                        click="zoomToButton_clickHandler(event)"                        fontWeight="bold"                        label="{resourceManager.getString('ESRIMessages', 'zoomLabel')}"/>                  <!--- @private -->         <s:RadioButtonGroup id="layerRBgroup" change="layerRBgroup_changeHandler(event)"/>                  <!--- @private -->         <s:HGroup gap="6" verticalAlign="middle" id="ToggleLayers">             <s:RadioButton id="layerA" group="{layerRBgroup}" label="Toggle Layer A" selected="true"/>             <s:RadioButton id="layerB" group="{layerRBgroup}" label="Toggle Layer B"/>         </s:HGroup>     </fx:Declarations>

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

All comments

RobertScheitlin__GISP

Mark,

First of all, In the future be sure to post Flex Viewer and/or Widget questions to the Flex Viewer forum:

http://forums.arcgis.com/forums/111-ArcGIS-Viewer-for-Flex

Are you talking about just toggling the visibility of those two layer?

MarkHanway1

Mark,

First of all, In the future be sure to post Flex Viewer and/or Widget questions to the Flex Viewer forum:

http://forums.arcgis.com/forums/111-ArcGIS-Viewer-for-Flex

Are you talking about just toggling the visibility of those two layer?

Thanks Robert...I would like to toggle 2 feature layers in my popup, but I am also looking the capability of adding additional feature layers in the config.xml and showing additional as well.

RobertScheitlin__GISP

            override protected function commitProperties():void             {                 super.commitProperties();                  var featureLayer:FeatureLayer = hostComponent.featureLayer;                 var formattedAttributes:Object = hostComponent.formattedAttributes;                 var graphic:Graphic = hostComponent.graphic;                 var map:Map = hostComponent.map;                 var popUpInfo:PopUpInfo = hostComponent.popUpInfo;                 var validMediaInfos:Array = hostComponent.validPopUpMediaInfos;                 var geometry:Geometry = graphic ? graphic.geometry : null;                 var layerDetails:LayerDetails = featureLayer ? featureLayer.layerDetails : null;                  vGroup.removeAllElements();                 vGroup.addElement(ToggleLayers);                 if (popUpInfo)                 {                     if (popUpInfo.title)                     {                         titleText.text = StringUtil.substitute(popUpInfo.title, formattedAttributes);                         if (titleText.text)                         {                             vGroup.addElement(titleText);                             vGroup.addElement(titleLine);                         }                     }                      var htmlText:String;                     if (popUpInfo.description)                     {                         htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);                         if (htmlText)                         {                             var descriptionText:Text = new PopUpText();                             descriptionText.percentWidth = 100;                             descriptionText.styleSheet = textStyleSheet;                                                          cleanAndSetHtmlText(descriptionText, htmlText);                             trace(descriptionText.htmlText);                             vGroup.addElement(descriptionText);                         }                     }                     else                     {                         var descriptionForm:Form;                         for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)                         {                             if (fieldInfo.visible)                             {                                 var formItem:FormItem = new FormItem();                                 formItem.label = fieldInfo.label || fieldInfo.fieldName;                                                                  var label:Label;                                 htmlText = formattedAttributes[fieldInfo.fieldName];                                 if (htmlText)                                 {                                     // convert attribute field values that just contain URLs into links                                      var match:Array = htmlText.match(/^\s*((https?|ftp):\/\/\S+)\s*$/i);                                     if (match && match.length > 0)                                     {                                         label = new Label();                                         htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";                                     }                                     else                                     {                                         label = new PopUpText();                                     }                                     cleanAndSetHtmlText(label, htmlText);                                     label.selectable = true;                                     label.styleSheet = this.textStyleSheet;                                     label.width = 150;                                     formItem.addChild(label);                                 }                                 if (!descriptionForm)                                 {                                     descriptionForm = new Form();                                     descriptionForm.percentWidth = 100;                                     descriptionForm.horizontalScrollPolicy = ScrollPolicy.OFF;                                     descriptionForm.verticalScrollPolicy = ScrollPolicy.OFF;                                     descriptionForm.styleName = "formStyle";                                 }                                 descriptionForm.addChild(formItem);                             }                         }                         if (descriptionForm)                         {                             vGroup.addElement(descriptionForm);                         }                     }                      if (validMediaInfos && validMediaInfos.length > 0)                     {                         vGroup.addElement(mediaBrowser);                         mediaBrowser.attributes = graphic.attributes;                         mediaBrowser.formattedAttributes = formattedAttributes;                         mediaBrowser.popUpFieldInfos = popUpInfo.popUpFieldInfos;                         mediaBrowser.popUpMediaInfos = validMediaInfos;                     }                      if (popUpInfo.showAttachments && graphic && featureLayer                         && layerDetails && layerDetails.hasAttachments && layerDetails.objectIdField)                     {                         vGroup.addElement(attachmentInspector);                         attachmentInspector.showAttachments(graphic, featureLayer);                     }                      if (map && geometry)                     {                         vGroup.addElement(zoomToButton);                     }                 }             }                          protected function layerRBgroup_changeHandler(event:Event):void             {                 var map:Map = hostComponent.map;                 map.getLayer("Public Safety").visible = !map.getLayer("Public Safety").visible;                 map.getLayer("Bridges").visible = !map.getLayer("Bridges").visible;             }                      ]]>     </fx:Script>      <fx:Declarations>         <!--- @private -->         <mx:Text id="titleText"                  width="100%"                  fontWeight="bold"/>          <!--- @private -->         <s:Line id="titleLine" width="100%">             <s:stroke>                 <s:SolidColorStroke id="titleLineSymbol"                                     color="black"                                     weight="1"/>             </s:stroke>         </s:Line>          <!--- @private -->         <supportClasses:PopUpMediaBrowser id="mediaBrowser"                                           width="100%"                                           skinClass="com.esri.ags.skins.supportClasses.PopUpMediaBrowserSkin"/>          <!--- @private -->         <esri:AttachmentInspector id="attachmentInspector"                                   width="100%"                                   addEnabled="false"                                   deleteEnabled="false"/>          <!--- @private -->         <mx:LinkButton id="zoomToButton"                        click="zoomToButton_clickHandler(event)"                        fontWeight="bold"                        label="{resourceManager.getString('ESRIMessages', 'zoomLabel')}"/>                  <!--- @private -->         <s:RadioButtonGroup id="layerRBgroup" change="layerRBgroup_changeHandler(event)"/>                  <!--- @private -->         <s:HGroup gap="6" verticalAlign="middle" id="ToggleLayers">             <s:RadioButton id="layerA" group="{layerRBgroup}" label="Toggle Layer A" selected="true"/>             <s:RadioButton id="layerB" group="{layerRBgroup}" label="Toggle Layer B"/>         </s:HGroup>     </fx:Declarations>

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

MarkHanway1

Robert,
Thanks for replying to my forum post. In the future I�??ll be more concise and clear. I was spinning my wheels and hastily posted my question to the forum. I appreciate the feedback. Thank you for your help, your answer was insightful and helpful as always.

RhettZufelt

I have used this code as a starting point and now have buttons that turn on/off a layer(s) when selected.

I would like to be able to make sure the layer is always toggled off when the popup window is closed. I figure I need to attach to the button close event or something, but don't know where to access that.

Is this something that is possible? If so, any ideas where I would look?

Thanks,

R_

RobertScheitlin__GISP

Rhett,

Sure, give this a try:

hostComponent.parent.parent.parent.parent.addEventListener("close", infoWinClose_Handler);
            private function infoWinClose_Handler(event:Event):void
            {
                //your code here
                trace(event.type);
            }

RhettZufelt

Excellent, thanks yet again.

Curious how one is supposed to know how many parent.parent.parent(s) to string together for this?

R_

Guess I should start these as new posts so I can give you a check, not just a point.

RobertScheitlin__GISP

Rhett,

There may be an easier way but I know the the ultimate parent I was looking for was an info window so I just added a trace(hostComponent.parent) that printed a string of the parent/child component name to the console window and that told me how many times to call parent to get the infowindow.

RhettZufelt

OIC,

Thanks for the info, that is good "trick" to know.

R_

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.