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.  

No comments: