Vista Listar Personas Fase1 - eliizquierdo/material_programacion_avanzada2026 GitHub Wiki

📦 Proyecto: mini-crud0 (Fase 1) — ⬇️ Descargar ZIP · ☁️ Abrir en Codespace

Esta página se muestra cuando el usuario selecciona "Listar Personas" en la pantalla principal o cuando el Servlet redirige al listado después de agregar/editar/eliminar.

Recordemos que desde index.jsp teníamos el enlace:

<a class="btn" href="persona?action=listar">Listar Personas</a>

Ese enlace invoca al Servlet PersonaControladorServlet, que:

1. Llama al DAO (PersonaDAO) para obtener la lista de personas registradas.
2. Guarda esa lista como un atributo de la request:

   request.setAttribute("personas", dao.getLista());

3. Hace forward a /WEB-INF/vista/persona-lista.jsp para mostrar la tabla.

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Listado de Personas</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css" />
  </head>
  <body>
    <div class="page-container">
      <h1>Listado de Personas</h1>

      <div class="table-wrap">
        <table class="table">
          <thead>
            <tr>
              <th>Código</th>
              <th>Nombre</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            <c:if test="${not empty requestScope.personas}">
              <c:forEach var="p" items="${requestScope.personas}">
                <tr>
                  <td>${p.codigo}</td>
                  <td>${p.nombre}</td>
                  <td class="actions">
                    <!-- Botón Editar deshabilitado -->
                    <button disabled class="btn-disabled" title="Funcionalidad no disponible">
                      Editar
                    </button>

                    <!-- Botón Eliminar deshabilitado -->
                    <button disabled class="btn-disabled" title="Funcionalidad no disponible">
                      Eliminar
                    </button>
                  </td>
                </tr>
              </c:forEach>
            </c:if>
            <c:if test="${empty requestScope.personas}">
              <tr>
                <td colspan="3" style="text-align: center; color: #6b7280">
                  No hay personas registradas
                </td>
              </tr>
            </c:if>
          </tbody>
        </table>
      </div>

      <div class="section-gap">
        <a class="btn" href="${pageContext.request.contextPath}/persona?action=agregar">Agregar Persona</a>
      </div>
    </div>
  </body>
</html>

💡 En esta Fase 1, los botones Editar y Eliminar están deshabilitados a propósito — el Servlet todavía no implementa esas acciones. Vamos a habilitarlos más adelante, en la Fase 2.

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>

• Indicamos que el servidor enviará HTML en UTF‑8 (acentos correctos).
• Habilitamos las etiquetas JSTL (<c:if>, <c:forEach>) con la directiva taglib. Sin esta línea, esas etiquetas no funcionarían.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Listado de Personas</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
</head>

• Declaramos HTML5, idioma español y confirmamos UTF‑8 también en el HTML.
• Cargamos el CSS usando ${pageContext.request.contextPath} (EL) para tener la tabla y botones con el estilo que ya definimos.

<div class="page-container">
    <h1>Listado de Personas</h1>

• Usamos .page-container como envoltorio general de la página.
• El <h1> fija el propósito de la pantalla.

<table class="table">
    <thead>
      <tr>
        <th>Código</th>
        <th>Nombre</th>
        <th>Acciones</th>
      </tr>
    </thead>

• La clase .table trae el estilo desde el CSS.
• Definimos los títulos de la tabla: Código, Nombre y Acciones.

<tbody>
  <c:if test="${not empty requestScope.personas}">
    <c:forEach var="p" items="${requestScope.personas}">
      <tr>
        <td>${p.codigo}</td>
        <td>${p.nombre}</td>
        <td class="actions">
          <button disabled class="btn-disabled" title="Funcionalidad no disponible">Editar</button>
          <button disabled class="btn-disabled" title="Funcionalidad no disponible">Eliminar</button>
        </td>
      </tr>
    </c:forEach>
  </c:if>
  <c:if test="${empty requestScope.personas}">
    <tr><td colspan="3">No hay personas registradas</td></tr>
  </c:if>
</tbody>

Explicación:

• <c:if test="${not empty requestScope.personas}"> reemplaza al if (listaPersonas != null && !listaPersonas.isEmpty()) que se escribiría con un scriptlet — empty en EL ya contempla tanto null como una lista vacía, en una sola condición.
• <c:forEach var="p" items="${requestScope.personas}"> reemplaza al for (PersonaVO p : listaPersonas) — recorre la lista y en cada vuelta expone la persona actual como p.
• Dentro del <c:forEach>, ${p.codigo} y ${p.nombre} acceden a los getters del objeto automáticamente (EL llama a getCodigo() y getNombre() por nosotros).
• Los botones Editar y Eliminar están disabled porque en esta Fase 1 el Servlet todavía no tiene esas acciones implementadas.
• Si la lista está vacía o es null, el segundo <c:if> muestra la fila de "No hay personas registradas".

<a class="btn" href="${pageContext.request.contextPath}/persona?action=agregar">Agregar Persona</a>

• Lleva de vuelta al formulario de alta.

1. El usuario pide listar personas.
2. El Servlet recupera la lista desde el modelo (PersonaDAO) y la envía a la vista.
3. persona-lista.jsp recibe esa lista y la muestra en una tabla HTML, usando <c:forEach> para iterar y EL para mostrar cada dato.
4. Si no hay registros, <c:if> muestra el mensaje de lista vacía.
5. Los botones Editar y Eliminar aparecen deshabilitados — se van a habilitar en la Fase 2, cuando el Servlet implemente esas acciones.
6. El usuario puede volver a "Agregar Persona" con el botón al final.

Continuemos con CONTROLADOR- PersonaControladorServlet

persona-lista.jsp · lista de personas · tabla HTML · c:forEach · c:if · empty · Expression Language · EL · PersonaVO · getLista · taglib

🧠 Autoevaluación — Mini-CRUD con MVC

← VISTA: Agregar Persona · 🏠 Inicio · PersonaControladorServlet →