Intent

Feature:Browsing web programming with Technology:GWT

Motivation

Technology:GWT is a framework for creating Language:JavaScript web applications with Ajax support in Language:Java. Thereby, the complete JavaScript code is generated out of the Java code. The result is a complete client-server-based web application with a tree based GUI. Additionaly, the implementation extends the basic Contribution:gwt adding the Feature:Editing and Feature:Restructuring.

Illustration

The main difference to the Contribution:gwt implementation is the improvement of the Feature:Browsing. Hence, the focus of this section is the development of the GUI and the implementation of the new features.

GUI implementation

The supervising component of the GUI is the parent class implemented in GwtTree.java. This component manages the visibility of the three panels CompanyPanel.java, DepartmentPanel.java and EmployeePanel.java and, additionaly, contains the panel TreePanel.java. The method

onModuleLoad()
initializes all these panels on application start.

Tree

The class

Tree
, included in Technology:GWT, provides great support for a tree based view. Every tree item contains a user object with the identifier of the specific entity. The tree generation starts with the company as root:

...

for (CompanyItem item : info.getCompanies()) {
	TreeItem root = new TreeItem(item.getName());
	root.setUserObject(item);
	appendDepsAndEmps(root, item.getDepartments());
	addItem(root);
}

...

First, the tree item for the company is generated with the name of the company. The

setUserObject
method adds the
CompanyItem
with the identifier of the company. The method
appendDepsAndEmps
appends all departments and employees to the company root. At last, this root is added to the tree.

The selection handler of the tree invokes the displaying of the additional informations for each entity included in the company:

...

this.addSelectionHandler(new SelectionHandler<TreeItem>() {

	@Override
	public void onSelection(SelectionEvent<TreeItem> event) {
		Object obj = event.getSelectedItem().getUserObject();
		if (obj instanceof CompanyItem) {
			TreePanel.this.main.showCompany(((CompanyItem)obj).getId());
		} else if (obj instanceof DepartmentItem) {
			TreePanel.this.main.showDepartment(((DepartmentItem)obj).getId());
		} else if (obj instanceof EmployeeItem) {
			TreePanel.this.main.showEmployee(((EmployeeItem)obj).getId());
		}
	}
});

...

The

TreePanel.this.main
member provides the main class GwtTree.java. There is a different method
TreePanel.this.main.show...
for each different entity class. This method includes the specific company, department or employee panel into the GUI and initializes it with the corresponding data.

Panel

The following section illustrates the main functionalities of the department panel. This panel containes two textfields for the name and the total value and two listboxes for the parent department and the manager. These elements are encapsulated within a

grid
:

...

Grid grid = new Grid(4, 3);

...

Label lname = new Label("Name:");
lname.setWidth("60px");

// add labels
grid.setWidget(0, 0, lname);
grid.setWidget(1, 0, new Label("Total:"));
grid.setWidget(2, 0, new Label("Manager:"));
grid.setWidget(3, 0, new Label("Parent:"));

// add textboxes
grid.setWidget(0, 1, name);
grid.setWidget(1, 1, total);
grid.setWidget(2, 1, manager);
grid.setWidget(3, 1, parent);

...

add(grid);

HorizontalPanel buttons = new HorizontalPanel();

...

buttons.add(save);
buttons.add(cut);
buttons.add(delete);

add(buttons);

...

The Grid constructor has two parameters for the table rows and columns. First, the labels are added and second, the textfields and listboxes are added. The buttons cut, save and delete are added within a seperate

HorizontalPanel buttons
.

Feature implementation

The following part shows the implementation of the Feature:Cut for departments. We assume, that a user has clicked on the "Cut" button to create a corresponding request. All client side requests are handled via asynchronous communication. First we need a connection to the server-side service:

private final DepartmentServiceAsync departmentService = GWT.create(DepartmentService.class);

This simple initialisation provides an easy possibility to connect the client to the server. The next step is to create a Feature:Cut request. We have implemented this feature with the DepartmentService.java interface. By calling this method, the request is created and the corresponding server side method is invoked. The two parameters of the method are in first the department identifier ("department") and in second an object for the asynchronous callback.

departmentService.cut(department, new AsyncCallback<Double>() {

	// If the server responds an error, this method is invoked.
	@Override
	public void onFailure(Throwable caught) {
		Window.alert(caught.getMessage());
	}

	// If the request is successfully executed on server side, this method is invoked with a new total value as parameter.
	@Override
	public void onSuccess(Double result) {
		DepartmentPanel.this.total.setText(Double.toString(result));
	}
});

If the request fails, the onFailure method simply returns an adequate error message. If the request succeeds, the server returns the new total value for the department. The server side request handler is implemented as a method:

	@Override
	public double cut(Integer id) {
		// This statement loads the department with the given id.
		Department department = CompanyApp.getInstance().getDepartments().get(id);
		
		// The department gets cutted.
		department.cut();
		
		// The new total value for the department is returned.
		return department.total();
	}

This method first calls amethod cut for the specific department and then returns the new total value to the client. The method for one department is implemented the following way:

public class Department implements Parent {
	
	// Members
	private int id;
	private String name;
	private List<Department> departments;
	private List<Employee> employees;
	private Parent parent;

	...

	// This method cuts the salary of all contained employees and all contained subdepartments.
	public void cut() {
		for (Employee employee : employees) {
			// The employees salary is devided by 2.
			employee.cut();
		}
		for (Department department : departments) {
			// The subdepartments are cutted recursively.
			department.cut();
		}
	}

	...

}

Architecture

Usage

The implementation is created with Technology:Eclipse (3.7/Indigo) and the Technology:GWT-plugin (Version 2.5). If you want to compile the code, you need these versions to run it safely. You can get them at:

After installation and start, simply open this web application as project in Eclipse:

If you want to recompile it, please end the old server-process by terminating the process in the Technology:Eclipse console first. The web browser is required to exersise the contribution. The implementation has been tested with GWT version 2.5.


There are no revisions for this page.

User contributions

    This user never has never made submissions.

    User edits

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.