Skip to Content
Version 12.1 by David Holt on 2009/05/28 17:37
Show last authors
1 {{toc}}{{/toc}}
2
3 === Quick Getting Started Placeholder ===
4
5 ==== 1. Simple example ====
6
7 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.
8
9 {{code title="Application.java" borderStyle="solid"}}
10
11
12 // initialize the navigation
13
14 public void finishInitialization() {
15 super.finishInitialization();
16 ERXNavigationManager.manager().configureNavigation();
17 NSLog.debug.appendln("finishInitialization called.");
18 }
19
20 {{/code}}
21
22
23
24 Example actions in Session:
25
26 {{code title="Session.java" borderStyle="solid"}}
27
28 // Don't forget to set the navigation state in your component.java (see below)
29
30 public WOActionResults toUserPage() {
31 return context().page().pageWithName(UserPage.class.getName());
32 }
33
34
35 {{/code}}
36
37 Setting the navigation state in the component
38
39 {{code title="UserPage.java" borderStyle="solid"}}
40
41 // Method used to set navigation state for use with the Navigation Menu components
42 // State is pushed from the page level component so that you don't have problems opening
43 // multiple tabs in modern browsers
44 // The code below tells the context that the selected tabs are "my profile" on level 1 and "summary" on level 2
45 // Add similar code to each of your page level components
46 public void awake() {
47 super.setNavigationState(new NSArray(new Object[]{ "my profile","summmary" }));
48 }
49
50 {{/code}}
51
52 Example Navigation.plist
53
54 {{code title="Navigation.plist" borderStyle="solid"}}
55
56 // there are more options than I am using below. See the docs for more examples
57
58 {
59 name = "Root";
60 children = ("my profile","my survey");
61 },
62 {
63 name = "my profile";
64 children = ("summary","details");
65 action = session.toUserPage;
66 },
67 {
68 name = "summary";
69 action = session.toUserPage;
70 },
71 {
72 name = "details";
73 action = session.toUserDetails;
74 },
75 {
76 name = "my survey";
77 children = ("instructions","section I");
78 action = session.toSurvey;
79 },
80 {
81 name = "instructions";
82 action = session.toSurvey;
83 },
84 {
85 name = "section I";
86 action = session.toSurvey1;
87 },
88
89 {{/code}}
90
91 HTML Source you'll see generated by ERXNavigationMenu when the app is run
92
93 {{code title="Main.html" borderStyle="solid"}}
94
95 <div class="ERXNavigationMenu">
96 <ul class="Level1Items">
97 <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>
98
99 <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>
100 </ul>
101 <ul class="Level2Items">
102 <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>
103
104 <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>
105 </ul>
106
107
108 </div>
109
110 {{/code}}
111
112 CSS items that I defined in my application:
113
114 {{code value="html"}}
115
116 .ERXNavigationMenu {
117 width: 800;
118 margin: auto;
119 border-top: #bdf solid 3px;
120 border-left: #bdf solid 3px;
121 border-right: #bdf solid 3px;
122 border-bottom: #bdf solid 1px;
123 padding-top: .5em;
124 padding-left: 1em;
125 padding-right: 1em;
126 font-family: Helvetica;
127 }
128
129 ul.Level1Items {
130 height: 2em;
131 list-style: none;
132 margin: 0;
133 padding: 0;
134 font-size: 1em;
135 font-weight: bold;
136 }
137
138 ul.Level1Items li {
139 background-color: #48f;
140 float: left;
141 margin: 0 2px 0 0;
142 }
143
144 ul.Level1Items a {
145 background: #48f;
146 color: #fff;
147 display: block;
148 float: left;
149 height: 2em;
150 line-height: 2em;
151 text-decoration: none;
152 padding-left: 10px;
153 padding-right: 10px;
154 }
155 ul.Level1Items li.Nav1 a:hover {
156 background-color: #3af;
157 color: #000;
158
159 }
160
161 ul.Level1Items li.Nav1Selected {
162 background-color: #bdf;
163 }
164
165 ul.Level1Items li.Nav1Selected a {
166 background-color: #bdf;
167 color: #008;
168 font-weight: bold;
169 }
170
171 ul.Level1Items li.Nav1Selected a:hover {
172 color: #008;
173 font-weight: bold;
174 }
175
176 ul.Level2Items {
177 height: 1.5em;
178 list-style: none;
179 margin: 0;
180 padding: 2px 2px 0 2px;
181 font-size: 1em;
182 font-weight: bold;
183 background-color: #bdf;
184 }
185
186 ul.Level2Items li {
187 background-color: #fff;
188 float: left;
189 margin: 2px 2px 0 2px;
190 }
191
192 ul.Level2Items a {
193 background: #bdf;
194 display: block;
195 float: left;
196 height: 1.5em;
197 line-height: 1.5em;
198 font-size: .9em;
199 font-weight: bold;
200 text-decoration: none;
201 padding-left: 10px;
202 padding-right: 10px;
203 }
204 ul.Level2Items li.Nav2 a:hover {
205 background-color: #3af;
206 color: #000;
207 font-weight: bold;
208 }
209
210 ul.Level2Items li.Nav2Selected {
211 background-color: #bdf;
212 font-weight: bold;
213 text-decoration: underline;
214 }
215
216 ul.Level2Items li.Nav2Selected a {
217 color: #008;
218 font-weight: bold;
219 }
220
221 ul.Level2Items li.Nav2Selected a:hover {
222 color: #000;
223 font-weight: bold;
224 }
225
226 {{/code}}
227
228 ==== 2. Using Conditionally Displayed Tabs ====
229
230 You can do something like:
231
232 {{code title="NavigationMenu.plist" borderStyle="solid"}}
233
234
235 {
236 action = "session.toItemList";
237 name = "item list";
238 displayName = search;
239 children = "session.isItemSelectedForNavigation";
240 childrenChoices = {
241 itemSelected = ("list","details","history");
242 noItemSelected = ( "list");
243 };
244 },
245
246 {{/code}}
247
248 {{code title="Session.java" borderStyle="solid"}}
249
250 public String isItemSelectedForNavigation() {
251 Item _selectedItem = (Item) selectedItem();
252 if(_selectedItem !=null) {
253 return "itemSelected";
254 }
255 return "noItemSelected";
256 }
257
258 public WOActionResults toItemList() {
259 ItemList nextPage = (ItemList) pageWithName(ItemList.class.getName());
260 setSelectedItem(null);
261 return nextPage;
262 }
263
264 public WOActionResults toItemHistory() {
265 ItemHistory nextPage = (ItemHistory) pageWithName(ItemHistory.class.getName());
266 nextPage.setAnItem(_selectedItem);
267 return nextPage;
268 }
269
270 {{/code}}