Monday, March 23, 2009

ICS 499: Wicket, CSS, and JavaScript

This week I finally get to implement all the web features I have been researching and practicing in creating, into the Devcathlon.  Not only do I get to use my web programming knowledge, I also get to practice my leadership skills by becoming the team leader.  I will be leading Team MS, which consist of John Ancheta, John Zhou, and Daniel Arakaki.  Our team will be charged with implementing the Matches and Scoreboard sections of the Devcathlon. 

 

As I mentioned in my earlier blog, that I implemented the Expand and Collapse feature into the Scoreboard Manager section.  A big problem I had when implementing this feature was that the Devcathlon uses wicket, which some people would say is an alternative to JavaScript.  The page, Scoreboard Manager, I am working on is a child of a base page.  So when I was adding in the JavaScript and CSS into the User interface part of the system, I wasn’t sure where to add it; to the base page or to the page I was working on.  So I took a chance and added the files to both pages. 

  

At first no changes appear, no part of the feature I was implementing showed.  After hours of thinking and tracing CSS tags, I finally figured out what was causing the problem; it was a CSS BODY “class” tag,  My original development of the Expand and Collapse did not include wicket, so it was using the body as a container; but, with wicket the body was established only in the base page.  So with out causing any harm to other team members or to the other teams mock up implementation, I used a DIV tag as the container. 

 

Once the whole container problem was eliminated, finding which file to add the CSS and JavaScript too was no problem.  It actually, as I thought, belonged to the Scoreboard Manager page.

  

Conclusion

Incorporating CSS and JavaScript into wicket child seemed like an easy task, but for me it was mind bending; another problem I took lightly.  Now I know what to look for and where it would be; if it’s a CSS problem, using Dreamweaver really helps to finding what to change.  I also still have many features in my web arsenal, such as the slider bar and tooltip.  Those features, I know, will be used somewhere down the line in the development process.  

A common goal

This week the class has finally started on the first mile stone development of the Devcathlon, a game which we have been designing since the beginning of the semester.  The class was split into two teams; one handling the User and Team sections (Team UT) of the game, the other handling the Matches and Scoreboard section (Team MS).  I am a member and team leader of Team MS, which also consist of John Ancheta (Class Leader), John Zhou, and Daniel Arakaki.

  

For our team, we split our sections into two; having two members tackling a section.  I, along with Daniel, will be handling the Scoreboard section.  After having an initial meeting, on March 20th, of the leaders, Anthony Du (Team UT), John Ancheta (Class Leader), and I; we all decided, since the a deadline of having something to show our professor was approaching early, to create a web mockup of all the sections and sub sections. On Saturday, the 21st, I immediately informed the rest of the group of the plan. 

 

Issues:

Add match to scoreboard

Delete match from scoreboard

 

Note: These two issues relate to the same page.

 

Packages:

 

Scoreboard Manager

 



The Scoreboard section, I was in charge of implementing the Scoreboard Manager section.  I took this opportunity to finally show some of the JavaScript and CSS I’ve been working on for my ICS 499 course, which all relates to the development of the Devcathlon. 

 



It took me quit awhile to implement the Expand and Collapse feature, at first having trouble adjusting the positioning of parts to the middle of the screen.  Using Dreamweaver helped a lot to narrow done which part I had to adjust, also what CSS file to edit.

  



Going back and forth, from using Dreamweaver to using Eclipse, a lot of my development time was not picked up.  Development time is only recorded in Eclipse using the Hackystat sensors. 

  

Conclusion

I have to say this web mockup really looks good, from members of both teams.  I know were in for a rough ride, once we start implementing all the java.  It’s a good thing both teams are willing and ready to work towards this immense common goal.

Monday, March 16, 2009

ICS 499: Wanna see my Calendar?


This week I have taken a further step into learning to use Dream Weaver and the Yahoo User interface.  In my other class, ICS 414, we for the past week we have been implementing the web user interface for our project, the Decathlon.  I recently remembered something my professor said about the user interface, “It would be cool to have a calendar, where you can select a date”.  With what he said in mind, I proceeded to learn on creating a calendar for the Dev-UI (Devcathlon User Interface).

 

Using Dream Weaver to implement a page was hard at first, but with a lot of help from online video tutorial by users on You Tube, everything ran smoothly.  When I used Dream Weaver to open up an example calendar from the YUI package, it easily traced   all the CSS and JavaScript that was being imported into the page.  With the tracing made easier, I was able to extract what I needed from the package and upload it to a Google Project page I made, “Dev-UI-Test”, instead of uploading a the huge YUI package.  I also uploaded my own implementation of the YUI tooltip into the project page as well. 

  

The calendar.

The calendar can be useful in the Devcathlon when; the user wants to select a time interval for a match or view events that have happened in a match, the user would then click on the button and a calendar pops out.  The user would then select a date from the calendar and hit the select button; the date would automatically fill in the date text box. 

 

The calendar idea is pretty useful, in ways of helping the user and making the interface look cooler.  Also using Dream Weaver cut my work in half by helping me find what exactly I needed.  I tried to create a test server through Dream Weaver; but it seems I need an add-on from Adobe, which I’m still trying to get a hold of from a friend.  Right now a lot of the things don’t work when it comes to processing the inputs, but stay tuned into my project page for some useful YUI widgets.  Next over the few days, I’m going to try to implement the slider bar and display the increments of the slider bar’s position.  Till next time…….

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.

Monday, March 9, 2009

ICS 499: Playing with a new Toy

For my ICS 499 independent studies class, I’ve been working on the Devcathlon web user interface.  In the past weeks I’ve been reading up on incorporating JavaScript, the Yahoo User Interface (YUI), and Ajax with web pages.  So far it’s been a rough independent journey diving into these languages and widgets, without any guidance or knowledge what so ever. 

  

During this past week I have recently obtained a copy of Adobe Creative Suite 4, to help with the web user interface development.  For the past few weeks I have been using either textpad or eclipse to do most of my code editing.  These IDEs (Intergraded Development Environments) aren’t bad to use, but I needed something better.

 

Using Dreamweaver CS4, you can use the split view to see both the HTML page code and the actual page; instead of having to switch from window to window, unless you have multiple screens.  With this split view capability, you’re able to get a glance of the changes you make to the HTML, JavaScript, and CSS codes.  Also in the actual page view, when you click on an item on the page, the piece of code that handles that item is instantly located; beats scrolling up and down lines of code. 

 

There are more features of the latest edition of Dreamweaver, such as inserting items.  When you insert an item into a page, Dreamweaver creates the code for the user; making web implantation easier.  Plus the JavaScript behavior for that item is also written for the user. 

  

Inserting a jump menu item into a form, and adjusting it's settings.


The jump menu added to the page.


There is still much more learn on how to harness this powerful web editing tool. Adobe has published web tutorial videos to help on using Dreamweaver, along with more online tutorial forums.  My next mission in using Dreamweaver is on how to set up a test server and incorporate external widgets, such as YUI. I’m pretty sure there are a forums that instruct me how to do this.


Sunday, March 8, 2009

A Better Understanding

Intro

This week we, the class, continue with the development of the Devcathlon Events.  Just like the previous week’s assignment, we were all given an event to implement; but this time we would be working in groups of two. 


The Task

I was teamed up with Philip to build the event named “Keep the Repository Clean”.  Here is our event description:

Keep the repository clean

Summary: Penalize (or award) developers for committing code that fails (or passes) a continuous integration build.

This event requires that Build sensor data is generated from the continuous integration server, and that CI build sensor data has a special property associated with it (such as Type=continuous.integration). This is to distinguish continuous integration Build sensor data from local builds (for which frequent failure is to be expected.) Note that the specific tag to be checked for could be a configurable property for each match.

PAR-1: Wakeup every 60 minutes. If there is any CI Build sensor data that does not have a successful Result type, then assign -5 points. Note that you get a deduction of a maximum of -5 points no matter how many times you fail the build during the interval.

Rationale: If you commit code that fails the build, you shouldn't be penalized further for any additional commits you make trying to fix the failing build as long as you do them right away (within an hour of the original failing commit). However, if you wait more than an hour to try to fix it, then you should incur additional penalties.

PAR-2: Wake up every 1 day. If there are successful CI Build events during that day, then assign +5 points.

Rationale: Reward developers for passing continuous integration builds. Note that this is relatively easy to "fake", as there is no verification in the design of this PAR that any actual work was done before kicking off the build. We could look for threshold churn values to ensure that there was nontrivial editing, at least.

For this event we were able to split it up into two sections; one being for Par-1 and the other being for Par-2, I was in charge of implementing Par-2.  Making Par-2 at first was not so difficult, being that it was just like the previous event I developed.  The similarity of this event, with my previous one, was that I was obtaining data from the daily project build; the difference was I also had to get data from the daily project commit. 

 

Problems and Fixes 

Getting the data from the daily project build was easily obtained.  I simply copied lines of code from my previous file to get the data.  Then when implementing the code to get the commit data, which is similar to obtaining code for build data, I hit a brick wall.  For some reason I was not able to get any sort of data.  

After hours of trying to get hold of the data and reviewing the hackystat component documentations; with no avail, I was not able to find a solution.  I decided to get external help, from other members of the Devcathlon development team by posting a topic in the devcathlon-discuss group; there you can see all development issues that have arisen in our journey to completion. 

With posting a topic on the discussion board and uploading a file for the members to see what was happening, the solution came within hours.  The problem was solved by John Ly; he saw the method of making commit data was missing a property.


The makeCommitData issue I had:

protected void makeCommitData(User owner, Project project, XMLGregorianCalendar timestamp)

  throws Exception {

    String host = getSensorBaseHost();

    String email = owner.getEmail();

    SensorBaseClient client = new SensorBaseClient(host, email, email);

    SensorData data = new SensorData();

    data.setOwner(email);

    data.setTool("Ant");

    data.setSensorDataType("Commit");

    data.setResource(users + project.getName() + foo);

    data.setTimestamp(timestamp);

    data.addProperty("linesDeleted", "10");

    client.putSensorData(data);

  }

The chunk of code, above, was missing the line “data.addProperty(“linesAdded”, “10”).  Once John had pointed that out to me and uploaded a new file to resolve my issue, I had another minor setback in my development.  From the commit data I was also trying to get the sum amount of lines added and deleted, in other words the amount of churn made. 


The issue of getting the amount of churn from commit data was easily resolved by creating a new makeCommitData method which takes in lines added and deleted as inputs (parameters) as well. 

The new makeCommitData method:

protected void makeCommitData(User owner, Project project, XMLGregorianCalendar timestamp,

      String linesAdded, String linesDeleted) throws Exception {

    String host = getSensorBaseHost();

    String email = owner.getEmail();

    SensorBaseClient client = new SensorBaseClient(host, email, email);

    SensorData data = new SensorData();

    data.setOwner(email);

    data.setTool(ant);

    data.setSensorDataType("Commit");

    data.setResource(users + project.getName() + foo);

    data.setTimestamp(timestamp);

    data.addProperty("linesAdded", linesAdded);

    data.addProperty("linesDeleted", linesDeleted);

    client.putSensorData(data);

  }

Along with creating a new method, I also had to make a small minor change to avoid a PMD error.  Apparently PMD does not like it when you use the same thing more three times in a row, in my case was the string Ant.  So I resolved this by making a variable and having each method that used string Ant, refer to the variable I made.  With all the issues resolved I was able to finish my part of this event implementation a head of schedule. 

 

Conclusion

Unlike my previous works, I started this one as soon as possible.  Also my team, Philip and I, were fortunate that our event had a big resemblance to our previous events for the Devcathlon; which made things easier on us.  The only major setback I had, was not being able to get commit data.  Before getting the resolution; I had added the line of code which would fix the problem, but commented it out.  I guess I was afraid of tampering with that section of the code, but good thing I got a second opinion from John.  After viewing more parts of the system, I now have a better understanding of things.