Come realizzare il menù alla Inbox con GWT e CSS3

demo: http://loadersample.appspot.com

css 'minimale'

La notizia che Google ha utilizzato GWT per realizzare Inbox sembra aver ridato linfa vitale al toolkit.
Noi ne troviamo estremamente piacevole anche lo stile, basato su material design, molto pulito e chiaro. Per questo abbiamo provato a riprodurne uno degli elementi caratterizzanti, i.e. il "menù rotolante", provando ad ‘imitare’ alcune delle scelte stilistiche fatte dagli engineers Google.

Per rendere painless la stilizzazione delle componenti (colori, ombre, forme e icone) abbiamo utilizzato la css 'material' che si trova a questo url http://fezvrasta.github.io/bootstrap-material-design inserendola direttamente nel progetto GWT.

Una settimana alla #GWT.create

Manca solo una settimana alla seconda edizione della conferenza internazionale su GWT, la GWT.create.

• 2 eventi quasi paralleli (uno a San Francisco il 22 e 23 Gennaio e la settimana successiva a Monaco di Baviera);
• 40 speakers;
• 3 tracks;
• +600 partecipanti attesi.

CSS3 loaders per applicazioni GWT

Le applicazione GWT alle volte sono caratterizzate da tempi di caricamento relativamente lunghi (in particolare al primo accesso) e benché RunAsync aiuti molto a mitigare questo problema, capita di dover comunicare all'utente che l'applicazione sta caricando. 

Nel mondo 'html' questo viene solitamente fatto con i loaders, magari fatti usando css3 e animazioni che sono estremamente leggere e 'appealing'.
Anche nel mondo delle applicazioni GWT questo è possibile e si riesce ad utilizzare in meno di 5 linee di codice gli stessi loader CSS3.

#GWTcon - Firenze 5 Novembre

Il prossimo 5 Novembre,  a Firenze, nella splendida cornice de “Le Murate” si terrà la GWTcon, la prima conferenza italiana completamente dedicata al mondo GWT ed organizzata dalla comunità di sviluppatori.

Una giornata dedicata al mondo GWT, organizzata e promossa dal GDG-Firenze.

GWT Augmented Reality - HOWTO - step 2

Welcome to the third (and fortunately last) step of using NyARToolkit in a GWT project.

In the previous steps (step 0 and step 1) we got NyARToolkit ready for our GWT project and we
used  the toolkit to detect a marker on a static image; now we are going use the stream from the webcam to populate the sensor.

First of all we should now really switch to GWT 2.5 and Elemental; quoting form the first post of the series:

Using Elemental in a GWT project is quite straightforward:

1. donwload the latest GWT (well, we used for this project RC1 but all seems safe to be done with 2.5.0 final) and setup a new project;
2. add to the build path gwt-elemental.jar (is in the unpacked gwt 2.5 archive);
3. add to the gwt.xml file the line  <inherits name='elemental.Elemental'/>
   ....

and we are ready.

WebGL with GWT/Elemental, Going 3D

In a previous post we described how to setup a first program to use WebGL with GWT's Elemental,
library, now we will elaborate our code introducing some basic 3-D graphics.

The bad: WebGL has not support for 3D graphics.  "WebGL is a 2D library" (http://games.greggman.com/game/webgl-fundamentals/).

The good: we can provide projections operators to the graphics library and let the vertex shader(s) apply them to the data and we can, quite easily, provide a fragment shader that, using eventually values computed vertex-per-vertex by the vertex shader, will do some basic shading and lighting on  3-D objects.

GWT Augmented Reality - HOWTO - step 1

Welcome to the second step of using NyARToolkit in a GWT project.

NOTE:
At the end of the previous step we used the super-source tag; someone may have noticed that when you use super-source you end up with an eclipse project with errors: the project compiles with GWT and works without problems but eclipse signals errors in all the super-source'd classes (actually because package names are not correct).
To find the best solution for this annoying situation, last week I asked on the  google-web-toolkit google group. Actually the full solution is harder than we can afford in this post but you can find here the thread; in our demo-project without serverside component and without tests the first response in the thread is enough, but for a bigger application some care is needed.

the demo app

WebGL tinysample

 Tiny WebGL/Elemental sample

1. Donwload latest GWT  (here) and setup a new project.
    
2. Add to the build path gwt-elemental.jar (is in the unpacked gwt 2.5 archive).
    
3. Add to the gwt.xml file the line  <inherits name='elemental.Elemental'/>.
    
4. Use TestWGLdrawrectangles.java as EntryPoint.
    
5. Compile and enjoy.

WebGL/GWT Fundamentals/Elemental, tiny update, texture loading works on firefox

Just after the publication of our  first post on Elemental and WebGL  (here) we found that the first two  examples we wrote for the post were running on firefox but not the remaining three.
The sample that uses a video as background image requires WebRTC so it is not a surprise, but
the sample that just loads an image and draws it in a canvas and the one with a small rotating cube were supposed to be 'portable'.

GWT Augmented Reality - HOWTO - step 0

This post is the first of a short (we hope) series describing the steps required to use NyARToolkit in a GWT/Elemental project.

The sample is at http://www.jooink.com/experiments/ARtest1/ (use chrome !!)

Augmented Reality using WebRTC, NyARToolkit, GWT, Elemental, WebGL --- Test 0

What an intense coding day today but finally we had the first working-test :)

               

[Demo HERE, use latest chrome]

Only GWT 2.5/Elemental, no plugins are required. 

Based on NyArToolkit, using WebGL for 3D rendering and WebRTC to access the camera this shows why GWT is a booster :). 
Thanks Google !!

WebGL/GWT Fundamentals/Elemental

A couple of weeks ago we started experimenting with the new "to the metal" library of GWT 2.5 (https://developers.google.com/web-toolkit/articles/elemental) and, being computer graphics enthusiasts, we targeted WebGL as our main focus.

Learning deeply WebGL (WebGL - OpenGL ES 2.0 for the Web) was unfortunately a too time-consuming task four our purposse, so we decided to start translating some basic examples from javascript to GWT/elemental, just to understand how far Elemental will bring us.