- EL CONOCIMIENTO ES Y DEBE SER LIBRE -

domingo, mayo 11, 2014

Aplicación en Tiempo Real con Node.js y GWT (HTML5)



probando:  http://nodejs2014.appspot.com
cliente: https://github.com/jumanor/client-nodejsgwt
servidor: https://github.com/jumanor/server-nodejsgwt

Es realmente sorprendente el poder de Node.js, que con tan pocas lineas de código pueda hacer funcionar una aplicación en tiempo real (aunque esta sea una sencilla aplicación). En realidad es en el front-end donde esta la complejidad y es precisamente en este lado que sale al rescate GWT y HTML5 que junto a Java hace las cosas realmente muy sencillas.

Aunque JSNI siempre estuvo presente desde las primeras versiones de GWT la depuración de código Javascript era muy complicado; sin embargo, esto ha cambiado con GWT 2.5.x que trae “super dev mode”.

JSNI (Javasript Native Interface)
Jsni es la forma como podemos llamar métodos Java de Javascript y viceversa.

Llamando métodos Java de Javascript
  
private native void loadNodeJS(String path) /*-{
//...
   //$wnd hace referencia al objeto window
   //window.socket.on...
   $wnd.socket.on('onRemoveUser', function (data) {
      var user=JSON.parse(data);
      //Un ejemplo del obj JSON recuperado
      //var user={x:10,y:20,name:'xploit'};
      tmp.@pck.client.TEngine::onRemoveUser(Lpck/client/TUser;)(user);
  });
//...
}-*/;
//...
public void onRemoveUser(TUser user){  
           for(int i=1;i<naves.size();i++){       
                if(naves.get(i).getName().equals(user.getName())){  
                     naves.get(i).BorrarNave();  
                     contenedorCanvas.remove(naves.get(i).getCanvas());  
                     naves.remove(i);  
                }  
           }  
      }
//...  

El método "loadNodeJS" es un método Java que es "native" esto significa que puede contener código Javascript.
En la linea 9 del ejemplo de arriba se llama al método Java de Javascript, aunque su sintaxis puede parecer intimidante en realidad el autocompletado de código (del Eclipse) ayuda bastante.
Como puede observar el método "onRemoveUser" acepta un parametro de tipo "TUser", es por esto que cuando llamamos al método utilizamos la firma "Lpck/client/TUser;".
La clase "TUser" se extiende de "JavascriptObject" (ver abajo) que trasparentemente convierte el Objeto "Json" a "TUser".

La clase "TUser" se define teniendo en cuenta el Objeto Json a convertir.  

public class TUser extends JavaScriptObject {

 protected TUser(){};
    //var user={x:10,y:20,name:'xploit'};
    public final native int getX() /*-{ return this.x; }-*/;
    public final native int getY() /*-{ return this.y; }-*/;
    public final native String getName() /*-{ return this.name; }-*/;
}


Llamando métodos Javascript de Java.

Debido a que los métodos "native" contienen código Javascript. Llamar a un método "native" implica llamar métodos Javascript.

En la linea 7 del ejemplo de abajo se llama a "$wnd.socket.emit(...)".

public native void onSendMessageChatUser(String name,String message) /*-{
    var msn={};
    msn.message=message;
    msn.name=name;
          //$wnd hace referencia al objeto window
          //window.socket.emit(...)
    $wnd.socket.emit("onSendMessageChatUser",JSON.stringify(msn));
 }-*/;


SUPER DEV MODE
Gwt que con el “super dev mode” nos permite depurar código Java dentro del navegador web como si se tratase de código Javascript. Esto último es de extraordinaria ayuda, y disponible en la ultimas versiones de GWT.


jueves, agosto 22, 2013

MI PRIMER JUEGO CON GWT + HTML5


El experimento se encuentra en http://matamarcianos2000.appspot.com/ y el código aquí. No se han utilizado , intencionalmente,  elementos de optimización de GWT para que el código sea entendible.

Antes de seguir quiero aclarar que JavaScript es un lenguaje feo, y estoy casi seguro que cualquier persona que ha programado en C++,Java o C# opinara lo mismo. Los que argumenten que programar nativamente en JavaScript es mas optimo y se aprovechan mejor los recursos, los comparare a aquellos intrépidos programadores de assembler que pensaban, en su momento, que los lenguajes de alto nivel no servían. Créeme que GWT logra compilar un JavaScript extraordinariamente optimizado!!!!

GWT soporta los elementos canvas y audio de HTML5, los cuales utilice en este experimento para la creación de un sencillo juego. Puedes utilizar como guía de referencia cualquier manual de HTML5 que abundan en la internet, te podrás percatar que GWT a encapsulado los métodos de los elementos canvas y audio, en las clases "Canvas" y "Audio" respectivamente haciendo muy sencillo su utilización.

CREANDO UN CANVAS
Un canvas es un área rectangular en una pagina HTML y este se especifica con el elemento <canvas>

Con HTML5
<canvas id="myCanvas" width="200" height="100"></canvas> 

Con GWT
Canvas canvas = Canvas.createIfSupported();
canvas.setWidth("100px");
canvas.setHeight("100px");
RootPanel.get().add(canvas);

DIBUJANDO UN RECTANGULO EN EL CANVAS
Por cada elemento canvas se puede utilizar un  "context" (piense en el context como el acrílico de la pizarra-acrilica), en el cual  puedes utilizar comandos javascript para dibujar lo que desees. Los navegadores pueden implementar "context 2D" y "context 3D" este ultimo todavía funciona experimentalmente.

Con HTML5
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Con GWT
Context2d context=canvas.getContext2d();
//context.setFillStyle(CssColor.make("#FF0000"));
context.setFillStyle("#FF0000");
context.fillRect(0, 0, 150, 75);

fillStyle establece el color del rectangulo a dibujar
fillrect dibujar un rectangulo

DIBUJANDO TEXTO EN EL CANVAS
Hay dos métodos para dibujar texto filltext y stroketext, el primero dibuja el texto con el actual fillstyle mientras que el segundo dibuja solo el borde de las letras usando el actual strokestyle

Con HTML5
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Con GWT
Context2d context=canvas.getContext2d();
context.setFont("30px Arial");
context.fillText("Hello World",10,50);

font establece la fuente del texto
fillText dibujar el texto

TODO JUNTO 
Es claro que la traducción de HTML5 a GWT es sencillo, y como lo mencione al inicio esto te permite utilizar cualquier manual/tutorial de HTML5, ademas no te olvides que tienes toda la potencia de un buen lenguaje como Java.

Con HTML5
<html>
<head>
<script>
function cargar(){

 var c=document.getElementById("myCanvas");
 var context=c.getContext("2d");
 context.fillStyle="#FF0000";
 context.fillRect(0, 0, 150, 75);

 context.font="30px Arial";
 context.fillText("Hello World",10,130);
}
</script>
</head >
<body onLoad="cargar();">
 <canvas id="myCanvas" width="200px" height="200px"></canvas>
</body>
</html>

Con GWT
public void onModuleLoad() {
 
   Canvas canvas = Canvas.createIfSupported();
      canvas.setWidth("200px");
      canvas.setHeight("200px");
      
      Context2d context=canvas.getContext2d();
      //context.setFillStyle(CssColor.make("#FF0000"));
      context.setFillStyle("#FF0000");
      context.fillRect(0, 0, 150, 75);
      
      context.setFont("30px Arial");
      context.fillText("Hello World",10,130);
      
      RootPanel.get().add(canvas);
 }

Si eres un programador Javascript o eres alguien que empieza a programar en el Front-End y estas pensando seriamente en aprender un framework MVC como AngularJS porque necesitas mayor control, prueba GWT !!!!

viernes, enero 06, 2012

MI PRIMER WEB SITE CON GWT ( PARA NOVATOS )

UIBinder sin GWT Designer era realmente horrible, la curva de aprendizaje era muy empinada, con GWT Designer la cosa cambia radicalmente y ahora estoy convencido que si es posible realizar páginas web con GWT.

UIBinder  es una herramienta poderosa  que te permite dividir pedazos de código HTML de tu “Plantilla CSS”  para después insertar estos pedazos de código dinámicamente a través de Javascript (GWT) en tu “Plantilla CSS”.  Si vienes de PHP la inserción de los pedazos de código lo realizas dinámicamente a través de PHP en el Servidor, si te has percatado es prácticamente la misma lógica de desarrollo con la diferencia que ahora trabajas en el Cliente.

Los programadores Javascript podrían argumentar que pueden realizar lo anteriormente mencionado sin necesidad de UIBinder ; sin embargo, no olviden que UIBinder es en esencia Java y además tienes la opción de visualizar el diseño con GWT Designer, además UIBinder  te permite separar el código de la IU (XML) del código de implementación (Java). Esto implica que puedes tener un UIBinder incrustado dentro de un UIBinder y en fin todo el poder de un lenguaje como Java (odio y maldigo el manejo de eventos de Java, amo C# no me digan hereje).


EJEMPLO:

Este ejemplo es bastante básico, hay temas de optimización y rendimiento como: ClientBunde, Code Split entre otros  que intencionalmente no se muestran aquí.

  1.  Tenemos la plantilla inicial.
    Codigo: Index.html
    <div id="header" class="container">
     <div id="logo">
      <h1><a href="#">Rock Castle</a></h1>
     </div>
    
     <!-- Begin Menu -->
    
        <div id="menu">
    
      <ul>
    
       <li class="current_page_item"><a href="#">Homepage</a></li>
       <li><a href="#">Blog</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    
      </ul>
    
     </div>
    
        <!-- End Menu -->
    
    </div>
    
    <div id="splash-wrapper">
    
     <div id="splash">
    
      <h2>Nullam pretium nibh u turpis</h2>
    
      <p>Lorem ipsum daolor sit amet, consectetur adipiscing elit. Nulla quis orci ut erat iaculis posuere in consequat nulla. Cras vel nisl ipsum, nec tincidunt nunc. Sed egestas lorem nisl, sed dignissim quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tristique dui sit amet mauris.</p>
    
     </div>
    
    </div>
    
    <!-- end #header -->
    
    <div id="wrapper">
    
     <div id="wrapper2">
    
      <div id="wrapper-bgtop">
    
       <div id="page">
    
        <div id="content">
    
                    
    
         <!-- Beging Post -->
    
                        <div class="post">
    
          <h2 class="title"><a href="#">Welcome to Rock Castle</a></h2>
    
          <p class="meta"><span class="date">December 12, 2011</span><span class="posted">Posted by <a href="#">Someone</a></span></p>
    
          <div style="clear: both;"> </div>
    
          <div class="entry">
    
           <p>This is <strong>Rock Castle</strong>, a free, fully standards-compliant CSS template designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/"></a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.  This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
    
           <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut . In id eros. Suspendisse  turpis, cursus egestas at sem.</p>
    
           <p class="links"><a href="#" class="more">Read More</a><a href="#" title="b0x" class="comments">Comments</a></p>
    
          </div>
    
         </div>
    
                        <!-- End Post -->
    
    
  2. Creamos un Widget “Menu” y un Widget “Post” como puede observar se ha copiado el código correspondiente de la plantilla a los Widgets esto es lo interesante; ya que, puede ejecutar el GWT Designer y visualizar el diseño  de cada Widget.
    Codigo: Menu.ui.xml
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    
     xmlns:g="urn:import:com.google.gwt.user.client.ui">
    
     <ui:style>
    
      
    
     </ui:style>
    
     <g:HTMLPanel>
    
     <div id="menu">
    
      <ul>
    
       <li><a href="#">Homepage</a></li>
       <li><a href="#">Blog</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    
      </ul>
    
     </div>
    
     </g:HTMLPanel>
    
    </ui:UiBinder> 
    
  3. En la Plantilla inicial ahora declaramos  elementos “div”  con los identificadores "wmenu" y "wpost", mediante GWT insertaremos dinámicamente los Widgets creados en los  elementos “div” a traves de los identificadores.
    Codigo: Index.html
    <div id="header" class="container">
    
     <div id="logo">
    
      <h1><a href="#">Rock Castle</a></h1>
    
     </div>
    
     <!-- Begin Menu -->
    
        <div id="wmenu"></div><!-- ACA INSERTAMOS EL WIDGET MENU -->
    
        <!-- End Menu -->
    
    </div>
    
    <div id="splash-wrapper">
    
     <div id="splash">
    
      <h2>Nullam pretium nibh u turpis</h2>
    
      <p>Lorem ipsum daolor sit amet, consectetur adipiscing elit. Nulla quis orci ut erat iaculis posuere in consequat nulla. Cras vel nisl ipsum, nec tincidunt nunc. Sed egestas lorem nisl, sed dignissim quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tristique dui sit amet mauris.</p>
    
     </div>
    
    </div>
    
    <!-- end #header -->
    <div id="wrapper">
     <div id="wrapper2">
      <div id="wrapper-bgtop">
       <div id="page">
        <div id="content">
                    
    
         <!-- Beging Post -->
    
                        <div id="wpost"></div><!-- ACA INSERTAMOS EL WIDGET POST -->
    
                         <!-- End Post -->
    
  4. Ahora  cuando se haga click sobre cada elemento del Menu se insertara  el Widget “Post” haciendo referencia al elemento  “div” cuyo identificado es “wpost”.
    Codigo: Menu.java
    @UiHandler("labelHomepage")
     void onLabelHomepageClick(ClickEvent event) {
      RootPanel.get("wpost").clear();
     }
    
     @UiHandler("labelBlog")
     void onLabelBlogClick(ClickEvent event) {
      Post post=new Post();
      RootPanel.get("wpost").add(post);
     }
    
     @UiHandler("labelPhotos")
     void onLabelPhotosClick(ClickEvent event) {
      Post post=new Post();
      post.setWidgetPanel(new Formulario());
      RootPanel.get("wpost").add(post);
     }
    

Debo de mencionar que la mayoría del código del proyecto es generado automáticamente por GWT Designer, el ejemplo lo puede ver http://websitegwt.appspot.com/ y el código fuente de proyecto aquí.


martes, noviembre 29, 2011

UIBINDER EL PUENTE ENTRE GWT Y LOS DISEÑADORES WEB TRADICIONALES (HTML+CSS)

La mayoría de los mejores diseñadores web que conozco no tienen la lógica de un programador y esto es una traba  para engancharlos a GWT (aunque con HTML 5 necesariamente van a tener que aprender); sin embargo, con UIBInder veo la posibilidad de usar ese talento en beneficio de las Aplicaciones GWT.


PROBLEMA  1:
Como atraer  a ese mi Amigo, experto  en maquetación y diseño CSS,  al mundo de GWT sin que muera de  pánico?


SOLUCIÓN  1:
Copiar ese código bonito (html + csss) y pegarlo en UIBinder enseguida UIBinder lo transformara en un Widget y podremos utilizarlo  como si se tratase de un Widget Nativo, entonces insertar el Widget recién creado en una Layer, Grid, Panel, etc.


CONCLUSIÓN 1:
1)      Esto permite tomar trozos de código (html + css) y utilizarlo con GWT, entonces estos pedazos de códigos están elegantemente encapsulados en Widgets GWT.
2)      Aunque GW T ayuda desmesuradamente a realizar Aplicación Web, con UIBinder podrás construir Web Sites  sin necesidad de encontrarte con los fastidiosos refrescos totales de página que se originan después de realizar un requerimiento al Servidor y  además como para completar la historia subir tu Web Site a AppEngine.


PROBLEMA 2:
Como podemos implementar los eventos  JavaScript del código bonito de mi Amigo en el UIBinder ?


SOLUCIÓN 2:
1)      Podemos dejar los el código JavaScript tal cual dentro de UIBinder  y a través de JSNI (JavaScript Native Interface) utilizarlo en GWT.
2)       Eliminar todo el código Javascript y enseguida crear los eventos a través de los Widgets GWT


Ejemplo:


Código fuente Menu.ui.xml  (UIBINDER)
<div id="menuv">
        <ul>

         <li><a href="#menuv"><g:Label ui:field="menu1" text="Importante" /></a></li>
         <li><a href="#menuv">Comentarios</a></li>
         <li><a href="#menuv">Noticias</a></li>
         <li><a href="#menuv">Contacto</a></li>
         <li><a href="#menuv">Acerca de nosotros</a></li>
        </ul>
</div>

Código fuente Menu.java  (UIBINDER)

@UiField Label menu1; 
@UiHandler("menu1")
void onClick(ClickEvent e) {
  Window.alert("saludo");
}

Como puedes ver solo estamos insertando el < tag > del Widget Label en el “Menu.ui.xml”  después  en el “Menu.java”  podemos referenciar al < tag > creado  que es un Widget Label y crear los eventos asociados respectivos.

 Ahora el Widget “Menu” que se creó a partir de código HTML y CSS lo podemos agregar al Widget “HTMLPanel” y visualizar su funcionamiento tal como se muestra en el código de abajo.


Código fuente WEB.java
HTMLPanel panelIzquierdo = new HTMLPanel("");

.

.

.

Menu menu=new Menu(panelDerecho);

panelIzquierdo.add(menu);/* Insertamos el Widget Menu*/



CONCLUSIÓN 2:
1)      Con UIBinder separamos el diseño de la lógica de programación incrementando significativamente la Productividad.

Para una mejor comprensión del asunto te invito a ver el siguiente video – tutorial.



viernes, septiembre 30, 2011

PROGRAMITA (SMARTGWT LGPL + PHP)

Estuve buscando viejos programitas y encontré  un programita bastante sencillo cuyo objetivo era registrar la cantidad  de votos procesados para las elecciones municipales y así determinar ,antes que el Jurado  Nacional de Elecciones diera el resultado oficial,  si el candidato había ganado (En mi País todavía no hay voto electrónico ).
Muestro el  video para que vean la sencillez del asunto, mencionar que se construyó con SmartGWT LGPL + PHP + MYSQL.  Espero que este post sea el reinicio de mi etapa  bloguera.