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