Einstieg ins Google Web Toolkit (GWT)
Kurze Vorgeschichte
Wie komme ich überhaupt zum GWT? Ich arbeite mit an einem Projekt für die Uni in dem Sensoren auf dem Campus verteilt werden. Diese Sensoren sammeln massig Daten und diese sollen sinnvoll aufbereitet werden. Das ist jeden Falls der längerfristige Plan. Dazu bauen wir die Website mit dem Google Web Toolkit (GWT), welches Java Code nach Javascript Konvertiert.
Inhalt
Ich will hier die ersten Schritte mit dem GWT erklären um den Einstieg zu erleichtern. Ich muss sagen das es gar nicht so einfach war die nötigen Dinge zusammen zu suchen. Zudem ist alles was ich gefunden habe auf englisch gewesen. Also gibt es hiermit eine kleine Kurzanleitung für die Deutschen Webentwickler.
Übersicht
- Software Installation
- Projekt erstellen
- Kleine Testanwendung + Tipps
Software
Zum Programmieren wird Eclipse benutzt.
Ich habe die Eclipse Classic 3.3.2 – Windows (141 MB) herunter geladen. Über “Help -> Software Updates -> Find and Install” lassen sich Plugins bequem installieren.
Googlipse könnte hierbei auch interessant sein.
Dann brauchen wir das Framework. Es erstellt uns das Eclipseprojekt. Das geht nicht über Eclipse selbst.
Google Web Toolkit
Diese Seiten sind sehr hilfreich um die Möglichkeiten des GWT zu ergründen. Ich selbst bin noch dabei die Einzelheiten heraus zu finden.
GWT API Documentation
Noch mehr Doku
Diese und mehr nützliche Links sind im Linkblog zu finden.
Nach dem Ecplipse installiert ist. Dazu möchte ich hier keine Anleitung schrieben, das ist ein Thema für sich, entpacken wir das Framework z.B. nach C:/gwt/*
Erstellung des Projekts
In unserem Beispiel befinden sich in C:/gwt/* neben dem Framework auch 2 Dateien die zur Erstellung des Projektes wichtig sind:
projectCreator.cmd
applicationCreator.cmd
Erst führen wir den projectCreator mit folgenden Parametern aus:
projectCreator.cmd -eclipse myTestProject -out c:/EclipseWorkspace/myTestProject
Dan müssen wir die nötigen Dateien erzeugen das geht mit dem applicationCreator wie folgt:
applicationCreator.cmd -eclipse -out c:/EclipseWorkspace/myTestProject
Jetzt liegt unser neues Eclipse Projekt samt Beispielanwendung in c:/EclipseWorkspace/myTestProject de.wherever.whoever.myTestProject
Dabei ist de.wherever.client.myTestProject so zu sagen die Basisklasse. Ganz nach den Richtlinien von Java. Die wollen ja immer gerne eine ganz bestimmte Packagestruktur. Wichtig ist das GWT als oberstes Package immer client haben möchte!
Das erstellte Projekt müssen wir in Eclipse importieren um daran arbeiten zu können.
Erste Beispielanwendung
In c:/EclipseWorkspace/myTestProject liegt nach unserem Beispiel nun das Testprojekt.
Wir sehen auch die Datei Frontend-compile.cmd im Projekt, mit dieser können wir unsere Anwendung compilieren. Probier es aus, es müsste eine leere Seite mit einem Hallo World button erscheinen.
Im Sourceordner ist die myTestProject.java welche alles steuert. Im public Ordner gibt es die zugehörige HTML Datei myTestProject.html
CSS File einbinden
Hiermit hatte ich erst einige Probleme, weil ich nicht wusste wie die Pfadangabe lauten soll. Es reicht die css Datei in der myTestProject.html zu includen. Mit folgender Zeile, wenn die css Datei im Unterordner css zu finden ist. also in …/public/css/default.css
Fügt folgende Zeile vor dem tag ein:
<link rel="stylesheet" href="./css/default.css"> </head>
Es ist wichtig das der Pfad mit ./ beginnt. Ich hatte da ansonsten Fehlermeldungen bekommen.
Aufbau der Seite
HTML? Muss nicht sein!
Man kann auch hier alles mit Java Objekten machen und dynamisch generieren. Dafür überlegt man sich erstmal wie die Website grob aussehen soll. Die benötigen Klassen sind Panels. Da gibt es einige verschiedene, z.B. HorizontalPanel, VerticalPanel, SimplePanel, FocusPanel.
Mein Layout hat 4 Zeilen: Banner, CenterContent , Controller, Graphs. Wobei der CenterContent ein HorizontalPanel mit 3 Spalten ist: Map, Content, Menu
Das ist recht komplex um es alles in die onModuleLoad funktion zu packen, also habe ich mir eine eigene Klasse geschrieben, welche vom FocusPanel erbt. Wenn du sie benutzten willst, musst du oben das Package anpassen!
package de.tuhh.client;
import com.google.gwt.user.client.EventListener;
import com.google.gwt.user.client.ui.FocusPanel;
import com.google.gwt.user.client.ui.HasWidgets;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class FrontendPanel extends FocusPanel implements EventListener,
HasWidgets {
private String m_PageWidth = "100%";
private VerticalPanel m_VPanel;
private HorizontalPanel m_HzCenterPanel;
private FocusPanel m_Banner;
private FocusPanel m_Map;
private FocusPanel m_Content;
private FocusPanel m_Menu;
private FocusPanel m_Controllers;
private FocusPanel m_Graphs;
public FrontendPanel() {
super();
// Main Vertical panel, contains all content from top to bottom
m_VPanel = new VerticalPanel();
//+ content of the Vertical panel from top to botom
m_Banner = new FocusPanel();
m_HzCenterPanel = new HorizontalPanel();
//+ content of the hzCenterPanel from left to right
m_Map = new FocusPanel();
m_Content = new FocusPanel();
m_Menu = new FocusPanel();
m_Controllers = new FocusPanel();
m_Graphs = new FocusPanel();
//VerticalPanel to fill from top to down
this.add(m_VPanel);
//------------------------------------------------
// Filling the m_VPanel from top to bottom
//------------------------------------------------
//Adding the Banner space holder
m_VPanel.add(m_Banner);
//Adding a HorizontalPanel for the main panel
m_VPanel.add(m_HzCenterPanel);
//------------------------------------------------
// Filling the hzCenterPanel from left to right
//------------------------------------------------
//Adding Map space holder
m_HzCenterPanel.add(m_Map);
//Adding Content space holder
m_HzCenterPanel.add(m_Content);
//Adding Menu space holder
m_HzCenterPanel.add(m_Menu);
//------------------------------------------------
// Continue with m_VPanel
//------------------------------------------------
//Adding Controller space holder
m_VPanel.add(m_Controllers);
//Adding Graphs space holder
m_VPanel.add(m_Graphs);
//------------------------------------------------
// Size all the stuff
//------------------------------------------------
//TODO: need a fix to avoid unused scroll bars
this.setSize("100%", "100%"); //This panel fill the whole Page.
m_VPanel.setWidth(m_PageWidth);
//m_VPanel.setHeight("100%"); //m_VPanel height: use only what you need (default)
m_Banner.setSize(m_PageWidth, "100px"); //Setup banner Height here.
m_HzCenterPanel.setSize(m_PageWidth, "100%");
//The center stuff
m_Map.setSize("100%", "100%");
m_Content.setSize("100%", "100%");
m_Menu.setSize("100%", "100%");
m_Controllers.setSize("100%", "100%");
m_Graphs.setSize("100%", "100%");
//Set alignment in m_VPanel
/* Unused for now
m_VPanel.setCellVerticalAlignment(m_Banner, VerticalPanel.ALIGN_TOP);
m_VPanel.setCellVerticalAlignment(m_HzCenterPanel, VerticalPanel.ALIGN_TOP);
m_VPanel.setCellVerticalAlignment(m_Controllers, VerticalPanel.ALIGN_TOP);
m_VPanel.setCellVerticalAlignment(m_Graphs, VerticalPanel.ALIGN_TOP);
*/
m_Banner.setStyleName("banner");
//------------------------------------------------
// Debug options
//------------------------------------------------
this.setStyleName("debug-border");
m_VPanel.setStyleName("debug-border-green");
//m_Banner.setStyleName("debug-border-red");
m_HzCenterPanel.setStyleName("debug-border-red");
//inside hzCenterPanel:
m_Map.setStyleName("debug-border");
m_Content.setStyleName("debug-border");
m_Menu.setStyleName("debug-border");
m_Controllers.setStyleName("debug-border-red");
m_Graphs.setStyleName("debug-border-red");
}
//------------------------------------------------
//Getters for Panels
//------------------------------------------------
public VerticalPanel getVPanel() {
return m_VPanel;
}
public FocusPanel getBanner() {
return m_Banner;
}
public FocusPanel getMap() {
return m_Map;
}
public FocusPanel getContent() {
return m_Content;
}
public FocusPanel getMenu() {
return m_Menu;
}
public FocusPanel getControllers() {
return m_Controllers;
}
public FocusPanel getGraphs() {
return m_Graphs;
}
}
Mein CSS file:
@CHARSET "ISO-8859-1";
.debug-border {
border:1pt solid #000000;
}
.debug-border-red {
border:3pt solid #ff0000;
}
.debug-border-green {
border:3pt solid #00ff00;
}
.debug-border-blue {
border:3pt solid #0000ff;
}
/* containers */
.banner {
background:#000088;
}
.text-headline {
font-size:22px;
text-align:center;
}
Einbindung in der onModuleLoad Funktion:
//Space holder for later content
final Button btn2 = new Button("Map");
final Button btn3 = new Button("Content");
final Button btn4 = new Button("Menu");
final Button btn5 = new Button("Controller");
final Button btn6 = new Button("Graphs");
FrontendPanel mainPanel = new FrontendPanel();
//Headline should be an image
Label headline = new Label("Sensor Tracking");
mainPanel.getBanner().add(headline);
headline.setStylePrimaryName("text-headline");
mainPanel.getMap().add(btn2);
mainPanel.getContent().add(btn3);
mainPanel.getMenu().add(btn4);
mainPanel.getControllers().add(btn5);
mainPanel.getGraphs().add(btn6);
RootPanel.get("panel").add(mainPanel);
Im HTML file wird noch die ID “panel” benötigt:
<span id="panel"></span>
Leave a Reply
Kategorien
- Allgemein (1)
- Alltag (2)
- Grafik & Animation (14)
- Indien (4)
- Projekte (6)
- Dieser Blog (1)
- SensorFrontend (2)
- Server (4)
- Uncategorized (1)
- Web Developement (6)
- GWT (3)
- Webanwendungen (2)