Skip to Content
Last modified by Larry Mills-Gahl on 2010/10/28 13:40
Hide last authors
Larry Mills-Gahl 22.1 1 {{toc/}}
Larry Mills-Gahl 6.1 2
David Holt 12.1 3 === Quick Getting Started Placeholder ===
4
5 ==== 1. Simple example ====
6
David Holt 10.1 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
David Avendasora 18.1 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
David Holt 8.1 11 {{code title="Application.java" borderStyle="solid"}}
Larry Mills-Gahl 6.1 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
Larry Mills-Gahl 14.1 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
Larry Mills-Gahl 6.1 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() {
Larry Mills-Gahl 21.1 45 ERXNavigationManager.manager().navigationStateForSession(session()).setState(new NSArray(new Object[] {"my profile","summmary"}));
Larry Mills-Gahl 6.1 46 }
47
48 {{/code}}
49
Larry Mills-Gahl 14.1 50 Example NavigationMenu.plist
Larry Mills-Gahl 6.1 51
Larry Mills-Gahl 16.1 52 {{code title="NavigationMenu.plist" borderStyle="solid"}}
Larry Mills-Gahl 6.1 53
54 // there are more options than I am using below. See the docs for more examples
David Avendasora 18.1 55 // added an example for using "href"
56 // updated an item to show use of displayName
Larry Mills-Gahl 14.1 57 (
Larry Mills-Gahl 6.1 58 {
59 name = "Root";
David Avendasora 18.1 60 children = ("my profile","my survey","Apple");
Larry Mills-Gahl 6.1 61 },
Larry Mills-Gahl 14.1 62 {
Larry Mills-Gahl 6.1 63 name = "my profile";
64 children = ("summary","details");
65 action = session.toUserPage;
66 },
Larry Mills-Gahl 14.1 67 {
Larry Mills-Gahl 6.1 68 name = "summary";
69 action = session.toUserPage;
70 },
Larry Mills-Gahl 14.1 71 {
Larry Mills-Gahl 6.1 72 name = "details";
Larry Mills-Gahl 21.1 73 displayName = "my personal details";
Larry Mills-Gahl 6.1 74 action = session.toUserDetails;
75 },
Larry Mills-Gahl 14.1 76 {
Larry Mills-Gahl 6.1 77 name = "my survey";
78 children = ("instructions","section I");
79 action = session.toSurvey;
80 },
Larry Mills-Gahl 14.1 81 {
Larry Mills-Gahl 6.1 82 name = "instructions";
83 action = session.toSurvey;
84 },
Larry Mills-Gahl 14.1 85 {
Larry Mills-Gahl 6.1 86 name = "section I";
87 action = session.toSurvey1;
88 },
David Avendasora 18.1 89 { name = "Apple";
90 href = "http://www.apple.com";
91 },
Larry Mills-Gahl 14.1 92 )
Larry Mills-Gahl 6.1 93
94 {{/code}}
95
96 HTML Source you'll see generated by ERXNavigationMenu when the app is run
97
Larry Mills-Gahl 23.1 98 {{code 0="html" title="Main.html" borderStyle="solid"}}
Larry Mills-Gahl 6.1 99
100 <div class="ERXNavigationMenu">
101 <ul class="Level1Items">
102 <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>
103
104 <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>
105 </ul>
106 <ul class="Level2Items">
107 <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>
108
109 <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>
110 </ul>
Larry Mills-Gahl 14.1 111
112
Larry Mills-Gahl 6.1 113 </div>
114
115 {{/code}}
116
117 CSS items that I defined in my application:
118
Larry Mills-Gahl 22.1 119 {{code 0="html"}}
Larry Mills-Gahl 6.1 120
121 .ERXNavigationMenu {
David Holt 10.1 122 width: 800;
123 margin: auto;
124 border-top: #bdf solid 3px;
125 border-left: #bdf solid 3px;
126 border-right: #bdf solid 3px;
127 border-bottom: #bdf solid 1px;
128 padding-top: .5em;
129 padding-left: 1em;
130 padding-right: 1em;
131 font-family: Helvetica;
Larry Mills-Gahl 6.1 132 }
David Holt 10.1 133
134 ul.Level1Items {
135 height: 2em;
136 list-style: none;
137 margin: 0;
138 padding: 0;
Larry Mills-Gahl 14.1 139 font-size: 1em;
David Holt 10.1 140 font-weight: bold;
Larry Mills-Gahl 6.1 141 }
David Holt 10.1 142
143 ul.Level1Items li {
144 background-color: #48f;
145 float: left;
146 margin: 0 2px 0 0;
Larry Mills-Gahl 6.1 147 }
David Holt 10.1 148
149 ul.Level1Items a {
150 background: #48f;
151 color: #fff;
152 display: block;
153 float: left;
154 height: 2em;
155 line-height: 2em;
156 text-decoration: none;
157 padding-left: 10px;
158 padding-right: 10px;
Larry Mills-Gahl 6.1 159 }
David Holt 10.1 160 ul.Level1Items li.Nav1 a:hover {
161 background-color: #3af;
162 color: #000;
163
Larry Mills-Gahl 6.1 164 }
David Holt 10.1 165
166 ul.Level1Items li.Nav1Selected {
167 background-color: #bdf;
Larry Mills-Gahl 6.1 168 }
David Holt 10.1 169
170 ul.Level1Items li.Nav1Selected a {
171 background-color: #bdf;
172 color: #008;
173 font-weight: bold;
Larry Mills-Gahl 6.1 174 }
David Holt 10.1 175
176 ul.Level1Items li.Nav1Selected a:hover {
177 color: #008;
178 font-weight: bold;
Larry Mills-Gahl 6.1 179 }
David Holt 10.1 180
181 ul.Level2Items {
182 height: 1.5em;
183 list-style: none;
184 margin: 0;
185 padding: 2px 2px 0 2px;
186 font-size: 1em;
187 font-weight: bold;
188 background-color: #bdf;
Larry Mills-Gahl 6.1 189 }
David Holt 10.1 190
191 ul.Level2Items li {
192 background-color: #fff;
193 float: left;
194 margin: 2px 2px 0 2px;
Larry Mills-Gahl 6.1 195 }
196
David Holt 10.1 197 ul.Level2Items a {
198 background: #bdf;
199 display: block;
200 float: left;
201 height: 1.5em;
202 line-height: 1.5em;
203 font-size: .9em;
204 font-weight: bold;
205 text-decoration: none;
206 padding-left: 10px;
207 padding-right: 10px;
208 }
209 ul.Level2Items li.Nav2 a:hover {
210 background-color: #3af;
211 color: #000;
212 font-weight: bold;
213 }
214
215 ul.Level2Items li.Nav2Selected {
216 background-color: #bdf;
217 font-weight: bold;
218 text-decoration: underline;
219 }
220
221 ul.Level2Items li.Nav2Selected a {
222 color: #008;
223 font-weight: bold;
224 }
225
226 ul.Level2Items li.Nav2Selected a:hover {
227 color: #000;
228 font-weight: bold;
229 }
230
Larry Mills-Gahl 6.1 231 {{/code}}
David Holt 12.1 232
233 ==== 2. Using Conditionally Displayed Tabs ====
234
235 You can do something like:
236
237 {{code title="NavigationMenu.plist" borderStyle="solid"}}
Larry Mills-Gahl 14.1 238 {
Larry Mills-Gahl 21.1 239 action = "session.toItemList";
240 name = "item list";
241 displayName = search;
242 children = "session.isItemSelectedForNavigation";
243 childrenChoices = {
244 itemSelected = ("list","details","history");
245 noItemSelected = ( "list");
246 };
247 },
Larry Mills-Gahl 22.1 248 {{/code}}
David Holt 12.1 249
250 {{code title="Session.java" borderStyle="solid"}}
251
Larry Mills-Gahl 14.1 252 public String isItemSelectedForNavigation() {
Larry Mills-Gahl 21.1 253 Item _selectedItem = (Item) selectedItem();
254 if(_selectedItem !=null) {
255 return "itemSelected";
David Holt 12.1 256 }
Larry Mills-Gahl 21.1 257 return "noItemSelected";
258 }
David Holt 12.1 259
Larry Mills-Gahl 21.1 260 public WOActionResults toItemList() {
261 ItemList nextPage = (ItemList) pageWithName(ItemList.class.getName());
262 setSelectedItem(null);
263 return nextPage;
264 }
David Holt 12.1 265
Larry Mills-Gahl 21.1 266 public WOActionResults toItemHistory() {
267 ItemHistory nextPage = (ItemHistory) pageWithName(ItemHistory.class.getName());
268 nextPage.setAnItem(_selectedItem);
269 return nextPage;
270 }
David Holt 12.1 271
272 {{/code}}