topic Re: Something I'm still a little confused about... in ArcGIS API for Flex Questions

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

JustinRiggs — Tue, 22 Feb 2011 19:17:33 GMT

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

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

BjornSvensson — Tue, 22 Feb 2011 22:49:41 GMT

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):

    <Navigation:Navigation id="navtool"
                           alpha="0.5"
                           map="{map}"
                           rollOut="fadeOut.play([navtool])"
                           rollOver="fadeOver.play([navtool])"/>

Possibly set some CSS, stylesheet, theme depending on what colors & styling you want.

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

JustinRiggs — Wed, 23 Feb 2011 14:35:40 GMT

"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.

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

JustinRiggs — Wed, 23 Feb 2011 16:41:41 GMT

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

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

AngeloLelekis — Wed, 16 Mar 2011 15:03:06 GMT

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

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

JustinRiggs — Wed, 16 Mar 2011 15:26:16 GMT

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

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

AngeloLelekis — Wed, 16 Mar 2011 19:47:34 GMT

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

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

RobertScheitlin__GISP — Thu, 17 Mar 2011 13:25:46 GMT

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.

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

JustinRiggs — Thu, 17 Mar 2011 15:03:27 GMT

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

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 16:51:01 GMT

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>

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

JustinRiggs — Thu, 17 Mar 2011 15:27:37 GMT

That did the trick. Thanks again!

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

AngeloLelekis — Thu, 17 Mar 2011 18:09:49 GMT

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

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

Ray_DominicMaldonado — Fri, 01 Apr 2011 22:19:07 GMT

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

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:48:20 GMT

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}"/>

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

Ray_DominicMaldonado — Mon, 04 Apr 2011 16:03:58 GMT

Thanks Robert!

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

KenBuja — Wed, 17 Aug 2011 14:15:07 GMT

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?

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

RobertScheitlin__GISP — Wed, 17 Aug 2011 20:30:52 GMT

Ken,

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

Here is an updated src code for 2.4 API.

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

KenBuja — Thu, 18 Aug 2011 11:17:57 GMT

Thanks, Robert.

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

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

Mohammed_YassineAYACHE — Sun, 05 Feb 2012 19:43:33 GMT

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

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

RobertScheitlin__GISP — Mon, 06 Feb 2012 16:46:01 GMT

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.