Programando con Café

Programando con Café es el lugar de encuentro de todos sus tutoriales de programación que usted necesita en diferentes lenguajes de programación y base de datos

jueves, noviembre 25, 2010

Java - LLenar un JTable con ResultSet


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"

1. Entorno


  • JDK 6 Update 21
  • Netbeans 6.9.1
  • MySQL 5.1.

2. Introducción


Lo que se desea demostrar en este tutorial es como mostrar los datos de una consulta en un JTable. Haciendo uso de la clase ResultSetMetaData que nos brinda la información de una tabla de la base de datos y la clase ResultSet que nos devuelve la data producto de una consulta hacia la base de datos.

3. Desarrollo


3.1. Crear el proyecto

Primero debemos de crear un proyecto en Netbeans para eso nos vamos a "File->New Project" y seleccionamos la opción de crear un "Java Application"














Y como nombre al proyecto le ponemos "LlenarJTable"














Al proyecto debemos de agregar un formulario (JFrameForm) que lo llamaremos "frmLlenarJtable". Para hacemos clic derecho en el paquete que se llama "llenarjtable" de ahí seleccionamos New y elegimos "JFrame Form"

















3.2. Diseño del Formulario

Debemos de diseñar el siguiente formulario:


















Donde:

El JTextBox: Recibe el nombre de txtQuery
El JTable: Recibe el nombre de jtQuery
El JButton: Recibe el nombre de btnConsultar

3.3. Crear base de datos en MySQL

Debemos de crear una base de datos en MySQL. A la base de la llamaremos "bdproductos" y también crearemos una tabla que se llamara "producto"

















3.4. Codificando el action del botón "Consultar"

Debemos de codificar la acción del botón "Consultar" que va a llenar al JTable con la data producto de la consulta que vamos a hacer a la base de datos bdproductos que esta en MySQL. No olvidar agregar el conector al Netbeans para poder comunicarnos con MySQL.























Para ir a la Action del botón debemos hacer clic derecho en el botón de ahí seleccionamos Events, luego Action y finalmente ActionPerformed















Y luego dentro de ese evento ponemos el siguiente codigo

try {
 //Para establecer el modelo al JTable
 DefaultTableModel modelo = new DefaultTableModel();
 this.jtQuery.setModel(modelo);
 //Para conectarnos a nuestra base de datos
 DriverManager.registerDriver(new com.mysql.jdbc.Driver());
 Connection conexion = DriverManager.getConnection("jdbc:mysql://localhost/bdproductos", "usuario", "clave");
 //Para ejecutar la consulta
 Statement s = conexion.createStatement();
 //Ejecutamos la consulta que escribimos en la caja de texto
 //y los datos lo almacenamos en un ResultSet
 ResultSet rs = s.executeQuery(txtQuery.getText());
 //Obteniendo la informacion de las columnas que estan siendo consultadas
 ResultSetMetaData rsMd = rs.getMetaData();
 //La cantidad de columnas que tiene la consulta
 int cantidadColumnas = rsMd.getColumnCount();
 //Establecer como cabezeras el nombre de las colimnas
 for (int i = 1; i <= cantidadColumnas; i++) {
  modelo.addColumn(rsMd.getColumnLabel(i));
 }
 //Creando las filas para el JTable
 while (rs.next()) {
  Object[] fila = new Object[cantidadColumnas];
  for (int i = 0; i < cantidadColumnas; i++) {
    fila[i]=rs.getObject(i+1);
  }
  modelo.addRow(fila);
 }
 rs.close();
 conexion.close();
} catch (Exception ex) {
 ex.printStackTrace();
}

4. Ejemplo de la aplicación

Sin poner etiquetas a la consulta
































Con etiquetas a la consulta













VB.Net - Enviar correo


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"

Método utilizado para enviar un correo usando una cuenta de Gmail. En el arreglo StrPara en la primera posición se pone para quien se envía el correo y en las demás posiciones a las personas que se le quiere enviar el correo como dato oculto.

Public Shared Sub EnviarMail(ByVal StrPara() As String, ByVal StrAsunto As String, ByVal sAdjunto() As String, ByVal StrMensaje As String)
        Try
            Dim SMPT As New SmtpClient
            'variable tipo mensaje con parametros De: Para:
            Dim Msg As New MailMessage(New MailAddress("correo@gmail.com"), 
            New MailAddress(StrPara(0)))
            'Copia ocultas a las areas
            If StrPara.Length > 1 Then
                For i As Integer = 1 To StrPara.Length - 1
                    Msg.Bcc.Add(StrPara(i))
                Next
            End If
            'Asunto
            Msg.Subject = StrAsunto
            'Mensaje
            Msg.Body = StrMensaje
            'ADJUNTOS
            For Each FAdjunto As String In sAdjunto
                If Not FAdjunto = "" Then
                    'Objeto tipo attachment
                    Dim Adjunto As New Attachment(FAdjunto)
                    'agregar adjunto al objeto mensaje
                    Msg.Attachments.Add(Adjunto)
                End If
            Next
            'DATOS SMTP
            'Credenciales
            SMPT.Credentials = New System.Net.NetworkCredential("correo@gmail.com","clave")
            'Host, Puerto, autenticacion
            SMPT.Host = "smtp.gmail.com"
            SMPT.Port = "587"
            SMPT.EnableSsl = True
            SMPT.Timeout = 10
            'Enviar
            SMPT.Send(Msg)
        Catch ex As Exception
            
        End Try
End Sub

Ejemplo de uso del método en una aplicación:

VB.Net - Obtener Imagen desde BD SQL Server


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"

Método utilizado para obtener una imagen guardada en una tabla de una base de datos SQL Server, la columna donde se almacena la imagen se llama "foto" y si no tiene foto se carga una foto por defecto.


Try
    Dim dt As DataTable=New Empleado().BusEmpleado_Foto(CInt(row.Cells(0).Value))
    If dt.Rows(0)("Foto") IsNot DBNull.Value Then
        Dim bytBLOBData() As Byte = dt.Rows(0)("Foto")
        Dim stmBLOBData As New IO.MemoryStream(bytBLOBData)
        pbImagen.Image=System.Drawing.Image.FromStream(stmBLOBData)
    Else
        pbImagen.Image=System.Drawing.Image.FromFile(Utilitarios.direccionArchivos() 
        & "\Imagenes\noFoto_Hombre.jpg")
    End If
Catch ex As Exception
    pbImagen.Image = System.Drawing.Image.FromFile(Utilitarios.direccionArchivos() & 
    "\Imagenes\noFoto_Hombre.jpg")
End Try

Ejemplo del uso de la aplicación:

VB.Net - Encriptación de Datos MD5


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"


MD5 es uno de los algoritmos de reducción criptográficos diseñados por el profesor Ronald Rivest del MIT (Massachusetts Institute of Technology, Instituto Tecnológico de Massachusetts). Fue desarrollado en 1991 como reemplazo del algoritmo MD4 después de que Hans Dobbertin descubriese su debilidad. Anteriormente el algoritmo MD5 fue explicado con el lenguaje de programación Java, ahora lo explicare con el lenguaje de programación Visual Basic.Net

Private Enum AlgoritmoDeEncriptacion
        MD5 = 0
        SHA = 1
        TRIPLE_DESC
End Enum

Private Function Encriptar(ByVal valAlgoritmo As AlgoritmoDeEncriptacion, 
ByVal strCadena As String, Optional ByVal valIV As Byte = 0, 
Optional ByVal valKey As Byte = 0) As String
        Dim Codificacion As New UTF8Encoding
        Select Case valAlgoritmo
            Case AlgoritmoDeEncriptacion.MD5
                Dim md5Hasher As MD5 = MD5.Create()
                Dim data As Byte() = md5Hasher.ComputeHash(Encoding.Default.GetBytes(
                strCadena))
                Dim sBuilder As New StringBuilder()
                Dim i As Integer
                For i = 0 To data.Length - 1
                    sBuilder.Append(data(i).ToString("x2"))
                Next i
                Return sBuilder.ToString()
            Case AlgoritmoDeEncriptacion.SHA
                Dim data() As Byte = Codificacion.GetBytes(strCadena)
                Dim resultado() As Byte
                Dim sha As New SHA1CryptoServiceProvider()
                resultado = sha.ComputeHash(data)
                Dim sb As New StringBuilder
                For i As Integer = 0 To resultado.Length - 1
                    If resultado(i) < 16 Then
                        sb.Append("0")
                    End If
                    sb.Append(resultado(i).ToString("x"))
                Next
                Return sb.ToString() '<-
            Case AlgoritmoDeEncriptacion.TRIPLE_DESC
                Dim message As Byte() = Codificacion.GetBytes(strCadena)
                Dim criptoProvider As New TripleDESCryptoServiceProvider
                Dim criptoTransform As ICryptoTransform = criptoProvider.
                CreateEncryptor(criptoProvider.Key, criptoProvider.IV)
                Dim memorystream As New MemoryStream
                Dim cryptoStream As New CryptoStream(memorystream, criptoTransform, 
                CryptoStreamMode.Write)
                cryptoStream.FlushFinalBlock()
                Dim encriptado As Byte() = memorystream.ToArray
                Dim cadenaEncriptada = Codificacion.GetString(encriptado)
                Return cadenaEncriptada
            Case Else
                Return ""
        End Select
End Function

Importaciones utilizadas:
  • Imports System.Security.Cryptography

VB.Net - Obtener Semanas del Año


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"


Método utilizado para llenar un combo con las semanas que tiene el año. En ejemplo se aplica los meses del año 2010 y que tiene 51 semanas

Private Sub llenarComboFechas()
        dtSemanas = New DataTable("Semanas")
        dtSemanas.Columns.Add("Codigo", System.Type.GetType("System.Int32"))
        dtSemanas.Columns.Add("Nombre", System.Type.GetType("System.String"))
        dtSemanas.Columns.Add("Inicio", System.Type.GetType("System.DateTime"))
        dtSemanas.Columns.Add("Fin", System.Type.GetType("System.DateTime"))
        Dim fechaRef As New Date(2010, 1, 1)
        While fechaRef.DayOfWeek <> DayOfWeek.Monday
            fechaRef = fechaRef.AddDays(1)
        End While
        For i As Integer = 0 To 51
            Dim r As DataRow = dtSemanas.NewRow
            r("Codigo") = i + 1
            r("Nombre") = fechaRef.AddDays(i * 7) & " al " & fechaRef.AddDays((i * 7) + 5)
            r("Inicio") = fechaRef.AddDays(i * 7)
            r("Fin") = fechaRef.AddDays((i * 7) + 5)
            dtSemanas.Rows.Add(r)
        Next
        Me.cboSemana.DataSource = dtSemanas
        Me.cboSemana.DataTextField = "Nombre"
        Me.cboSemana.DataValueField = "Codigo"
        Me.cboSemana.DataBind()
End Sub



domingo, noviembre 21, 2010

Java - Google App Engine con Java


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"


1. Entorno


  • JDK 6 Update 21
  • Eclipse Helios
  • GWT y Google App Engine para Eclipse Helios (Google Update Site for Eclipse 3.6 - http://dl.google.com/eclipse/plugin/3.6)

2. Introducción



Google App Engine se permite ejecutar aplicaciones web en la infraestructura de Google. Las aplicaciones App Engine son fáciles de crear, mantener y actualizar al ir aumentando el tráfico y las necesidades de almacenamiento de datos. No se necesita utilizar ningún servidor: sólo se tiene que subir tu aplicación para que los usuarios puedan empezar a utilizarla.
La ventaja de App Engine es que hay una zona de pruebas que permite ejecutar las aplicaciones haciendo uso del lenguaje Java y Google App Engine y su principal ventaja es que las aplicaciones se ejecutan en un entorno seguro que proporciona acceso limitado al sistema operativo subyacente. Estas limitaciones permiten a App Engine distribuir solicitudes web de la aplicación en varios servidores e iniciar y detener los servidores según las demandas del tráfico. La zona de pruebas aísla la aplicación en su propio entorno seguro de confianza, totalmente independiente del hardware, el sistema operativo y la ubicación física del servidor web.

3. Conceptos Previos


3.1. Almacén de datos


App Engine proporciona un potente servicio de almacenamiento de datos distribuido que incluye un motor de
búsqueda y transacciones. A medida que el servidor web distribuido crece con el tráfico, el almacén de datos
distribuido crece con los datos. Las entidades del almacén de datos carecen de esquema. El código de aplicación se encarga de proporcionar y de respetar la estructura de las entidades de datos. Las interfaces JDO/JPA incluyen características para aplicar y respetar la estructura de la aplicación.

3.2. JPA


Java Persistence API, más conocida por su sigla JPA, es la API de persistencia desarrollada para la plataforma Java EE e incluida en el estándar EJB3. Esta API busca unificar la manera en que funcionan las utilidades que proveen un mapeo objeto-relacional. El objetivo que persigue el diseño de esta API es no perder las ventajas de la orientación a objetos al interactuar con una base de datos, como sí pasaba con EJB2, y permitir usar objetos regulares (conocidos como POJOs).

3.3. JDO


Objetos de datos Java (JDO) es una interfaz estándar para almacenar objetos que contienen datos en una base de datos. El estándar define interfaces para la anotación de objetos Java, la recuperación de objetos a través de consultas y la interacción con una base de datos a través de transacciones. Una aplicación que utiliza la interfaz JDO puede funcionar con diferentes tipos de bases de datos sin utilizar un código específico de bases de datos, incluidas bases de datos relacionales, bases de datos jerárquicas y bases de datos de objetos. Al igual que con otros estándares de interfaz, JDO permite que las aplicación migre fácilmente entre diferentes soluciones de almacenamiento.

4. Desarrollo


Lo que se piensa desarrollar es un ejemplo de registro de datos de un tutorial junto con su autor y mostrar la información de todos los tutoriales y de los tutoriales por autor. Para ejemplo se utilizara puros JSP, aunque también la parte de diseño lo podrían hacer usando GWT, como se explico en el Post anterior.

4.1. Crear el proyecto en Eclipse Helios

Debemos de crear un proyecto del tipo Aplicación Web para Google App Engine, es de la misma forma como se crea un proyecto para GWT. Para eso se debe de primero tener instalado GWT en Eclipse para que baje todas las librerías necesarias para Google App Engine.


















Como nombre al proyecto le vamos a poner "GAEConEclipseServlet" y dejamos activados el check box de GOOGLE APP ENGINE, y desactivamos el de GWT porque no lo vamos a usar para el ejemplo























Y nos crea una estructura de proyecto como la que se mostrara en la siguiente figura. La clase "GAEConEclipseServlet.java.java"  es el Servlet encargado de controlar las peticiones desde la parte Web. A través de peticiones del tipos POST y GET.




















4.2. Clase Tutorial

Crearemos una clase "Tutorial" que va a ser la clase encargado de manejar la persistencia de los datos. Esta clase tendrá las variables ID, autor, tutorial y fecha. Para eso hacemos clic derecho en el paquete "com.hwongu" y creamos la clase

















La clase "Tutorial" tendra el siguiente codigo:

package com.hwongu;

import java.util.Date;
import javax.jdo.annotations.*;

@PersistenceCapable (identityType=IdentityType.APPLICATION)
public class Tutorial {
 //Va a ser la clave primaria de la clase Tutorial
 @PrimaryKey
 //Para que genere el codigo de forma automatica
 @Persistent(valueStrategy=IdGeneratorStrategy.IDENTITY)
 private Long id;
 //Creamos las variables persistence para insertar los datos
 @Persistent 
 private String autor;
 @Persistent 
 private String tutorial;
 @Persistent 
 private Date fecha;
 //Constructor de la clase
 public Tutorial(String autor, String tutorial){
  this.autor = autor;
  this.tutorial = tutorial;
  this.fecha = new Date();
 }
 //Metodos get y set
 public String getAutor() {
  return autor;
 }
 public void setAutor(String autor) {
  this.autor = autor;
 }
 public String getTutorial() {
  return tutorial;
 }
 public void setTutorial(String tutorial) {
  this.tutorial = tutorial;
 }
 public Date getFecha() {
  return fecha;
 }
 public void setFecha(Date fecha) {
  this.fecha = fecha;
 }
 public Long getId() {
  return id;
 }
 public void setId(Long id) {
  this.id = id;
 }
}

4.3. Clase PMF

De ahí debemos de crear una clase "PMF" que va a tener la variable encargada de controlar las peticiones de registros y búsqueda de la información almacenada.



















La clase tendrá el siguiente código fuente:

package com.hwongu;

import javax.jdo.JDOHelper;
import javax.jdo.PersistenceManagerFactory;

public final class PMF {
 //Variable encargada de controlar las peticiones
 private static final PersistenceManagerFactory instance =
   JDOHelper.getPersistenceManagerFactory("transactions-optional");
 //Para que no puedan instanciar la clase
 private PMF(){}
 //Retorna la instancia encargada de controlar las peticiones
 public static PersistenceManagerFactory get(){
    return instance;
 }
}

4.4. Clase TutorialesUtil

Después creamos una clase "TutorialesUtil" que va ser la clase que tendrá los métodos para registrar y hacer consulta de los datos, para hacer consulta de datos usando JDO se utiliza el lenguaje JDOQL, que es el query language para consultar datos persistentes.



















La clase tendrá el siguiente código:

package com.hwongu;

import java.util.List;
import javax.jdo.PersistenceManager;
import javax.jdo.Query;

public class TutorialUtil {
//Cuantos datos mostrara en la consulta
private final static int FETCH_MAX_RESULTS = 10;
//Metodo para insertar un dato
public static void insertar(String autorName, String tutorialName){
 //LLamamos a la clase que tendra la persistencia
 final PersistenceManager pm = PMF.get().getPersistenceManager();
 //Creamos nuestra variable del tipo tutorial
 final Tutorial tutorial = new Tutorial(autorName, tutorialName);
 //Y hacemos el dato que sea persistente
 pm.makePersistent(tutorial);
}
//Para consultar los tutoriales por autor
@SuppressWarnings("unchecked")
public static List<Tutorial> tutorialesPorAutor(String autor){
 final PersistenceManager pm = PMF.get().getPersistenceManager();
 String query = " select from " +
 Tutorial.class.getName() +
 " where autor == '" +
 autor + "'";
 List<Tutorial> tutorials = (List<Tutorial>)pm.newQuery(query).execute();
 return(tutorials);
}
//Para consulta todos los tutoriales
@SuppressWarnings("unchecked")
public static List<Tutorial> todosLosTutoriales(){
 final PersistenceManager pm = PMF.get().getPersistenceManager();
 final Query query = pm.newQuery(Tutorial.class);
 query.setRange(0, FETCH_MAX_RESULTS);
 return (List<Tutorial>) query.execute();
}

}

4.5. Clase GAEConEclipseServlet

Cuando ya terminamos de configurar nuestras clases tenemos que codificar el servlet que nos creo el eclipse ponemos lo siguiente (En el servlet "GAEConEclipseServlet")

package com.hwongu;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
import javax.servlet.RequestDispatcher;

@SuppressWarnings("serial")
public class GAEConEclipseServlet extends HttpServlet {
    
 protected void processRequest(HttpServletRequest request, 
         HttpServletResponse response)
         throws ServletException, IOException {
 
  response.setContentType("text/html;charset=UTF-8");
  PrintWriter out = response.getWriter();
  try {
   if(request.getParameter("action").equals("create")){
     String autor = request.getParameter("autor");
     String tutorial = request.getParameter("tutorial");
     TutorialUtil.insertar(autor, tutorial);
     request.setAttribute("autor", autor);
     List<Tutorial> tutorials = TutorialUtil.tutorialesPorAutor(autor);
     request.setAttribute("tutorials", tutorials);
     RequestDispatcher rd =
         getServletContext().getRequestDispatcher("/tutorialShow.jsp");
     rd.forward(request, response);
   }else if(request.getParameter("action").equals("show")){
     List<Tutorial> tutorials = TutorialUtil.todosLosTutoriales();
     request.setAttribute("showFullTutorials", tutorials);
     RequestDispatcher rd =  
             getServletContext().getRequestDispatcher("/tutorialShowFull.jsp");
     rd.forward(request, response);
   }
  } finally { 
    out.close();
  }
 } 

 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
     processRequest(request, response);
 } 
 
 @Override
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
     processRequest(request, response);
 }
 
}

4.6. Paginas JSP

Y con eso terminamos de configurar nuestras clases que serán encargadas de registrar y buscar datos de los tutoriales y a la vez el controlador encargado de recibir las peticiones de las paginas JSP que vamos a crear. Las paginas jsp que crearemos serán los siguientes

index.jsp --> Que sera como un menú de opciones para realizar los procesos de registrar tutoriales y mostrar todos los tutoriales
tutorialCreate.jsp --> Pagina encargada para registrar los datos de los tutoriales
tutorialShow.jsp --> Muestra un tutorial por autor
tutorialShowFull.jsp --> Muestra todos los tutoriales

4.6.1. index.jsp


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Pagina de Inicio</title>
    </head>
    <body>
        <h1>Menu de Opciones</h1>
        <a href="/tutorialCreate.jsp">Crear Tutorial</a><br>
        <a href="/tutorial?action=show">Listar Tutorial</a>
    </body>
</html>

4.6.2. tutorialCreate.jsp


<%@page import="java.util.Date" %>
<%@page import="java.text.SimpleDateFormat" %>
<%
SimpleDateFormat sdf =("dd/MM/yyyy");String date = sdf.format(new Date());
%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>.:: Crear Tutorial::. </title>
 </head>
 <span>
  <a href="/tutorialCreate.jsp">Registrar Tutorial</a><br>
  <a href="/index.jsp">Ir al indice</a><br>
 </span>
 <span ><h1>Crear a Tutorial</h1></span>
  <form action="/tutorial" method="get">
  <table border="0">
   <tr>
       <td>Autor:</td>
       <td><input type="text" name="autor" /></td>
      </tr>
      <tr>
       <td>Tutorial:</td>
       <td><input type="text" name="tutorial" /></td>
      </tr>
      <tr>
       <td>Fecha:</td>
       <td><input readonly type="text" name="fecha" value="<%=date%>" /> </td>
      </tr>
      <tr>
       <td colspan="2" bgcolor="#ffffff" align="left">
       <input type="hidden" name="action" value="create"/>
       <input type="submit" value="Registrar" >
       </td>
      </tr>
   </table>
   </form>
 </body>
</html>

4.6.3. tutorialShow.jsp


<%@page import="com.hwongu.*" %>
<%@page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat" %>

<%
List<Tutorial> tutorials =("tutorials");
String autor =("autor");
SimpleDateFormat sdf = new SimpleDateFormat();
%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>.::Tutoriales por autor: <%=autor%> ::.</title>
 </head>
 <body>
  <span>
   <a href="/tutorialCreate.jsp">Registrar Tutorial</a><br>
   <a href="/index.jsp">Ir al indice</a>
  </span>
  <h1>Tutoriales del autor: <%=autor%></h1>
  <table border="1">
   <thead>
    <tr>
     <th>Id</th>
     <th>Tutorial</th>
     <th>Fecha</th>
    </tr>
   </thead>
  <tbody>
<%
 for (int idx = 0; idx < tutorials.size(); idx++) {
     Tutorial t = (Tutorial)tutorials.get(idx);
%>
   <tr>
    <td><%= t.getId() %></td>
    <td><%= t.getTutorial() %></td>
    <td><%= sdf.format(t.getFecha()) %></td>
   </tr>

<%}%>
  </tbody>
 </table>
 </body>
</html>

4.6.4. tutorialShowFull.jsp


<%@page import="com.hwongu.*" %>
<%@page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat" %>

<%
List<Tutorial> tutorials =("showFullTutorials");
SimpleDateFormat sdf = new SimpleDateFormat();
%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>.:: Todos los Tutoriales ::.</title>
 </head>
 <body>
  <span>
   <a href="/tutorialCreate.jsp">Registrar Tutorial</a><br>
   <a href="/index.jsp">Ir al indice</a>
  </span>
  <table border="1">
   <thead>
    <tr>
     <th>Id</th>
     <th>Autor</th>
     <th>Tutorial</th>
     <th>Fecha</th>
    </tr>
   </thead>
   <tbody>
<%
 for (int idx = 0; idx < tutorials.size(); idx++) {
     Tutorial t = (Tutorial)tutorials.get(idx);
%>
    <tr>
     <td><%= t.getId() %></td>
     <td><%= t.getAutor() %></td>
     <td><%= t.getTutorial() %></td>
     <td><%= sdf.format(t.getFecha()) %></td>
    </tr>

<%}%>
   </tbody>
  </table>
 </body>
</html>

4.6.5. Archivo web.xml


<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <servlet>
     <servlet-name>tutorial</servlet-name>
     <servlet-class>com.hwongu.GAEConEclipseServlet</servlet-class>
  </servlet>
  <servlet-mapping>
     <servlet-name>tutorial</servlet-name>
     <url-pattern>/tutorial</url-pattern>
  </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
  </session-config>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

5. Ejemplo de la Aplicación


Para ejecutar la aplicación debemos de hacerlo como debug para hacemos hacemos clic derecho en el proyecto, luego "Debug As" y de ahi seleccionamos "Web Application"























De ahí nos sale en la parte inferior la dirección electrónica que debemos de copiar y pegar en nuestro browser para ejecutar la aplicación










5.1. Menú de Opciones 


















5.2. Crear Tutorial














5.3. Tutoriales por Autor












5.4. Todos los Tutoriales

domingo, noviembre 14, 2010

Java - Google Web Toolkit con Java - GWT con Java


"Si usa algún código del siguiente tutorial, den el icono de ME GUSTA del Facebook que se encuentra en su mano derecha, para que se vuelva Seguidor del Blog y también comentenos que tal les pareció el tutorial"


1. Entorno


  • JDK 6 Update 21
  • Eclipse Helios
  • GWT para Eclipse Helios (Google Update Site for Eclipse 3.6 - http://dl.google.com/eclipse/plugin/3.6)

2. Introducción


Actualmente, la creación de aplicaciones web resulta un proceso pesado y propenso a errores. Los desarrolladores pueden pasar el 90% de su tiempo estudiando las peculiaridades de los navegadores. Por otra parte, la creación, la reutilización y el mantenimiento de una gran cantidad de componentes AJAX y bases de código JavaScript pueden ser tareas complejas y delicadas.
GWT permite crear aplicaciones AJAX en el lenguaje de programación Java que son compiladas posteriormente por GWT en código JavaScript ejecutable optimizado que funciona automáticamente en los principales navegadores.

3. Desarrollo


Lo que se piensa desarrollar es un ejemplo de tablas dinámicas y combo anidados que siempre usamos en nuestras aplicaciones sin necesidad de tener que refrescar toda la pagina. No vamos a usar a Base de Datos para el ejemplo, solo lo vamos a manejar con array de forma temporal la información.

3.1. Crear proyecto en Eclipse Helios

Debemos de crear un proyecto del tipo Aplicación Web para GWT. Para eso se debe de primero tener instalado GWT en Eclipse.


















Como nombre al proyecto le vamos a poner "GWTConEclipse" y dejamos activados los checkbox para usar GWT y GOOGLE APP ENGINE, aunque este ultimo no lo utilizaremos, pero en ciertas aplicaciones GWT se necesita el Google App.



















Y nos crea una estructura de proyecto como la que se mostrara en la siguiente figura. La clase "GWTConEclipse.java"  es el Servlet encargado de controlar las peticiones desde la parte Web del GWT. Es justo en este archivo donde vamos a desarrollar nuestro ejemplo



















El formulario que deseamos desarrollar es el que se mostrara a continuación. El ejemplo trata de hacer un pantalla para el Mantenimiento(Registro, Actualización, Eliminación y Búsqueda) de los datos de un Alumno. El combo de la Escuela se carga en función de la Facultad que ustedes seleccionan, estamos desarrollando un combo anidado usando GWT.














3.2. Crear clase Alumno

Primero debemos de crear (agregar) una clase Alumno que va  a tener toda la información del alumno que vamos a registrar dentro del paquete "com.hwongu.client"

package com.hwongu.client;

public class Alumno {

 private int codigo;
 private String nombre;
 private String apellido;
 private String facultad;
 private String escuela;
 private String categoria;
 private double monto;
    
 public Alumno(){
    this.codigo=0;
    this.nombre="";
    this.apellido="";
    this.facultad="";
    this.escuela="";
    this.categoria="";
    this.monto=0;
 }
    
 public Alumno(int codigo, 
    String nombre, 
    String apellido, 
    String facultad, 
    String escuela, 
    String categoria, 
    double monto) {
    this.codigo=codigo;
    this.nombre = nombre;
    this.apellido = apellido;
    this.facultad = facultad;
    this.escuela = escuela;
    this.categoria = categoria;
    this.monto = monto;
 }
 public String toString(){
      return apellido + ", "+ nombre; 
 }
 public int getCodigo(){
    return codigo;
 }
 public void setCodigo(int codigo){
    this.codigo=codigo;
 }
 public String getNombre() {
    return nombre;
 }
 public void setNombre(String nombre) {
    this.nombre = nombre;
 }
 public String getApellido() {
    return apellido;
 }
 public void setApellido(String apellido) {
    this.apellido = apellido;
 }
 public String getFacultad() {
    return facultad;
 }
 public void setFacultad(String facultad) {
    this.facultad = facultad;
 }
 public String getEscuela() {
    return escuela;
 }
 public void setEscuela(String escuela) {
    this.escuela = escuela;
 }
 public String getCategoria() {
     return categoria;
 }
 public void setCategoria(String categoria) {
    this.categoria = categoria;
 }
 public double getMonto() {
    return monto;
 }
 public void setMonto(double monto) {
     this.monto = monto;
 }
}

3.3. Agregando los componentes para el diseño

Lo primero que se debe de hacer es comenzar a declarar los componentes (variables) que tendra el formulario en la clase "GWTConEclipse.java", los componentes que vamos a utilizar son las siguientes:

private VerticalPanel principal = new VerticalPanel();
private Label lblNombre = new Label("Nombre: ");
private TextBox txtNombre = new TextBox();
private Label lblApellido = new Label("Apellido: ");
private TextBox txtApellido = new TextBox();
private Label lblFacultad = new Label("Facultad: ");
private ListBox cboFacultad = new ListBox();
private Label lblEscuela = new Label("Escuela: ");
private ListBox cboEscuela = new ListBox();
private Label lblCategoria = new Label("Categoria: ");
private RadioButton rbtA = new RadioButton("categoria", "Categoria A");
private RadioButton rbtB = new RadioButton("categoria", "Categoria B");
private RadioButton rbtC = new RadioButton("categoria", "Categoria C");
private Button btnAgregar = new Button("Agregar");
private Label lblTiempo = new Label();
// Componente tipo tabla que nos permite agregar componentes
// le decimos el numero de filas y de columnas que va a tener
private Grid gridPrincipal = new Grid(6, 2);
// Tabla principal
private FlexTable tablaAlumnos = new FlexTable();
// Array con datos
private ArrayList<Alumno> listaAlumnos = new ArrayList<Alumno>();
//Indice para saber si se esta editando
private int indiceEditar = -1;
//Codigo del alumno que registro
private int codigo=1;

El codigo anterior lo ponemos justamente después de la declaración de la clase. Despues debemos de crear un metodo para llenar las Facultades de la escuela.

// Llena el combo de facultades
private void llenarFacultades() {
  this.cboFacultad.addItem("Ingenieria");
  this.cboFacultad.addItem("Ciencias Agrarias");
  this.cboFacultad.addItem("Arquitectura Urbanismo y Artes");
  this.cboFacultad.addItem("Ciencias de la Comunicacion");
  this.cboFacultad.addItem("Educacion y Humanidades");
  this.cboFacultad.addItem("Derecho y Ciencias Politicas");
  this.cboFacultad.addItem("Medicina Humana");
  this.cboFacultad.addItem("Ciencia de la Salud");
  this.cboFacultad.addItem("Ciencias Economicas");
}

Creamos un método para que llenen el combo de Escuela en función a  la Facultad que hemos seleccionado

// Llena el combo de Escuelas en funcion de la Facultad
private void llenarEscuelas() {
  //Limpiamos el combo de la escuela
  this.cboEscuela.clear();
  switch (cboFacultad.getSelectedIndex()) {
  case 0:
    this.cboEscuela.addItem("Ingenieria de Computacion y Sistemas");
    this.cboEscuela.addItem("Ingenieria de Software");
    this.cboEscuela.addItem("Ingenieria de Telecomunicaciones y Redes");
    this.cboEscuela.addItem("Ingenieria Civil");
    this.cboEscuela.addItem("Ingenieria Electronica");
    break;
  case 1:
    this.cboEscuela.addItem("Ingenieria Agronoma");
    this.cboEscuela.addItem("Veterinaria");
    this.cboEscuela.addItem("Industrias Alimentarias");
    break;
  case 2:
    this.cboEscuela.addItem("Arquitectura");
    break;
  case 3:
    this.cboEscuela.addItem("Ciencia de la Comunicacion");
    break;
  case 4:
    this.cboEscuela.addItem("Educacion Inicial");
    this.cboEscuela.addItem("Educacion Primaria");
    break;
  case 5:
    this.cboEscuela.addItem("Derecho");
    break;
  case 6:
    this.cboEscuela.addItem("Medicina");
    this.cboEscuela.addItem("Psicologia");
    this.cboEscuela.addItem("Estomatologia");
    break;
  case 7:
    this.cboEscuela.addItem("Enfermeria");
    break;
  case 8:
    this.cboEscuela.addItem("Contabilidad");
    this.cboEscuela.addItem("Administracion");
    this.cboEscuela.addItem("Economia y Finanzas");
    break;
  }
}

Despues debemos de crear un método para limpiar las cajas de textos, los combo box cada vez que se haga una actualización o un registro.

//Limpia los datos del formulario
private void limpiar() {
  this.txtNombre.setText("");
  this.txtApellido.setText("");
  this.cboFacultad.setSelectedIndex(0);
  this.llenarEscuelas();
  this.rbtA.setValue(true);
  this.indiceEditar = -1;
}

Luego hacemos un método para seleccionar ciertos elementos del combo cuando deseamos editar la información de un alumno.

//Selecciona la facultad cuando lo vamos editar
//Men=La Facultad seleccionada
private void seleccionarFacultad(String men) {
  for (int i = 0; i < this.cboFacultad.getItemCount(); i++) {
   if (this.cboFacultad.getItemText(i).equals(men)) {
     this.cboFacultad.setSelectedIndex(i);
   }
  }
}
//Seleccion la escuela cuando lo vamos editar
//Men=La Escuela seleccionada
private void seleccionarEscuela(String men) {
  this.llenarEscuelas();
  for (int i = 0; i < this.cboEscuela.getItemCount(); i++) {
   if (this.cboEscuela.getItemText(i).equals(men)) {
     this.cboEscuela.setSelectedIndex(i);
   }
  }
}

Y debemos de crear un método para poder registrar y actualizar un Alumno dentro de nuestro array que actua como nuestra base de datos temporal.

//Agregar un alumno a la tabla o modificarlo
private void agregarAlumno() {
 String nombre = this.txtNombre.getText().toUpperCase().trim();
 String apellido = this.txtApellido.getText().toUpperCase().trim();
 String facultad = this.cboFacultad.getItemText(this.cboFacultad.getSelectedIndex());
 String escuela = this.cboEscuela.getItemText(this.cboEscuela.getSelectedIndex());
 // Que solo permita letras y 20 caracteres
 if (!nombre.matches("^[A-Z\\.\\ ]{1,20}$")) {
  // Manda mensaje alerta tipo JavaScrip
  Window.alert("Nombre no valido");
  this.txtNombre.selectAll();
  // Salimos del metodo
  return;
 }
 if (!apellido.matches("^[A-Z\\.\\ ]{1,20}$")) {
   // Manda mensaje alerta tipo JavaScrip
   Window.alert("Apellido no valido");
   this.txtApellido.selectAll();
   return;
 }
 String categoria;
 double monto;
 if (this.rbtA.getValue()) {
  categoria = this.rbtA.getText();
  monto = 440;
 } else if (this.rbtB.getValue()) {
  categoria = this.rbtB.getText();
  monto = 400;
 } else {
  categoria = this.rbtC.getText();
  monto = 330;
 }
 //Creamos la clase que vamos a registrar o a modificar
 final Alumno alu = new Alumno(codigo, 
        nombre, 
    apellido, 
    facultad, 
    escuela, 
    categoria, 
    monto);
 // 1. Obtener nº de filas
 int filas = this.tablaAlumnos.getRowCount();
 // 2. Agrego a mi array el elemento
 if (this.indiceEditar == -1) {
  //Si indice = -1 es porque vamos a registrar un elemento a mi array
  this.listaAlumnos.add(alu);
 } else {
  //Si indice es diferente es poque estamos editando la información
  this.listaAlumnos.set(this.indiceEditar, alu);
 }
 if (this.indiceEditar == -1) {
  // 3. Agrego a mi tabla
  this.tablaAlumnos.setText(filas, 0, String.valueOf(this.codigo));
  this.codigo++;
  this.tablaAlumnos.setText(filas, 1, alu.toString());
  this.tablaAlumnos.setText(filas, 2, facultad);
  this.tablaAlumnos.setText(filas, 3, escuela);
  this.tablaAlumnos.setText(filas, 4, categoria);
  this.tablaAlumnos.setText(filas, 5, String.valueOf(monto));
  //En el constructor se pone la ubicación de la imagen que esta
  //en la carpeta "images"
  PushButton btnEliminar = new PushButton(new Image("images/eliminar.png"));
  //El tamaño del boton
  btnEliminar.setWidth("16px");
  btnEliminar.setHeight("16px");
  btnEliminar.addClickHandler(new ClickHandler() {
   //Agregamos el evento clic al boton eliminar, que eliminara un elemento
   //de la tabla
   @Override
   public void onClick(ClickEvent event) {
    int filaDel = listaAlumnos.indexOf(alu);
    listaAlumnos.remove(filaDel);
    tablaAlumnos.removeRow(filaDel + 1);
   }
  });
  this.tablaAlumnos.setWidget(filas, 6, btnEliminar);
  PushButton btnEditar = new PushButton(new Image("images/editar.png"));
  btnEditar.setWidth("16px");
  btnEditar.setHeight("16px");
  btnEditar.addClickHandler(new ClickHandler() {
   //Agregamos el evento clic al boton modificar, que mostrara los datos
   //del alumno seleccionado en las cajas de texto y combos
   @Override
   public void onClick(ClickEvent event) {
    indiceEditar=listaAlumnos.indexOf(alu);
    Alumno aluTemp = listaAlumnos.get(indiceEditar);
    txtNombre.setText(aluTemp.getNombre());
    txtApellido.setText(aluTemp.getApellido());
    seleccionarFacultad(aluTemp.getFacultad());
    seleccionarEscuela(aluTemp.getEscuela());
    if (aluTemp.getCategoria().equals(rbtA.getText())) {
     rbtA.setValue(true);
    } else if (aluTemp.getCategoria().equals(rbtB.getText())) {
     rbtB.setValue(true);
    } else {
     rbtC.setValue(true);
    }
   }
  });
  this.tablaAlumnos.setWidget(filas, 7, btnEditar);
  // 4. Formatos, agregamos formatos css, que se encuentra
  // En el archivo GWTConEclipse.css
  this.tablaAlumnos.getCellFormatter().addStyleName(filas, 
        5,"columnaNumerica");
  this.tablaAlumnos.getCellFormatter().addStyleName(filas, 
        6,"columnaBoton");
  this.tablaAlumnos.getCellFormatter().addStyleName(filas, 
        7,"columnaBoton");
 }else{
  //Estamos editando la información del alumno o actualizando la 
  //información del mismo
  this.tablaAlumnos.setText(this.indiceEditar+1, 1, alu.toString());
  this.tablaAlumnos.setText(this.indiceEditar+1, 2, facultad);
  this.tablaAlumnos.setText(this.indiceEditar+1, 3, escuela);
  this.tablaAlumnos.setText(this.indiceEditar+1, 4, categoria);
  this.tablaAlumnos.setText(this.indiceEditar+1, 5, String.valueOf(monto));
 }
 this.limpiar();
}

Y finalmente creamos un método para poder cargar los componentes de la pagina web cuando se cargue el proyecto.

public void onModuleLoad() {
 // Fila del Nombre
 this.gridPrincipal.setWidget(0, 0, this.lblNombre);
 this.gridPrincipal.setWidget(0, 1, this.txtNombre);
 // Fila del Apellido
 this.gridPrincipal.setWidget(1, 0, this.lblApellido);
 this.gridPrincipal.setWidget(1, 1, this.txtApellido);
 // Fila de la Facultad
 this.gridPrincipal.setWidget(2, 0, this.lblFacultad);
 this.gridPrincipal.setWidget(2, 1, this.cboFacultad);
 this.llenarFacultades();
 this.cboFacultad.addChangeHandler(new ChangeHandler() {
  public void onChange(ChangeEvent event) {
    llenarEscuelas();
  }
 });
 this.cboFacultad.setSelectedIndex(0);
 // Fila de la Escuela
 this.gridPrincipal.setWidget(3, 0, this.lblEscuela);
 this.gridPrincipal.setWidget(3, 1, this.cboEscuela);
 this.llenarEscuelas();
 // Fila de la Categoria
 this.gridPrincipal.setWidget(4, 0, this.lblCategoria);
 Grid gridCategoria = new Grid(1, 3);
 gridCategoria.setWidget(0, 0, this.rbtA);
 gridCategoria.setWidget(0, 1, this.rbtB);
 gridCategoria.setWidget(0, 2, this.rbtC);
 this.gridPrincipal.setWidget(4, 1, gridCategoria);
 // Seleccionar la categoria A por defecto
 this.rbtA.setValue(true);
 // Fila del Boton
 this.gridPrincipal.setWidget(5, 0, this.btnAgregar);
 this.gridPrincipal.setWidget(5, 1, this.lblTiempo);
 this.lblTiempo.setText(new java.util.Date().toString());
 // Agregando el Grid
 this.principal.add(gridPrincipal);
 // Creando la tabla
 // Estableciendo el nombre a las columnas
 this.tablaAlumnos.setText(0, 0, "Codigo");
 this.tablaAlumnos.setText(0, 1, "Alumno");
 this.tablaAlumnos.setText(0, 2, "Facultad");
 this.tablaAlumnos.setText(0, 3, "Escuela");
 this.tablaAlumnos.setText(0, 4, "Categoria");
 this.tablaAlumnos.setText(0, 5, "Monto");
 this.tablaAlumnos.setText(0, 6, "Eliminar");
 this.tablaAlumnos.setText(0, 7, "Editar");
 this.tablaAlumnos.addStyleName("estiloTabla");
 // Agregando los estilos a las columnas
 this.tablaAlumnos.getRowFormatter().addStyleName(0, "cabezeraTabla");
 this.tablaAlumnos.getCellFormatter().addStyleName(0, 5,"columnaNumerica");
 // Agregando la tabla de alumnos
 this.principal.add(this.tablaAlumnos);
 // Asociando nuestro codigo con nuestro Html
 RootPanel.get("principal").add(principal);
 // Creamos el evento click del boton
 this.btnAgregar.addClickHandler(new ClickHandler() {
  @Override
  public void onClick(ClickEvent event) {
   // Nombre del envento a desencadenar
   agregarAlumno();
  }
 });
 //Actualizar hora
 //Creando un timer para simular cambios 
 Timer timer=new Timer() {
  @Override
  public void run() {
    //Va a llamar un metodo
    lblTiempo.setText(new java.util.Date().toString());
  }
 };
 //Cada 1000 ms se llamara al metodo run del Timer
 timer.scheduleRepeating(1000);
}

Y eso son los métodos necesarios para poder realizar el mantenimiento de la información de un Alumno

3.4. Pagina GWTConEclipse.html

Modificar la pagina "GWTConEclipse.html" para que pueda ser llamado a traves de la clase anterior


<!doctype html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link type="text/css" rel="stylesheet" href="Sesion09.css">
  <title>Man. Alumnos - Henry Wong</title>
    <script type="text/javascript" language="javascript" src="sesion09/sesion09.nocache.js"></script>
  </head>
  <body>
 <center>
  <h1>REGISTRO DE ALUMNOS</h1>
 </center>
    <div id="principal"></div>
      <iframe src="javascript:''" 
  id="__gwt_historyFrame" 
       tabIndex="position:absolute;width:0;height:0;border:0">
   </iframe>
  </body>
</html>

3.5. El archivo GWTConEclipse.css

El archivo "GWTConEclipse.css" tiene la siguiente información


h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 40px 0px 70px;
  text-align: center;
}
.sendButton {
  display: block;
  font-size: 16pt;
}
.gwt-DialogBox {
  width: 400px;
}
.dialogVPanel {
  margin: 5px;
}
.serverResponseLabelError {
  color: red;
}
#closeButton {
  margin: 15px 6px 6px;
}
body {
  padding: 10px;
}
.cabezeraTabla {
  background-color: #2062B8;
  color: white;
  font-style: italic;
}
.estiloTabla {
  border: 1px solid silver;
  padding: 2px;
  margin-bottom:6px;
}
.columnaNumerica {
  text-align: right;
  width:4em;
}
.columnaBoton {
  text-align: center;
}

4. Ejemplo de la aplicación


4.1. Ejecutar la aplicación

Para ejecutar la aplicación debemos de ejecutarla como una aplicación del tipo Google para ellos hacemos clic derecho en el proyecto creado, luego nos vamos a "Run As" y seleccionamos "Web Aplication" de Google.

















Luego nos sale una dirección electrónica que lo copias y lo pegamos en nuestro navegador para poder ejecutar la aplicación.









4.1. Registrar Alumno
















4.2. Eliminar al alumno

Hacemos clic en el botón de eliminar de alumno con código 2
















4.3. Modificar a un alumno

Haces clic en el botón de Editar del Alumno con código 1 y veremos que su información se nuestra en las cajas de texto, los combos y los radio button














Modificamos su información y luego damos clic en el botón "Agregar" y veremos que su información se actualizara en la tabla