Community

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

3696
33
02-22-2011 11:17 AM
JustinRiggs
by
New Contributor
‎02-22-2011 11:17 AM
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
Tags (2)
0 Kudos
33 Replies
BjornSvensson
by Esri Regular Contributor
Esri Regular Contributor
‎02-22-2011 02:49 PM
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.

0 Kudos
JustinRiggs
by
New Contributor
‎02-23-2011 06:35 AM
"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.
0 Kudos
JustinRiggs
by
New Contributor
‎02-23-2011 08:41 AM
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
0 Kudos
AngeloLelekis
by
New Contributor
‎03-16-2011 08:03 AM
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
0 Kudos
JustinRiggs
by
New Contributor
‎03-16-2011 08:26 AM
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
0 Kudos
AngeloLelekis
by
New Contributor
‎03-16-2011 12:47 PM
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
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎03-17-2011 06:25 AM
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
0 Kudos
JustinRiggs
by
New Contributor
‎03-17-2011 08:03 AM
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
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎03-17-2011 08:07 AM
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>
0 Kudos