Professional Documents
Culture Documents
1User
Interface Web Toolkit Parte del programa "Preguntale al experto de cloud" CC3
2Google
Segmento B
En la Fig. 1, en el segmento A, se puede observar un rootPanel que es quien contiene toda la aplicacin GWT y un verticalPanel para una organizacin vertical de los widgets, luego en el segmento B se visualiza un Textbox, un Button y un RichTextArea representados en el verticalPanel. En este caso particular ya conocemos el diseo porque es lo que propongo en la actividad pero les dejo los simples 4 pasos para trabajar el UI en GWT de forma programtica. Seleccionar los widgets a incluir en la UI. Seleccionar los paneles y su organizacin. Aadir la aplicacin diseada a la pgina principal. Implementar los widgets y paneles.
Seleccionando los widgets a incluir en la UI En esta actividad estaramos seleccionando los widgets a utilizar, segn nuestra actividad: Textbox Button RichTextArea Seleccionando los paneles y la organizacin de widgets en los mismos. En esta actividad estaramos analizando los paneles a utilizar y la organizacin de los mismos junto con los widgets, segn nuestra actividad: RootPanel Parte del programa "Preguntale al experto de cloud" CC3
Aadir la aplicacin de UI en la pgina principal En esta actividad vamos a trabajar dentro de la anatoma de una aplicacin GWT en el segmento de war para editar la pgina principal de la aplicacin. <html> <head> ... </head> <body> ... <h1>Demostracin UI Programtico</h1> <div id="interfaceDemo"></div> </body> </html> Code 1 - Pgina principal html de la aplicacin de ejemplo Implementar los widgets y paneles Esta actividad tiene varias tareas para realizarla de una forma controlada.
Realizar la instancia de cada widget y panel
En esta tarea debemos instanciar cada widget y panel, esta programacin la realizaremos en el entrypoint de la aplicacin como muestra el Code 2. package ar.com.comunidadxcloud.nbortolotti.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.RichTextArea; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; public class Siscti_Cloud_Demotracion implements EntryPoint { private VerticalPanel mainPanel = new VerticalPanel(); private TextBox nombreRegistro = new TextBox(); private Button aceptarRegistro = new Button(); private RichTextArea descripcionRegistro = new RichTextArea(); Parte del programa "Preguntale al experto de cloud" CC3
Nicols Bortolotti versin:1.1 public void onModuleLoad() { } } Code 2 - Instanciando cada uno de los widgets y panels. El Code 2 muestra el cdigo fuente de implementacin de la instanciancin de los widgets y panels segmentando el mismo en partes: Parte 1: declaracin del paquete donde se est realizando la actividad. (cliente) Parte 2: importaciones necesarias para la tarea, esto principalmente utiliza EntryPoint ya que la clase es de ese tipo y lo correspondiente a los widgets y panel. Parte 3: el segmento de cdigo sobre el EntryPoint, an no hemos programado nada en el evento onModuleLoad.
En esta tarea nos centramos en el evento onModuleLoad, para organizar los widgets en los paneles. Para el ejemplo de esta actividad solo tenemos un panel vertical. public void onModuleLoad() { //Ensamblando los widgets al panel vertical mainPanel.add(nombreRegistro); mainPanel.add(aceptarRegistro); mainPanel.add(descripcionRegistro); } Code 3 - Ensamblando los widgets al panel vertical.
En esta actividad se asocia el panel raz con el panel contenedor principal, para este caso el VerticalPanel que declaramos y ensamblamos en la tarea anterior. public void onModuleLoad() { //Ensamblando los widgets al panel vertical mainPanel.add(nombreRegistro); Parte del programa "Preguntale al experto de cloud" CC3
Nicols Bortolotti versin:1.1 mainPanel.add(aceptarRegistro); mainPanel.add(descripcionRegistro); RootPanel.get("interfaceDemo").add(mainPanel); } Code 4 - Asociacin del RootPanel al panel contenedor principal. Como muestra el Code 4, se asocia el VerticalPanel de nombre mainPanel al RootPanel solo debemos tener en cuenta que el nombre interfaceDemo llega de la declaracin utilizada en el html de la pgina principal.
Trabajar con el foco de los widgets
Esta tarea es opcional pero interesante de realizarla, en este caso le daremos el foco al textbox. public void onModuleLoad() { //Ensamblando los widgets al panel vertical mainPanel.add(nombreRegistro); mainPanel.add(aceptarRegistro); mainPanel.add(descripcionRegistro); RootPanel.get("interfaceDemo").add(mainPanel); nombreRegistro.setFocus(true); } Code 5 - Trabajo con el foco de los widgets Como muestra el Code 5, se utiliza el mtodo setFocus del widget que seleccionemos para focalizar. Prueba de la Aplicacin Finalmente hemos terminado de configurar la UI, procederemos a visualizar los resultados.
Fig 2 - Visualizacin final de la actividad - Pueden consultar el video de implementacin. - Puenden consultar la presentacin resumen.