Der GWT-Blog http://googlewebtoolkit.blogspot.com/2010/06/gwt-204-is-now-available.html kündigt ein kleines Update an, was unter anderem Probleme bei der Umsetzung des Shift-Operators behebt (Fehler in der JS-Engine von Safari):
Noch zwei weitere Kleinigkeiten wurden angegangen:
Der Showcase zeigts: http://www.smartclient.com/smartgwt/showcase/. 270 Beispiele sind schon eine stolze Zahl.
Servlets zu schreiben gehört nun nicht gerade zu meinem Alltagsaufgaben, aber für ein JSON-Endpoint muss ein Servlet nun doch mit ins Boot. (REST-API geht leider nicht.) Einen Test dafür zu schreiben finde ich selbstverständlich, da ich geil auf grüne Balken bin (nein, nicht die Download-Balken). Es kommen für Servlet-Tests unterschiedliche Ansätze in Betracht, die sich grundsätzlich in 2 Gruppen einteilen lassen:
Dass ich ein Jetty-Fan bin ist vielleicht schon in früheren Posts rübergekommen, aber hier lasse ich meinen Lieblingsserver links liegen und gehe auf die Mock-Tests. Gut funktioniert für mich spring-test. Ein Beispiel.
Das Servlet:
package com.tutego.traida.server.service.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Raplet extends HttpServlet
{
private static final long serialVersionUID = 6942655630840028053L;
@Override
protected void doGet( HttpServletRequest req, HttpServletResponse resp ) throws ServletException,
IOException
{
resp.getWriter().print( "hello " + req.getParameter( "name" ) );
}
}
Der Test:
package com.tutego.traida.server.service.servlet;
import javax.servlet.ServletException;
import org.junit.*;
import static org.junit.Assert.*;
import org.springframework.mock.web.*;
public class RapletTest
{
private Raplet servlet = new Raplet();
private MockHttpServletRequest request;
private MockHttpServletResponse response;
@Before
public void before() throws ServletException
{
servlet.init( new MockServletConfig() );
this.servlet = new Raplet();
this.request = new MockHttpServletRequest();
this.response = new MockHttpServletResponse();
}
@Test
public void doGetTest() throws Exception
{
request.setParameter( "name", "tutego" );
servlet.doGet( request, response );
assertEquals( "hello tutego", response.getContentAsString() );
}
}
Einfacher geht’s nun wirklich nicht mehr.
Zum Ablaufen des Tests packe in den Klassenpfad:
Zwar bin ich kein Spring Fan Boy, aber mit 2 Archivdateien brennt die Jar-Hölle nicht so heiß (die Abhängigkeiten sind übertrieben).
Man glaubt es kaum und könnte es für einen 1-April-Scherz halten, aber eine Gruppe von Codern hat Quake II auf GWT portiert (http://code.google.com/p/quake2-gwt-port/). Um das möglich zu machen, mussten jedoch einige Anpassungen vorgenommen werden:
- Created a new WebGL based renderer
- Ported the network layer for multiplayer games from UDP to the WebSocket API
- Made all resource loading calls asynchronous
- Created a GWT implementation of Java nio buffers based on WebGL arrays (to be ported to ECMAScript Typed Arrays)
- Implemented a simple file system emulation for saving games and preferences using the Web Storage API
Bisher läuft das ganze nur auf Chrome.
1. http://code.google.com/p/restful-gwt/
Die History korrekt zu Implementieren ist das O und A einer GWT-Anwendung. Hier greift http://code.google.com/p/restful-gwt/ unter die Arme, in dem es wie bei REST Pfade einzelne GWT-Seiten mappt. Das Projekt steht am Anfang, die Idee ist aber nett für kleinere GWT-Anwendungen. Weiterlesen
Von den Release Notes http://www.smartclient.com/smartgwt/release_notes.html#2_1:
GWT 2.0.3 compatible
New Graphite theme
ListGrid enhancements
TreeGrid enhancements
ToolStrip enhancements
Print support enhancements
Browser Plugins as widgets
Other Widget enhancements
Performance enhancements
Logging of warnings and error to the GWT Developer Console in addition to the Smart GWT Dev. Console.
Improved exception handling and reporting.
i18n enhancements
Showcase enhancements and several new samples under the „New Samples“ side nav
27 additional enhancements and bug fixes that were logged in tracker
Kurz nach 1.2.8 veröffentlich Google nun die Google App Engine 1.3. Von http://googleappengine.blogspot.com/2009/12/app-engine-sdk-130-released-including.html:
Store and Serve – Files can be uploaded and stored as blobs, to be served later in response to user requests. Developers can build their own organizational structures and access controls on top of blobs.
Pricing and Quotas – We include blob storage and transfer under the same datastore pricing and quotas you’re already familiar with. For more information, see the App Engine quotas page.
The new Blobstore API is now available in both App Engine SDKs for local development. At this time it can only be used by applications that have enabled billing. There’s a lot more information about the API and how it works in the Blobstore documentation (Python, Java) so please check that out and post any questions to the groups.
This release also includes some performance tweaks to the Java runtime. For example, we’ve sped up many reflective operations by up to 10x resulting in improvements on the order of 10% for applications based on dynamic languages. As always, there are a few other minor changes and bug fixes in this release, so make sure to read our release notes (Python, Java).
Aus dem Blog http://www.jroller.com/sjivan/entry/smartgwt_1_2_released:
SmartGWT 1.2 has been released. I have added several new samples to the Showcase including a real world mini-application. The other new samples can be found under the „New Samples“ side nav item.
This is a feature-complete production ready release. There are only around 20 enhancement requests and 20 low / medium priority issues in the SmartGWT tracker which I think is pretty telling for such a comprehensive library. I hope to get to them over the weeks to come.
Here are some of the key features of this release :
- GWT 1.7 is fully supported and integration with GWT widgets has been improved significantly. Along with standard GWT widgets, you can now easily add Google Maps or even a Google Visualization Chart to your SmartGWT application
- Hosted mode performance improvements
- Fully implemented the highly requested ResultSet API.
- ListGrid performance improvements
- Full Support for Safari 4.x
- Support for Grid editing with all cell editors active
- Auto-loading of dependent XML schema for loadWSDL() and loadXMLSchema()
- Extended WebService APIs to allow simplified input data and allow setting SOAP headers
- Numerous enhancements. See the detailed API Changes document. Around 35 additional enhancements and bug fixes that were logged in tracker
- Official Maven Repository
- Enhancements to RPC Tab in Developer Console (shows component that initiated request, if applicable)
Looking ahead there are several exciting new features that are going to be in the next release. Deep level of customization of pretty much any widget is going to be supported. For example you’ll be able to fully customize grid headers, provide your own widget implementation to use as a Tile in a TileGrid, or even customize pretty much any aspect of the Calendar component.
Im Google Code Blog werden einige Videos vorgestellt, die den aktuellen Zustand von GWT widerspiegeln. Etwa
GWT Can Do What?!?! A Preview of Google Web Toolkit 2.0 (PDF):
Und weitere:
Google Web Toolkit Architecture: Best Practices for Architecting your GWT App
Measure in Milliseconds: Performance Tips for Google Web Toolkit
Effective GWT: Developing a Complex, High- performance App with Google Web Toolkit
The Story of your Compile: Reading the Tea Leaves of the GWT Compiler for an Optimized Future
Progressively Enhance AJAX Applications with Google Web Toolkit and GQuery
GroupingStore<BaseModel> store = new GroupingStore<BaseModel>();
BaseModel c1 = new BaseModel();
c1.set( „title“, „Java 1“ );
c1.set( „category“, „JAVA“ );
c1.set( „price“, 100 );
store.add( c1 );
BaseModel c2 = new BaseModel();
c2.set( „title“, „Java 2“ );
c2.set( „category“, „JAVA“ );
c2.set( „price“, 200 );
store.add( c2 );
BaseModel c3 = new BaseModel();
c3.set( „title“, „C#“ );
c3.set( „category“, „.NET“ );
c3.set( „price“, 100 );
store.add( c3 );
List<ColumnConfig> config = new ArrayList<ColumnConfig>();
config.add( new ColumnConfig( „category“, „Kategorie“, 200 ) );
config.add( new ColumnConfig( „title“, „Titel“, 100 ) );
config.add( new ColumnConfig( „price“, „Preis“, 100 ) );
store.groupBy( „category“ );
final ColumnModel cm = new ColumnModel( config );
GroupingView view = new GroupingView();
view.setShowGroupedColumn( false );
view.setForceFit( true );
view.setGroupRenderer( new GridGroupRenderer()
{
public String render( GroupColumnData data )
{
String header = cm.getColumnById( data.field ).getHeader();
String items = data.models.size() == 1 ? „Eintrag“ : „Einträge“;
return header + “ “ + data.group + “ (“ + data.models.size() + “ “ + items + „)“;
}
} );
EditorGrid<BaseModel> grid = new EditorGrid<BaseModel>( store, cm );
grid.setView( view );
grid.setBorders( true );
grid.setAutoHeight( true );
ContentPanel cp = new ContentPanel();
cp.add( grid );
cp.setHeight( 500 );
RootPanel.get().add( cp );
Nach dem ich nun eine Woche eine Anwendung mit Ext GWT (GXT) zusammengebaut habe, kommen mir Zweifel, ob Ext GWT überhaupt das richtige für meinen Anwendungsfall ist. Einige Fragen in dem Zusammenhang:
Ist Ext GWT 2.0 M2 gut gewählt?
Ext GWT 2 gibt es noch gar nicht lange (http://extjs.com/blog/2009/05/20/ext-gwt-20-milestone-2-released/), neues M2 Release also vor 2 Wochen, und die Komponenten sind grundsätzlich toll. Auf der Demo Seite http://extjs.com/examples-dev/explorer.html#overview kann man sich das anschauen.
Probleme: Ext GWT 2.0 hat in meinen Augen sehr vielen Änderungen in der API. Quellcode für Ext GWT 1.0 findet man im Netz, doch viele Beispiele lassen sich nicht ohne weiteres auf die 2er Version übertragen. Wer migrieren will/muss wird noch seinen Spaß bekommen. Einige Beispiele laufen in der Demo nicht (http://extjs.com/examples-dev/explorer.html#grouping), bei anderen fehlt der Quellcode im Demo. Da muss man dann die Quellen laden.
Laut Ankündigung müsste GXT schon längst fertig sein.
Was passt mir an Ext GWT nicht?
War Ext GWT eine gute Wahl, oder hätte es doch SmartGWT sein sollen?
Das weiß ich nicht, denn mit SmartGWT habe ich nur einfache Beispiele programmiert. Ext GWT hat aber den gleichen RIA-Ansatz wie SmartGWT, und unterscheidet sich nicht großartig im Ansatz. Die GXT-Komponenten sehen auf jeden Fall super aus. Daher hat mich GXT ja auch so angezogen. Wer hübscher ist gewinnt 🙂 Die Komponenten sind fancy und meine Lieblinge sind http://extjs.com/examples-dev/explorer.html#advancedcharts (cool), http://extjs.com/examples-dev/explorer.html#gridplugins, http://extjs.com/examples-dev/explorer.html#grouping, http://extjs.com/examples-dev/explorer.html#filtertree, http://extjs.com/examples-dev/explorer.html#gridtogrid.
Ist ein RIA-Framework wie GXT immer gut?
Das ist eigentlich die zentrale Frage.
In Google Wave steckt eine Zeile, die einen Einsatz
vom GWT nahe legt:
<link rel="stylesheet" href="/squared/styles/squared.css">
<script language="javascript" src="/squared/js/templates.js"></script>
<script language="javascript" src="/squared/api/com.google.quality.views.squared.client.Squared.nocache.js"></script>
Verfolgt man den Link ist das typische obfuscated JavaScript zu sehen. Wer viiiiel Zeit hat, kann das ja mal debuggen und hier berichten. Ein kleiner Test mit FireBug zeigt, dass Squared sich über Service per RPC die Objekte geben lässt
["com.google.quality.views.squared.shared.model.Workspace/4054808271","US presidents",
"com.google.quality.views.squared.shared.model.Suggestions/3280816700",
"java.util.ArrayList/3821976829",
"com.google.quality.views.squared.shared.model.Entry/3459296909" ...
Die Daten einer Tabelle liegen zeilenweise in einem ListStore. Die ListStore wird mit dem generischen Typ parametrisiert, den das Modell speichern soll. Es können entweder eigene Beans sein, oder wir nutzen BaseModel, ein generischer Speicher von Ext GWT, der wie eine Map (oder Dyna-Bean) arbeitet.
ListStore<BaseModel> store = new ListStore<BaseModel>();
Geben wir der Tabelle zwei Zeilen, also zwei BaseModel-Objekte.
BaseModel c = new BaseModel();
c.set( „url“, „http://www.tutego.com/index.html „);
c.set( „days“, „34“);
c.set( „price“, „233“);
store.add( c );
c = new BaseModel();
c.set( „url“, „http://www.heise.de/newsticker/ „);
c.set( „days“, „3“);
c.set( „price“, „2553“);
store.add( c );
Die BaseModel-Objekte beschreiben also drei Spalten.
Nun sind die Daten im Speicher und die Informationen für die Spalten müssen aufgebaut werden. Jede Spalte wird durch ein ColumnConfig-Objekt beschrieben. Die ColumnConfig-Objekte werden dann in einer Liste gespeichert und zur Initialisierung eines ColumnModels genutzt. Ein ColumnConfig-Objekt bekommt Informationen wie die Breite, aber auch Editoren zugewiesen.
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
TextField<String> column1TextEditor = new TextField<String>();
column1TextEditor.setAllowBlank( false );
ColumnConfig column1 = new ColumnConfig( „url“, „URL“, 400 );
column1.setEditor( new CellEditor( column1TextEditor ) );
configs.add( column1 );
ColumnConfig column2 = new ColumnConfig( „days“, „Tag(e)“, 80 );
column2.setEditor( new CellEditor( new TextField<String>() ) );
configs.add( column2 );
ColumnConfig column3 = new ColumnConfig( „price“, „Gesamtpreis“, 80 );
column3.setEditor( new CellEditor( new TextField<String>() ) );
configs.add( column3 );
ColumnModel cm = new ColumnModel( configs );
Der parametrisierte Konstruktor von ColumnConfig erwartet einen Schlüsselnamen, den Titel für den Spaltenkopf und die Breite.
Jetzt kommt es zur Hautkomponente, dem EditorGrid. Er benötigt drei Informationen: Die Tabellendaten (der ListStore store), die Spaltendaten (ColumnModel cm) und als generische Angabe der Datentyp der Modellelemente.
EditorGrid<BaseModel> grid = new EditorGrid<BaseModel>( store, cm );
Die Komponenten wird nun wie jede andere auf den Container gesetzt.
panel.add( grid );
Zugriff auf die Daten liefert store.getModels(). Möchte man durch alle Zeilen laufen, erledigt dies einfach das erweiterte for:
for ( BaseModel model :store.getModels() )
…
Ext GWT bietet eine einfache Möglichkeit, JavaBeans an Formulare zu binden. Im ersten Schritt muss die Bean dazu vorbereitet werden.
Gebunden werden soll der Titel eines Seminars an das Textfeld titleTextField auf dem FormPanel:
FormPanel courseDescriptionPanel = new FormPanel();
TextField<String> titleTextField = new TextField<String>();
titleTextField.setFieldLabel( „Kurstitel“ );
titleTextField.setName( „title“ );
titleTextField.setAllowBlank( false );
courseDescriptionPanel.add( titleTextField );
Im nächsten Schritt kann man die Bean aufbauen und etwa mit Werten aus einem Service füllen:
Course c = new Course();
c.setTitle( „ejb super kurs“ );
Dann wird um diese Standard-JavaBean eine Ext GWT-Klasse gelegt, quasi ein Wrapper:
BeanModel userModel = BeanModelLookup.get().getFactory(Course.class).createModel( c );
Dieses BeanModel wird als nächstes mit dem FormPanel verbunden, auf dem das Texteingabefeld liegt.
FormBinding formBindingCourse = new FormBinding( courseDescriptionPanel );
Und das muss mit dem BeanModel (dem Wrapper um das Exemplar unserer JavaBean) verbunden werden:
formBindingCourse.bind( userModel );
Nun kennt der formBindingCourse die Bean, aber noch nicht, welches Gui-Element eigentlich mit welcher Property verbunden ist. Das kann man mit autoBind() automatisieren, oder aber mit addFieldBinding() manuell für jedes Element setzen. Bei unserem Textfeld heißt das:
formBindingCourse.addFieldBinding( new FieldBinding( titleTextField, „title“ ) );
Jede Änderung an der Gui wird nun an die Bean weitergeben.
Weiteres Infos unter http://extjs.com/blog/2008/07/14/preview-java-bean-support-with-ext-gwt/ oder in Foren-Beispielen.
Dass Captchas wie
für uns Menschen nicht leicht zu lesen ist eine Sache, eine andere ist, dass viele schon gehackt wurden und Spammer so die Form-Formulare vollmüllen.
Ein anderes Verfahren zeigt Bilder, aus denen man ein bestimmtes auswählen muss. Diese Idee verfolgt zum Beispiel http://www.thepcspy.com/kittenauth. Hier muss man aus einer Reihe von Tieren auswählen, um das Formular abzuschicken.
Mein einziges Problem: Bei einigen Fragen fällt die Auswahl nicht leicht. Etwa bei der Frage, was alles Fohlen (engl. foals) sind. Einige Bilder sind so undeutlich, dass ich drei Versuche brauche um ein Formular zu bestätigen. Das ergibt wenig Sinn.
Siehe dazu auch http://research.microsoft.com/en-us/um/redmond/projects/asirra/.
GWT-SL bietet schon seit längerem die Möglichkeit, die RPC-Services durch Spring-Beans zu definieren. Ist Spring auf der Serverseite, so möchte man gerne Spring-POJOs als GWT-RPC-Service freigeben. GWT-SL ist aber relativ groß und mit http://code.google.com/p/gwtrpc-spring/ gibt es eine sehr schlanke Alternative, die nur aus zwei Klassen besteht. Das die Klassen, die beide im Quellcode unter 3 KB liegen, liegt daran, dass GWT in den neuen Versionen eine Integration RPC-Implementierungen vereinfacht. Die Hauptseite zeigt die 4 Schritten zur Integration anschaulich.
Noch besser beschreibt es allerdings http://devbright.com/2009/05/super-simple-gwt-spring-integration/; hier kann man gleich ein Archiv laden, mit allen Jar-Dateien und alles ist fertig. So läuft das Beispiel nach wenigen Minuten.
gwt-connectors ist eine GWT-Bibliothek, um Formen miteinander zu verbinden.
Die Präsentation zeigt, wie das geht.
Wer’s selber ausprobieren möchte, schaut unter demo (IE, Firefox, Opera, Chrome). (Aber wie kann man nun die Verbindung wieder lösen …)
Der nötige Programmcode ist kurz:
// Create boundary panel
AbsolutePanel boundaryPanel = new AbsolutePanel();
boundaryPanel.setSize("600px", "400px");
RootPanel.get().add(boundaryPanel, 10, 10);
Diagram diagram = new Diagram(boundaryPanel);
boundaryPanel.add(new Label("Connectors example"), 10, 2);
// Add connectors
Connector connector1 = new Connector(50, 80, 100, 100);
connector1.showOnDiagram(diagram);
Connector connector2 = new Connector(350, 200, 270, 80);
connector2.showOnDiagram(diagram);
Connector connector3 = new Connector(450, 120, 500, 80);
connector3.showOnDiagram(diagram);
// Add some elements that can be connected
Label label = new Label("LABEL");
Image image = new Image("http://code.google.com/images/code_sm.png");
HTML html = new HTML("<b>HTML<br>ELEMENT</b>");
boundaryPanel.add(label, 50, 270);
boundaryPanel.add(image, 180, 250);
boundaryPanel.add(html, 450, 250);
Shape shapeForLabel = new Shape(label);
shapeForLabel.showOnDiagram(diagram);
Shape shapeForImage = new Shape(image);
shapeForImage.showOnDiagram(diagram);
Shape shapeForHtml = new Shape(html);
shapeForHtml.showOnDiagram(diagram);
Ich bin gespannt, wann es das erste UML-Tool mit GWT gibt. gwt-connectores basiert im Übrigen auf Fred Sauer’s gwt-dnd. (Dazu auch das Demo http://allen-sauer.com/com.allen_sauer.gwt.dnd.demo.DragDropDemo/DragDropDemo.html.)
Dazu passt auch die Ankündigung von http://googledocs.blogspot.com/2009/03/drawing-on-your-creativity-in-docs.html, ein Zeichenwerkzeug in Google Docs einzubetten:
http://www.googlewatchblog.de/2009/03/26/google-docs-drawing-veroeffentlicht/ hat dazu ebenfalls ein Bild parat:
Alles fängt mit http://jquery.com/ an. Darauf baut auf http://code.google.com/p/flot/, eine JavaScript-Bib. für Chars:
http://code.google.com/p/gflot/ ist nun der GWT-Aufsatz auf flot.
Für eine Bar-Diagramm ist nur folgender Quellcode nötig:
final String[] MONTH_NAMES = { "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec" };
PlotModel model = new PlotModel();
PlotOptions plotOptions = new PlotOptions();
BarSeriesOptions barSeriesOptions = new BarSeriesOptions();
barSeriesOptions.setShow(true);
barSeriesOptions.setLineWidth(1);
barSeriesOptions.setBarWidth(1);
barSeriesOptions.setAlignment(BarAlignment.CENTER);
plotOptions.setDefaultBarsSeriesOptions(barSeriesOptions);
plotOptions.setLegendOptions(new LegendOptions().setShow(false));
// add tick formatter to the options
plotOptions.setXAxisOptions(new AxisOptions().setTicks(12).setTickFormatter(new TickFormatter() {
public String formatTickValue(double tickValue, Axis axis) {
if (tickValue > 0 && tickValue <= 12) {
return MONTH_NAMES[(int) (tickValue - 1)];
}
return "";
}
}));
// create a series
SeriesHandler handler = model.addSeries("Ottawa's Month Temperatures (Daily Average in °C)", "blue");
// add data
handler.add(new DataPoint(1, -10.5));
handler.add(new DataPoint(2, -8.6));
handler.add(new DataPoint(3, -2.4));
handler.add(new DataPoint(4, 6));
handler.add(new DataPoint(5, 13.6));
handler.add(new DataPoint(6, 18.4));
handler.add(new DataPoint(7, 21));
handler.add(new DataPoint(8, 19.7));
handler.add(new DataPoint(9, 14.7));
handler.add(new DataPoint(10, 8.2));
handler.add(new DataPoint(11, 1.5));
handler.add(new DataPoint(12, -6.6));
// create the plot
SimplePlot plot = new SimplePlot(model, plotOptions);
// put it on a panel
FlowPanel panel = new FlowPanel();
panel.add(plot);
return panel;
Eine Alternative dazu ist http://code.google.com/p/charts4j/ bzw. http://code.google.com/p/charts4j/wiki/GWT_Port.
Nach Python unterstützt die GAP nun auch Java 6. Allerdings gibt es auch einige Besonderheiten:
Nichts desto trotz laufen auch dyn. Sprachen wie Groovy und JRuby. Und es gibt ein Eclipse-Plugin für das Deployment (Google Plugin for Eclipse). Datenzugriff der AppEngine gibt es mit der API von JPA/JDO über http://www.datanucleus.org/products/accessplatform/ (früher JPOX), IMHO eine recht unbekannte Implementierung der Standards.
Zum Weiterlesen: