You are probably running Firebug, so you can hit F12 to open the Firebug Console in the page.

Every ZWT application requires the zwt.ui.Window to run. So the first thing you have to do is to load the zwt.ui.Window class. Enter the following line in the Console and press Ctrl+Enter.

System.getSystemClassLoader().loadClass('zwt.ui.Window');

You should have normally seen some classes (including zwt.ui.Windows) loaded on the Console. You can continue by loading the zwt.ui.Part class.

System.getSystemClassLoader().loadClass('zwt.ui.Part');

and the zwt.ui.Button...

System.getSystemClassLoader().loadClass('zwt.ui.Button');

Now you should have everything loaded to create your first ZWT UI. Start by creating the Part:

var playPart = new zwt.ui.Part();
zwt.ui.Window.getWindow().setPart(playPart,'playgroundSlot');

Now that the part is attached to the page, you can set its content. Let's try to set a Button in the Part:

var myButton = new zwt.ui.Button();
myButton.setText('Click me!');
myButton.getClickEventManager().addClickHandler(function(button, event) {
	alert('You have clicked me.');
});
playPart.setContent(myButton);

Now you can click on the button: an alert is displayed.

OK nothing to get really excited there, but you should already have a clear understanding on how ZWT is working.

Let's move forward, and spice this example a bit. Load the zwt.ui.panel.HorizontalPanel class:

System.getSystemClassLoader().loadClass('zwt.ui.panel.HorizontalPanel');

Now you can create a Horizontal Panel and display three buttons horizontally:

var myPanel = new zwt.ui.panel.HorizontalPanel();
	
var myButton1 = new zwt.ui.Button();
myButton1.setText('My button 1');
var myButton2 = new zwt.ui.Button();
myButton2.setText('My button 2');
var myButton3 = new zwt.ui.Button();
myButton3.setText('My button 3');

myPanel.add(myButton1,1);
myPanel.add(myButton2,1);
myPanel.add(myButton3,1);

playPart.setContent(myPanel);

Now we're talking, you should see three buttons horizontally distributed in the Part. Let's imagine I want to be able to resize these buttons in my panel. Load the zwt.ui.panel.Divider class:

System.getSystemClassLoader().loadClass('zwt.ui.panel.Divider');

Now you can add dividers to the panel:

myPanel.insert(new zwt.ui.panel.Divider(zwt.ui.panel.Divider.HORIZONTAL),1);
myPanel.insert(new zwt.ui.panel.Divider(zwt.ui.panel.Divider.HORIZONTAL),3);

You can resize the buttons in your panel. You may have noticed that buttons completely fill the spaces available in the panel. Let's say we want them to only fill the horizontal space:

myButton1.setFill(zwt.ui.Widget.FILL_HORIZONTAL);
myButton2.setFill(zwt.ui.Widget.FILL_HORIZONTAL);
myButton3.setFill(zwt.ui.Widget.FILL_HORIZONTAL);

Buttons should now fill the horizontal space only.

Just for fun, let's try a Tab Panel. Load the zwt.ui.tab.TabPanel class:

System.getSystemClassLoader().loadClass('zwt.ui.tab.TabPanel');

and create the Tab Panel:

var tabPanel = new zwt.ui.tab.TabPanel(zwt.ui.tab.TabPanel.TOP);

var tItem1 = new zwt.ui.tab.TabItem();
tItem1.setText('Tab 1');

var tItem2 = new zwt.ui.tab.TabItem();
tItem2.setText('Tab 2');

var tItem3 = new zwt.ui.tab.TabItem();
tItem3.setText('Tab 3');

tabPanel.add(myButton1, tItem1);
tabPanel.add(myButton2, tItem2);
tabPanel.add(myButton3, tItem3);

tabPanel.selectAt(0);

playPart.setContent(tabPanel);