Aug 26, 2007

Privacy Policy

Privacy Policy for ldeveloper.blogspot.com

The privacy of our visitors to ldeveloper.blogspot.com is important to us.

Log Files
We collect and use the data contained in log files. The information include your IP address, your ISP, your browser, the time you visited our site and which pages you visited throughout our site.

Cookies, Web Beacons

ldeveloper.blogspot.com does use cookies to store information about visitors preferences and record user-specific information.

We use third party advertisements on ldeveloper.blogspot.com. Some of these advertisers may use technology such as cookies and web beacons when they advertise on our site, which will also send these advertisers information including (but not restricted by) your IP address, your ISP , the browser you used to visit our site.
You can delete cookies by clearing the private data in your browser and changing your browser privacy settings to refuse all cookies or to indicate when a cookie is being sent. However, forbidding cookies can affect how you are able to interact with our and many other websites.

  • Third party vendors, including Google, use cookies to serve ads based on a user's prior visits to this website and other sites on the Internet.
  • Google's use of the DART cookie enables it and its partners to serve ads, based on your visit to this site and/or other sites on the Internet.
  • You may opt out of the use of the DART cookie by visiting the advertising opt-out page.

See: Google Adsense, Google opt-out page

See: Unified Cookie Opt-Out System which includes some of our advertisers.

Aug 22, 2007

Fun with GWT and Web 2.0

Simple and easy GWT tutorial and overview.

Introduction & Overview
I am mainly a server-side Java and C++ developer. I don’t have much time to loose with the View of the projects. But recently I had to make some Web User Interface with Ajax. I had some complicated and not functional JavaScript code which I had to debug. It is a really awful task for me. And then I just make a research for some useful Ajax tools and libs.
Why I like GWT. Of course because I can write java code and don’t bother with JavaScript. Also things that I find useful are in their first page : dynamic, reusable UI , simple RPC, browser history management, simple debugging, browser compatibility and so on. And of course it is released under Apache 2.0 license so you can use it in commercial products.

To understand this tutorial you need to have basic java and web knowledge.
Also it will be useful to have this installed:
1. Java SDK http://java.sun.com/javase/downloads/index.jsp
2. GWT http://code.google.com/webtoolkit/
3. Eclipse http://www.eclipse.org/

Hello World
At first glance GWT looks a little confusing, but it is far from the truth. In the matters of fact GWT is one of the simplest and easiest ways of making complex AJAX interfaces. Let us give a try. I will use eclipse for my tutorial projects.
You can create demo project in eclipse workspace using projectCreator tool:
projectCreator -eclipse TutorialProject
Then just call
applicationCreator -eclipse TutorialProject com.mycompany.client.MyApplication

Full description about how to get started with GWT you can find on http://code.google.com/webtoolkit/gettingstarted.html
After running this command you should have your project with some sources in it.
Now you are ready to start. First you must have MyApplication-compile and MyApplication-shell scripts. Run MyApplication-compile and you will see your application in hosted mode. You must see something like this.





Also you must have something like this code:
package com.mycompany.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define onModuleLoad().
*/
public class MyApplication implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {
final Button button = new Button("Click me");
final Label label = new Label();

button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
if (label.getText().equals(""))
label.setText("Hello World!");
else
label.setText("");
}
});

// Assume that the host HTML has elements defined whose
// IDs are "slot1", "slot2". In a real app, you probably would not want
// to hard-code IDs. Instead, you could, for example, search for all
// elements with a particular CSS class and replace them with widgets.
//
RootPanel.get("slot1").add(button);
RootPanel.get("slot2").add(label);
}
}


This is the code for our simple Hello World application that GWT create for us. And a html file MyApplication.html.

Let us change some stuff.
First make MyApplication.html look like this.



Then lets change our MyApplication:

public class MyApplication implements EntryPoint {

public void onModuleLoad() {
}
}
Now add a panel. Let it be VerticalPanel.
VerticalPanel verticalPanel = new VerticalPanel();

public void onModuleLoad() {

RootPanel.get().add(verticalPanel);
}
To this panel we can add any component we like. I choose to give a try to the menus.
First we need our horizontal base menu to which we will attach our menus.
MenuBar ourMenu = new MenuBar(true);
MenuBar baseMenu = new MenuBar();
After this we need our menu and some MenuItems and a command that will be run when somebody click on our menu.
Command cmd = new Command() {
public void execute() {
Window.alert("You selected a menu item!");
}
};
MenuItem firstMenuItem = new MenuItem("First", cmd);
MenuItem secondMenuItem = new MenuItem("Second", cmd);
MenuItem thirdMenuItem = new MenuItem("Third", cmd);

ourMenu.addItem(firstMenuItem);
ourMenu.addItem(secondMenuItem);
ourMenu.addItem(thirdMenuItem);
baseMenu.addItem("Our Menu", ourMenu);
Then we attach our menu to our panel and voila.
baseMenu.addItem("Our Menu", ourMenu);
Just hit F5 on the hosted browser window and you will see your menu. If you want your menu to be colorful and sweet you must use some CSS. Open MyApplication.html and change style tag to look like:


Now you must have nice colorful menu to have fun with.




I am not pro with CSS so I recommend you to learn from somewhere else how to make it look better.
This will be for today. Expect tomorrow to learn how to use some other fun components. ;)



Popular Posts