Skip to Content
Version 11.1 by David Holt on 2009/04/23 13:20
Show last authors
1 ==== Quick Getting Started Placeholder ====
2
3 To use ERXNavigation you must initialize the ERXNavigationManager in a method such as finishInitialization in Application.java. This requires that a NavigationMenu.plist file already be defined and placed in your project's Resources folder. The Root node's children will be the level 1 navigation items. The Root node can be variable depending on code if you like, but it is not described below. The BugTracker application uses a variable Root (and therefore a different menu structure visible) depending on the type of user that is logged in, so you can refer to that until I get the chance to write it up here. For each of your Children you can define further children up to 3 levels deep. ERXModernNavigationMenu does not have the hierarchical depth limits, but it is not covered here yet. For each menu item you'll want to define an action. I have used Session as my storage for actions, but you may choose to use a navigation controller class for this. Each component must tell the NavigationManager its state in its awake() method. I think that covers the basics with examples below. This document is not terribly complete so don't hesitate to contact me if you have questions in the meantime.
4
5 {{code title="Application.java" borderStyle="solid"}}
6
7
8 // initialize the navigation
9
10 public void finishInitialization() {
11 super.finishInitialization();
12 ERXNavigationManager.manager().configureNavigation();
13 NSLog.debug.appendln("finishInitialization called.");
14 }
15
16 {{/code}}
17
18
19
20 Example actions in Session:
21
22 {{code title="Session.java" borderStyle="solid"}}
23
24 // Don't forget to set the navigation state in your component.java (see below)
25
26 public WOActionResults toUserPage() {
27 return context().page().pageWithName(UserPage.class.getName());
28 }
29
30
31 {{/code}}
32
33 Setting the navigation state in the component
34
35 {{code title="UserPage.java" borderStyle="solid"}}
36
37 // Method used to set navigation state for use with the Navigation Menu components
38 // State is pushed from the page level component so that you don't have problems opening
39 // multiple tabs in modern browsers
40 // The code below tells the context that the selected tabs are "my profile" on level 1 and "summary" on level 2
41 // Add similar code to each of your page level components
42 public void awake() {
43 super.setNavigationState(new NSArray(new Object[]{ "my profile","summmary" }));
44 }
45
46 {{/code}}
47
48 Example Navigation.plist
49
50 {{code title="Navigation.plist" borderStyle="solid"}}
51
52 // there are more options than I am using below. See the docs for more examples
53
54 {
55 name = "Root";
56 children = ("my profile","my survey");
57 },
58 {
59 name = "my profile";
60 children = ("summary","details");
61 action = session.toUserPage;
62 },
63 {
64 name = "summary";
65 action = session.toUserPage;
66 },
67 {
68 name = "details";
69 action = session.toUserDetails;
70 },
71 {
72 name = "my survey";
73 children = ("instructions","section I");
74 action = session.toSurvey;
75 },
76 {
77 name = "instructions";
78 action = session.toSurvey;
79 },
80 {
81 name = "section I";
82 action = session.toSurvey1;
83 },
84
85 {{/code}}
86
87 HTML Source you'll see generated by ERXNavigationMenu when the app is run
88
89 {{code title="Main.html" borderStyle="solid"}}
90
91 <div class="ERXNavigationMenu">
92 <ul class="Level1Items">
93 <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>
94
95 <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>
96 </ul>
97 <ul class="Level2Items">
98 <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>
99
100 <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>
101 </ul>
102
103
104 </div>
105
106 {{/code}}
107
108 CSS items that I defined in my application:
109
110 {{code value="html"}}
111
112 .ERXNavigationMenu {
113 width: 800;
114 margin: auto;
115 border-top: #bdf solid 3px;
116 border-left: #bdf solid 3px;
117 border-right: #bdf solid 3px;
118 border-bottom: #bdf solid 1px;
119 padding-top: .5em;
120 padding-left: 1em;
121 padding-right: 1em;
122 font-family: Helvetica;
123 }
124
125 ul.Level1Items {
126 height: 2em;
127 list-style: none;
128 margin: 0;
129 padding: 0;
130 font-size: 1em;
131 font-weight: bold;
132 }
133
134 ul.Level1Items li {
135 background-color: #48f;
136 float: left;
137 margin: 0 2px 0 0;
138 }
139
140 ul.Level1Items a {
141 background: #48f;
142 color: #fff;
143 display: block;
144 float: left;
145 height: 2em;
146 line-height: 2em;
147 text-decoration: none;
148 padding-left: 10px;
149 padding-right: 10px;
150 }
151 ul.Level1Items li.Nav1 a:hover {
152 background-color: #3af;
153 color: #000;
154
155 }
156
157 ul.Level1Items li.Nav1Selected {
158 background-color: #bdf;
159 }
160
161 ul.Level1Items li.Nav1Selected a {
162 background-color: #bdf;
163 color: #008;
164 font-weight: bold;
165 }
166
167 ul.Level1Items li.Nav1Selected a:hover {
168 color: #008;
169 font-weight: bold;
170 }
171
172 ul.Level2Items {
173 height: 1.5em;
174 list-style: none;
175 margin: 0;
176 padding: 2px 2px 0 2px;
177 font-size: 1em;
178 font-weight: bold;
179 background-color: #bdf;
180 }
181
182 ul.Level2Items li {
183 background-color: #fff;
184 float: left;
185 margin: 2px 2px 0 2px;
186 }
187
188 ul.Level2Items a {
189 background: #bdf;
190 display: block;
191 float: left;
192 height: 1.5em;
193 line-height: 1.5em;
194 font-size: .9em;
195 font-weight: bold;
196 text-decoration: none;
197 padding-left: 10px;
198 padding-right: 10px;
199 }
200 ul.Level2Items li.Nav2 a:hover {
201 background-color: #3af;
202 color: #000;
203 font-weight: bold;
204 }
205
206 ul.Level2Items li.Nav2Selected {
207 background-color: #bdf;
208 font-weight: bold;
209 text-decoration: underline;
210 }
211
212 ul.Level2Items li.Nav2Selected a {
213 color: #008;
214 font-weight: bold;
215 }
216
217 ul.Level2Items li.Nav2Selected a:hover {
218 color: #000;
219 font-weight: bold;
220 }
221
222 {{/code}}