topic Re: Navigation Control in ArcGIS API for Flex Questions

Navigation Control

philippschnetzer — Wed, 11 Aug 2010 16:26:07 GMT

Just getting started with Flex2. How do I go about changing the Vertical Navigation Bar to the Horizontal version. I see that there are a number of scrollbar skin mxml files but where are they referenced??

Thanks!!

Re: Navigation Control

BjornSvensson — Wed, 11 Aug 2010 16:30:12 GMT

There's a sample for that 🙂
http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=NavigationHorizontal

Basically you set the skin class on it.

There is also a help topic under Concepts -> Inside API that might be helpful:

http://help.arcgis.com/en/webapi/flex/help/index.html#inside_api/styling_and_skinning_navigation.htm

Re: Navigation Control

philippschnetzer — Wed, 11 Aug 2010 17:22:37 GMT

Thanks bjorn! I actually found my way to both those examples shortly after I posted my premature thread...

However, it turns out my question is a little bit more fundamental/elementary than you might think. I am at a loss as to where to go about changing the code that states which 'skin' to use. I assumed it was either in mapmanager.mxml or the actual theme (darkangel.swz) itself but it continues to elude me... eventhough the example shows how to change the code it does not show where that code actually is.

I know this is an elementary question but I just kind of jumped into this web app phenomenon and am learning from scratch - which is sort of the point of the out of the box app isn't it? ...to allow more people to create apps that traditionally would never have dared attempt such a feat...

thanks for your time!

Re: Navigation Control

BjornSvensson — Thu, 12 Aug 2010 15:02:54 GMT

Sorry, I didn't realize you were trying to do it for the viewer.

With the viewer still in beta and its documentation far from complete, we realize it is not easy to figure out how to accomplish some of the things people are trying to do. Here's some general comments on that (even though it might not be helpful for your specific question).

Adding Viewer functionality based on API samples
While the ArcGIS Viewer for Flex is built with the ArcGIS API for Flex, you can not just copy the API samples into the viewer to make it work. When trying to integrate API samples with the viewer code, it is best to know a little about Flex development in general as well as having an understanding of the viewer and it's different parts.

#1 To learn to use the API itself:
http://help.arcgis.com/en/webapi/flex/help/index.html#getting_started.htm is a great starting point.

#2 To get started with the ready-to-use viewer:
http://help.arcgis.com/en/webapps/flexviewer/help/index.html#gettingstarted.htm

#3 To get started developing widgets for flex viewer source:
http://help.arcgis.com/en/webapps/flexviewer/help/index.html#developers/hellowidget.htm

#4 To get started developing the beta viewer source code:
see above, plus read source code to better understand the viewer. Ask questions here on the forum. Or wait for the released (non-beta) version and better documentation. Sorry, we don't have a better answer at this time 😞

In general, if someone is trying to learn Flex and write their first Flex application, the viewer source code is probably not the best starting point...

While this doesn't answer your initial question, I hope that it provides somewhat of useful background information.

Re: Navigation Control

philippschnetzer — Fri, 13 Aug 2010 10:50:01 GMT

good stuff....having quickly glanced at your reference urls it looks as though there is some useful info in there for ppl just starting out. Somehow I managed to always 'miss' this entire section (ArcGIS Viewer For Flex l BETA) in my search for help. Much appreciated! I'll be back.

Re: Navigation Control

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:45:19 GMT

Phillip,

So all you need to do is open the CSS File that you are using for your App (i.e. Blackgold.css by default) and replace the existing esri|Navigation with this one

esri|Navigation
{
 skinClass: ClassReference("com.esri.viewer.skins.NavigationHorizontalSkin");
 tickSpacing: 6;
 left: NaN;
 top: NaN;
 bottom: 20;
 horizontal-center: 0;
}

In the src.com.esri.viewer.skins folder right click and choose new MXML Skin

For the name enter : NavigationHorizontalSkin

For Host Component enter : com.esri.ags.components.Navigation

Uncheck create copy of

Then click finish

Select all the text that was inserted and paste the code from the sample

That's it run the app and you now have a horizontal navigation bar

Re: Navigation Control

philippschnetzer — Fri, 13 Aug 2010 18:13:06 GMT

...didn't work. made sure I did everything as you had clearly laid out...and copied and pasted....

even added the NavigationHorizontalSkin.mxml to my module compiler...probably wasn't necessary though - I'm not sure so I just did it anyway. then recompiled as well.

nonetheless...you da man, Robert!

Re: Navigation Control

AniketWani — Sat, 11 Dec 2021 09:45:21 GMT

NavigationHorizontalSkin is bundled with API. You can take advantage of that.

In your css file replace esri|Navigation with below

esri|Navigation
{
    
    skin-class: ClassReference("com.esri.ags.skins.NavigationHorizontalSkin");
    tickSpacing: 6;
    left: NaN;
    top: NaN;
    bottom: 20;
    horizontal-center: 0;
}

Re: Navigation Control

philippschnetzer — Mon, 16 Aug 2010 11:09:31 GMT

Thanks for the help, everyone! The last piece of code worked!