Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Interfaz de Usuario Sobre GWT - Programando La UI

    Cargado por

    Nicolás Bortolotti
    247 vistas6 páginas
    Escenario programático donde se aplican conceptos elementales de utilización de GWT para generar una UI básica.

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOC o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Escenario programático donde se aplican conceptos elementales de utilización de GWT para generar una UI básica.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOC o lea en línea desde Scribd
    Marcar por contenido inapropiado
    247 vistas6 páginas

    Interfaz de Usuario Sobre GWT - Programando La UI

    Cargado por

    Nicolás Bortolotti
    Escenario programático donde se aplican conceptos elementales de utilización de GWT para generar una UI básica.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOC o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 6

    Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.

    Programa
    Pregntale al experto de Cloud Interfaz de usuario sobre GWT - Programando la UI Introduccin Seleccionando los widgets a incluir en la UI Seleccionando los paneles y la organizacin de widgets en los mismos. Aadir la aplicacin de UI en la pgina principal Implementar los widgets y paneles Realizar la instancia de cada widget y panel Organizar los widgets en los paneles correspodientes Asociar el RootPanel al panel contenedor principal Trabajar con el foco de los widgets Prueba de la Aplicacin

    Pregntale al experto de Cloud


    Interfaz de usuario sobre GWT - Programando la UI
    En esta actividad vamos a trabajar en el desarrollo de la UI1 en GWT2 de una manera programtica, esto quiere decir que optaremos por una de las opciones que nos propone la tecnologa GWT para disear nuestra presentacin de la solucin.

    Introduccin Siempre que diseemos la UI en GWT tendremos que pensar en dos conceptos fundamentales para la organizacin de la presentacin: Widgets Paneles Los widgets definen las entradas y salidas de una aplicacin GWT, como ejemplo de este concepto se encuentran: Buttons (botones) Textbox (cajas de texto) Tree (arboles) RichTextArea (editores de texto)
    1 2

    User Interface Google Web Toolkit

    Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0 Los paneles contienen los widgets y otros paneles y se encargan de la organizacin en la presentacin, como ejemplo de este concepto se encuentran: DockPanels HorizontalPanel TabPanel RootPanel Para el desarrollo de nuestra actividad disearemos una UI que respecte el diseo de la Fig. 1.

    Segmento A Fig. 1 - Diseo de Interface

    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.

    Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0 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 VerticalPanel

    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;

    Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0 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(); 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.
    Organizar los widgets en los paneles correspodientes

    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.

    Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0


    Asociar el RootPanel al panel contenedor principal

    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); 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.

    Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0 Prueba de la Aplicacin Finalmente hemos terminado de configurar la UI, procederemos a visualizar los resultados.

    Fig 2 - Visualizacin final de la actividad Les dejo la implementacin en el siguiente vdeo. Ver Implementacin Espero les sea de utilidad

    También podría gustarte