self-labeled buttons

Been playing with GWT ((was very shiny in May 2006)) lately – procrastinating from having to read journal papers. GWT seemed to be pretty good, I am mostly satisfied with the code I produced in terms of design. Much more satisfied than writing (and DEBUGGING) Java Script eeek. But I found the tutorial on GWT is very limited, especially around the actual widgets to create good UI. Maybe GWT users are assumed to be familiar with html/css/java script in general and therefore are proficient in creating UI.

GWT to me, brings a new level of creating UI. UI now can be created with OO concept, no more slabs of long and drowning html/javascript. A self-labeled button is a good example to showcase GWT ability.

What I usually see in the ‘Web 2.0’ app UI, is a radio button where the name of the button can be changed on the fly. See what I meant below, the state goes in order of (1) -> click ‘Unlabeled’ -> (2) -> type ‘Self-labeled’ -> (3)

self-labeledbuttons.png

When I click on the button label ‘Unlabeled’, a textarea will appear and allow me to change the label. Once I click outside the textarea, it will change back to the previous state, but with the new label.

Each of these self-labeled radio button can be created as a widget. The widget is a horizontal panel which consist of a nameless radio button, a label, and a text area. On (1), the radio button and the label are added to the panel. Clicking the label brings the state to (2) – the label is removed from the panel, and the textarea is added. When an onLostFocus event is triggered, the textarea is removed and the label is added back. Of course after the texts are matched between the two elements.

Here is some of the snippet of the code:

[cc lang=”java”]
public class SelfLabeledButton extends Composite {

public SelfLabeledButton(String label) {
button = new RadioButton(“group”,””); // nameless radio button
panel.add(button);
buttonLabel = new Label(label);
buttonLabel.addClickListener(listener);
panel.add(buttonLabel);
buttonTextArea = new TextBox();
buttonTextArea.addFocusListener(listener);

initWidget(panel);
}

private HorizontalPanel panel = new HorizontalPanel();
private RadioButton button;
private Label buttonLabel;
private TextBox buttonTextArea;
private MCListener listener = new MCListener();

private class MCListener implements ClickListener, FocusListener {

// when (1) -> (2)
public void onClick(Widget sender) {
if (sender instanceof Label) {
panel.remove(buttonLabel);
buttonTextArea.setText(buttonLabel.getText());

panel.add(buttonTextArea);
buttonTextArea.selectAll();
}
}

public void onFocus(Widget sender) {
// do nothing
}

// when (2) -> (3)
public void onLostFocus(Widget sender) {
panel.remove(buttonTextArea);
buttonLabel.setText(buttonTextArea.getText());
panel.add(buttonLabel);
}
}

}
[/cc]

fave podcasts

I listen to podcast pretty frequently, so I thought I will list some of them that are really good. The topic itself matters, but the speaker is the one that matters the most. Have a lookie here, and I will update it as I go from now on. The link to the page is also available from the menu on your right.

Tutorial MyGWT 100 – Creating your FIRST MyGWT application

I was blown away by MyGWT ((was very shiny in Sept 2007)) after seeing what it can do on its demo. I quickly jumped on my squirtle and started to read the tutorial madly. But sadly the tutorial wasn’t really made for a dumb-ass like myself, so it took me painfully long hours just to run my mygwt hello world! If you look through the tutorial, it firstly doesn’t look like a ‘Creating your first MyGWT application’ type of thing. It was too ambitious trying to explain some concepts instead of focusing on getting something to work.

GWT hasn’t been there for a long time, so I think it will be good to have some reference to at least how to get GWT working (point them out to gwt site perhaps?). What about connecting your project to eclipse? There is a page on ‘Configuring Eclipse’, but again, wasn’t even referenced in 101.

So here it goes, hopefully you can follow this steps to make something work. I will assume that you are new to gwt and you are using eclipse, so I will start from Installing GWT and then MyGWT.

Download the source for this tutorial here. This is only for viewing purpose, don’t expect it to unzip it and work (because it is downloaded straight from my local directory). You will need to follow the tutorial.

Installing GWT

Download GWT from gwt site.

Unzip the folder in your workspace folder and treat it as an individual java project.

Add the unzipped folder to your environment variable PATH, so add something like ‘C:Documents and SettingsMeworkspacegwt-windows-1.4.61’ if you are using Windows. Other OS shouldn’t be too different.

Lets call our application MyGWT100. Create another folder using that name in your workspace (case sensitive). From inside the folder, run ‘projectCreator -eclipse MyGWT100’ from the command line. You should be getting messages such as this:

Created directory C:Documents and SettingsMartyworkspaceMyGWT100src
Created directory C:Documents and SettingsMartyworkspaceMyGWT100test
Created file C:Documents and SettingsMartyworkspaceMyGWT100.project
Created file C:Documents and SettingsMartyworkspaceMyGWT100.classpath

The projectCreator that comes with the gwt version I am using is not smart enough to create the folder ‘MyGWT100’ on its own, therefore if you didn’t create the folder first before you run the projectCreator, you will end up with those 4 items scattered around.

Once that’s done, run ‘applicationCreator -eclipse MyGWT101 com.mycompany.client.MyGWT101’. Make sure that the final package is ‘client’, gwt should then spit out something like this:
Created directory C:Documents and SettingsMartyworkspaceMyGWT100srccommycompany
Created directory C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanyclient
Created directory C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanypublic
Created file C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanyMyGWT100.gwt.xml
Created file C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanypublicMyGWT100.html
Created file C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanyclientMyGWT100.java
Created file C:Documents and SettingsMartyworkspaceMyGWT100MyGWT101.launch
Created file C:Documents and SettingsMartyworkspaceMyGWT100MyGWT101-shell.cmd
Created file C:Documents and SettingsMartyworkspaceMyGWT100MyGWT101-compile.cmd

When you run ‘MyGWT100-shell’, it should come up with gwt wrapper html

gwthelloworld.PNG

If you can see that, it is a good thing 🙂

Installing MyGWT

Download the zip file from here, and unzip them in your workspace folder just like you did with gwt.

Add your MyGWT100 as a java project in eclipse. Your package explorer view should look like this:

mygwt100peb.PNG

Right click on the project and choose ‘Build Path -> Configure Build Path’. Go to ‘Libraries’ tab and click on ‘Add External JARs’. Look for the unzipped folder of MyGWT that you previously downloaded. Directly in the folder, you should be able to find ‘mygwt.jar’. Your view should look like this now:

mygwt100lib.PNG

In MyGWT100.gwt.xml, add this line <inherits name=”net.mygwt.ui.MyGWT” /> underneath the line <inherits name=’com.google.gwt.user.User’/> that is already there.

In MyGWT100.html, empty the <body> area by removing the default example text from gwt. Your body area should just be <body></body>.

Now to the last utmost essential part, edit your ‘MyGWT100-shell.cmd’ and ‘MyGWT100-compile.cmd’ files. In both files, you should be able to see something like this: @java -cp “%~dp0src;%~dp0bin;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-user.jar;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-dev-windows.jar”

You will need to include mygwt.jar to it, so it becomes:

@java -cp “%~dp0src;%~dp0bin;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-user.jar;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-dev-windows.jar;C:/Documents and Settings/Marty/workspace/mygwt-0.4.44/mygwt.jar

Double click on ‘MyGWT100-shell.cmd’ on the Package Explorer to run your code. This is what you should be able to see:

mygwt100end.PNG

Yay!

Note: I am using gwt-windows-1.4.61 and MyGWT0.4.44 for this tutorial.

tube-rejection

Sorry. Based on the information you have submitted to us, you are ineligible to register for YouTube.com. That’s the only message come up whenever I tried to register. I tried using different email address, tried using different youtube ID, made sure that my age was +18. Still no luck.. very sad

breeding blogs

I have been doing some coding lately, but as usual it is with a very limited depth. I played around with python and zope for no reason, just because I wanted to try out some OO database. There went my days wasted on useless things, or so I thought of it more (I think of it less, but I don’t think of it on the contrary yet). On the other hand, I always wanted to get another blog. Not that I have been very diligent with my personal blog since I was always aware of the type of entries I put in it. I would only put entries that were not IT related, that would somehow relate to a more general audience. IT related topic, I figure, would just bore the audience.

But not if I start another blog! Yipee this was the solution, and a little bit of googling brought me to WordPressMU (read: WordPress-mew, was very shiny on October 2006). MU stands for Multiple-User, and this child of WordPress does exactly what I wanted. As a result, I now have this new shiny.mwinata.com, and I have moved my personal blog to me.mwinata.com.

The export function did everything in terms of moving my old posts to the new place, but I have to say that WordPressMU is not documented as nicely as the original wordpress. I found some of the installation tidbits to be unclear and I had to re-install the app several times. Just to edit the main page, I need to modify the file <path>/wp-content/themes/home/home.php directly using Notepad++.