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í.