Research Log of Web Science Students

Because of my obsessive-compulsiveness in design, I would need to style the forms which were originally “style-less.” (See partner’s Create-A-Project Feature Snapshot post.)

The approach should be:

RootPanel.get(id_of_component).setClassName("some class name");

But lo and behold:

No ID’s. And labels and textboxes (i.e., Description label and its textbox counterpart, Link label and its textbox counterpart) aren’t aligned. *more obsessive-compulsiveness kicking in*

Read the rest of this entry »

So instead of bothering with adding Listeners by iteration, we did an object-oriented approach instead.

Well these are eye-openers for me, since I’m not used to object-oriented programming in web development.

… but I just knew how to “array-ize” lists and such things.

List<List<TextBox>> descriptions = new ArrayList<List<TextBox>>();

… which is, in array form,

TextBox[][] descriptions = new TextBox[][];

Now I’m thinking if I have to initialize every widget add, or get them immediately (but I’m betting on the former).

List<VerticalPanel> vpanel = new ArrayList<VerticalPanel>();
// initialize component to add to vpanel
vpanel.add(new VerticalPanel());
// access it
vpanel.get(0);

From our wiki page,

ISSUE: Project Form Specification 6 and 7 – which loads first jsp or javascript?

Spec 6: module title will be in a hidden form field, retrieved by GWT, and displayed using GWT.

Spec 7: module learning activities will be comma separated in a hidden div or form field and displayed using GWT.

The solution to our Create a Project Feature requires the collaboration between the controller and the javascript (done with GWT). When a user wants to learn a course, he/she clicks that course and it sends the id to the controller. Controller gets the course from the database and generates a form that will allow the learner to add as many learning objects as he/she wants. The javascript displays all the learning activities of the course where the user adds learning objects.

But where does it get these from? The controller places the course details in a hidden input field. GWT retrieves this data, and layouts the form for us. Hence, our problem, will the jsp be able to print all the learning activities in the hidden input field before gwt tries to retrieve them?

I was afraid javascript would load first. Theoretically though I thought not. PHP is interpreted and returned with no more PHP tags, that’s why when we view-source a .php webpage, there’s only html in it and no more php. Why shouldn’t the same apply to jsp? Different design perhaps. I had to find out. I first went to my JSP and Servlets bible and looked for answers so I wouldn’t have to do an experiment. But because I was confident JSP is interpreted on the server like PHP is (and because I also wanted to code), I just did an experiment.

To cut the long story short, I never found out what happens on the server when you request for a jsp but I do one thing, jsp loads first before gwt can do it’s thing.

Though we list down what we’re supposed to do in our wiki, these are all very general only listing features that should be implemented. But every feature is built with many steps, is made up of smaller sub features (components). I think by simply saying that we’ve finished a feature doesn’t justify the many other things that we’ve done to finish that feature.

It was staring me right in the face before but I wished I could have thought of using an issue tracker. It was taught during my internship and I always saw it on my way to our repository page @ unfuddle. We also need a list to track the many issues we encounter during development from difficulties to bugs. This gives more weight than simply saying, “we finished this feature this week, demo demo demo demo”. Hopefully things will be much smoother from now on.

I’ve already listed the issues related to developing our save a project feature in our wiki and today I’ve learned a lot of things by resolving issue number 2: laying out GWT panels in CSS!

1. Class and Id are different in CSS

<div id="content" style="font-size:8px">
    <!-- GWT widget placed here-->
</div>

We wanted to typeset our GWT widgets but didn’t know so I made a test GWT module and tried to find out how. At first I did it the normal way placing a widget and a pre encoded div with an id and styled the div in the html. But that didn’t work out.
Apparently id applies to only one element in HTML and class can span many elements. What was wrong with my code was that
I was applying the style to a certain id and not to a widget with an id. So I gave the widget an id in gwt and then used css to style it:

# id-of-widget-that-i-used-for-testing 
{
font-size:8px;
}

2. There are two ways to style GWT widgets

<stylesheet src="__css-url__"/>

One is in plain old html and another using Automatic Resource Inclusion (ARI) also known as putting a reference in the gwt.xml file. What’s good about ARI is that a certain style goes where ever a widget is deployed. This is good if we want to reuse widgets which….I think we might be doing. But there’s a bit of a learning curve when using ARI. One is I don’t know how exactly I’d reference the styles in an xml file (see code above). The GWT tutorial does this like it treats the stylesheet as a java file

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

So for now I hope, we’ll go for plain old html. Now at least I know I can layout GWT widgets.