tag:blogger.com,1999:blog-34486991504047699962024-03-28T17:22:24.646+01:00Developing modern web and mobile appsDaniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.comBlogger52125tag:blogger.com,1999:blog-3448699150404769996.post-29641179459498423562016-07-14T00:15:00.003+02:002016-07-14T00:20:51.582+02:00GWT RPC's futureThis post is about why I do not think that GWT RPC is something valuable to be carried forward.<br />
I am also being slightly harsh with GWT RPC which has served many GWT applications as a good RPC mechanism. Please keep in mind that this post is not about assigning blame, I do think that the engineers who designed GWT RPC did a great job, they just had other more important goals in mind.<br />
<br />
When I first discovered GWT RPC in somewhat 2008 I thought it was magical. Send all my Java objects over the wire and just use them on the client side. All I need to do is define a simple interface. I loved it.<br />
<br />
But as time went by I have started to dislike GWT RPC more and more. This blog post is about the bad choices that GWT RPC has made and why I do not think its a good choice to be carried forward for applications that transpile Java to JavaScript. However this does not mean that its not possible to port it forward (with some changes), but I think its not worth it there are simply better alternatives.<br />
<h2>
</h2>
<h2>
Bad choices</h2>
<div>
<br /></div>
<h3>
GWT.create call type inheritance broken</h3>
AsyncChronousVersion instance = GWT.create(SynchronousVersion.class);<br />
Why do I need to pass in the synchronous version? From a type perspective this does not make any sense what so ever.<br />
The synchronos version extend the RemoveService interface, the asynchronos version did extend nothing. Why not simply use the Asynchronous version all the way?<br />
If you know what a GWT.create call looks like in the compiler you realize that this is really broken.<br />
<br />
<h3>
</h3>
<h3>
Exploding code size</h3>
Let's take a look at the second problem that GWT RPC has that is way more severe.<br />
Assume we have this simple RPC interface:<br />
<br />
<pre>public interface MyServiceAsync {
void doSomething(List<string> strings, AsyncCallBack<string> callback);
}</string></string></pre>
<br />
The interface defines a simple method that takes a list of strings. The problem with this code becomes apparent when we take a look at the serializers and deserializers that have to be generated for this class. Since we need to have a serializer for every concrete type that we have in the program, you end up with potentially hundereds of serializers just for this one method.<br />
The GWT team always recommended to be as specific as possible to get rid of this flaw, but this is against a core design principle in Java. We want List on the interface, not ArrayList.<br />
<br />
Doing a simple search for subtypes of ArrayList in a hello world GWT applications returns 16, this is obviously a bad choice.<br />
<br />
<h3>
</h3>
<h3>
Version skew during deployment</h3>
Because of the need for serializers that were specific to your current applications, GWT RPC had a serious issue with version skew. Make a slight changes to your problem and you might have ended up causing GWT RPC to fail between these version of your app. When you have multiple thousand servers running you will always have an old client talking to a new server or an old client talking to a new server. Not dealing with this is unacceptable for a RPC system and has cost many teams at Google headaches.<br />
<br />
<h3>
</h3>
<h3>
Slow compiles due to global analysis</h3>
If you want to generate all the serializers of a type you need to have global knowledge of your program. You need to be able to answer questins like:<br />
<br />
<ul>
<li>"Who is implementing this interface?"</li>
<li>"Who is subclassing this class"</li>
</ul>
This means that you can not incrementally compile GWT RPC code since you would not be able to answer these questions correctly. The only reasons that super dev mode works with GWT RPC is that we do the initial slow full world compile and then keep track of these types as you update your code.If you want really fast compiles, which we want for GWT 3.0, you really do not want any global knowledge.<br />
<br />
<h3>
GWT RPC can not be done with a Java annotation processor</h3>
All other GWT code generators can be changed to be Java annotation processors, since they do not require global knowledge. Since GWT RPC requires global analysis it can not be easily ported.<br />
<br />
<h3>
But I really like GWT RPC, what can I do?</h3>
Well as I said earlier in this post, you can port it to an APT, but you need to make changes to it:<br />
<br />
- Change the interface to list all the types it needs so you do not require global knowledge<br />
- Remove the synchronous or asynchronous interface and generate one from the other<br />
- Replace the GWT.create call<br />
- Make the serialization format compatible with different versions of your app, by the way this is what we do with GWT proto RPC, which unfortunately is not open source.<br />
<br />
This could potentially look like this:<br />
<br />
<pre>public interface MyServiceAsync {
void doSomething(@Serializer(accept = {ArrayList.class}) List<string> strings, ...)
}
// MyServiceAsync_Factory is generated by an APT
MyServiceAsync service = MyServiceAsync_Factory.create();
</string></pre>
<br />
<br />
I hope this blog post helps people that really like GWT RPC to understand why there are better choices one can make for a RPC mechanism and why we should be striving to have something better.<br />
<br />Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com116tag:blogger.com,1999:blog-3448699150404769996.post-72433430498115464812014-06-02T22:49:00.001+02:002014-06-02T22:49:39.315+02:00gwt-phonegap 3.5<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">I just finished the gwt-phonegap 3.5 releases and pushed it to maven central.</span><br />
<br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">This is now fully compatible with Phonegap 3.5 and GWT 2.6. It contains many bug fixes and improvements.</span><br />
<br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">This version fully works with </span><a href="http://www.m-gwt.com/" style="background-color: white; color: #888888; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px; text-decoration-line: none;">mgwt</a><span style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="background-color: white; line-height: 18.479999542236328px;"> and already uses the new mgwt 2.0 for its showcase.</span></span><br />
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">As always you can get the new version from </span><a href="http://code.google.com/p/gwt-phonegap/downloads/list" style="background-color: white; color: #888888; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px; text-decoration-line: none;">google code</a><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;"> or from maven central: </span><br />
<br />
<pre><dependency>
<groupId>com.googlecode.gwtphonegap</groupId>
<artifactId>gwtphonegap</artifactId>
<version>3.5.0.0</version>
</dependency>
</pre>
Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com42tag:blogger.com,1999:blog-3448699150404769996.post-33433988447573481982014-01-12T23:48:00.000+01:002014-01-12T23:48:39.846+01:00mgwt / gwt running on a the Tesla Model SIf you come the Silicon Valley these days you will spot Teslas everywhere, but not here in Germany. A couple of days ago I saw my first Tesla driving around in Munich, being a car nut I immediately needed to get my hands on one here.<br />
I actually would like to replace my old BMW 5 series with something new and I was favoring a BMW M5 very much. When talking about cars in the US, I was always telling colleagues that a Tesla would not work in Germany for two reasons:<br />
<br />
<ul>
<li>You will run out of battery on a german autobahn pretty soon, since driving high speeds is very energy consuming.</li>
<li>It does not have enough top speed (only 210 km/h)</li>
</ul>
<br />
<br />
<div>
Tesla just solved the battery problem by offering battery swaps as well as extending their super charger network. Today I can already drive from Munich to Dusseldorf without problems and this network is growing rapidly. Having the battery swaps means that you do not need to care about range anymore since getting new energy will only take 90 seconds.</div>
<div>
The oomph that is provided by the performance plus version with its 600 Nm is quite exciting to drive, but it is still lacking in max speed. If I spent 125 thousand euros on a car, I expect it to at least go 250 km/h or even more. A BMW M5, a Porsche 911 turbo, Mercedes AMG 63, all these cars can easily hit 300 km/h on a german autobahn. This is not a theoretically number, people actually drive this fast in Germany. This is still a problem for Tesla in Germany, but other than that I would now prefer a Tesla any time over the other cars and will probably soon get one.</div>
<div>
<br /></div>
<h3>
MGWT / GWT on the Tesla Model S</h3>
<br />
<ul></ul>
After driving the car I also wanted to see how much the onboard system can actually do. This is running a version of the QT webkit based browser. The complete mgwt showcase was working and you could even think about using a Phonegap approach to build UIs for the car.<br />
Here is a picture of mgwt running:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYtQowzx30T8jokiL2cupkCVzVQDwA3tpcrVJzaOfeRZp8QfFtz9g0smYbVNUMfXKJPhqTU5faEnW0yBSe2LMK_hGD2yaVpOa4nl-A5dk1ujAgyF2-T_0XQs1OiJ6DYx54q6ZJsaj-eE/s1600/tesla.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYtQowzx30T8jokiL2cupkCVzVQDwA3tpcrVJzaOfeRZp8QfFtz9g0smYbVNUMfXKJPhqTU5faEnW0yBSe2LMK_hGD2yaVpOa4nl-A5dk1ujAgyF2-T_0XQs1OiJ6DYx54q6ZJsaj-eE/s1600/tesla.jpg" height="320" width="240" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
How cool is that?</div>
<br />Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com17tag:blogger.com,1999:blog-3448699150404769996.post-60959121251876857342014-01-02T19:57:00.001+01:002014-01-02T20:12:16.569+01:00Profiling GWT applications with v8 and d8The v8 JavaScript engine has a command line version called d8 that can be used as a profiler.<br />
It can help you spot performance problems with your JavaScript in many different ways. If you want to get a good overview of how to profile JavaScript, here is a Google I/O talk on the subject: "<a href="http://www.youtube.com/watch?v=UJPdhx5zTaw" target="_blank">Breaking the JavaScript speed limit with v8</a>".<br />
Unfortunately the d8 profiler was not very useful for GWT applications (or any application that was compiled to JavaScript) in the past, since it highlighted problems in JavaScript with line numbers, which does not make a whole lot of sense for a GWT application. Compiling in pretty mode was no option either, since different code layout will lead to different optimizations in v8 (Currently v8 backs our of optimizing a function if it is too large, also counting comments). And of course you want to profile the same code that will be run by your users.<br />
<br />
This is why we added source maps support to the v8 profiling tools. Using a special GWT linker you can now profile your GWT application in d8 and get back Java line numbers. This is one of the things that we did to help the our colleagues to make <a href="http://googledrive.blogspot.de/2013/12/newsheets.html" target="_blank">Google Sheets</a> as fast as possible.<br />
<br />
Here is how you can profile your GWT application:<br />
<h4>
Build v8 locally</h4>
<div>
Build your version of v8 using these <a href="https://code.google.com/p/v8/wiki/BuildingWithGYP" target="_blank">instructions</a>. After that make sure that d8 (most likely under out/native) and the tickprocessor (tools/mac-tick-processor or tools/linux-tick-processor or tools/windows-tick-processor.bat) are available in your path.</div>
<div>
<br /></div>
<h4>
Create an entrypoint that runs your performance critical code</h4>
<div>
Create a new GWT module with an EntryPoint that calls your performance critical code. In your gwt.xml file you need to add the linker, set the user agent and enable source maps:</div>
<div>
<br /></div>
<pre><define-linker name="d8" class="com.google.gwt.core.linker.D8ScriptLinker"/>
<add-linker name="d8" />
<set-property name="user.agent" value="safari" />
<set-property name="compiler.useSourceMaps" value="true"/></pre>
<br />
<h4>
Compile your GWT app</h4>
<div>
Now you can just invoke the GWT compiler for your module. It will produce three files that you should move into <b>one directory</b> for your profile:</div>
<div>
<ul>
<li>selection script: <modulename>.nocache.js</modulename></li>
<li>actual program: <hash .js="">.js</hash></li>
<li>sourcemap: (located in WEB-INF/deploy/<module name="">/symbolmaps/<hash>_sourceMap0.json)</hash></module></li>
</ul>
<h4>
Run the profiler</h4>
</div>
<div>
This blog post does not cover all the details on how to use d8, this is much better covered by the v8 team, but most of the times for a GWT app you want to run:</div>
<div>
<br /></div>
<pre>d8 -prof <modulename>.js</pre>
<div>
<br />
(You want to make sure that all files are in the same directory and that you are running d8 from that directory)<br />
This will create a file called v8.log that contains all the information from that profile run. Now we will use the tick processor to analyze this file, but we also need to pass it the source map, so that it can give us Java line numbers:<br />
<br />
<pre>linux-tick-processor --sourceMap=<path to sourcemap> v8.log</pre>
<br />
This will output a complete profile of your JavaScript. It will show you how much time you spend executing JavaScript (and which functions / Java methods), executing C++ or in library code. It also contains a drill down view of your profile.<br />
<br />
<h4>
Sum up</h4>
</div>
<div>
With the changes we made to v8 and GWT you can now use the great v8 toolchain to spot performance problems in your GWT applications. These tools will also allow us to improve the way the GWT compiler translates code in order to make it run faster as well as improving the standard libraries that come with GWT. You can look forward to your GWT applications running faster in the future.</div>
Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com227tag:blogger.com,1999:blog-3448699150404769996.post-4427773069686591562013-12-31T16:05:00.001+01:002013-12-31T16:05:31.593+01:00GWT.create conference aftermathI finally found some time to write on my impression of the first <a href="http://www.gwtcreate.com/" target="_blank">GWT.create conference</a> in San Francisco and Frankfurt. I have been involved very early with the conference and helped in some aspects to make this a success, but it turned out even better than all the people behind GWT.create hoped.<div>
<br /></div>
<div>
Before I go into any more detail let me quickly thank <a href="http://www.vaadin.com/" target="_blank">Vaadin</a>, who not only invested a big amount of money and time to make this conference a success, but also made sure that this conference was not biased towards Vaadin and was a good platform for all people of the GWT community (such as Sencha, Readhat and others). </div>
<div>
<br /></div>
<div>
In both locations we had 646 attendees, which is huge for a first time conference, but what I liked even more is the fact that we had very good GWT content: All the talks got an average rating of 4 out of 5.</div>
<div>
We had very exciting talks from many GWT team members that showed where we want GWT to be in one or two years time. </div>
<div>
All the slides are already published on <a href="http://gwtcreate.com/slides/" target="_blank">gwtcreate</a> and talks will be published on youtube over the coming weeks, so if you could not make it, you still get a chance to watch the talks.</div>
<div>
<br /></div>
<div>
One of the most valuable session was the panel discussion, in which we could listen to the communities input. I think the discussion around super dev mode and IE8 were very valuable and we will take our conclusions from that.</div>
<div>
I personally spoke to so many GWT developers that were building amazing things using GWT. I was completely amazed. One of the most notable things to me was a camera which uses GWT for its UI.</div>
<div>
<br /></div>
<h3>
Some thoughts on talks</h3>
<div>
<a href="http://www.slideshare.net/cromwellian1/gwtcreate-keynote-san-francisco" target="_blank">Ray's keynote</a> was designed to give people an overview on some of the cool stuff we are working, such as:</div>
<div>
<ul>
<li>JsInterop & zero effort JsInterop</li>
<li>Performance boosts</li>
<li>New Google products covering several platforms using GWT, such as Google Spreadsheets</li>
<li>GWT 3.0</li>
<li>Java8 support</li>
</ul>
<div>
GWT has been designed in 2006 to leverage the Java ecosystem for building client side web applications. At this time there was no JavaScript ecosystem (debugging was done with alert statements), but in 2014 there is a large JavaScript ecosystem and GWT developers should be able to benefit from this without any major efforts. This is why we are going to introduce a new way of consuming well written JavaScript libraries (JsInterop) without any extra work from developers. This is very exciting to watch in the keynote.</div>
<div>
<a href="http://gokdogan.appspot.com/gwtcreate2013/" target="_blank">Goktug's web components talk</a> showed off how to use this for a new widget system in GWT. I think this was one of the most impressive talks on the conference, since it showed how easily GWT can sit on top of the JavaScript ecosystem.</div>
<div>
The new Java8 syntax with closures actually allows us to be more concise than JavaScript. We can finally get rid of all those nasty inline interfaces for callbacks.</div>
</div>
<div>
Ray also introduced one new Google product which is leading the way with writing once in Java and running your code everywhere: Google Sheets.</div>
<div>
Brian showed off his work on <a href="https://docs.google.com/a/vaadin.com/presentation/d/1DTWZ_06dQsTPhinIwzHSdoPMndRr92wpZoZWicK97YQ/edit" target="_blank">super dev mode</a> and what we are going to do to make it as good or even better as dev mode. If you combine this with John's and Roberto's work to make the GWT compiler work incrementally, we have a very good story for developer productivity in 2014.</div>
<div>
Matthew presented on the status of the GWT open source project. We are seeing strong contributions from outside of Google. There was one we specifically wanted to highlight. <a href="https://github.com/jDramaix" target="_blank">Julien Dramaix</a> presented with me on <a href="http://daniel-kurka.de/talks/gwtcreate/gss.pdf" target="_blank">CSS3 and GSS support in GWT</a>, which he did as a complete open source contribution. Erik presented on <a href="http://www.slideshare.net/ErikKuefler/gwt-testing" target="_blank">testing with GWT</a> and his great open source project <a href="https://github.com/google/gwtmockito" target="_blank">gwt-mockito</a> and Rob on an architecture that we use inside of Google for really large applications called <a href="http://www.slideshare.net/RobertKeane1/turducken-divide-and-conquer-large-gwt-apps-with-multiple-teams" target="_blank">Turducken</a>.</div>
<div>
There is so much more great content I want to talk about, but I guess I should leave this to separate blog posts.</div>
<div>
<br /></div>
<div>
Combine all this work and we have a very good story for GWT in 2014.</div>
<div>
<br /></div>
<div>
Since GWT.create 2013 was such a huge success, we are already planing on setting up something bigger for 2014. There is still time to get your ideas into the <a href="http://bit.ly/create2014" target="_blank">2014 google moderator</a>.</div>
<div>
I am very happy to see that so many people got involved with this conference and joined us in the contributor workshop. I felt so much appreciation for our work that I am really happy to be working on GWT and with this great community.</div>
<div>
<br /></div>
Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com11tag:blogger.com,1999:blog-3448699150404769996.post-36827791403543919282013-03-30T21:09:00.001+01:002014-06-02T22:48:47.367+02:00gwt phonegap 2.4 releasedToday I got around to release gwt-phonegap 2.4.<br />
<br />
This is now fully compatible with Phonegap 2.4 and GWT 2.5. It contains the new APIs such as the InAppBrowser and the Globalization API.<br />
<br />
This version fully works with <a href="http://www.m-gwt.com/">mgwt</a>.<br />
You can get the new version from <a href="https://github.com/dankurka/gwtphonegap/releases/tag/3.5.0.0">github</a> or from maven central:
<br />
<br />
<pre><dependency>
<groupId>com.googlecode.gwtphonegap</groupId>
<artifactId>gwtphonegap</artifactId>
<version>2.4.0.0</version>
</dependency>
</pre>Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com11tag:blogger.com,1999:blog-3448699150404769996.post-66909191285624668382012-12-04T13:13:00.000+01:002012-12-04T13:13:11.728+01:00GWT Survey resultsToday David Booth came through and together with Vaadin composed the complete results of the <a href="https://vaadin.com/gwt/report-2012">GWT survey</a>. A really big thanks for all the work they have done!<br />
<br />
You will discover a lot of comments in the document from me, but let me outline a few important decisions. GWT is very healthy: about 90% of the people doing GWT would choose to use it for their next project as well.<br />
<br />
I was amazed by the number of people who are using mgwt / phonegap to build their projects for mobile.<br />
The three main things which I felt were missing from GWT (fast compiles, a better CSS3 parser and more great looking widgets) were named a lot in the survey. The good thing is we are already working on the compile time with super dev mode which will have it's best days still ahead.<br />
<br />
Fast and beautiful widgets that leverage new browser features are still missing, but if you take a look at <a href="http://www.m-gwt.com/">mgwt</a> this can be done pretty easily. Why don't I build something for desktop as well?<br />
<br />
Those are just some quick thought, read through the report yourself and make up your mind. GWT is healthy with a very good community.<br />
Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com11tag:blogger.com,1999:blog-3448699150404769996.post-79430347503528955722012-10-20T17:57:00.001+02:002012-10-20T18:07:11.292+02:00mgwt 1.1.2 releasedToday I got around to releasing mgwt 1.1.2, this is a recommended update to all mgwt users. It is a a drop in replacement for mgwt 1.1.1, but it fixes a lot of bugs, such as:<br />
<br />
<br />
<ul>
<li>Improved CellList</li>
<li>many css fixes</li>
<li>hide address bar support </li>
<li>better permutation control</li>
<li>Improvements to GestureRecognizers</li>
<li>Bug fixes on MSearchBox</li>
<li>fixing android quirks</li>
<li>home screen offline support for iOS</li>
</ul>
<div>
Here is a complete <a href="http://code.google.com/p/mgwt/issues/list?can=1&q=Milestone%3DRelease1.1.2+&colspec=ID+Type+Status+Priority+Milestone+Owner+Summary+Estimate&cells=tiles">list</a>.</div>
<br />
<br />
I encourage you to <a href="http://code.google.com/p/mgwt/downloads/list">download</a> the new version.<br />
It is also available from maven central:<br />
<pre>
</pre>
<pre><dependency>
<groupId>com.googlecode.mgwt</groupId>
<artifactId>mgwt</artifactId>
<version>1.1.2</version>
</dependency></pre>
Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com9tag:blogger.com,1999:blog-3448699150404769996.post-64982851288785011762012-09-22T20:56:00.000+02:002012-09-22T21:07:29.944+02:00gwt-phonegap 2.0 releasedI was finally able to release gwt-phonegap 2.0 today.<br />
<br />
This is now fully compatible with Phonegap 2.0 and GWT 2.4 and GWT 2.5 rc1.<br />
<br />
This version fully works with <a href="http://www.m-gwt.com/">mgwt</a>.<br />
As always you can get the new version from <a href="http://code.google.com/p/gwt-phonegap/downloads/list">google code</a> or from maven central:
<br />
<br />
<pre><dependency>
<groupId>com.googlecode.gwtphonegap</groupId>
<artifactId>gwtphonegap</artifactId>
<version>2.0.0.0</version>
</dependency>
</pre>
Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com4tag:blogger.com,1999:blog-3448699150404769996.post-18163976832879309412012-09-19T19:29:00.001+02:002012-09-19T19:29:56.857+02:00The future of GWT Survey<div>
Vaadin Ltd., as part of the newly-formed GWT Steering Committee, has drafted an online survey for GWT users. The following is a guest blog post from David Booth of Vaadin Ltd. </div>
<div>
<br /></div>
<div>
Here is their original <a href="https://vaadin.com/blog/-/blogs/the-future-of-gwt-survey">blog post</a> on the Vaadin blog that announces the survey.</div>
<div>
<br /></div>
<div>
Please take a few minutes to take part in the survey so that we can get a better understanding of the GWT community and so that we can find out on what you want us to concentrate.</div>
<div>
<br /></div>
<div>
Information is king - So once we collect all the data from this survey, we’ll work together to build The Future of GWT Report. We’re happy to publicly share all the information we find with you, so that we can all make educated decisions about the future!</div>
<div>
<br /></div>
<div>
Can you take 10 mins to fill out <a href="http://bit.ly/GWT2012">The Future of GWT survey</a>?</div>
<div>
<br /></div>
<div>
We are very thankful for your help!</div>
Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com5tag:blogger.com,1999:blog-3448699150404769996.post-2083574793257792422012-07-22T22:30:00.003+02:002012-07-24T07:46:21.017+02:00using gwt-phonegapThis post is part of a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blogposts</a> that show the usage of some mgwt / gwt-phonegap components.<br />
<br />
<br />
For quite a while I wanted to write a blog post on how to use mgwt and phonegap together to write great mobile apps.<br />
While mgwt provides all the mobile widgets, animations and touch support you need, gwt phonegap provides access to the phonegap api.<br />
Combining them means being able to write mobile apps with GWT that look beautiful and behave exactly like native apps.<br />
<br />
<b>Some background</b><br />
GWT compiles Java to Javascript. With Phonegap you can write Apps in Javascript. Basically we just need to take the output of the GWT Compiler and put it on the phone.<br />
<br />
<b>Which files to include</b><br />
In general you will have a html host page, like you have with any GWT app. With a phonegap app this will include at least the javascript for the phonegap api (cordova-x.x.x.js) and your gwt no cache file.<br />
An example html host file would look like this:<br />
<br />
<br />
<pre><!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>name of your app
<!-- phonegap api -->
<script type="text/javascript" language="javascript" src="cordova-1.x.x.js"></script>
<!-- gwt module include -->
<script type="text/javascript" language="javascript" src="yourgwtmodule/yourgwtmodule.nocache.js">
</head>
<body>
<!-- gwt history frame -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0">
</body>
</html>
</pre>
<br />
<br />
You can see the include for the phonegap api. <b>Note</b>: It is important that phonegap is included <b>first</b>!<br />
<br />
I would recommend keeping the html host file seperate from the one you are using for a web app, since with a web app you will not have a phonegap include.<br />
Your deployment script however needs to copy the complete module folder (gwt output) as well as other needed resources to the phonegap www folder.<br />
<br />
In Phonegap all HTML + CSS + Javascript files need to be inside the www folder of your phonegap project. If you are using phonegap plugins you might also be adding code. (Java for Android, Objective-C for iOS and so on)<br />
If you have never used phonegap you might also be interested in a good guide on how to setup <a href="http://docs.phonegap.com/en/edge/guide_getting-started_index.md.html#Getting%20Started%20Guides">phonegap</a>.<br />
<br />
<br />
The gwt phonegap part gives instructions on how to <a href="http://code.google.com/p/gwt-phonegap/wiki/GettingStarted">setup</a> a GWT with gwt phonegap.<br />
The main idea behind gwt phonegap is to provide two implementations of the phonegap api: one that is using the phonegap javascript API on a device and the other is a pure emulation api that enables developers to build phonegap apps while running gwt dev mode.<br />
To ensure that there are no runtime penalties gwt phonegap uses deferred binding and compiles different implementations for emulation and phonegap environment. This is done by the phonegap.env variable.<br />
<br />
This means that you can use any phonegap module inside the browser and still call all phonegap api. (For specific limitations see every modules <a href="http://code.google.com/p/gwt-phonegap/wiki/Features">documentation</a> <span style="background-color: white;">)</span><br />
<br />
<br />
A simple Hello World Phonegap demo would look like this:<br />
<br />
<pre>final PhoneGap phoneGap = GWT.create(PhoneGap.class);
phoneGap.addHandler(new PhoneGapAvailableHandler() {
@Override
public void onPhoneGapAvailable(PhoneGapAvailableEvent event) {
// build your ui and caLet ll phonegap
String phoneGapVersion = phoneGap.getDevice().getPhoneGapVersion();
RootPanel.get().add(new HTML("Using phonegap version: " + phoneGapVersion));
}
});
phoneGap.addHandler(new PhoneGapTimeoutHandler() {
@Override
public void onPhoneGapTimeout(PhoneGapTimeoutEvent event) {
Window.alert("can not load phonegap");
}
});
phoneGap.initializePhoneGap();
</pre>
<br />
<br />
<br />
<b>Summary - Setup Projects</b><br />
Let me walk you through the necessary steps to get a GWT app on a phone with phonegap.<br />
I am assuming that you set up a phonegap project as described in the <a href="http://docs.phonegap.com/en/edge/guide_getting-started_index.md.html#Getting%20Started%20Guides">phonegap documentation</a> for your plattform.<br />
This is the shell for your web app to run on a phone. It has a www folder where we will store our web app.<br />
<br />
The next step is to setup a standard GWT project.<br />
In this project you need to at the gwtphonegap-1.x.x.x.jar to your classpath. You can do this manually or use maven to do this.<br />
After adding the jar to your classpath you need to add the following line to your gwt xml file:<br />
<br />
<pre> <inherits name='com.googlecode.gwtphonegap.PhoneGap' />
</pre>
<br />
<br />
This tells the GWT compiler that you want to use the gwt phonegap project. <span style="background-color: white;">After that you can start using the phonegap object in your code (see example).</span><br />
<br />
At one point you want to get your application on an actual phone. Now you have to compile the app using the GWT compiler and copy the output of the GWT project (your module folder) to your www folder of your phonegap project.<br />
<br />
For a a release of an app you only want to copy the relevant files for the actual permutation. mgwt has a special permutation map linker for that. It outputs xml that lets you easily find the necessary files for the right devices. This will be covered in another blog post.<br />
<br />Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com23tag:blogger.com,1999:blog-3448699150404769996.post-68135732680452649812012-07-08T12:33:00.000+02:002012-07-08T12:36:30.377+02:00mgwt - Going mobile with GWT & PhonegapThis post is part of a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blogposts</a> that show the usage of some mgwt / gwt-phonegap components.<br />
<br />
<b id="internal-source-marker_0.587610837770626" style="font-weight: normal;"><a href="http://www.m-gwt.com/"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">mgwt</span></a><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> is a library for developing mobile apps and mobile websites with GWT from one code base. mgwt provides native looking widgets for many platforms, animations and many other things that are needed for writing mobile apps. gwt-phonegap enables GWT apps to use Phonegap. With Phonegap HTML5 apps can access the same device features that native apps can use from Javascript, such as the file system or contacts.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">With mgwt and gwt-phonegap you can deploy your GWT apps into any app store or let your users use them as a website. </span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Both projects are available under apache 2.0 license from maven central. </span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Features</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">mgwt provides mobile widgets that are compatible with UIBinder and the Editor Framework. mgwt integrates touch events and animation events with its own DOM implementation and provides gesture recognizers on top of that.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">There are themes for iPhone, iPad, android phones, android tablets and blackberry. For going offline there is an automatically generated HTML5 offline manifest.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">In dev mode gwt-phonegap can emulate the Phonegap API so that developing of Phonegap apps can happen inside GWT dev mode. gwt-phonegap also provides utilities to make GWT RPC work in a Phonegap environment.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Performance</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">mgwt uses GWT core concepts like Client Bundles, deferred binding, GWT MVP and many more. mgwt tries to leverage GWT features as much as possible, enabling the GWT Compiler to do optimizations. </span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Mobile devices do have much slower CPUs, less bandwidth and are running on battery. Building inefficient apps means draining the users battery. Since GWT is very good at optimizing Javascript apps it is a natural fit for writing cross platform mobile apps.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">mgwt leverages the GWT Compiler and HTML5 to get really good performance on mobile. Here are a few examples:</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">No Graphics</span><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> </span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Most of the styling can be done only by using CSS3. This reduces apps size significantly. The following screenshots do not contain any images</span></b><br />
<b style="background-color: white; font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">. </span><img height="297px;" src="https://lh3.googleusercontent.com/2XIQuQE5RBrkzzksK6BjP9pWBq3039Z0Px4B5fsQI5-Nk0EdiJhNZFhqOqoelvoSuwFNY69Lvd6F3js6M0AcgnTkTlqhMpjslM-uk0bsXWqLM-3CFpI" width="198px;" /><img height="293px;" src="https://lh3.googleusercontent.com/Ft4iTyCQcnUwc9_N3UlZ765Pbxi0O6ta5RHMY2-a6g5qdAuUvufQuYzyh0cxvvtWM19DNpoAZBSo_P6F8Bz1CjHRyImooL6bQ27UF0o23xD1akzyq2M" width="176px;" /></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">[Image1 - Slider on iPhone]<span class="Apple-tab-span" style="white-space: pre;"> </span> [Image2 - Slider on Android]</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Theming with Client Bundles</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">mgwt uses GWT Client Bundles for styling to ensure that unused CSS can be removed by the GWT Compiler. This means e.g. if an app is not using the slider widget the CSS won`t be inside that app.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Going offline aka no download </span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Mobile devices are not always connected to the internet. Therefore mobile web apps need to be able to start while being offline. This can be achieved with the HTML5 offline manifest. The GWT compiler sees all artifacts during compilation. This is why mgwt can generate the manifest files for different permutations at compile time. This means that an android device will only download and store the necessary android files, while an iPhone sees a different manifest.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Minimal markup</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Keeping your DOM minimal makes your apps run fast. mgwt tries to use as few DOM elements as possible, while doing styling in CSS. </span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Layout with the flexible box model</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">If layout feels fast the application feels fast. Therefore layout should not be done in Javascript, CSS should be used instead. The browser can calculate and apply the layout in its native code which is going to be much faster than doing calculations in Javascript.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">With HTML5 there is the flexible box model which is supported by all important mobile devices and can be used to achieve any layout that you need for mobile. mgwt uses the flexible box model heavily to build its layouts.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;">Animations with CSS3</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">For mobile applications it is quite common to have animations. If Javascript would be used for animating, the browser has no change to optimize. If you want fast animations you need to give the browser the knowledge of the whole animation, so that it can figure out a fast way to execute it. This can be done with CSS3 animations.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">mgwt uses different kinds of CSS animations depending on the platform so that animations always feel fast.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Want to learn more? Checkout the </span><a href="http://www.youtube.com/watch?v=0V0CdhMFiao&feature=plcp"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">mgwt</span></a><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> homepage and the </span><a href="http://blog.daniel-kurka.de/"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">blog</span></a><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">. There is also a 90 minutes </span><a href="http://www.youtube.com/watch?v=0V0CdhMFiao&feature=plcp"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">talk</span></a><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"> on mgwt from the dutch GTUG.</span></b>Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com191tag:blogger.com,1999:blog-3448699150404769996.post-5565980765801447292012-07-07T16:20:00.001+02:002012-07-07T16:20:34.847+02:00mgwt and the viewportThis post is part of a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blogposts</a> that show the usage of some mgwt / gwt-phonegap components.<br />
<br />
<br />
<br />
If you are writing software for mobile phones you should know about the view port meta tag and what it can do for you.<br />
<span style="background-color: white;">There are different settings for the viewport that let you do different things.</span><br />
Browsers on mobile phones are different from desktop browser in the sense that they have this notion of the viewport. <span style="background-color: white;">The screen on an average mobile phone is not big enough to fit a normal webpage. This is why the viewport was invented. </span><span style="background-color: white;">It allows mobile browsers to display webpages that are made for desktop devices by zooming and moving the viewport around.</span><br />
<br />
If you don`t supply any information to the browser it will render your page zoomed out. <span style="background-color: white;">It will try to give the user a good overview of the page so that he can decide on which part he needs to zoom in.</span><br />
Normally text will not be readable.<br />
<br />
You can control the initial scale, the maximum scale and the minimal scale of the viewport with a meta tag.<br />
<br />
Setting an inital scale will set the value lets you control the zoom value at startup.<br />
<span style="background-color: white;">With mgwt it would look something like this:</span><br />
<span style="background-color: white;"><br /></span><br />
<pre class="Java" name="code"> ViewPort viewPort = new MGWTSettings.ViewPort();
//configure view port
viewPort.setMinimumScale(0.2).setInitialScale(1.0).setMaximumScale(5);
//create settings and set view port
MGWTSettings settings = new MGWTSettings();
settings.setViewPort(viewPort);
//apply the setting e.g. create meta tag in page
MGWT.applySettings(settings);
</pre>
<br />
This code would result in a meta tag looking like this:<br />
<pre> <meta name="viewport" content="initial-scale=1.0,minimum-scale=0.2,maximum-scale=5">
</pre>
<br />
If you are writing app you do not want the user to be able to zoom your app. The webpage should feel like a native app. <span style="background-color: white;">This can be done by setting the initial screen scale to 1.0 and disabling scrolling.</span><br />
<br />
With mgwt this would look like this:<br />
<br />
<pre class="Java" name="code"> ViewPort viewPort = new MGWTSettings.ViewPort();
viewPort.setUserScaleAble(false).setMinimumScale(1.0).setInitialScale(1.0).setMaximumScale(1.0);
MGWTSettings settings = new MGWTSettings();
settings.setViewPort(viewPort);
settings.setPreventScrolling(true);
MGWT.applySettings(settings);
</pre>
<br />
This will create a meta tag that looks like this:<br />
<pre> <meta name="viewport" content="initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
</pre>
<br />
Depending on what you are trying to do you need to set different values for the viewport.<br />
mgwt gives you the freedom to set any value that make sense to you.<br />
<br />
If you want to have the default settings for an app you can use a short handle like this:<br />
<br />
<pre class="Java" name="code"> MGWT.applySettings(MGWTSettings.getAppSetting());
</pre>
<br />
I hope gives you the necessary information to use viewport effectively to build your mobile app with <a href="http://www.m-gwt.com/">mgwt</a>.<br />
<br />
As always feel free to leave any comments or suggestions.<br />
<br />Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com6tag:blogger.com,1999:blog-3448699150404769996.post-88927880853098684482012-07-05T18:54:00.001+02:002012-07-09T21:51:41.843+02:00mgwt & super dev modeThis post is part of a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blogposts</a> that show the usage of some mgwt / gwt-phonegap components.<br />
<br />
<a href="https://developers.google.com/web-toolkit/articles/superdevmode">GWT Super Dev Mode</a> is a very nice way of seeing your changes on a mobile device very quickly.<br />
<br />
<span style="background-color: white;">Unfortunately</span> it`s not that easy to use with a mobile browser. This is why I built a direct support for it into <a href="http://www.m-gwt.com/">mgwt</a>.<br />
<br />
<h3>
<b>The basic idea:</b></h3>
The GWT Super Dev Mode consists of a so called code server which skips many of the standard GWT optimizations and thus is able to produce Javascript from Java very fast. You can run it alongside your nomal GWT Dev Mode. On browsers that support source maps you can even do Java debugging in their Javascript Debugger.<br />
<br />
Right now the support in mgwt is considered experimental, because I might change some bits based on your feedback.<br />
<br />
<h3>
<b>Setting it up:</b></h3>
<h4>
Requirements</h4>
<br />
<ul>
<li>GWT 2.5 rc1 (or later) from <a href="http://google-web-toolkit.googlecode.com/files/gwt-2.5.0.rc1.zip">here</a></li>
<li>latest mgwt trunk (1.1.2-SNAPSHOT) from <a href="https://oss.sonatype.org/service/local/artifact/maven/redirect?r=snapshots&g=com.googlecode.mgwt&a=mgwt&e=jar&v=LATEST">here</a></li>
</ul>
<br />
<h4>
Configure SDK in Eclipse</h4>
Go to Prefrences -> Google -> Web Toolkit. Click on the add button and browse to the GWT 2.5 installation directory:<br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><img height="542px;" src="https://lh4.googleusercontent.com/FDQmiuma5RS-zcfkGa1BSOtNHbcwac41Nayi5M7WX3VNAOgL9MJnLzh7mRgPGFUTtavXIvNy4r_rN4pADKlJet1aWFX4f08T7qFTKSQTCvN9dTq3SMs" width="620px;" /></b><br />
<b style="font-weight: normal;"><br /></b><br />
<b style="font-weight: normal;"><br /></b><br />
<b style="font-weight: normal;">After adding the SDK, make it your default SDK. You list should look something like this:</b><br />
<b style="font-weight: normal;"><br /></b><br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><img height="320" src="https://lh6.googleusercontent.com/9H3TZamkTbBraLu8826UbHhQNHaPqdxisz5TlncdlKgEPOUUl0vAn6_WfPp6TadC7SugOXoVXlKt4i1YNTiHCr-fLzRXDYP7NWU6182O_nBWrnH_Sj8" width="640" /></b><br />
<b style="font-weight: normal;"><br /></b><br />
<h4>
<b>Setting up your gwt.xml file & Entrypoint</b></h4>
<b style="font-weight: normal;">In your gwt.xml file you need to add the following lines:</b><br />
<b style="font-weight: normal;"><br /></b><br />
<b style="font-weight: normal;"><br /></b>
<br />
<pre><add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<set-configuration-property name="mgwt.superdevmode" value="on" />
</pre>
<br />
If you want to run your GWT CodeServer from a different host or port you also need to add:<br />
<br />
<pre><set-configuration-property name="mgwt.superdevmode_host" value="http://<yourhost>:<port>" />
</pre>
<br />
In your Entrypoint you will have to add the following line, which will compile out if you turn off mgwt.superdevmode:<br />
<br />
<br />
<pre>SuperDevModeUtil.showDevMode();
</pre>
<h4>
</h4>
<h4>
Setting up your Run Configuration to start Super Dev Mode</h4>
Inside Eclipse you need to create a Java Run Configuration. Go to your Run Configurations, select Java and press New:<br />
<br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><img height="502" src="https://lh5.googleusercontent.com/HK80Zld6v17_cMTZwKmIzYM-ssH9J4kRS4svzP-DrsQ8gxK2pmBTtx8005yx524noqtPaRQZJPoVZhUXeDNFgdMwlB3EhBsoWjeN-ALxu8cWBGHXdv4" width="640" /></b><br />
<b style="font-weight: normal;"><br /></b><br />
<b id="internal-source-marker_0.6917844410054386"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;">On the first tab (Main) you can set a decent name and the project to use.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-weight: normal;">The main class you need to start is: </span>com.google.gwt.dev.codeserver.CodeServer</span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><img height="499" src="https://lh5.googleusercontent.com/ujtty4sptqnwnS7URWS_IXRk5dQRXA5QCO84pPqiBZR7grUor3cJ2KE5qn1AVxJaNKBqZyxEfYcGiQ5Jc_SZ-451JKn1MHN9h17YZ8ar3rJBT8rO5r4" width="640" /></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b id="internal-source-marker_0.6917844410054386"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;">In the arguments we need to pass a bindAddress as you know from a normal GWT dev mode, since with mobile devices we will not use it locally. Also we need to specify the Module to use. In my case it looks like this:</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;">(Programm Arguments)</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">-bindAddress 0.0.0.0 com.googlecode.mgwt.examples.showcase.Showcase</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;">In the VM Arguments make sure to give it some RAM, something along the lines of:</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">-Xmx1024m</span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><img height="504" src="https://lh3.googleusercontent.com/ttLojcPd9s2GOeSrrAHH2fia-z6b0FvbOmM9FqiuggfYO7ZOP_wbNRQxzVSGk6ee3W61BTvMoUIrClkFBZF92U04EObekooMsISC9xcDnyRUtGc0ulg" width="640" /></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">In the class path tab you will need to add the gwt-codeserver.jar which you will find in your gwt installation directory and you will also need to add all folders with source code to the project. (The Codeserver operates on Java files)</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">You can add a folder by selecting User Entries, click on Advanced -> Add Folder and select the source folder of your project.</span></b><br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><img height="519px;" src="https://lh6.googleusercontent.com/kwrKi5xfdkD8Fgr8AdlLKzamFizr6p3_HRaSLb3kAWdQhLMc7K9xNO5wNT6rcu8KaiLITbPwVQnrMzxSfWhHNRzNngIcF7nFUATQ3iieuU5UKt6nsSw" width="579px;" /></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">My classpath looks like this:</span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><img height="168px;" src="https://lh5.googleusercontent.com/uJE_Ma31ZNGmSb6OvWCvwBRcCQp_DNgB1AykJ8R_VyTsV5ELg5H2OH8p1wqs4yMsk_7Y2WoLkuYmegMozQBzIR_kL-8dU0LElm1qa2cHJww4r7plg1E" width="587px;" /></b><br />
<br />
<br />
<b id="internal-source-marker_0.6917844410054386"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;">Now you can just start the code server. It will take some time but at the end it should print something like this:</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;"></span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">The code server is ready.</span><br /><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Next, visit: http://<yourhost>:9876/</yourhost></span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<h4>
<b><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Compile your mgwt app once with the normal compiler</span></b></h4>
<b id="internal-source-marker_0.6917844410054386" style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Now you need to compile your gwt module once the normal way and open it with your mobile phone / tablet. This is your normal gwt app that runs on the jetty server (http://yourpost:8888 by default) You should see something like:</span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVM2bjukHElrsPJ9YPaV0D7n7fSw6yoJwsCGRwPGLDNucK9mLOXYwv0xMr2-g4v62_Vp3HIddrIF9DIG-uv_5VviMHBMDMxgnh7p7v3PshINrTJ8WJ9-aqPA6MEF7ZGP-yxbiGg7iEiNE/s1600/IMG_0808.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVM2bjukHElrsPJ9YPaV0D7n7fSw6yoJwsCGRwPGLDNucK9mLOXYwv0xMr2-g4v62_Vp3HIddrIF9DIG-uv_5VviMHBMDMxgnh7p7v3PshINrTJ8WJ9-aqPA6MEF7ZGP-yxbiGg7iEiNE/s320/IMG_0808.PNG" width="213" /></a></div>
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">If you click "Super Dev Mode On" you will see this:</span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPADXJ2eW2ayOGBBUnbpBjpvXqsSoL1FjNgHcuTDnKxLE1wKuJWt7YnT7EYamqYjvEC7fy-9O7bs-K6RF8PXuZ4C0AL6-bZT-VS1_s-xswMEbtprA5pBbZPAj-68CZrmKzcfVSMRCIxU/s1600/IMG_0809.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPADXJ2eW2ayOGBBUnbpBjpvXqsSoL1FjNgHcuTDnKxLE1wKuJWt7YnT7EYamqYjvEC7fy-9O7bs-K6RF8PXuZ4C0AL6-bZT-VS1_s-xswMEbtprA5pBbZPAj-68CZrmKzcfVSMRCIxU/s320/IMG_0809.PNG" width="213" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now you can hit compile, which will compile the app and reload the page:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhZLU3b3mGWdPezSiwdaFfV3Slweak22VwqhIhDwrbEqunDMSaflzKKbJurrd7NkvFlwfyo_B6U7CY5_9NUSnCizgblA6jCPePelYvsMteu8T7OyIGJhiyyRH1VyUGpnq3u3BtKwJ6Uw/s1600/IMG_0810.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhZLU3b3mGWdPezSiwdaFfV3Slweak22VwqhIhDwrbEqunDMSaflzKKbJurrd7NkvFlwfyo_B6U7CY5_9NUSnCizgblA6jCPePelYvsMteu8T7OyIGJhiyyRH1VyUGpnq3u3BtKwJ6Uw/s320/IMG_0810.PNG" width="213" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Important:</b> Super Dev Mode saves its state (turned on) inside session storage. So if you want to see the normal compiled app, you will need to hit "Super Dev Mode Off".</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2>
Round up</h2>
<div class="separator" style="clear: both; text-align: left;">
With this integration of Super Dev Mode into mgwt it will be much easier to test features on a device. I am seeing compile times less than 4s for many of my projects, which is a major improvement.</div>
<div class="separator" style="clear: both; text-align: left;">
I am looking for <b>feedback </b>on this one. If you have some good suggestions on how to improve this, please let me know!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b style="font-weight: normal;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span></b><br />
<b style="font-weight: normal;"><br /></b>Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com19tag:blogger.com,1999:blog-3448699150404769996.post-58905317239470440892012-06-29T20:30:00.000+02:002012-06-29T20:30:05.697+02:00GWT Steering CommitteeAs you may have already heard from the google IO talk, I am now part of the GWT Steering Committee.<br />
<br />
The job of the GWT Steering Committee is to drive GWT`s future by doing several things like:<br />
<br />
<ul>
<li>Give a direction on the future of GWT</li>
<li>approve applicants to become committers</li>
<li>review code</li>
<li>administer releases</li>
<li>modify the process of how GWT is developed to meet new challenges</li>
<li>work as master committers</li>
</ul>
<div>
Initially the committee will consist of:</div>
<div>
<ul>
<li>Ray Cromwell (Google)</li>
<li>Darrel Meyer (Sencha)</li>
<li>Mike Brock (Redhat)</li>
<li>Christian Goudreau (Arcbees)</li>
<li>Joonas Lehtinen (Vaadin)</li>
<li>Thomas Broyer</li>
<li>Stephan Haberman</li>
<li>Daniel Kurka (mgwt)</li>
</ul>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
There will be a lot of exciting abouts in the next week about GWT so stay tuned!</div>
<div>
<br /></div>
<div>
This is also very great news for <a href="http://www.m-gwt.com/">mgwt</a>. I have been meeting with many different people this week on google IO demoing mgwt. I got so much great feedback and by being part of the steering committee all of the mgwt greatness will find its way somehow into GWT.</div>
<div>
<br /></div>
<div>
I have been talking a lot with Ray Cromwell and Rajeev Dayal from the GWT team about mgwt and they were quite excited about it.</div>
<div>
<br /></div>
<div>
All the discussion in the last month about the future of GWT and Dart were totally unfounded since Google is using GWT in so many ways and there is a vibrant community of external people building great stuff with GWT as well. This new process for GWT will ensure that GWT will stay one of the great open source projects where it is very easy for people to contribute and share their work. I am very excited about it and I hope you are too.</div>
<div>
<br /></div>
<div>
All the discussions from the steering committee are visible <a href="https://groups.google.com/group/gwt-steering">online</a>, so feel free to listen on to the discussion!</div>Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com12Moscone Center Parking Garage, 255 3rd St, San Francisco, Kalifornien 94107, Vereinigte Staaten37.7845935 -122.399426237.7720445 -122.41916719999999 37.7971425 -122.3796852tag:blogger.com,1999:blog-3448699150404769996.post-27010867992148998412012-06-28T16:48:00.003+02:002012-06-29T08:35:09.096+02:00mgwt 1.1.1 releasedI just released a new version of <a href="http://www.m-gwt.com/">mgwt</a> (1.1.1). This is mainly bugfixes and small changes.<br />
<div>
<br /></div>
<div>
Here are the fixed issues:</div>
<div>
<ul>
<li><a href="http://code.google.com/p/mgwt/issues/detail?id=191">Carousel fails to remove its children</a></li>
<li><a href="http://code.google.com/p/mgwt/issues/detail?id=192">Carousel: provide a method to select page with code</a></li>
<li><a href="http://code.google.com/p/mgwt/issues/detail?id=198">Carousel widget can throw ArrayIndexOutOfBoundsException</a></li>
<li><a href="http://code.google.com/p/mgwt/issues/detail?id=193">AnimatableDisplay fails to call super.onDetach</a></li>
</ul>
<div>
As always you can download the new release from <a href="http://code.google.com/p/mgwt/downloads/list">google code</a> or use maven:</div>
</div>
<div>
<br /></div>
<pre><dependency>
<groupId>com.googlecode.mgwt</groupId>
<artifactId>mgwt</artifactId>
<version>1.1.1</version>
</dependency></pre>
<div>
<br /></div>
<div>
<br /></div>Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com15tag:blogger.com,1999:blog-3448699150404769996.post-28638309905062559572012-06-17T12:50:00.000+02:002012-06-17T13:41:47.860+02:00mgwt 1.1 releasedToday <a href="http://www.m-gwt.com/">mgwt</a> 1.1 finally got released. A tremendous amount of work went into this release in the last 4 months and we were able to improve mgwt in a lot of ways.<br />
<br />
It contains a lot of new features and many bug fixes such as:<br />
<div>
<ul>
<li>a swipe panel</li>
<li>a grouping cell list with animated headers</li>
<li>a tabpanel with animating child elements</li>
<li>animations without using MVP</li>
<li>label support for form elements</li>
<li>gesture recognizers for swipe, pinch longtap and multitap</li>
<li>improved scrolling performance</li>
<li>improved Pull-To-Refresh widget</li>
</ul>
<div>
Here is a complete <a href="http://code.google.com/p/mgwt/issues/list?can=1&q=Milestone%3DRelease1.1&colspec=ID+Type+Status+Priority+Milestone+Owner+Summary+Estimate&cells=tiles">list</a> of all the things in 1.1</div>
</div>
<div>
<br /></div>
<div>
Also I am starting a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blog post </a>on how to use certain things around mgwt and gwt-phonegap. Currently we are asking for <a href="https://groups.google.com/group/mgwt/browse_thread/thread/afa6782a6002538f">suggestions</a> for the upcoming 1.2 release on the mailing list. Please leave your comments and suggestions there.</div>
<div>
<br />
Writing mobile apps with GWT is getting much better and easier with this release. I am really happy to see a so many people contributing and making mgwt a success. Thank you all!</div>
<div>
<br /></div>
<div>
You can download the release from the <a href="http://code.google.com/p/mgwt/downloads/list">google code</a> page or use maven:</div>
<div>
<br /></div>
<pre><dependency>
<groupId>com.googlecode.mgwt</groupId>
<artifactId>mgwt</artifactId>
<version>1.1.0</version>
</dependency></pre>
<br />
For those of you taking a look at <a href="http://www.m-gwt.com/">mgwt</a> for the first time. You might be interested in an <a href="http://www.youtube.com/watch?v=0V0CdhMFiao&feature=plcp">introductory talk </a>I gave at the dutch GTUG, take a look at the <a href="http://mobilegwt.appspot.com/showcase/">showcase</a> or ask question on the user <a href="https://groups.google.com/group/mgwt">group</a>.Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com10tag:blogger.com,1999:blog-3448699150404769996.post-82894833737274148512012-06-16T20:50:00.000+02:002012-06-17T20:34:12.655+02:00using swipe recognizerThis post is part of a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blogposts</a> that show the usage of some mgwt / gwt-phonegap components.<br />
<br />
This blog post show how to use a recognizer on a widget that does not have direct touch support by using TouchDelegate. Not that All widget that extends TouchWidget or TouchPanel have direct touch support. Most of the times you will be using TouchDelegate when you want touch / gestures on existing GWT widgets.<br />
<br />
This demo uses the swipe recognizer and prints some data about the fired events into a panel.<br />
<br />
<br />
1. Setup the viewport for the mobile browser:<br />
<pre class="Java" name="code">MGWT.applySettings(MGWTSettings.getAppSetting());
</pre>
<br />
2. Instantiate an AnimationHelper and attach it to the RootPanel:<br />
<pre class="Java" name="code"></pre>
<pre class="Java" name="code">AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);
</pre>
<br />
3. Instantiate a LayoutPanel, GroupingCellList and HeaderList:<br />
<pre class="Java" name="code">LayoutPanel layoutPanel = new LayoutPanel();
final RoundPanel roundPanel = new RoundPanel();
roundPanel.getElement().getStyle().setProperty("minHeight", "200px");
layoutPanel.add(roundPanel);
</pre>
<br />
<br />
4. Use TouchDelegate to register swipe Handlers:<br />
<pre class="Java" name="code">TouchDelegate touchDelegate = new TouchDelegate(roundPanel);
touchDelegate.addSwipeStartHandler(new SwipeStartHandler() {
@Override
public void onSwipeStart(SwipeStartEvent event) {
roundPanel.clear();
roundPanel.add(new HTML("swipe start detected at: " + event.getTouch().getPageX() + " " + event.getTouch().getPageY()));
}
});
touchDelegate.addSwipeMoveHandler(new SwipeMoveHandler() {
@Override
public void onSwipeMove(SwipeMoveEvent event) {
roundPanel.add(new HTML("swipe move detected at: " + event.getTouch().getPageX() + " " + event.getTouch().getPageY()));
}
});
touchDelegate.addSwipeEndHandler(new SwipeEndHandler() {
@Override
public void onSwipeEnd(SwipeEndEvent event) {
roundPanel.add(new HTML("swipe end detected"));
}
});
</pre>
5. Animate to the created UI:<br />
<pre class="Java" name="code">animationHelper.goTo(layoutPanel, Animation.SLIDE);
</pre>
<br />
<br />
The complete code for the example can be found <a href="http://code.google.com/p/mgwt/source/browse/examples/src/main/java/com/googlecode/mgwt/examples/client/SwipeRecognizerExample.java?repo=examples">here</a>. If you want to see swipe recognizers in action take a look at the <a href="http://mobilegwt.appspot.com/showcase/#CarouselPlace:">showcase</a>.Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com6tag:blogger.com,1999:blog-3448699150404769996.post-22715001913298413192012-06-16T20:03:00.003+02:002012-06-17T20:34:05.389+02:00using animation helperThis post is part of a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blogposts</a> that show the usage of some mgwt / gwt-phonegap components.<br />
<br />
If you do not want to use GWT Activities and Places you can not use the AnimatingActivityManager from mgwt. This is why we created AnimationHelper. A simple class that lets you use animations with a very simple API.<br />
<br />
<br />
1. Setup the viewport for the mobile browser:<br />
<pre class="Java" name="code">MGWT.applySettings(MGWTSettings.getAppSetting());
</pre>
<br />
2. Instantiate an AnimationHelper and attach it to the RootPanel:<br />
<pre class="Java" name="code"></pre>
<pre class="Java" name="code">AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);
</pre>
<br />
3. Instantiate a LayoutPanel and a button. Attach the TapHandler to it and animate to another UI on Tap:<br />
<pre class="Java" name="code">LayoutPanel layoutPanel = new LayoutPanel();
Button button = new Button();
button.setText("Animate");
button.addTapHandler(new TapHandler() {
@Override
public void onTap(TapEvent event) {
//build second ui
LayoutPanel layoutPanel = new LayoutPanel();
Button button = new Button();
button.setText("second");
layoutPanel.add(button);
animationHelper.goTo(layoutPanel, Animation.FLIP);
}
});
layoutPanel.add(button);
</pre>
<br />
4. Animate to the created UI:<br />
<pre class="Java" name="code">animationHelper.goTo(layoutPanel, Animation.SLIDE);
</pre>
<br />
A complete example can be found <a href="http://code.google.com/p/mgwt/source/browse/examples/src/main/java/com/googlecode/mgwt/examples/client/SimpleAnimationExample.java?repo=examples">here</a>. If you want to see the mgwt animation in action take a look at the <a href="http://mobilegwt.appspot.com/showcase/">showcase</a>.Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com63tag:blogger.com,1999:blog-3448699150404769996.post-81199465537524641112012-06-16T19:08:00.000+02:002012-06-17T20:33:59.240+02:00using mgwt header listThis post is part of a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blogposts</a> that show the usage of some mgwt / gwt-phonegap components.<br />
<br />
The mgwt HeaderList is is a widget that can display data grouped within a list. It can render data similar to the contacts in the phone app of an iPhone.<br />
<br />
It uses cells for the content and for the headers to do so. Rendering html with cell is much more efficient than using widgets directly. This is how it looks on an iPhone:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZOwpYhSvjPKGf2YXV4gFh3cBddj4LcXpVj_gJ8qlXSC5JJuQi45LCkMBLe4bRBX66om0pAiiHGzCrNB_-Mz1GemUAq7OeXQwXu6xACw0vgFTbVFNia6IBxbcH9DUpD1B6vgP82-1oGA/s1600/IMG_0470.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZOwpYhSvjPKGf2YXV4gFh3cBddj4LcXpVj_gJ8qlXSC5JJuQi45LCkMBLe4bRBX66om0pAiiHGzCrNB_-Mz1GemUAq7OeXQwXu6xACw0vgFTbVFNia6IBxbcH9DUpD1B6vgP82-1oGA/s320/IMG_0470.PNG" width="213" /></a></div>
<br />
<br />
With HeaderList you need to specify two cell. One for the content and one for the headers.<br />
Lets say we have two simple Java POJOs that we consider the model:<br />
<br />
<br />
<br />
<pre class="Java" name="code">public class Header {
private final String name;
public Header(String name) {
this.name = name;
}
public String getName() {
return name;
}
}
public class Content {
private final String name;
public Content(String name) {
this.name = name;
}
public String getName() {
return name;
}
}
</pre>
<br />
Then we need to build two cells that can render this into html:<br />
<br />
<pre class="Java" name="code">private class ContentCell implements Cell<content> {
@Override
public void render(SafeHtmlBuilder safeHtmlBuilder, Content model) {
safeHtmlBuilder.appendEscaped(model.getName());
}
@Override
public boolean canBeSelected(Content model) {
return true;
}
}
private class HeaderCell implements Cell<header> {
@Override
public void render(SafeHtmlBuilder safeHtmlBuilder, Header model) {
safeHtmlBuilder.appendEscaped(model.getName());
}
@Override
public boolean canBeSelected(Header model) {
return false;
}
}
</header></content></pre>
<br />
Note: within the cell you can render any html with any css classes. So if you want to add images or other things, this is the way to go.<br />
<br />
<br />
After we have set this up cell list is very easy to use:<br />
<br />
To build this you need to do the following steps:<br />
<br />
1. Setup the viewport for the mobile browser:<br />
<pre class="Java" name="code">MGWT.applySettings(MGWTSettings.getAppSetting());
</pre>
<br />
2. Instantiate an AnimationHelper and attach it to the RootPanel:<br />
<pre class="Java" name="code"></pre>
<pre class="Java" name="code">AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);
</pre>
<br />
3. Instantiate a LayoutPanel, GroupingCellList and HeaderList:<br />
<pre class="Java" name="code">LayoutPanel layoutPanel = new LayoutPanel();
GroupingCellList<Header, Content> groupingCellList = new GroupingCellList<Header, Content>(new ContentCell(), new HeaderCell());
HeaderList<Header, Content> headerList = new HeaderList<Header, Content>(groupingCellList);
layoutPanel.add(headerList);
</pre>
<br />
<br />
4. Animate to the created UI:<br />
<pre class="Java" name="code">animationHelper.goTo(layoutPanel, Animation.SLIDE);
</pre>
<br />
The complete source can be found <a href="http://code.google.com/p/mgwt/source/browse/examples/src/main/java/com/googlecode/mgwt/examples/client/HeaderListExample.java?repo=examples">here</a>. If you want to see the widget in action you can visit the <a href="http://mobilegwt.appspot.com/showcase/#GroupedCellListPlace:">showcase</a>.Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com66tag:blogger.com,1999:blog-3448699150404769996.post-35616708651566009772012-06-16T18:06:00.001+02:002012-06-17T20:33:13.493+02:00using the mgwt swipe panelThis post is part of a <a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-and-gwt-phonegap.html">series of blogposts</a> that show the usage of some mgwt / gwt-phonegap components.<br />
<br />
This blog post will show the use of the Carousel widget in mgwt. The widget can be used to display different content in a horizontal row. Users can access the content by swiping to it.<br />
<br />
The widget looks like this:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-sEjekcV5MxroeoDOt9_84IPQ91Xy-6rdrXS-wljRaYWtZqyIiMIEkCA6VoLBWsK7t8C3Fmt92lyqRXht8VK6M_1gVaJso8n5rKkNPqdtoSctwSRNE8akZQSCSUImuIvYbAyF_Q35Ag/s1600/IMG_0466.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-sEjekcV5MxroeoDOt9_84IPQ91Xy-6rdrXS-wljRaYWtZqyIiMIEkCA6VoLBWsK7t8C3Fmt92lyqRXht8VK6M_1gVaJso8n5rKkNPqdtoSctwSRNE8akZQSCSUImuIvYbAyF_Q35Ag/s320/IMG_0466.PNG" width="213" /></a></div>
<br />
To build this you need to do the following steps:<br />
<br />
1. Setup the viewport for the mobile browser:<br />
<pre class="Java" name="code">MGWT.applySettings(MGWTSettings.getAppSetting());
</pre>
<br />
2. Instantiate an AnimationHelper and attach it to the RootPanel:<br />
<pre class="Java" name="code"></pre>
<pre class="Java" name="code">AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);
</pre>
<br />
3. Instantiate a LayoutPanel and add in the Carousel widget:<br />
<pre class="Java" name="code">LayoutPanel layoutPanel = new LayoutPanel();
Carousel carousel = new Carousel();
layoutPanel.add(carousel);</pre>
<br />
4. Add some content to the Carousel:<br />
<pre class="Java" name="code">carousel.add(someWidget);
</pre>
<br />
5. Animate to the created UI:<br />
<pre class="Java" name="code">animationHelper.goTo(layoutPanel, Animation.SLIDE);
</pre>
<pre class="Java" name="code"></pre>
<pre class="Java" name="code"></pre>
The complete code example can be found <a href="http://code.google.com/p/mgwt/source/browse/examples/src/main/java/com/googlecode/mgwt/examples/client/SwipePanelExample.java?repo=examples">here</a>. If you want to see the widget in action, take a look into the <a href="http://mobilegwt.appspot.com/showcase/#CarouselPlace:">showcase</a>.Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com10tag:blogger.com,1999:blog-3448699150404769996.post-88615145927783289622012-06-16T13:41:00.003+02:002012-07-22T22:32:02.613+02:00using mgwt and gwt-phonegapToday I am starting a series of blogposts on how to use mgwt and gwt-phonegap.<br />
<br />
This post will list all posts of the series and will be updated every time there is a new post.<br />
<br />
<br />
<ul>
<li><a href="http://blog.daniel-kurka.de/2012/07/mgwt-going-mobile-with-gwt-phonegap.html">mgwt overview</a></li>
<li><a href="http://blog.daniel-kurka.de/2012/07/using-gwt-phonegap.html">getting started with gwt phonegap</a></li>
<li><a href="http://blog.daniel-kurka.de/2012/06/using-animation-helper.html">simple animations with AnimationHelper</a></li>
<li><a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-swipe-panel.html">using the carousel / swipe widget</a></li>
<li><a href="http://blog.daniel-kurka.de/2012/06/using-mgwt-header-list.html">using HeaderList</a></li>
<li><a href="http://blog.daniel-kurka.de/2012/06/using-swipe-recognizer.html">using a swipe recognizer</a></li>
<li><a href="http://blog.daniel-kurka.de/2012/07/mgwt-super-dev-mode.html">mgwt & super dev mode</a></li>
<li><a href="http://blog.daniel-kurka.de/2012/07/mgwt-and-viewport.html">mgwt and the viewport</a></li>
</ul>Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com15tag:blogger.com,1999:blog-3448699150404769996.post-33260683366338416212012-06-14T20:14:00.001+02:002012-06-14T20:15:12.140+02:00gwt phonegap 1.8 releasedgwt-phonegap 1.8 got released today.<br />
It contains several bug fixes and makes working with GWT RPC much easier (it is no more necessary to manipulate the servlet).<br />
This release is compatible with phonegap 1.8 which got released a few days ago.<br />
<br />
As always you can get the new version from <a href="http://code.google.com/p/gwt-phonegap/downloads/list">google code</a> or from maven central:
<br />
<br />
<pre><dependency>
<groupId>com.googlecode.gwtphonegap</groupId>
<artifactId>gwtphonegap</artifactId>
<version>1.8.1.0</version>
</dependency>
</pre>Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com11tag:blogger.com,1999:blog-3448699150404769996.post-17320628583180971762012-05-23T20:09:00.000+02:002012-05-23T20:18:41.901+02:00mobile webkit alert dialog breaks touch event cycleThe mobile webkits on Android and iOS both contain a bug. If you make a call to alert during a touchend event, the browser ends up in a weird state where it refires the original touch start event as soon as you touch anywhere on the display.<br />
<br />
This has led to a bug report on mgwt: <a href="http://code.google.com/p/mgwt/issues/detail?id=135">http://code.google.com/p/mgwt/issues/detail?id=135</a>
<br />
This has absolute no effect on desktop browsers and can only be observed on mobile webkits.<br />
<br />
From now on mgwt fixes this in all aggregated events (like Tap, LongTap, etc.) with deferred binding without any runtime penalties for unaffected browsers. Internally we are scheduling a command to be executed so that the entry of your execution is no longer the touchend event.<br />
<br />
Of course we need to file a bug with the webkit open source project to get this fixed in the long run.<br />
<br />
<br />Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com6tag:blogger.com,1999:blog-3448699150404769996.post-46454760970401131642012-05-05T10:59:00.002+02:002012-05-05T11:04:50.450+02:00Talk about mgwt & gwt-phonegap at the dutch GTUGEarlier this week I was invited to talk about mobile development with google technologies at the dutch google technology user group.<br />
<div>
<br /></div>
<div>
I had a very nice evening and talked to a lot of nice fellow developers. Especially I want to thank <a href="https://plus.google.com/117201017011104654079/posts">Rokesh Jankie</a> and <a href="http://www.qualogy.com/">Qualogy</a> for hosting the event. We also recorded a video of my talk and posted it on youtube:</div>
<div>
<br /></div>
<div style="text-align: center;"><iframe width="420" height="315" src="http://www.youtube.com/embed/0V0CdhMFiao" frameborder="0" allowfullscreen></iframe>
<br /></div>
<br />
This is around 90 minutes talk about the basic concepts of phonegap, gwt, gwt-phonegap & mgwt. If you are thinking of building mobile apps with HTML5 there is a lot of interesting content.<br />
So enjoy watching.Daniel Kurkahttp://www.blogger.com/profile/08499256930780662506noreply@blogger.com7