Project WONDER-Frameworks-ERXNavigation

Version 9.1 by David Holt on 2009/04/23 13:05

Quick Getting Started Placeholder

Application.java


// initialize the navigation

public void finishInitialization() {
super.finishInitialization();
ERXNavigationManager.manager().configureNavigation();
NSLog.debug.appendln("finishInitialization called.");
}

 

Example actions in Session:

Session.java

// Don't forget to set the navigation state in your component.java (see below)

public WOActionResults toUserPage() {
return context().page().pageWithName(UserPage.class.getName());
}

Setting the navigation state in the component

UserPage.java

// Method used to set navigation state for use with the Navigation Menu components
// State is pushed from the page level component so that you don't have problems opening 
// multiple tabs in modern browsers
// The code below tells the context that the selected tabs are "my profile" on level 1 and "summary" on level 2
       // Add similar code to each of your page level components
public void awake() {
super.setNavigationState(new NSArray(new Object[]{ "my profile","summmary" }));
}

Example Navigation.plist

Navigation.plist

// there are more options than I am using below. See the docs for more examples

        {
               name = "Root";
               children = ("my profile","my survey");
        },
        {
               name = "my profile";
               children = ("summary","details");
               action = session.toUserPage;
        },
        {
               name = "summary";
                action = session.toUserPage;
        },
        {
               name = "details";
                action = session.toUserDetails;
        },
        {
               name = "my survey";
               children = ("instructions","section I");
               action = session.toSurvey;
        },
        {
               name = "instructions";
                action = session.toSurvey;
        },
        {
               name = "section I";
                action = session.toSurvey1;
        },

HTML Source you'll see generated by ERXNavigationMenu when the app is run

Main.html

<div class="ERXNavigationMenu">
   <ul class="Level1Items">
<li nowrap="nowrap" class="Nav1" id="id1"><a href="/cgi-bin/WebObjects/MyApp.woa/wo/49YrOFk9VT0wc2WYDlZ8b0/5.0.11.0.0.1.1.2.1.0.0.1.1.0.0">my profile</a></li>

<li nowrap="nowrap" class="Nav1Selected" id="id2"><a href="/cgi-bin/WebObjects/MyApp.woa/wo/49YrOFk9VT0wc2WYDlZ8b0/5.0.11.0.0.1.1.2.1.1.0.1.1.0.0">my survey</a></li>
</ul>
   <ul class="Level2Items">
<li nowrap="nowrap" class="Nav2" id="id3"><a href="/cgi-bin/WebObjects/MyApp.woa/wo/49YrOFk9VT0wc2WYDlZ8b0/5.0.11.0.0.1.1.2.3.1.0.0.1.1.0.0">instructions</a></li>

<li nowrap="nowrap" class="Nav2Selected" id="id4"><a href="/cgi-bin/WebObjects/MyApp.woa/wo/49YrOFk9VT0wc2WYDlZ8b0/5.0.11.0.0.1.1.2.3.1.1.0.1.1.0.0">section I</a></li>
</ul>
    
   
</div>

CSS items that I defined in my application:


.ERXNavigationMenu {
}
.Level1Items {
}
.Level1Items li {
}
.Level1Items a {
}
.Level1Items .Nav1Selected a {
}
.Level1Items li.Nav1 a:hover {
}
.Level2Items {
}
.Level2Items li {
}
.Level2Items a {
}
.Level2Items .Nav2Selected a, .Level2Items li.Nav2 a:hover {
}