Put it on my TAB

This week the class has taken its first dive, for the semester, into using the wicket framework.  In our previous semester, during our last project, we took a head rush into learning the Java Wicket framework; so this was just a simple refresher.  A long with the memory jogger of wicket, we were also given the task to learn some more CSS and HTML editing techniques. 

 

The Tasks

Our professor has given us pre-written HTML and CSS pages that contain menu tabs and submenu tabs.  The pages were split into two groups, one being written statically in HTML and CSS, the other was using the wicket technique.  Our first task was to add a new menu tab, along with 3 new submenu tabs; in both groups.  This task was easily done; only adding a few lines of HTML code, which basically mimicked code that was pre-written for menu 2.  It was also easily done thru wicket adding a few lines of JAVA and HTML code.

 

HTML CODE:

<li id="nav-3"><a href="test-menu3.html">menu3</a>
            <ul id="subnav-3">
      <li><a href="test-submenu1.html">submenu5</a></li>
      <li><a href="test-submenu2.html">submenu6</a></li>
      <li><a href="test-submenu1.html">submenu7</a></li>
    </ul>
  </li> 

WICKET CODE:

HTML for 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>
            <li><a wicket:id="SubMenu6Link" href="#">SubMenu6</a></li> 
            <li><a wicket:id="SubMenu7Link" href="#">SubMenu7</a></li>
          </ul>
</li>

JAVA code for menu 3 and  submenu 5

add(new Link("Menu3Link") {

      private static final long serialVersionUID = 1L;

      /** Upon clicking this link, go to FormPage. */

      @Override

      public void onClick() {

        setResponsePage(new Menu3Page());

      }

    });

    add(new Link("SubMenu5Link") {

      private static final long serialVersionUID = 1L;

      /** Upon clicking this link, go to FormPage. */

      @Override

      public void onClick() {

        setResponsePage(new SubMenu5Page());

      }

    });

New menu and submenus

The next task was then to add 10 submenus, instead of just 3 submenu tabs. 

The next task was to doodle with the CSS positioning of the submenus, for this task I mainly used the static HTML group of pages.  What I first learned that the positioning was absolute, which made it bound to its coordinates.  So when you change the size of the header, in the example its labeled “Example 5”, the submenus are at a fixed position. 

Absolute positioning with a different sized header.

I attempted to try to change the positioning from absolute to relative, changing the positioning meant also changing the coordinates also.  I also changed the display settings from inline to block.  At first it looked like it worked but I then saw that there was a gap between both the menu 2 and menu 3 tabs.  

 

CSS CODE:

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 : block;

            left : -152px;

            position : relative;

            top : 20px;

}

Using the relative positioning, but with a flaw.

The final task was to improve the look of the menu and submenu tabs.  To do this, we were to make a selected menu item’s font bold and also the selected submenu item.  After researching through the internet for possible solutions, the only easy fix I found was to use the link active property.  The active property meant that when a link is active, that link would then take the CSS properties along with it. 

My first attempt on using the active property only made the link bold when it was clicked, then the boldness would disappear.  Proceeding a few hours of contemplation, it seemed the solution was to make an active class for the links.

 

CSS CODE:

#menu a.active {

            font-weight: bold;

}

HTML CODE for menu 2:

<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>
    <ul id="subnav-2" name="subnav-2"> 
      <li><a href="test-submenu1.html">submenu1</a></li>
      <li><a href="test-submenu2.html">submenu2</a></li>
    </ul>
  </li>

HTML CODE for submenu 1:

<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>
    <ul id="subnav-2">
      <li><a href="test-submenu1.html" class="active">submenu1</a></li>
      <li><a href="test-submenu2.html">submenu2</a></li>
    </ul>
  </li>

Bold selected menu item and submenu item.

Conclusion

This task was a good refresher to the wicket framework and a good workout to our CSS and HTML knowledge.  There was a lot of copying and pasting of code, which made a lot of it redundant.  Overall this was good trick, making tabs through CSS and HTML alone.  I'm not to sure if i would consider some of the task done, but I know i did finish implementing the new menu and submenu tabs, along with improving the look task.  Adjusting the positioning of the tabs taskI did not finish, but came close and found the flaws. I’m pretty sure that there is a way to do this, without making the mistakes I got; maybe if we grouped the menu div outside of the body, but that maybe to advanced web editing for us.  

Here is my copy of the Example 5 wicket, html, and css implementation.