Introduction
A huge element to the Devcathlon system is its dynamic pieces. Because ICS 414 is Java-centric, the team is using the Wicket framework to develop the web segment of Devcathlon. The class was given an
exercise to highlight menu tabs using css, html, and wicket.
Code
I have a limited background working with css and html. With this assignment I am getting a lot of hands on experience with setting up links and adjusting the page's layout.
<ul id="subnav-3">
<li><a href="test-submenu5.html">submenu5</a></li>
<li><a href="test-submenu6.html" class="active">submenu6</a></li>
<li><a href="test-submenu7.html">submenu7</a></li>
</ul>
add(new Link("SubMenu6Link") {
private static final long serialVersionUID = 1L;
/** Upon clicking this link, go to FormPage. */
@Override
public void onClick() {
setResponsePage(new SubMenu6Page());
}
});
...
With Wicket and a small addition of script on the html side I added three sub-menus to Menu 3.
- Add three links via html.
- Add three new sub-menu links via Wicket.
- Clicking on a sub-menu tab will link to the selected page.
- css handles the tabs' construction.
The code is redundant so don't worry if you feel you are missing something. If you have not worked with Wicket before it does take some time to get acquainted with the code's syntax and structure.
The page's header "Example 05" had to be reduced from h1 to h3. However, by decreasing the size of the header the layout of the sub-menus gets altered. So the sub-menu positioning in css needs to be adjusted.
body.section-1 #menu ul#subnav-1,
body.section-2 #menu ul#subnav-2,
body.section-3 #menu ul#subnav-3,
body.section-4 #menu ul#subnav-4 {
display : inline;
left : 10px;
position : absolute;
top : 66px; <--- To adjust the positioning of the sub-menus, I had to play with the numbers.
}
Ten sub-menus had to be added to menu 3 which was not a difficult task. It should be noted Wicket has issues with having 10 or menus. Eclipse was complaining about something with the code. I had commented out the code for sub-menu 14 to see if I had implemented the first nine sub-menus correctly. After removing the comments from sub-menu 14 everything seem to work fine and could not figure out what changed so I left the code in its current state.
The most difficult part of the assignment is highlighting a menu tab that is active. Anytime there is a menu with sub-menus its difficult to tell which menu is working. So when a tab is chosen the name is embolden to highlight the working page. Making additions to the code is fairly simple with html and css.
#menu a.active {
font-weight : bold;
}
<ul id="menu">
<li id="nav-1"><a href="test-menu1.html">menu1</a></li>
<li id="nav-2"><a href="test-menu2.html" class="active">menu2</a>
<li id="nav-3"><a href="test-menu3.html">menu3</a>
</ul>
Conclusion
Making changes to a web page using only html and css can be time consuming and tedious. By spending some time learning the Wicket framework editing a web page will be much less of hassle.
Updated Version
Daniel's version of the menu bars.
Task 5
The code for adding sub-menus 5,6, and 7.
<ul id="menu">
<li id="nav-1"><a wicket:id="Menu1Link" href="#">Menu1</a></li>
<li id="nav-2"><a wicket:id="Menu2Link" href="#">Menu2</a>
<ul id="subnav-1">
<li><a wicket:id="SubMenu1Link" href="#">SubMenu1</a></li>
<ul id="subnav-2">
<li><a wicket:id="SubMenu2Link" href="#">SubMenu2</a></li>
</ul>
</ul>
</li>
<li id="nav-3"><a wicket:id="Menu3Link" href="#">Menu3</a>
<ul id="subnav-3">
<li><a wicket:id="SubMenu5Link" href="#">SubMenu5</a></li>
<ul id="subnav-4">
<li><a wicket:id="SubMenu6Link" href="#">SubMenu6</a></li>
<ul id="subnav-5">
<li><a wicket:id="SubMenu7Link" href="#">SubMenu7</a></li>
body.section-1 #menu li#nav-1 a,
body.section-2 #menu li#nav-2 a,
body.section-3 #menu li#nav-3 a,
body.section-4 #menu li#nav-4 a {
background : White;
border-bottom : 1px solid White;
color : #3366CC;
cursor : default;
}
#menu #subnav-1,
#menu #subnav-2,
#menu #subnav-3,
#menu #subnav-4,
#menu #subnav-5 {
display : none;
width: 90%;
}
body.section-2 #menu ul#subnav-1,
body.section-3 #menu ul#subnav-3 {
display : inline;
left : 10px;
position : absolute;
top : 66px;
}
body.section-2 #menu ul#subnav-2,
body.section-3 #menu ul#subnav-4,
body.section-3 #menu ul#subnav-5 {
display : inline;
left : 88px;
position : absolute;
top : 0px;
}
body.section-2 #menu ul#subnav-1 a,
body.section-2 #menu ul#subnav-2 a,
body.section-3 #menu ul#subnav-3 a,
body.section-3 #menu ul#subnav-4 a,
body.section-3 #menu ul#subnav-5 a {
background : White;
border : none;
border-left : 1px solid #3366CC;
color : #3366CC;
line-height : 10px;
margin-right : 4px;
padding : 5px 10px 5px 10px;
text-decoration : none;
cursor : default;
}
Task 6 & 7
Code for adding 10 sub-menus to menu 3.
<li id="nav-3"><a wicket:id="Menu3Link" href="#">Menu3</a>
<ul id="subnav-3">
<li><a wicket:id="SubMenu5Link" href="#">SubMenu5</a></li>
<ul id="subnav-4">
<li><a wicket:id="SubMenu6Link" href="#">SubMenu6</a></li>
<ul id="subnav-5">
<li><a wicket:id="SubMenu7Link" href="#">SubMenu7</a></li>
<ul id="subnav-6">
<li><a wicket:id="SubMenu8Link" href="#">SubMenu8</a></li>
<ul id="subnav-7">
<li><a wicket:id="SubMenu9Link" href="#">SubMenu9</a></li>
<ul id="subnav-8">
<li><a wicket:id="SubMenu10Link" href="#">SubMenu10</a></li>
<ul id="subnav-9">
<li><a wicket:id="SubMenu11Link" href="#">SubMenu11</a></li>
<ul id="subnav-10">
<li><a wicket:id="SubMenu12Link" href="#">SubMenu12</a></li>
<ul id="subnav-11">
<li><a wicket:id="SubMenu13Link" href="#">SubMenu13</a></li>
<ul id="subnav-12">
<li><a wicket:id="SubMenu14Link" href="#">SubMenu14</a></li>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
//Java code snippet
add(new Link("SubMenu14Link") {
private static final long serialVersionUID = 1L;
/** Upon clicking this link, go to FormPage. */
@Override
public void onClick() {
setResponsePage(new SubMenu14Page());
}
});
In the css file menu.css, I added 7 more subnav tags to deal with the new submenu tabs.
Task 8
Thanks to John Ly for solving for this little nugget. I would have never have thought of using 'get("Menu1Link")' to add an attribute to the link tag.
public Menu1Page() {
add(new WebMarkupContainer("body") {
private static final long serialVersionUID = 1L;
@Override
public boolean isTransparentResolver() {
return true;
}
@Override
protected void onComponentTag(ComponentTag tag) {
tag.put("class","section-1");
}
});
get("Menu1Link").add(new SimpleAttributeModifier("class", "active"));
}
The above code calls on the active tag in menu.css to make a given tab bold anytime a user clicks on it.
The scoreboard UI is simple in design, not too many elements that take up the screen. The left third of the page contains overall Devcathlon information.
