Research Log of Web Science Students

Computer Science is not simply programming

Posts Tagged ‘GWT

Can’t Style Without You

with 2 comments

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 »

Written by Paolo Sy

November 30, 2009 at 12:59 am

Posted in Hardwire

Tagged with , ,

Finally Speaking – Part 2

with one comment

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.

Written by Paolo Sy

November 30, 2009 at 12:43 am

Posted in Hardwire

Tagged with , , ,

Forgive My Ignorance

leave a comment »

… 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);

Written by Paolo Sy

November 29, 2009 at 1:45 am

Posted in Hardwire

Tagged with , , ,

Issue 4: Spring MVC + GWT + JSP

leave a comment »

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.

Written by Jose Asuncion

November 28, 2009 at 6:02 pm

Posted in Hardwire

Tagged with , , ,

Issue Number 2

leave a comment »

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.

Written by Jose Asuncion

November 27, 2009 at 10:58 am

Posted in Hardwire

Tagged with ,

Rubrics using Google Spreadsheets

leave a comment »

We almost gave up on using Google Spreadsheets for the rubric creation–until our last project planning. What we were planning to do is to create our own rubric creator using GWT–but I think there’s no way for us to implement the collaboration function (similar to that of Google Docs) given the timeframe.

So now, this is our current plan on how to implement the rubric:

(1) Make Projectrix create a new Spreadsheet — Done by Dan before.

(2) Insert rubric headers — The new rubric will include a scale for the top row (incrementing from left to right) and any additional row will be a new criterion.*

(3) Make Projectrix access the ATOM feed of the Spreadsheet (like in our sample rubric: http://spreadsheets.google.com/feeds/list/tigT9uc4x8-o7e4d7NrVd2w/od6/public/basic)

(4) Use open source ATOM parsers (here’s a running list: http://java-source.net/open-source/rss-rdf-tools) to parse the ATOM feed

(5) Insert the parsed text to the empty table** in Projectrix.

* Google Spreadsheets API provides steps on how one can update Spreadsheet rows (follow: http://code.google.com/apis/spreadsheets/data/3.0/developers_guide_protocol.html#UpdatingListRows)

** The rubric table in Projectrix is entirely independent from the Spreadsheet–the only role of the Spreadsheet is to provide the rubric table with its contents. But without the text from the Spreadsheet, the rubric will actually work–albeit defeating the purpose.

Projectrix won’t save the contents of the Spreadsheet until it’s published. We’ll be doing the same action selections as iRubric (Create, Modify (for unpublished rubrics), and Duplicate).

My priority task is to find out solutions for points (3) and (4). Will update on which parser we’ll be using prolly later today or tomorrow.

Written by falloutkee

November 24, 2009 at 6:27 am

GWTScript

leave a comment »

So the other day, I got a first glimpse of coding using the Google Web Toolkit (GWT) myself. It was pretty fun actually — it’s like you’re doing JavaScript but it’s on pure Java now.

RootPanel.get(optional_id_of_element_in_page).getElement().function;

is the equivalent of…

document.getElementById(id_of_element_in_page).function;

There’s a list of functions that can be used. Thank goodness for auto-complete.

Written by Paolo Sy

November 21, 2009 at 3:21 pm

Posted in Hardwire

Tagged with , ,