Continuemos.
Demos poco de diseño del Lucan Phil al formulario.
Para eso nos vamos a ir a Google.
Vamos a buscar por vuestra app un framework de hojas de estilo HTML5 para todo lo que es el front end.
También maneja JavaScript para cosas, pero solamente le vamos a dar diseño a nuestro formulario.
Entonces nos vamos a la página.
Nos vamos a ir.
Hay que Started Automata está la versión 5.0 Beta 3.
No es la versión todavía oficial, pero no importa.
Get started y acá.
Bueno, vamos a copiar esta hoja de estilo que es remota.
Por lo tanto, hace referencia a un repositorio en la nube donde se guarda el título.
También lo podemos descargar y guardar en nuestro proyecto, pero por ahora vamos a utilizar la forma
remota.
Copiamos.
Es un HTML link con una referencia a la hoja de estilo.
Bien, volvemos al proyecto.
Nos vamos a la lista JSP y arriba en el HTML dentro del Giada.
Acá debajo del título, simplemente lo pegamos.
Nada más.
Listo.
Ya tenemos vostra configurado instalado en el proyecto.
Entonces ahora tenemos que configurar los estilos de formulario.
Lo primero.
Recuerden que cada grupo de campo con el label dentro de un div se fijan para el Yussef N tenemos otro
para el email, para el password, para el país.
En fin, cada uno tiene su propio div principal y acá le vamos a dar un estilo.
Entonces por acá.
Entonces voy a seleccionar con Alt Cheff presionado y voy apretando click en cada día.
Cuando se abre entonces en el Yussef NIMH, acá otro en password se fijan.
Tenemos dos cursores.
Voy a soltar en email tenemos tres cursores, se fijan tres cursores, otro acá en país.
Otro lenguaje de programación, otro roles.
Y en cada dí principal, después, un poco más abajo en idiomas se fijan multi cursor y en habilitar
entonces en cada grupo de campo habilitar idiomas.
Luego tenemos roles.
Luego tenemos lenguaje.
Luego tenemos país.
Luego tenemos el email password y el usuario o Usenet.
Como estamos con multi cursor un espacio y se abrirá espacio en cada uno.
Vamos a colocar class igual y vamos a colocar la clase row espacio y también le vamos a dar un margen,
pero button hacia abajo para tener una separación entre los campos entre los grupos.
12 MB de margen button guión o signo menos le damos un margen de tres.
Listo.
Ese primer estilo que para dar al conjunto a la agrupación de los input y así lo tenemos automáticamente
para cada uno.
Vamos a subir.
Luego vamos a hacer exactamente lo mismo.
Pero en cada input del tipo text, turalmente, el tipo text.
Entonces vamos a seleccionar acá en Yussef n un clic acá un cursor, otro en password lo mismo.
Recuerden con shift alt y clic.
Le tenemos 12 fija.
Podemos soltar y en e-mail lo mismo al chef y el clic del mouse país no, porque país es una lista y
creo que no tenemos más, no solamente esos dos, esos tres.
Entonces le vamos a dar el estilo con class igual form control form guión, control.
Listo.
Lo mismo a cada etiqueta, cada label.
Pero eso es para todo, no solamente para el Yussef en Password Element, sino para todos.
Entonces en el label después del for lo mismo con href un clic.
Después acá también para el password.
Solamente lo label.
Después para el email.
Después para el país.
Después para lenguajes.
Después para los roles.
Lo tenemos acá.
Después para idiomas lo mismo.
Y por último, para habilitar entonces en el label independiente.
Si tienes for o no tiene espacio, lo mismo class y le damos el estilo siguiente Cool for label, que
es solamente para la etiqueta cool for leave separado por Gion un espacio y le damos otro estilo, otra
clase que es como una separación cool.
SM Dos guión, dos cool.
SM juntos.
Es decir, es un tamaño, es una unidad de medida o de tamaño para la columna, porque el label va a
ser una columna y el input va a ser otra columna, el div que contiene el input.
Entonces qué le vamos a dar una medida de dos y el div del input le vamos a dar una medida de cuatro.
El doble es un proporcioné.
Es una medida que maneja vostra para poder realizar un layout en la columna y una fila tiene varias
columnas.
Por eso pusimos acá Row.
Esta es una fila que está formada por dos columna habilitar y este input.
Y así cada grupo de elemento formulario es una fila con columnas de vostra y acá le damos el tamaño
que faltaría faltaría el tamaño de las columnas, pero del imputó.
Entonces vamos a subir.
Nos vamos a ir a iusted de por acá.
El efecto entonces en el DIF este de acá, que contiene el input.
Entonces hacemos click acá.
Lo mismo que contiene el input en password.
Bajamos.
Que contiene el input y main también para páis.
Y también para lenguajes, pero para los roles como son checkbox y radio Button.
Lo manejamos separado porque cada checkbox, cada radio Button tiene su propio div.
Y eso después lo vamos a manejar con un estilo que son propio de vostra.
Pero paraste en boxes y para radio puto.
Después vamos a ver.
Entonces era solamente para lenguajes, para país, para email, password y el Yussef.
Entonces lo mismo Klauss,
SM y la medida.
Le vamos a dar cuatro.
Entonces recuerden Label dos el campo 4 independiente.
Si es un select o un input más arriba, entonces de 4.
Ahora le vamos a dar estilo al select porque se lo dimos acá al input.
Se fijan más arriba.
Tenemos en el input el form control para cada input, para el email, el password, el iusted net.
Pero para ser ex sería form select.
Entonces vamos a bajar y tenemos dos extremos este de acá, hacemos un clic, bajamos y hacemos un Chief
Ast y un clic también para acá porque los dos son select.
Van a tener el mismo estilo class for crdito, entonces form select y en los input del tipo text form
contra yo me faltaría folletería de estilos a los check boxes.
Entonces vamos a bajar en boxes y también radio button porque comparten los mismos estilo.
En roles.
Acá vamos a hacer clic en cada div, en cada input del tipo checkpoint, pero en el TIFF acá.
Entonces lo mismo a cheff clic en cada uno.
Normalmente cuando se abren las clases estilos se aplican sobre las etiquetas.
Luego tenemos acá también en el radio.
En los div llega también en él habilitar.
Hay uno solo en este espacio.
Class for check haciendo más for check.
Ahora le vamos a dar estilos a los input, a los tiempos del tipo check box o radio.
Entonces vamos a seleccionar este текст box de acá, pero que al final un espacio o un espacio así nomás.
Lo mismo para el input type radio es en común tanto para radio como para chek.
Acá también.
Solamente los input.
Después los label.
Después acá también.
Acá también.
Y por acá también.
En Almen y lo mismo.
Class for check input.
Check input.
Tal cual.
Ahora los label.
Entonces lo mismo.
Vamos a seleccionar solamente los label acá de cada uno.
Para administrador, para usuario.
Para español, para inglés, para francés.
Y nada más.
Por qué este acá no tiene label?
El habilitará entonces es solamente solidari class.
Acá faltó dar un espacio igual.
Lo mismo form, check, label, label, form, thing, label ya, casilla, form, check input y ya
casi diariamente from check en el conjunto.
En el DIF se dice que es muy parecido a faltaría el botón más abajo tenemos el botón a cambiar.
Acá no faltó este de acá, entonces lo voy a copiar.
En este tip del botón espacio lo pegamos y en el botón le damos a dar su estilo propio.
Las BTN de botón BTN primary estilo propio de Boters solamente lo estamos utilizando son estilos.
El estilo o clase btn debutara indica que es un botón y btn primary para que sea de color azul primary
en vostra es un color azul, entonces sería un botón de color azul.
Si quieren profundizar Vostra, que es un framework bastante grande de Attila que da para un curso completo,
lo pueden realizar por fuera este curso obviamente, ya que muy amplio, pero también pueden ver la
documentación.
Es decir, se pueden ir a la página y navegar acá, por ejemplo, si se van a formulario.
Acá está todo lo que hemos visto.
Overview tiene todo form control select lista desplegable con distintas configuraciones, distintas
opciones, tamaños trepados en radio button.
En fin, un montón de cosas que pueden analizar y estudiar y profundizar.
Acá el input jía en secreto no da lo mismo, porque eso no se ve, no es parte de la interface gráfica.
Creo que estamos listo, tenemos todo.
Faltaría dar estilos a los mensajes de error acá que pudiera ser opcional y también podríamos dar un
estilo acá arriba en él uele li por ejemplo acabarse, mostrar los mensajes en el uele una clase también
texto opcional le vamos a colocar alert que es un mensaje de alerta espacio guión danger.
Tienes como un mensaje de errores de alerta se coloca de color rojo alert espacio alert danger y acá
hay varios.
Está el danger, está su sés, el info enfín para cada tipo alerta.
Y esto mismo también lo podemos replicar en cada mensaje de error.
Acá en los Small, por ejemplo, por acá de hecho, lo mismo en cada small, en cada mensaje validacion.
Multi cursor acá también.
Donde se valida?
Acá también y por acá también.
Y más abajo no?
Porque nada más, nada más se valida Klauss.
Vamos a colocar comilla simple espacio y dentro comilla simple vamos a colocar lo mismo.
Alert alert danger
separÃ contien espacio.
Le puedo dar un tamaño, por ejemplo col espacio SM 4 un tamaño, una medida en el layout.
Estamos listo.
Ya tengo levantado Tomcat 10, así que simplemente voy a realizar el pliegue con los cambios.
Vamos a ver qué pasa.
Ya voy a actualizar acá porque me los cambio.
Vamos a ver código fuente, ver código fuente.
Bueno, por alguna razón no me agregó CA.
Quizás sea bien, vamos a actualizar.
No pasa nada.
Vamos a volver a revisar acá el Index, porque supuestamente ya tengo todo.
Voy a volver acá a levantar.
Por alguna razón no cambió, de hecho, para que lo tome.
Sí o sí.
Voy a limpiar el target acá, lo voy a seleccionar o limpiar o simplemente me voy a maven.
Y acá en ciclo de vida clean.
Entonces simplemente ejecutamos un plan.
Le divierte a todo el target, se fijan.
Entonces, ahora que está eliminado, vamos a volver a ejecutar, a levantar para que ejecute con todos
los cambios.
Generó nuevamente el war de Fijan.
Y nos vamos a sacar.
A s actualizamos y tomamos cambios en alguna parte acá.
Algo pasó en el password.
Lo vamos a revisar, pero está perfecto, está bastante bien.
Entonces bueno, el país también el país que la lista L también le vamos a revisar.
Por alguna razón no tomó el estilo.
Primero nos vamos a ir el password.
Vamos a revisar.
Bajamos.
Claro, se fijan, puse mal acá el Klauss no es en el cierre, porque acá donde comienza el patrón se
fijan.
Micó Hay que hacer el click sin querer.
Un detalle importante y en el Selleck país parece que no puse la clase Form Select donde puse el estilo.
Me faltó el form select.
Acá porque acá quizás me equivoqué, lo puse en otra parte, no sé.
Bueno, me faltó acá.
De todas forma.
No sé dónde más lo habré puesto, pero bueno, hoy parece que está bien.
Tengo que volver a desplegar la pública.
Recuerden, si no toma cambio, elimina con In Clean eliminan el war y lo volvemos a publicar.
Ya lo toma perfecto.
Ahora faltaría centralizar un poco más esto está demasiado hace una esquina, pero eso es super simple.
Lo podríamos anidar dentro de un div y darle un margen, un padding, por ejemplo.
Algo por el estilo.
Volvemos entonces.
Bueno, voy a cerrar acá.
Vamos a tener acá en el formulario.
Lo vamos a anidar en un tipo.
Ya entendí.
Le vamos a dar una clase de vostra, un padding, por ejemplo.
Vamos a colocar el eje X, en este caso horizontal.
Vamos a colocar px de padding guión.
Por ejemplo, un padding de lo que queramos.
Por ejemplo, 5 px de padding x el eje x de 5.
También podría ser un margen MX.
Ya tenemos que cerrar el div al final del form.
Entonces bajamos al final por acá.
Acá y cerramos, volvemos a juntar.
Está mejor y le damos el tamaño que queramos.
La medida que queramos en el margen o el padding, en este caso yetta roles con los roles de idioma
bien y se fijan con la separación de cada conjunto.
Label y el input es un conjunto.
Un grupo es una fila y cada fila tiene dos columnas.
Este es de tamaño 2 y tamaño 4.
Se fijan y así los roles y los idiomas se manejan de forma distinta.
Según vimos.
Vamos a enviar.
Acá tenemos el botón que tiene su estilo.
Empezamos?
Perfecto.
Acá también le podríamos dar un margen.
Y acá aparece el mensaje de error.
Dejan al lado.
También lo podemos colocar abajo si lo colocamos como otra fila.
Otro row.
Pero en fin.
Ya con esto tenemos una base y puedo empezar a trabajar.
Vamos a ir al uele arriba y le damos también un espacio.
Entonces acá simplemente mx un margen completamente margen horizontal.
Exactamente igual de 5 guión 5 igual que acá.
Incluso podríamos ordenar.
No me lo toma el ordenar.
Claro, porque como no tiene soporte.
No, no, el ordena.
Pero lo podríamos tener de forma manual.
Pero hoy lo tenemos.
Volvemos a levantar.
Volvemos atrás, actualizamos.
Empezamos ya, ya, que mucho mejor ahora.
Por ejemplo, si quieren colocar esto debajo, el cambio sería bien sencillo, solamente mueven esto,
lo mueven, por ejemplo, lo cortan y lo mueven.
Acá una que lo movamos si lo sacan fuera del conjunto del dir, sino que sea como otra fila.
Le tengo que dar un estilo, pero en vez de Smoot tendría que hacer un.
Al final tendré que entréguense como esto muy parecido.
Entonces diff acá, de acá, por ejemplo.
Y además en el estilo le tenemos que agregar un row acá.
Y así por Kahuna.
Yo solamente LoJack con uno solo, con el Yousef nada más.
Volvemos a levantar.
Entonces?
Depende cómo lo quiera manejar, si es al lado o si está abajo, como quieran.
Volvemos a enviar.
Que abajo se diga que justo debajo incluso le pueden dar un tamaño más grande en vez de 6, que sea
10 o 15 o como quieran, si lo han customizar customizado manejándolo.
También se pueden apoyar de la documentación bien antes finalizar bimos ver codigo fuente bueno cantautoras
html con todo los estilos que le dimos de bootstrap, pero agregamos de forma remota la hoja estilo.
También le podremos agregar de forma local en el proyecto.
Como bien descargamos esta hoja estilo, puedo hacer clic en ver código fuente.
Pinchamos acá.
Acá tenemos el estilo o bien nos vamos a la página de la documentación.
Por ejemplo, nos vamos a home prestarte.
Lo copiamos, pero copiamos esto acá y lo pegamos acá.
Y lo guardan.
Click derecho guardar página cómo?
Y hacen clic y lo guardan en alguna ubicación, por ejemplo en Download o incluso en la carpeta del
curso emputa.
También lo guardamos en la carpeta ya perfecto.
Lo copian y lo movemos al proyecto con copy paste.
Se fijan acá, lo cortan o lo copian.
Nos vamos al proyecto en web app.
Vamos a crear una carpeta directorio C, S'S o style o como quieran y dentro lo pegamos perfecto.
Ahora tenemos la estilo en el proyecto.
Ahora simplemente modificamos el index por acá.
Esta en la carpeta CSS se fija ButrÃn 10.6 s, el integrity y todo eso.
Quitamos
eso, le quitamos igual que el Kross, pero aca le damos el nombre proyecto de ese de forma manual.
Saben que se llama web app form.
O incluso como estamos dentro de una JSP podemos utilizar el objeto recuesto.
Entonces con las etiquetas vamos a imprimir.
Igual es una expresión request request punto get context path con texto y eso.
Y eso queda concatenado a esto.
Todo acá, a esta ruta y listo.
Eso es todo.
Levantamos.
Vamos a cerrar acá.
Cerramos, cerramos, cerramos y acabamos de actualizar.
Ver código fuente.
Vamos a revisar.
WEP Ah, ah, acá me quedó una comilla, esa que al lado es decir la comilla la tengo que mover de acá
acá.
A ese entonces a mi me comilla esto y listo.
Levantamos.
Vamos a revisar a ese, está perfecto.
Entonces acá actualizamos y está bien.
Estas formas locar exactamente igual te está.
Bien.
Eso sería.
Lo dejamos hasta acá y continuamos en la siguiente clase.