Skip to Content
Version 17.1 by Larry Mills-Gahl on 2009/10/22 11:57
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 // initialize the navigation
12
13 public void finishInitialization() {
14 super.finishInitialization();
15 ERXNavigationManager.manager().configureNavigation();
16 NSLog.debug.appendln("finishInitialization called.");
17 }
18
19 {{/code}}
20
21 Example actions in Session:
22
23 {{code title="Session.java" borderStyle="solid"}}
24
25 // Don't forget to set the navigation state in your component.java (see below)
26
27 public WOActionResults toUserPage() {
28 return context().page().pageWithName(UserPage.class.getName());
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 NavigationMenu.plist
49
50 {{code title="NavigationMenu.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
86 {{/code}}
87
88 HTML Source you'll see generated by ERXNavigationMenu when the app is run
89
90 {{code title="Main.html" borderStyle="solid"}}
91
92 <div class="ERXNavigationMenu">
93 <ul class="Level1Items">
94 <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>
95
96 <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>
97 </ul>
98 <ul class="Level2Items">
99 <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>
100
101 <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>
102 </ul>
103
104
105 </div>
106
107 {{/code}}
108
109 CSS items that I defined in my application:
110
111 {{code value="html"}}
112
113 .ERXNavigationMenu {
114 width: 800;
115 margin: auto;
116 border-top: #bdf solid 3px;
117 border-left: #bdf solid 3px;
118 border-right: #bdf solid 3px;
119 border-bottom: #bdf solid 1px;
120 padding-top: .5em;
121 padding-left: 1em;
122 padding-right: 1em;
123 font-family: Helvetica;
124 }
125
126 ul.Level1Items {
127 height: 2em;
128 list-style: none;
129 margin: 0;
130 padding: 0;
131 font-size: 1em;
132 font-weight: bold;
133 }
134
135 ul.Level1Items li {
136 background-color: #48f;
137 float: left;
138 margin: 0 2px 0 0;
139 }
140
141 ul.Level1Items a {
142 background: #48f;
143 color: #fff;
144 display: block;
145 float: left;
146 height: 2em;
147 line-height: 2em;
148 text-decoration: none;
149 padding-left: 10px;
150 padding-right: 10px;
151 }
152 ul.Level1Items li.Nav1 a:hover {
153 background-color: #3af;
154 color: #000;
155
156 }
157
158 ul.Level1Items li.Nav1Selected {
159 background-color: #bdf;
160 }
161
162 ul.Level1Items li.Nav1Selected a {
163 background-color: #bdf;
164 color: #008;
165 font-weight: bold;
166 }
167
168 ul.Level1Items li.Nav1Selected a:hover {
169 color: #008;
170 font-weight: bold;
171 }
172
173 ul.Level2Items {
174 height: 1.5em;
175 list-style: none;
176 margin: 0;
177 padding: 2px 2px 0 2px;
178 font-size: 1em;
179 font-weight: bold;
180 background-color: #bdf;
181 }
182
183 ul.Level2Items li {
184 background-color: #fff;
185 float: left;
186 margin: 2px 2px 0 2px;
187 }
188
189 ul.Level2Items a {
190 background: #bdf;
191 display: block;
192 float: left;
193 height: 1.5em;
194 line-height: 1.5em;
195 font-size: .9em;
196 font-weight: bold;
197 text-decoration: none;
198 padding-left: 10px;
199 padding-right: 10px;
200 }
201 ul.Level2Items li.Nav2 a:hover {
202 background-color: #3af;
203 color: #000;
204 font-weight: bold;
205 }
206
207 ul.Level2Items li.Nav2Selected {
208 background-color: #bdf;
209 font-weight: bold;
210 text-decoration: underline;
211 }
212
213 ul.Level2Items li.Nav2Selected a {
214 color: #008;
215 font-weight: bold;
216 }
217
218 ul.Level2Items li.Nav2Selected a:hover {
219 color: #000;
220 font-weight: bold;
221 }
222
223 {{/code}}
224
225 ==== 2. Using Conditionally Displayed Tabs ====
226
227 You can do something like:
228
229 {{code title="NavigationMenu.plist" borderStyle="solid"}}
230
231 {
232 action = "session.toItemList";
233 name = "item list";
234 displayName = search;
235 children = "session.isItemSelectedForNavigation";
236 childrenChoices = {
237 itemSelected = ("list","details","history");
238 noItemSelected = ( "list");
239 };
240 },
241
242 {{/code}}
243
244 {{code title="Session.java" borderStyle="solid"}}
245
246 public String isItemSelectedForNavigation() {
247 Item _selectedItem = (Item) selectedItem();
248 if(_selectedItem !=null) {
249 return "itemSelected";
250 }
251 return "noItemSelected";
252 }
253
254 public WOActionResults toItemList() {
255 ItemList nextPage = (ItemList) pageWithName(ItemList.class.getName());
256 setSelectedItem(null);
257 return nextPage;
258 }
259
260 public WOActionResults toItemHistory() {
261 ItemHistory nextPage = (ItemHistory) pageWithName(ItemHistory.class.getName());
262 nextPage.setAnItem(_selectedItem);
263 return nextPage;
264 }
265
266 {{/code}}