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

Navigation Control

philippschnetzer

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!!

タグ付けされた投稿をもっと見る

Accepted answers

All comments

philippschnetzer

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

AniketWani

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

philippschnetzer

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

RobertScheitlin__GISP

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

philippschnetzer

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.

BjornSvensson

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.

philippschnetzer

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!

BjornSvensson

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.