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