×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

GroupControls.jsp

0
0
 
0
Language: HTML
Posted by: Ro Ga
Added: Mar 21, 2022 5:24 PM
Views: 404
Tags: no tags
  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <%@page import="java.util.Map"%>
  3. <%
  4.    Map<String, String> errores = (Map<String, String>) request.getAttribute("errores");
  5. %>
  6. <!DOCTYPE html>
  7. <html lang="en">
  8.  
  9.     <head>
  10.         <meta charset="UTF-8">
  11.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  12.         <meta name="description" content="" />
  13.         <meta name="author" content="" />      
  14.  
  15.         <title>Formulario de controles HTML Agrupados</title>
  16.  
  17.         <!-- Favicon-->
  18.         <!-- Referencia al favicon, es decir aquel que aparece en la pestaña de titulo -->
  19.         <link rel="icon" type="image/x-icon" href="views/images/favicon_32x32.png" />        
  20.  
  21.         <!-- Referencia a las distintas hojas de estilos CSS -->
  22.         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  23.  
  24.         <!-- DANGER, NO, NO, NO, establecer <<media=”screen”>> para la hoja de estilos, puede traer problemas -->
  25.         <link href="css/style.css" rel="stylesheet" type="text/css"/>
  26.  
  27.         <!-- Referencia al JS para los iconos, por sugerencia de fontawesome.com, debe estar en esta seccion -->
  28.         <script src="https://kit.fontawesome.com/848895ce17.js" crossorigin="anonymous"></script>        
  29.  
  30.     </head>    
  31.  
  32.     <body>
  33.         <div class="mycenter_txt">
  34.             <h3>Formulario de controles HTML Agrupados</h3>
  35.  
  36.             <%
  37.                if (errores != null && errores.size() > 0) {
  38.             %>
  39.  
  40.             <ul class="alert alert-danger mx-5 px-5">
  41.                 <% for (String error : errores.values()) {%>
  42.                 <li><%=error%></li>
  43.                     <%}%>
  44.             </ul>
  45.             <%}%>
  46.  
  47.             <div class="px-5">
  48.                 <!--al hacer summit, redirije la acción al endpoint "group-controls", utilizando el metodo POST-->            
  49.                 <form action="${pageContext.request.contextPath}/group-controls" method="POST">
  50.  
  51.  
  52.                     <!--Genera un Select/List de selección simple-->
  53.                     <div class="row mb-3">
  54.                         <label for="pais" class="col-form-label col-sm-2">País</label>
  55.                         <div class="col-sm-4">
  56.                             <select name="pais" id="pais" class="form-select">
  57.                                 <option value="">-- seleccionar --</option>
  58.                                 <option value="ES" ${param.pais.equals("ES")? "selected": ""}>España</option>
  59.                                 <option value="MX" ${param.pais.equals("MX")? "selected": ""}>México</option>
  60.                                 <option value="CL" ${param.pais.equals("CL")? "selected": ""}>Chile</option>
  61.                                 <option value="AR" ${param.pais.equals("AR")? "selected": ""}>Argentina</option>
  62.                                 <option value="PE" ${param.pais.equals("PE")? "selected": ""}>Perú</option>
  63.                                 <option value="CO" ${param.pais.equals("CO")? "selected": ""}>Colombia</option>
  64.                                 <option value="VE" ${param.pais.equals("VE")? "selected": ""}>Venezuela</option>
  65.                             </select>
  66.                         </div>
  67.                         <%
  68.                            if (errores != null && errores.containsKey("pais")) {
  69.                                out.println("<small class='alert alert-danger col-sm-4' style='color: red;'>" + errores.get("pais") + "</small>");
  70.                             }
  71.                         %>
  72.                     </div>
  73.  
  74.                     <!--Genera un select/list de selección multiple, notece el atributo "multiple" en la declaración del select-->
  75.                     <div class="row mb-3">
  76.                         <label for="lenguajes" class="col-form-label col-sm-2">Lenguajes de programación</label>
  77.                         <div class="col-sm-4">
  78.                             <select name="lenguajes" id="lenguajes" multiple class="form-select">
  79.                                 <option value="java" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("java")).get()?"selected":""}>Java SE</option>
  80.                                 <option value="jakartaee" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("jakartaee")).get()?"selected":""}>Jakarta EE9</option>
  81.                                 <option value="spring" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("spring")).get()?"selected":""}>Spring Boot</option>
  82.                                 <option value="js" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("js")).get()?"selected":""}>JavaScript</option>
  83.                                 <option value="angular" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("angular")).get()?"selected":""}>Angular</option>
  84.                                 <option value="react" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("react")).get()?"selected":""}>React</option>
  85.                             </select>
  86.                         </div>
  87.                         <%
  88.                            if(errores != null && errores.containsKey("lenguajes")){
  89.                                 out.println("<small class='alert alert-danger col-sm-4' style='color: red;'>"+ errores.get("lenguajes") + "</small>");
  90.                             }
  91.                         %>
  92.                     </div>
  93.  
  94.  
  95.  
  96.  
  97.                     <div class="row mb-3">
  98.                         <label for="lenguajes" class="col-form-label col-sm-2">Lenguajes de programación</label>
  99.                         <div class="col-sm-4">
  100.                             <select name="lenguajes" id="lenguajes" multiple class="form-select">
  101.                                 <option value="java" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("java")).get()?"selected":""}>Java SE</option>
  102.                                 <option value="jakartaee" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("jakartaee")).get()?"selected":""}>Jakarta EE9</option>
  103.                                 <option value="spring" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("spring")).get()?"selected":""}>Spring Boot</option>
  104.                                 <option value="js" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("js")).get()?"selected":""}>JavaScript</option>
  105.                                 <option value="angular" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("angular")).get()?"selected":""}>Angular</option>
  106.                                 <option value="react" ${paramValues.lenguajes.stream().anyMatch(v->v.equals("react")).get()?"selected":""}>React</option>
  107.                             </select>
  108.                         </div>
  109.                         <%
  110.                            if (errores != null && errores.containsKey("lenguajes")) {
  111.                                out.println("<small class='alert alert-danger col-sm-4' style='color: red;'>" + errores.get("lenguajes") + "</small>");
  112.                             }
  113.                         %>
  114.                     </div>
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.                     <div class="row mb-3">
  129.                         <label class="col-form-label col-sm-2">Roles</label>
  130.                         <div class="form-check col-sm-2">
  131.                             <input type="checkbox" name="roles" value="ROLE_ADMIN"
  132.                                   ${paramValues.roles.stream().anyMatch(v->v.equals("ROLE_ADMIN")).get()?"checked":""}
  133.                                    class="form-check-input">
  134.                             <label class="form-check-label">Administrador</label>
  135.                         </div>
  136.                         <div class="form-check col-sm-2">
  137.                             <input type="checkbox" name="roles" value="ROLE_USER" class="form-check-input"
  138.                                   ${paramValues.roles.stream().anyMatch(v->v.equals("ROLE_USER")).get()?"checked":""}>
  139.                             <label class="form-check-label">Usuario</label>
  140.                         </div>
  141.                         <div class="form-check col-sm-2">
  142.                             <input type="checkbox" name="roles" value="ROLE_MODERATOR" class="form-check-input"
  143.                                   ${paramValues.roles.stream().anyMatch(v->v.equals("ROLE_MODERATOR")).get()?"checked":""}>
  144.                             <label class="form-check-label">Moderador</label>
  145.                         </div>
  146.                         <%
  147.                            if (errores != null && errores.containsKey("roles")) {
  148.                                out.println("<small class='alert alert-danger col-sm-4' style='color: red;'>" + errores.get("roles") + "</small>");
  149.                             }
  150.                         %>
  151.                     </div>                    
  152.  
  153.                     <div class="row mb-3">
  154.                         <label class="col-form-label col-sm-2">Idiomas</label>
  155.                         <div class="form-check col-sm-2">
  156.                             <input type="radio" name="idioma" value="es" class="form-check-input" ${param.idioma.equals("es")? "checked": ""}>
  157.                             <label class="form-check-label">Español</label>
  158.                         </div>
  159.                         <div class="form-check col-sm-2">
  160.                             <input type="radio" name="idioma" value="en" class="form-check-input" ${param.idioma.equals("en")? "checked": ""}>
  161.                             <label class="form-check-label">Inglés</label>
  162.                         </div>
  163.                         <div class="form-check col-sm-2">
  164.                             <input type="radio" name="idioma" value="fr" class="form-check-input" ${param.idioma.equals("fr")? "checked": ""}>
  165.                             <label class="form-check-label">Frances</label>
  166.                         </div>
  167.                         <%
  168.                            if (errores != null && errores.containsKey("idioma")) {
  169.                                out.println("<small class='alert alert-danger col-sm-4' style='color: red;'>" + errores.get("idioma") + "</small>");
  170.                             }
  171.                         %>
  172.                     </div>
  173.  
  174.                     <div class="row mb-3">
  175.                         <div>
  176.                             <input type="submit" value="Enviar" class="btn btn-primary">
  177.                         </div>
  178.                     </div>
  179.  
  180.                     <!--control invisible, pero cuyo valor es enviado en el request, es un parametro invisible-->
  181.                     <input type="hidden" name="in_hidden" id="in_hidden" value="12345">
  182.  
  183.                 </form>
  184.             </div>
  185.         </div>
  186.     </body>
  187. </html>
  188.  

Write a comment

To post comments, please log in or register.