Spring – Lista desplegable de formularios MVC

Posted on by Rudeus Greyrat

En este artículo, aprenderemos sobre la lista desplegable de Spring MVC. Crearemos un proyecto Spring MVC básico en el paquete de herramientas Spring (STS) para hacer una lista desplegable usando la etiqueta form:select .

spring-form.tld

Podemos usar Java Server Pages (JSP) como un componente de vista en Spring Framework. Para ayudarlo a implementar vistas usando JSP, Spring Framework proporciona una biblioteca de etiquetas de formulario, a saber , spring-form.tld con algunas etiquetas para evaluar errores, configurar temas, formatear los campos para ingresar y generar mensajes internacionalizados.

etiqueta ‘seleccionar’

La ‘selección’ es una de las etiquetas proporcionadas por la biblioteca spring-form.tld. Representa un elemento de ‘selección’ HTML y admite el enlace de datos a la opción seleccionada. Podemos usar directamente la etiqueta de selección para mostrar los valores desplegables o también podemos usar la etiqueta de opción.

A continuación se muestran los diversos atributos disponibles en la etiqueta ‘seleccionar’.

Atributos en la etiqueta ‘seleccionar’

A. Atributos estándar HTML: los atributos estándar HTML también se denominan atributos globales que se pueden usar con todos los elementos HTML.

Nombre Descripción
llave de acceso Para especificar una tecla de acceso directo para activar/centrar en un elemento.
identificación Para especificar una ID única para el elemento.
directorio Para especificar la dirección del texto del contenido de los elementos.
idioma Para especificar el idioma del contenido.
índice de tabulación Para especificar el orden de tabulación de un elemento.
título Para especificar información adicional sobre el elemento.

B. Atributos de eventos HTML : los atributos de eventos HTML se utilizan para activar una función cuando ocurre un evento particular en el elemento.

Nombre Descripción
en la falta de definición Para ejecutar una función de javascript cuando un usuario abandona el campo de texto.
en el cambio Para ejecutar una función javascript cuando un usuario cambia el texto.
al hacer clic Para ejecutar una función de javascript cuando el usuario hace clic en el elemento.
ondblclick Para ejecutar una función de javascript cuando el usuario hace doble clic en el elemento.
enfocado Para ejecutar una función de javascript cuando el usuario se enfoca en el cuadro de texto.
onkeydown Para ejecutar una función de javascript cuando el usuario está presionando una tecla en el teclado.
al pulsar una tecla Para ejecutar una función de javascript cuando el usuario presiona la tecla en el teclado.
encendido Para ejecutar una función de javascript cuando el usuario está soltando la tecla en el teclado.
en el mouse hacia abajo Para ejecutar una función de javascript cuando el usuario presiona un botón del mouse.
onmovemove Para ejecutar una función de javascript cuando el usuario mueve el puntero del mouse.
fuera del ratón Para ejecutar una función de javascript cuando el usuario mueve el puntero del mouse fuera del campo.
el ratón por encima Para ejecutar una función de javascript cuando el usuario mueve el puntero del mouse sobre el campo.
en el mouse arriba Para ejecutar una función de JavaScript cuando el usuario suelta el botón del mouse.

C. Atributos opcionales de HTML:

Nombre Descripción
clase css Para especificar un nombre de clase para un elemento HTML para acceder a él.
cssErrorClass Se utiliza cuando el elemento delimitado tiene errores.
estilo css Para agregar estilos a un elemento, como color, fuente, tamaño, etc.
desactivado Para especificar el elemento a deshabilitar o no.
múltiple Un atributo booleano para especificar que el usuario puede seleccionar varios valores.
Talla Para especificar el número de opciones visibles en una lista desplegable.

D. Otros atributos HTML:

Nombre Descripción
htmlEscape Para habilitar/deshabilitar el escape HTML de los valores representados
etiqueta del artículo Para especificar el nombre de la propiedad que se asigna al texto interno de la etiqueta ‘opción’.
elementos La colección, el mapa o la array de objetos utilizados para generar las etiquetas de «opción» internas.
valor del ítem Para especificar el nombre de la propiedad asignada al atributo ‘valor’ de la etiqueta ‘opción’
sendero Para especificar la ruta a la propiedad para vincular los datos.

Aplicación Spring MVC

Crearemos la siguiente aplicación:

Ejemplo desplegable de Spring MVC

Pasos para crear una aplicación

  1. Cree un proyecto Spring MVC en Spring Tool Suite.
  2. En STS, al crear el proyecto basado en la selección del desarrollador, descargará todas las dependencias maven requeridas, *.jar, archivos lib y proporcionará un servidor integrado.
  3. A continuación se muestra la estructura final del proyecto Spring MVC después de crear también los archivos *.java y *.jsp.

Estructura del proyecto

Implementación: Los archivos a crear son los siguientes:

  1. SelectBean.java – Clase Bean – Para definir las propiedades del campo y los métodos getter/setter de las propiedades.
  2. SelectController.java – Clase de controlador – Para procesar la solicitud del usuario y generar la salida.
  3. select.jsp : archivo Jsp para interactuar con el usuario para la entrada.
  4. selectSummary.jsp : archivo Jsp para mostrar el resultado después de procesarlo para el usuario.

A. Archivo: select.jsp

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome Page</title>
</head>
<body>
    <h1>Welcome to GeeksforGeeks!</h1>
 
    <form:form action="submit" method="post" modelAttribute="select">
        <table>
            <tr>
                <td><form:label path="name">Enter your name: </form:label></td>
                <td><form:input path="name" /></td>
            </tr>
            <tr>
                <td><form:label path="education">Select your highest education: </form:label></td>
                <td><form:select id="highestEdu" path="education"
                        items="${educationDetails}" size="2"
                        cssStyle="font-family:monospace" onclick="color()">
                    </form:select></td>
            <tr>
                <td><form:label path="subject">Select the subject: </form:label></td>
                <td><form:select path="subject" title="SUBJECT" multiple="true"
                        size="3">
                        <form:option value="Java" label="Java Programming" />
                        <form:option value="SQL" label="SQL language" />
                        <form:option value="Python" label="Python programming" />
                        <form:option value="JavaScript" label="JavaScript" />
                        <form:option value="PHP" label="PHP" />
                    </form:select></td>
            </tr>
            <tr>
                <td><form:button>Submit</form:button></td>
            </tr>
        </table>
    </form:form>
    <script type="text/javascript">
     
        function color(){
            document.getElementById("highestEdu").style.backgroundColor = "palegreen";
        }
     
     
    </script>
</body>
</html>
  • Esta es la página de bienvenida cuando se ejecuta la aplicación.
  • Para usar las etiquetas Spring, debemos especificar el URI de la biblioteca de etiquetas Spring debajo en el Jsp,

HTML

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
  • Si no incluye esta biblioteca de etiquetas, entonces el contenedor no entiende las etiquetas de formulario, se convertirán en etiquetas desconocidas para él.
  • Para una estructura adecuada de los campos, estamos usando la etiqueta de tabla.
  • Como discutimos anteriormente, podemos crear una lista desplegable usando solo la etiqueta de selección o también podemos usar la etiqueta de opción.
  • En general, la etiqueta de opción se utilizará cuando proporcionamos los valores individualmente.

B. Archivo: SelectBean.java

HTML

package com.geek.app;
 
public class SelectBean {
 
    public String name;
    public String education;
    public String subject;
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public String getEducation() {
        return education;
    }
 
    public void setEducation(String education) {
        this.education = education;
    }
 
    public String getSubject() {
        return subject;
    }
 
    public void setSubject(String subject) {
        this.subject = subject;
    }
 
}
  • Este es el bean Java para definir todas las propiedades para almacenar los valores
  • Y sus métodos getter/setter para obtener y establecer los valores de las propiedades.

C. SelectController.java

Java

// Java Program to Illustrate SelectController Class
 
package com.geek.app;
 
// Importing required classes
import java.util.Arrays;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
// Annotation
@Controller
 
// Class
public class SelectController {
 
    // Annotation
    @RequestMapping(value = "/")
 
    public String view(Model model)
    {
 
        SelectBean sel = new SelectBean();
        model.addAttribute("select", sel);
 
        return "select";
    }
 
    // Annotation
    @ModelAttribute("educationDetails")
 
    public List<String> educationDetailsList()
    {
        List<String> educationList = Arrays.asList(
            "10th class", "Intermediate", "Graduation",
            "Post Graduation");
 
        return educationList;
    }
 
    // Annotation
    @RequestMapping(value = "/submit",
                    method = RequestMethod.POST)
 
    public String
    submit(@ModelAttribute("select") SelectBean select)
    {
        return "selectSummary";
    }
}
  • Esta es la clase de controlador donde procesa los métodos en función del mapeo de las URL de solicitud.
  • Aquí, @Controller transmite al contenedor que esta clase es la clase de controlador de resorte.
  • La anotación, @RequestMapping, asigna las URL de solicitud al método especificado en función del valor proporcionado.
  • La anotación @ModelAttribute, para vincular un parámetro de método o un valor de retorno de método al atributo de modelo nombrado.

D. Archivo: selectSummary.jsp

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Summary page</title>
</head>
<body>
    <h3>Hello ${select.name}, details submitted successfully!!</h3>
 
    <span>Highest Education: </span>
    <span>${select.education}</span>
    <br>
    <span>Subject Selected: </span>
    <span>${select.subject}</span>
 
</body>
</html>

Esta es la página de salida, donde solo mostramos los valores seleccionados por el usuario como entrada.

Ejecución:

  • Después de crear todos los archivos java y jsp necesarios, ejecute el proyecto en el servidor.
  • Justo en el Proyecto, Ejecutar como -> Ejecutar en el servidor.
  • Seleccione el servidor en el host local para ejecutar la aplicación.
  • Abra la URL: http://localhost:8080/app/ en el navegador para obtener la siguiente pantalla.

Página de bienvenida – select.jsp

  • Como especificamos diferentes atributos para la etiqueta de selección, esa funcionalidad se puede ver aquí.

Funcionalidad de los Atributos

  • Ingrese todos los campos y haga clic en el botón enviar.

Introduzca los valores a enviar

  • Una vez que se envía la página, la clase de controlador procesa la solicitud de URL y ejecuta el método respectivo y se muestra debajo de la salida.

Salida – selectSummary.jsp

Publicación traducida automáticamente

Artículo escrito por yaminitalisetty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *