Something I'm still a little confused about...

[JustinRiggs]

Hi everyone,

Well, with the help of the samples and this forum, my humble little application is coming along fairly well. The boss is happy, which makes me happy, and I'm actually pretty pleased with what I've been able to develop so far... I do have one little problem, however, and I just can't get clear on whether or not what I want to do is possible.

My problem is that I showed my boss the sample Viewer before I began developing my own application. Obviously, what the guys at ESRI did is really impressive, so he got the idea that I could develop something that would give him the same look and feel. I've talked him down from that ideal by pointing out that our users wouldn't know what to do with such a nice interface, but there is one thing he won't budge on: he wants something that is just like the Navigation widget from the Sample Viewer.

Now, in my limited knowledge, it seems like I should somehow be able to "transplant" the code from the Sample Viewers source to my project. Is that just crazy talk? Is it just too involved for a beginner like me to do?

I could really use someone's help on this. If I can't produce this, I've got to know exactly why so that I can explain it to The Man.

Thanks for all your help (everyone), and happy coding!

Justin

[JohnRitsko]

Dear Sir,

I solved the placement issue.the only problem which I am facing about skin and icon images of navigation control are not visible on the control.please guide me what can be the reason.


Thanks.

Nadir,

  Check these as well.  There was also a visible="false" in one of these that I removed as well.  Just saying this was something I had to change as well to get mine working.


Navigation.mxml

<s:dataProvider>
                <s:ArrayCollection>
                    <fx:Object action="pan"
                               imageIcon="com/esri/Navigation/assets/images/i_pan.png"
                               label="Pan"/>
                    <fx:Object action="zoomin"
                               imageIcon="com/esri/Navigation/assets/images/i_zoomin.png"
                               label="Zoom In"/>
                    <fx:Object action="zoomout"
                               imageIcon="com/esri/Navigation/assets/images/i_zoomout.png"
                               label="Zoom Out"/>
                </s:ArrayCollection>
            </s:dataProvider>

[RobertScheitlin__GISP]

All,

   Here is an updated version fro Flex API 3.6 along with the missing image issue resolved.

[NadirHussain]

Dear All,

i want to change the color and alpha values for the navigation control in seperate application for flex.i am not using the compile version of navigation control.
  Thanks for everyone who help me.

[RobertScheitlin__GISP]

Nadir,

   The navigation controls color is controlled by the applications CSS.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:navigation="com.esri.Navigation.*"
               pageTitle="Navigation Sample App"
               minWidth="955" minHeight="600">
    <fx:Style source="default.css" />
    <esri:Map id="myMap" zoomSliderVisible="false">
        <esri:extent>
            <esri:Extent xmin="-5" ymin="25" xmax="20" ymax="70">
                <esri:SpatialReference wkid="4326"/>
            </esri:Extent>
        </esri:extent>
        
        <esri:ArcGISTiledMapServiceLayer
            url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />
    </esri:Map>
    <navigation:NavigationWidget map="{myMap}" left="12" top="20" /> 
</s:Application>

CSS

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace esri "http://www.esri.com/2008/ags";

s|global {
    fontFamily: Verdana;
    fontSize: 10;
    chromeColor: #333333;
    contentBackgroundColor: #333333;
    color: white;
    symbolColor: white;
    rollOverColor: #101010;
    selectionColor: #000000;
    focusColor: #FFD700;
    accentColor: white;
    textSelectedColor: white;
    textRollOverColor: white;
    contentBackgroundAlpha: 0.8;
    modalTransparencyColor: #777777;
    modalTransparencyBlur: 1;
    modalTransparency: 0.5;
    modalTransparencyDuration: 1000;
}

s|Application {
    backgroundColor: #ffffff;
    color: white;
    backgroundAlpha: 0.8;
}

mx|ToolTip{
    color: white;
    backgroundColor: #333333;
    fontSize: 10;
    fontFamily: Verdana;
}