Table of Contents - Legend Widget for FlexViewer 2.x

RobertScheitlin__GISP · ‎12-01-2010

All,

Here is the next in my line of widgets for the FlexViewer 2.x.

The legend portion of this widget is the same code as my dynamic legend widget so,

IT IS FOR ARCGIS SERVER 10 OR GREATER ONLY

This is just a simple TOC Widget that includes my dynamic legend component.
This widget also includes my enhancement for map service transparency,
right click context menu for zoom to make layer visible, and my scale
dependent renderer for the TOC checkboxes.

RhettZufelt · ‎08-15-2012

Ok, I just grabbed an example from the mapservices directory, here is the one that I was actually testing against:

[ATTACH=CONFIG]16976[/ATTACH]

If my description in the layer properties is:

<p>For more information, go to: <a href="http://gis01.wch-rcc.com/final3" target="_blank"><span style="color:#FFD700">GIS01</span></a></p>

But, if I select it, it comes up with the mapservices window with this info in the Description field. In the previous example, it looked more like an infowindow within the map, not a separate link directly to the service directory.

R_

RobertScheitlin__GISP · ‎08-15-2012

Rhett,

You have something in the Description element but if you are clicking on the meta button on a Map service and not an individual layer then it use the SERVICE DESCRIPTION.

RhettZufelt · ‎08-15-2012

Hmm, I must be missing something. I do not see a meta button, and thought it was supposed to be the Description tab under the dropdown.

Doesn't seem to matter if I put load a service with individual layer or not, I only get the drop down arrow for the initial layer. If I expand it, the layers under it do not have a drop down arrow.

If I load just the mapservice, I get the mapservice directory, if I load as mapservice/0, then I get the rest endpoint directory.

I am still on 10, is this a 10.1 requirement or something?

R_

RobertScheitlin__GISP · ‎08-15-2012

Rhett,

You can see what the Description button (meaning metadata) is suppose to do on my live preview site:

http://gis.calhouncounty.org/FlexViewer3.0/index.html?config=config-toc.xml

Checkout the parcel data layer and you will see that the map service layer and the individual layer gets different data displayed for their description.

RhettZufelt · ‎08-15-2012

OK, got it working now.

I could get it to report for the service, but the dropdown arrow for the individual layer would not respond. If I click on it, nothing happens.

Then, I set

<disablezoomtomenuoption>false</disablezoomtomenuoption>

and it is working now.

Apparently, when the zoomtomenuoption is disabled, it disables the Description (or drop down option) for the individual layer as well.

R_

MayJeff · ‎08-20-2012

How do you expand just specific map service (Maybe one or two map services) instead of "expand all" the map services?

Thanks.

RobertScheitlin__GISP · ‎08-20-2012

May Jeff,

There is no option for that.

PaulFerro1 · ‎09-11-2012

Hi Robert,

Thanks for your reply. I tried adding:

cssStyleDeclarationPopUpRendererLink.setStyle("linkActiveColor", titleColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkNormalColor", textColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkHoverColor", titleColor);

also tried

cssStyleDeclarationPopUpRendererLink.setStyle("linkActiveColor", titleColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkNormalColor", titleColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkHoverColor", titleColor);

I recompiled and ran but the default blue for hyperlinks still persists. I also looked in the DetailsWindow.mxml, but didn't see anything in there? Any ideas?

Paul,

That color is just the default that come from Adobe Flex in general for hyperlinks. To fix that you will have to modify the UIManager.as.

UNTESTED changes:

        //Style RichEditableText
        if (numberOfStyleColors > 4)
        {
            var cssStyleDeclarationRET:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyleDeclarationRET.setStyle("focusedTextSelectionColor", rolloverColor);
            cssStyleDeclarationRET.setStyle("unfocusedTextSelectionColor", rolloverColor);
            
            cssStyleDeclarationPopUpRendererLink.setStyle("linkActiveColor", titleColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkNormalColor", textColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkHoverColor", titleColor);
            
            topLevelStyleManager.setStyleDeclaration("spark.components.RichEditableText", cssStyleDeclarationRET, false);

            var cssStyleDeclarationTI:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyleDeclarationTI.setStyle("chromeColor", textColor);
            topLevelStyleManager.setStyleDeclaration("spark.components.TextInput", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.TextArea", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.TextInput", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.TextArea", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.VSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.VSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.HSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.HSlider", cssStyleDeclarationTI, false);
        }

RobertScheitlin__GISP · ‎09-11-2012

Paul,

As I mentioned it was untested code. So here are the necessary changes:

        //Style RichEditableText
        if (numberOfStyleColors > 4)
        {
            var cssStyleDeclarationRET:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyleDeclarationRET.setStyle("focusedTextSelectionColor", rolloverColor);
            cssStyleDeclarationRET.setStyle("unfocusedTextSelectionColor", rolloverColor);
            cssStyleDeclarationRET.setStyle("linkActiveColor", titleColor);
            cssStyleDeclarationRET.setStyle("linkNormalColor", textColor);
            cssStyleDeclarationRET.setStyle("linkHoverColor", titleColor);
            topLevelStyleManager.setStyleDeclaration("spark.components.RichEditableText", cssStyleDeclarationRET, false);            

            var cssStyleDeclarationTI:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyleDeclarationTI.setStyle("chromeColor", textColor);
            topLevelStyleManager.setStyleDeclaration("spark.components.TextInput", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.TextArea", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.TextInput", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.TextArea", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.VSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.VSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.HSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.HSlider", cssStyleDeclarationTI, false);
        }

And replace the whole content of the DetailsWindow.mxml with this:

<?xml version="1.0" encoding="utf-8"?>
<TOC:ResizeTitleWindow 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:TOC="widgets.TOC.*" 
                       width="400" height="300"
                       title="{_detailsTitle}"
                       close="closeMe()"  
                       cornerRadius="6"
                       skinClass="widgets.TOC.ResizeTitleWindowSkin"
                       initialize="resizetitlewindow1_initializeHandler(event)">
    <TOC:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </TOC:layout>
    
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.TextLayoutFormat;
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.elements.Configuration;
            import flashx.textLayout.formats.TextDecoration;
            
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;
            
            [Bindable] private var _content:String;
            
            [Bindable] private var _detailsTitle:String;
            
            [Bindable] private var textLayoutConfiguration:Configuration;
            
            private function closeMe():void
            {
                PopUpManager.removePopUp(this);
            }
            
            public function set windowDetails(value:String):void
            {
                _content = value;
            }
            
            public function set detailsTitle(value:String):void
            {
                _detailsTitle = value;
            }
            
            protected function resizetitlewindow1_initializeHandler(event:FlexEvent):void
            {
                textLayoutConfiguration = new Configuration();
                var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkActiveColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkActiveFormat = textLayoutFormat;
                textLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkHoverColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkHoverFormat = textLayoutFormat;
                textLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkNormalColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkNormalFormat = textLayoutFormat;
            }
            
        ]]>
    </fx:Script>
    
    <s:Scroller width="100%" height="100%"
                hasFocusableChildren="false"
                measuredSizeIncludesScrollBars="false"
                minViewportInset="1">
        <s:RichEditableText editable="false"
                            paddingLeft="5"
                            paddingRight="5"
                            paddingTop="10"
                            backgroundAlpha="{getStyle('backgroundAlpha')}"
                             backgroundColor="{getStyle('backgroundColor')}"
                            textFlow="{TextConverter.importToFlow(_content, TextConverter.TEXT_FIELD_HTML_FORMAT, textLayoutConfiguration)}"/>
    </s:Scroller>
    <TOC:controlBarContent>
    </TOC:controlBarContent>
    <TOC:controlBarLayout>
        <s:HorizontalLayout horizontalAlign="right" paddingTop="3" paddingBottom="2" paddingRight="5" clipAndEnableScrolling="true" />
    </TOC:controlBarLayout>
</TOC:ResizeTitleWindow>

PaulFerro1 · ‎09-12-2012

Thanks Robert, that worked.

However, If I wanted the "linkNormalColor" to match my UI title color would I replace "text" in the DetailsWindow.mxml with "title"?

protected function resizetitlewindow1_initializeHandler(event:FlexEvent):void
            {
                textLayoutConfiguration = new Configuration();
                var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkActiveColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkActiveFormat = textLayoutFormat;
                textLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkHoverColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkHoverFormat = textLayoutFormat;
                textLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkNormalColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkNormalFormat = textLayoutFormat;
            }

as well as here? Thanks again for the help!!

 cssStyleDeclarationRET.setStyle("linkNormalColor", titleColor);