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; } } }

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

Vind meer berichten getagd met

Accepted answers

All comments

BjornSvensson

Yes, it's possible to re-use logic from with Flex Viewer to another "straight" API application. The key is to figure out what viewer-specific code to remove 🙂

In theory (I haven't tried this), you should be able

Copy the Navigation widget folder/package/directory into your own Flex project.
Remove all references of viewer stuff.
Turn off the default slider on your map using <esri:Map zoomSliderVisible="false">. Or you will end up with two of them...
Use the custom Navigation class (which was part of the Navigation folder above) in your main mxml page. Something like this (assuming you copied over the fadeOut/fadeOver to the Declaration section of your own mxml page):
Possibly set some CSS, stylesheet, theme depending on what colors & styling you want.

JustinRiggs

"The key is to figure out what viewer-specific code to remove" - LOL. For someone with my coding experience, that's like asking a blind man to find all the needles in a haystack. It's going to be painful, and probably amusing for anyone who gets to watch.

I really appreciate the response, though, because now that I know it's possible I can get to work on making it happen. Thanks for being so responsive, Bjorn - I really do appreciate it.

JustinRiggs

UPDATE:

Well, miraculously I've been able to get the Navigation widget to appear in my "straight" Flex API application. None of the skins are applying for some reason, but I think I can figure that one out on my own. The reason I'm writing again is to get some ideas about another problem I'm facing...

Even though the widget appears on the interface, not all of the functionality is working. The pan arrows and the zoom slider themselves work, but the full extent, previous extent, and pan, zoom in, and zoom out button bar are all broken. I only changed code in the NavigationWidget.mxml file, but something I did must have broken something. To give you an idea of what I did, I deleted:

import com.esri.viewer.AppEvent;
import com.esri.viewer.ViewerContainer;

and the init and sharedDataUpdated functions. I was uncomfortable about deleting the init function, but if I don't, the app won't run at all.

Anyhow, the error I get when I click on the full extent button reads:

"TypeError: Error #1009: Cannot access a property or method of a null object reference.
at widgets.Navigation::Navigation/__innerButton_click()"

So I'm halfway there. If you have any other thoughts, Bjorn (or anyone else), I'm all ears.

Thanks again,

Justin

AngeloLelekis

Hi Justin,

Were you able to get the flexviewer navtool to work in your application? I am at the same place as your last post.

The zoom slider, the move right/left/up/down buttons, and the fade in/out work, but the change extent and the zoom tools do not work.

This is such a good navigational tool, the Flex Team should add it to the Code Samples section. Not everyone wants to be locked into the flexviewer widget system.

Thanks,
Angelo

JustinRiggs

Angelo,

Unfortunately, I never got this working. I'm in total agreement with you, though - it would be nice if ESRI would make a tutorial video or provide some samples of how to convert a sample viewer widget into something that can be used in a "straight" API application.

If you do get it working, please post the answer. I'm sure there are more people than just the two of us who would like to make this happen.

Justin

AngeloLelekis

Have any of you Flex gurus out there successfully used the navigation tool from the sample viewer in a regular Flex mapping application?

Bjorn, Robert... any insights? Any help would be greatly appreciated.

Thanks,
Angelo

RobertScheitlin__GISP

All right guys you convinced me.

Attached is the NavigationWidget decoupled from the viewer and fully functional for use in a standard API app.

In the zip file you will find the source code and a sample mxml application. If you are adding this to your existing project just copy the com folder to your src folder and then look at the NavigationWidgetSample.mxml for how you need to add it to your app.

src.zip

JustinRiggs

Robert,

First things first: thank you. I wish you offered some training courses or something, because my company would definitely pay to put me through them. ESRI's are good, but I have a feeling I might learn some new tricks sitting with someone who is "in the trenches" if you know what I mean.

That being said, I'm still having some troubles getting this working. I copied the com folder to my src folder, but I don't see a NavigationWidgetSample.mxml file. My first instinct was just to look at the NavigationWidget.mxml file, but when I try to run that application I get several errors that say "Call to a possibly undefined method NavToolItem" (lines 93-103 of your code).

Did I make a mistake in the way I tried to implement this? Just for kicks I tried to copy and paste the code into a new .mxml file, but that didn't work either.

Sorry to be the slow guy in the classroom...

Justin

RobertScheitlin__GISP

Justin,

Hmm. The NavigationWidgetSample.mxml should have been in the zip file.

But here is how to use it:

<?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">
 <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}" /> 
</s:Application>

JustinRiggs

That did the trick. Thanks again!

AngeloLelekis

Thank you Robert!! It works! Once again you have saved the day. The amazing amount of assistance you have provided on this message board has single-handedly made the ESRI Flex API usable for so many organizations.

Angelo

Ray_DominicMaldonado

Robert,

I have a similar question about the zoom/pan controls: Is there a way to adjust opacity to =100% instead of fade in/out on mouse hover?

Thanks,
Ray

RobertScheitlin__GISP

Ray,

Sure in the NavigationWidget.mxml change this code:

Old:

    <Navigation:Navigation id="navtool"
                           alpha="{getStyle('contentBackgroundAlpha') / 2}"
                           map="{_map}"
                           rollOut="fadeOut.play([navtool])"
                           rollOver="fadeOver.play([navtool])"/>

New:

    <Navigation:Navigation id="navtool"
                           alpha="{getStyle('contentBackgroundAlpha')}"
                           map="{_map}"/>

Ray_DominicMaldonado

Thanks Robert!

kenbuja

Hi Robert,

I've been using your Navigation tool in one of my projects, where the code has been put into a separate directory and linked to the project by Source Path. It's a great tool that I really appreciate your work on and it's been working just as expected.

However, I've started another project (FB 4.5.1 and API 2.4) and have set it up the same way, but here I'm getting the error

The skin part type 'mx.controls:VSlider' must be assignable to 'spark.components.supportClasses:SliderBase'.

in the line

[HostComponent("com.esri.ags.components.Navigation")]

Why would this work in one project but not the other?

RobertScheitlin__GISP

Ken,

In the 2.4 version of the API they sparked the navigation component.

Here is an updated src code for 2.4 API.

src.zip

kenbuja

Thanks, Robert.

This is another great example of your invaluable help to this forum.

Mohammed_YassineAYACHE

Many thanks for this great help. I was also searching to do the same thing !

one last thing that I'm trying to add to this widget, is to give it the same look (skin) as it is in the viewer.

could you please help me to do that ? I will be very thankful

RobertScheitlin__GISP

Mohammed,

To do that all you need to do is point to some CSS in your project. If you need more specifics than post a new thread and I will point you in the right direction.

MouMezou

Hi Robert,

since you seem to have a VERY good understanding of how the navigation widget works, and i have been using it without a problem as explained above. but i'm having a hard time to change the label of the buttons for the navigation bar. the reason i'm trying to change the labels is to be able to accomodate the english/french for "Pan, Zoom In, Zoom Out, Full Extent"
i tried to make the changes inside the NavigationWidget.mxml (NavToolItem(configXML.zoomoutbutton.@label||"ZZoom Out") just to test if that will change the Zoom out label by adding an extra Z but it didn't, so i'm confused to where I should look to accomodate both languages when a user switch back/forth.

I'm currently using the Flex API 2.3.1 2011-04-26 and I'm using a resoucebundle to handle the language switching.

Lastly I noticed that when my application is loaded the pan icon is not showing , but when I roll the mouse over it becomes visible and I'm not sure why it is doing that. is it something i edit in the NavigationWidget.mxml that its causing that? I will really appreciate any direction form you or anyone on this issue.

I have attached an image.

Thanks

nav.jpg

RobertScheitlin__GISP

Moussadak,

Based on your attached image the label change you made would not show up because you do not have to Zoom Out tool visible. Changes to the label like you did will work fine when they can apply to something that is visible. As far as the pan icon image being broke, that is something you must have changed in your code to do that or you just don;t have the assets where they are suppose to be.
NavigationWidget.mxml

navtool.panItem = new NavToolItem(configXML.panbutton.@label || "Pan", configXML.panbutton.@icon, configXML.panbutton.@visible == 'true');

NavigationWidget.xml

<panbutton visible="true" icon="com/esri/Navigation/assets/images/i_pan.png" />

kenbuja

This tool has been working well, but when I upgraded to FG 4.6, I'm getting the broken link to the Pan/Zoom In/Zoom Out images also. This is with both pre-sparked version for the 2.3.1 API as well as the version for 2.4. The images appear when I mouse over them.
[ATTACH=CONFIG]11760[/ATTACH]

Navigation.png

KevinKimm

To fix the broken image problem on Pan, Zoom In, and Zoom Out buttons, change "Imageicon" property just to "icon" under navigation.mxml.

kenbuja

Thanks Ben, that fixed it!

sofialoulad

hii all;
i'm trying to work with Go electric to re-skin my flex viewer project
so i need to migrate from arcgis api 2.2. To 3.0
finaly i get one error is
The skin part type 'mx.controls:VSlider' must be assignable to 'spark.components.supportClasses:SliderBase'.
Can someone help me to fix T
tnx a lot

Nadir_Hussain

Dear Robert,

I use your navigation widget in my code.The big problem is that it not directly come on the map.it always be down on the control of the map.Or UP right or left according to position of source control.i want it should directly come on map like in flex Viewer................................Sp please help how can this issue be solved.

Thaks.

RobertScheitlin__GISP

Nadir,

I am not real sure that I understand your question. Are you placing the navigation component inside the map mxml component? If so than that is your issue. Place the navigation component as the last component in your application, after the map and before the closing Application tag.

    </esri:Map>
    <navigation:NavigationWidget map="{map}" left="12" top="12" /> 
</s:Application>

Nadir_Hussain

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.

RobertScheitlin__GISP

Nadir,

Are you using the compiled swc or the source code?

MarkBockenhauer_1-1605273300415.png

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>

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.