sábado, 16 de junio de 2012

Curso II-Extensión de Widgets

Éste proyecto tiene como finalidad explicar la extensión de un widget, para ello iremos paso a paso explicando el proyecto con código comentado. 

El proyecto estará explicado bajo la arquitectura MVC, por ello considero conveniente empezar desde el modelo, luego la vista realizada con el framework ZK y después el controlador.

Siga cada uno de los pasos para y vaya integrando usted mismo el proyecto teniendo en cuenta las siguientes consideraciones.

Descargue el plugin de zk para netbeans en su versión 6.0.1CE desde el link.

Luego instale el plugin dentro de su versión de netbeans.
Si desea conocer los pasos para poder instalar el plugin. Visite la siguiente entrada del blog.
http://gerardomontilla.blogspot.com/2011/04/curso-de-java-ii-parte.html

Después de haber realizado estos pasos estableceremos la parte del modelo simulando una base de datos.


Luego de creadas éstas estructuras, empezaremos por la clase persona, que tiene el siguiente código:



Este es el código para copiar y pegar en el netbeans.

package wt.rocket.model.bean;


/**
 * Representa el Bean de Persona
 *
 * @author Waytech
 */
public class Persona {


  protected int id;
  protected String nombre;
  protected String email;
  protected String telefono;
  protected String direccionCorta;


  public Persona() {
    this.nombre = "Persona sin nommbre";
    this.email = "";
    this.telefono = "";
    this.direccionCorta = "";
  }
  
  public Persona(int id, String nombre, String email, String telefono, String direccionCorta) {
    this.id = id;
    this.nombre = nombre;
    this.email = email;
    this.telefono = telefono;
    this.direccionCorta = direccionCorta;
  }


  public int getId() {
    return id;
  }


  public void setId(int id) {
    this.id = id;
  }


  public String getDireccionCorta() {
    return direccionCorta;
  }


  public void setDireccionCorta(String direccionCorta) {
    this.direccionCorta = direccionCorta;
  }


  public String getEmail() {
    return email;
  }


  public void setEmail(String email) {
    this.email = email;
  }


  public String getNombre() {
    return nombre;
  }


  public void setNombre(String nombre) {
    this.nombre = nombre;
  }


  public String getTelefono() {
    return telefono;
  }


  public void setTelefono(String telefono) {
    this.telefono = telefono;
  }
}

Una vez creada la clase persona, iremos a la clase BD, que simula una base de datos:
Tiene el siguiente código:



Aquí está el código para copiar y pegar en el netbeans.

package wt.rocket.model.bd;


import java.util.ArrayList;
import wt.rocket.model.bean.Persona;


/**
 * Simulador de Base de Datos
 *
 * @author Waytech
 */
public class BD {


  private ArrayList<Persona> personas;


  public BD() {
    crearPersonas();
  }


  /**
   * busca persona por id
   *
   * @param id
   * @return
   */
  public Persona buscarPersona(int id) {
    if (id != 0) {
      for (Persona p : personas) {
        if (p.getId() == id) {
          return p;
        }
      }
    }
    return new Persona(); //persona vacía
  }


  private void crearPersonas() {
    personas = new ArrayList();
    personas.add(new Persona(1, "Gabriel Pérez", "gabrielperez@waytech.com.ve", "0426-5538165", "San Felipe - Yaracuy"));
    personas.add(new Persona(2, "Gerardo Montilla", "gerardomontilla@waytech.com.ve", "0416-1041108", "Cabudare - Lara"));
  }


  public ArrayList<Persona> getPersonas() {
    return personas;
  }
}


Hasta aquí vamos encaminados a realizar la extensión de un widget.

Iremos a crear la vista principal..

#El código para copiar es el siguiente, recuerda seguir la estructura de los paquetes de la imagen inicial.
<?page title="DESICA - Curso ZK 2.0" cacheable="true" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<!--
Proyecto ZK_ExtendWidget
Ilustra cómo agregar características a un widget via controlador.
Resumen:
Cambios en la vista: Ninguno.
Cambios en El controlador:
- usar elemento A para el nombre,
- usar subclase de A, (con herencia)
- programar click de elemento A
Cambios en el modelo.
-->
<zk xmlns="http://www.zkoss.org/2005/zul">
  <style src="css/estilo1.css"/>
  <window title="Extender un Widget">
    <include src="PersonaList.zul"/>
  </window>
</zk>

Posteriormente realizaremos un grid para mostrar la información:

PersonaList.zul

Fijaos que estamos utilizando el atributo apply para establecer el vinculo entre el controlador que explicaremos a continuación. El código para pegar en el netbeans es el siguiente:

<zk xmlns="http://www.zkoss.org/2005/zul">
  <div apply="wt.rocket.ctrl.CtrlPersonaList" width="680px">
    <label value="Personas" sclass="titulo_ventana"/>
    <div align="center">
      <grid id="grid" style="border:normal" mold="paging" pageSize="10">
        <columns sizable="true">
          <column label="#"         width="25px"/>
          <column label="Nombre"    width="150px"/>
          <column label="Teléfono"  width="100px"/>
          <column label="Email"     width="200px"/>
          <column label="Dirección"/>
        </columns>
      </grid>
    </div>
  </div>
</zk>


Tambien crearemos una vista para el resumen del usuario:

El código para copiar es el siguiente:

<zk xmlns="http://www.zkoss.org/2005/zul">
<!--  <div apply="wt.rocket.ctrl.CtrlLiderResumen" width="450px">-->
  <div width="450px">
    <label id="tituloVentana" value="Resumen" height="20px" sclass="titulo_ventana"/>
    <grid>
      <columns>
        <column width="80px"/>
        <column label=""/>
      </columns>
      <rows>
        <row>
          <label value="Nombre" sclass="etiqueta_campo"/>
          <label id="etqNombre" value=""/>
        </row>
        <row>        
          <label value="Email" sclass="etiqueta_campo"/>
          <label id="etqEmail" value=""/>
        </row> 
        <row>        
          <label value="Teléfono" sclass="etiqueta_campo"/>
          <label id="etqTelefono" value=""/>
        </row> 
        <row>        
          <label value="Dirección" sclass="etiqueta_campo"/>
          <label id="etqDireccion" value=""/>
        </row> 
      </rows>
    </grid>
  </div>
</zk>

Creamos el controlador para la vista PersonaList.zul





El código para copiar es el seguiente:

package wt.rocket.ctrl;

import java.util.ArrayList;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.*;
import wt.rocket.model.bd.BD;
import wt.rocket.model.bean.Persona;
import wt.rocket.widget.LinkNombrePersona;

/**
 *
 * @author WayTech
 */
public class CtrlPersonaList extends GenericForwardComposer {

  Grid grid;
  Label etqNro, etqEmail, etqTelefono, etqDireccion;
  //Para el nombre no usaremos un Label, sino un enlace (widget tipo A)
  LinkNombrePersona linkNombre;
  //datos:
  ArrayList lista;
  BD bd = new BD();

  @Override
  public void doAfterCompose(Component comp) throws Exception {
    super.doAfterCompose(comp);
    inicio();
  }

  void inicio() {
    buscarData();
    mostrarData();
  }

  /**
   * método que simula la búsqueda de la data
   */
  void buscarData() {
   lista = bd.getPersonas();
  }

  public void mostrarData() {
    if (lista == null) {
      System.out.println("CtrlPersonaList: Lista Vacía");
      //TODO: mostrar en la vista que no hay datos
      return;
    }
    ListModelList model = new ListModelList(lista);
    grid.setModel(model);
    grid.setRowRenderer(new RowRenderer() {

      public void render(Row row, Object data, int i) throws Exception {
        //se extrae la data
        Persona p = (Persona) data;

        //se crean los widgets con la data:
        etqNro = new Label("" + ++i);
        linkNombre = new LinkNombrePersona(p);
        etqTelefono = new Label(p.getTelefono());
        etqEmail = new Label(p.getEmail());
        etqDireccion = new Label(p.getDireccionCorta());
        
        //Enfoque B: no usado.
        /*
        linkNombre.setIdPersona(p.getId());
        linkNombre.setNombre(p.getNombre());
        linkNombre.setTelefono(p.getTelefono());
        linkNombre.setEmail(p.getEmail());
        linkNombre.setDireccionCorta(p.getDireccionCorta());
        */

        //se anexan los widgets a la fila
        etqNro.setParent(row);
        linkNombre.setParent(row);
        etqTelefono.setParent(row);
        etqEmail.setParent(row);
        etqDireccion.setParent(row);
      }
    });
  }
}

Luego realizamos la clase sesion usando la clase Sessions, ella permite establecer unas variables globales a través de toda la aplicación del sistema. Son de mucha utilidad cuando necesitamos realizar un pase de variables entre diferentes controladores.


El código para copiar es el siguiente:

package wt.rocket.general;

import org.zkoss.zk.ui.Sessions;

/**
 * Clase para gestionar variables de sesión
 * @author Waytech
 */
public class Sesion {

  /**
   * setea el valor de una variable de sesión
   */
  public static void setVariable(String nombre, Object valor) {
    Sessions.getCurrent().setAttribute(nombre, valor);
    System.out.println("SET variable de sesión [" + nombre + "]=" + valor);
  }

  /**
   * obtiene el valor de una variable de sesión
   * @return 
   */
  public static Object getVariable(String nombre) {
    System.out.println("GET variable sesión [" + nombre + "]=" + Sessions.getCurrent().getAttribute(nombre));
    return Sessions.getCurrent().getAttribute(nombre);
  }

  /**
   * muestra una variable de sesión via consola
   */
  public static void mostrarVariableSesion(Object claseInvocante, String metodo, String variable, Object valor) {
    System.out.println(claseInvocante.getClass() + "- " + metodo + ": SESION: " + variable + "=" + valor);
  }
 
}

La clase LinkNombrePersona tiene como objetivo establecer el uso compartido de la información en la extensión de widgets.



Aquí está el código para copiar:

package wt.rocket.widget;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zul.A;
import org.zkoss.zul.Messagebox;
import wt.rocket.general.Sesion;
import wt.rocket.model.bean.Persona;

/**
 * Extensión de Widget: Link
 *
 * @author Waytech
 */
public class LinkNombrePersona extends A {

  int idPersona;
  String nombre;
  protected String email;
  protected String telefono;
  protected String direccionCorta;
  Persona persona;

  /**
   * Crea el link con el nombre de la persona
   *
   * @param label el nombre de la persona
   */
  public LinkNombrePersona(String label) {
    //llamada al constructor de clase org.zkoss.zul.A
    super(label);
  }

  public LinkNombrePersona(Persona p) {
    super(p.getNombre());
    setPersona(p);
    programarEventoClick();
  }

  private void programarEventoClick() {
    this.addEventListener(Events.ON_CLICK, new EventListener() {

      public void onEvent(Event event) throws Exception {
        //debug:
        System.out.println("LinkPersona -> id = " + persona.getId());
        System.out.println("LinkPersona -> nombre = " + persona.getNombre());

        String mensaje = "Persona. Id: " + persona.getId()
                + ". Nombre: " + persona.getNombre()
                + ". Teléfono: " + persona.getTelefono()
                + ". Correo: " + persona.getEmail()
                + ". Dirección: " + persona.getDireccionCorta();

        Messagebox.show(mensaje, "Persona Resumen", Messagebox.OK, Messagebox.INFORMATION);
        //Para efectos prácticos se muestra la data en un Messagebox, pero se puede usar otra vista diseñada por el usuario,
        //a la cual se pasa la data usando variables de sesión
      }
    });
  }
  
   public void asignarTooltip(String texto) {
    this.setTooltiptext(texto);
  }

  public Persona getPersona() {
    return persona;
  }

  final public void setPersona(Persona persona) {
    this.persona = persona;
  }

  //OTRO ENFOQUE DEL METODO, USANDO EL ID
  private void programarEventoClick(final int id) {
    this.addEventListener(Events.ON_CLICK, new EventListener() {

      public void onEvent(Event event) throws Exception {
        //debug:
        System.out.println("LinkPersona -> id = " + id);
        System.out.println("LinkPersona -> nombre = " + nombre);

        String mensaje = "Persona. Id: " + id
                + ". Nombre: " + nombre
                + ". Teléfono: " + telefono
                + ". Correo: " + email
                + ". Dirección: " + direccionCorta;

        Messagebox.show(mensaje, "Persona Resumen", Messagebox.OK, Messagebox.INFORMATION);

        //set variables de sesión:
        Sesion.setVariable("id", id);

      }
    });
  }

  public void setIdPersona(int id) {
    this.idPersona = id;
    programarEventoClick(id);
    asignarTooltip("Ver detalles");
  } 
}



















Publicado por en
Etiquetas:

1 comentario:

Suscribirse a: Enviar comentarios (Atom)