Prueba JSF

http://www.arquitecturajava.
com/jsf-ajax/
JSF Ajax (Conceptos)

Es evidente que uno de los standares que muchas aplicaciones JEE utilizan es JSF .Aunque es un
standard tiene la peculiaridad de que no es muy sencillo de entender ya que el ciclo de vida de las
pginas puede ser muy complejo .En estas situaciones nos encontramos que a veces hay que usar
AJAX con lo todo se complica un poco mas . Vamos a intentar comentarlo y aclarar las dudas.
Supongamos que disponemos del siguiente formulario .
Este formulario esta compuesto de una pgina JSF y un ManagedBean .Vamos a mostrar el cdigo
de ambos.
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
<title>Bienvenido</title>
</h:head>
<h:body>
<h:form>
<h3>Introduce tu nombre</h3>
<table>
<tr>
<td>Nombre:</td>
<td><h:inputText value="#{personaBean.nombre}"/></td>
</tr>
</table>
<p><h:commandButton value="Aceptar" action="aceptar"/></p>
<h:outputText value="#{personaBean.nombre}"/>
</h:form>
</h:body>
</html>
package com.arquitecturajava;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class PersonaBean {
private String nombre;
public String getNombre() {

return nombre;
}
public void setNombre(String nombre) {

this.nombre = nombre;
}
}
Si rellenamos el nombre y pulsamos el boton de Aceptar obtendremos el siguiente resultado.
JSF y Ciclo de vida
Ahora bin como ha funcionado realmente la ejecucin del boton? . Bueno lo que ha sucedido es
que JSF ha enviado una peticin al servidor con la pagina cargada con los controles iniciales y se ha
ejecutado en el servidor todo el ciclo de vida de JSF .
Sin entrar a detalle a explicar el ciclo podemos decir lo siguiente de las distintas fases del ciclo de
vida:
1. RestoreView : Restaura los controles de la vista y los prepara para las modificaciones
2. Apply Request Values : Aplica a los controles los valores que nosotros hubieramos modificado en la
pgina HTML
3. Process Validations : Aplica las validaciones pertinentes.
4. Update Model Values :Actualiza los datos del Modelo
5. Invoke Application : Invoca La lgica de negocio pertinente que quede
6. Render Response : Renderiza el resultado de todo el proceso y lo envia al cliente .
JSF Ajax (Ejecucin y Render)
Para entender como funciona AJAX en JSF hay que entender que aunque el ciclo de vida de JSF es
muy complejo se puede dividir en dos grupos fundamentales . A estos grupos se les denomina
Ejecucin y Renderizado .Vamos a verlo un poco mas a detalle.
La parte de ejecucin hace referencia como su nombre indica a todo el ciclo de vida que esta ligado a
la propia ejecucin de los componentes dejando de lado la ultima fase, la fase de renderizado. En
cambio la segunda fase es opuesta a la primera solo se encarga del renderizado.
JSF y AJAX nos permiten aplicar estas fases a controles diferentes y obtener un resultado . Por
ejemplo podemos hacer que el control de h:inputText pase por todas las fases de ejecucin.
Pero que no le haga falta pasar por la fase de render ya que esta renderizado correctamente .Ahora
podemos hacer que el control h:outputText funcione de la forma contraria y no pase por ninguna
fase salvo la ultima.
Vamos a verlo en cdigo para terminar de aclarar dudas.
<?xml version="1.0" encoding="UTF-8"?></pre>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" >
<h:head>
<title>Welcome</title>
</h:head>
<h:body>
<h:form>
<h3>Introduce tu nombre</h3>
<table>
<tr>
<td>Nombre:</td>
<td>
<h:inputText value="#{personaBean.nombre}">
<f:ajax event="keyup" execute="@this" render="zona"/>
</h:inputText>
</td>
</tr>
</table>
<p><h:commandButton value="Aceptar" action="aceptar"/>
</p>
<h:outputText id="zona" value="#{personaBean.nombre}"/>
</h:form>
</h:body>
</html>
<pre>
Lo importante de todo este cdigo son las siguientes lneas
<h:inputText value="#{personaBean.nombre}">
<f:ajax event="keyup" execute="@this" render="zona"/>
</h:inputText>
En ellas concretamente en <f:ajax> se especifica el evento keyUp y como el control actual (@this)
que es el h:inputText necesita de la fase de ejecucin .Mientras por el otro lado el control zona
(identificador del outputText) solo necesita la fase de render. De esta forma segun vamos pulsando
teclas en el inputText via ajax se actualiza el outputText.
http://www.albertcoronado.com/2014/01/23/javaserver-faces-i-jsf-action-y-actionlisterner/
JavaServer Faces I (JSF): action y

actionListerner
En los elementos h:commandButton y h:commandLink tenemos disponibles los
parmetros actionListener y action. Recordad que estos elementos siempre deben
estar dentro de un elemento de formulario(h:form).
<h:commandButton actionListener=#{miBean.miActionListener}
action=#{miBean.miAction} />
El actionListener se ejecuta antes que el action y llama a un mtodo que tiene una pinta como la
siguiente:
public void miActionListener(ActionEvent event) {

// ...
}
A travs del objeto event tiene acceso al estado del componente y la UI, cosa que action no tiene. Tened
en cuenta que podis crear actionListeners con parmetros y sin el parametro event.
Una vez ejecutado el actionListener JSF ejecuta el action que llama a un mtodo que tiene la siguiente
pinta:
public String miAction() {

return siguientePagina;
}
Tal como se ve en el ejemplo, el action permite devolver que pgina debe mostrarse despus de ejecutarse
la accin. Al igual como el actionListener tambin le podemos definir parmetros.
Hay que tener en cuenta que se pueden definir una cola de actionListeners. En caso que se lance una
excepcin del tipo AbortProcessingException se interrumpir el procesado a partir de ese momento:
<h:commandButton actionListener=#{miBean.miActionListener}
action=#{miBean.miAction}>
<f:actionListener
type=com.lostsys.miap.actionListeners.MiSegundoActionListener/>
</h:commandButton>
En resumen, utilizaremos el mtodo action cuando queramos que el elemento ejecute una accin de
negocio, este mtodo devolver un String con la siguiente pgina a mostrar. Pondremos un actionListener
cuando queramos que se ejecute un hook antes de la accin de negocio, por ejemplo para que haga ciert as
comprobaciones o modifique la salida del action en funcin de algo.
ola
Bueno eso lo puedes hacer con un escrib de JavaScript mas adelante te coloco un ejemplo completo con los dos casos pero
antes te explico coo funciona.
Lo primero es hacer una funcion que sera laencargada de hacer el Submit, en este caso la funcion la llame Enviar, Esta
funcion es llamada desde el enlace mediante la propiedad HREF que es la que indica a donde se dirigira la pagina en este
caso leestamos especificando que no sera una URL sino que tiene que ejecutar una funcion ya definida y seria asi:
<a href="javascript:Enviar()">Enviar</a>
Para elcaso de la imagen lo unico que hay que hacer es programar el evento ONCLICK de esa imagen ya que al precionarla
ejecutaria la funcion y seria asi:
<img src="TuImagen.gif" onClick="Enviar()">
Claro que tambien se pueden mesclarun enlace con una imagen
<a href="javascript:Enviar()"><img src="TuImagen.gif"></a>
Ejemplo
-------------------------------------------------------
<html>
<head>
<script language="JavaScript">
function Enviar()
{
frmDatos.submit();
}
</script>
</head>
<body>
<form Name="frmDatos" Action="Pagina.html">
<input Type="text" Name="txtDato">
</form>
<a href="javascript:Enviar()">Enviar</a>
<img src="TuImagen.gif" onClick="Enviar()">
</body>
</html>
-------------------------------------------------------
Bueno esperoesto te sirva.

Jugando con tablas en JSF
Introduccin
JSF nos ofrece muchas posibilidades para hacer tablas. En este tutorial vamos a hacer un pequeo
ejemplo usando <h:panelGrid> y <h:dataTable>. En el ejemplo crearemos una tabla sencilla a la que se
pueden aadir y borrar filas.
h:panelGrid y h:dataTable
Ambos nos permiten pintar una tabla en el navegador, pero lo hace recogiendo los datos de forma distinta.
h:panelGrid smplemente es una tabla que tendremos que hacerlos poniendo manualmente todos los
elementos. Sin embargo h.dataTable nos permite asociarla a una Collection, Array, ResultSet, RowSet...
indicando cmo es una de las filas, iterando automticamente el resto.
Un ejemplo tonto de h:panelGrid
<h:panelGrid columns="2">
<h:outputText value="fila 1, columna 1"></h:outputText>
</h:panelGrid>
Unicamente le hemos dicho que hay dos columnas y todos los componentes consecutivamente. El
mostrarse en el navegador, se irn cogiendo en orden para rellenar las filas con dos elementos en cada
una de ellas (dos columnas).
Un ejemplo tonto con h:dataTable. Supongamos que tenemos un @ManagedBean con una propiedad que
sea una lista de beans Dato
package com.chuidiang.ejemplos.jsf;
@ManagedBean
public class Dato {
private int valor;

return nombre;
}

}
public int getValor() {

return valor;
}
public void setValor(int valor) {

this.valor = valor;
}
}
import java.util.LinkedList;
import javax.faces.bean.ApplicationScoped;
@ManagedBean
public class HolaMundo {
private LinkedList<Dato> datos;
public HolaMundo() {
// rellenamos unos datos cualquiera en el constructor
// por tener algo que se vea.
datos = new LinkedList<Dato>();
for (int i = 5; i < 10; i++) {
Dato dato = new Dato();
dato.setValor(i);
dato.setNombre("nombre" + i);
datos.add(dato);
}
}
public LinkedList<Dato> getDatos() {

return datos;
}
public void setDatos(LinkedList<Dato> datos) {

this.datos = datos;
}
}
La clase HolaMundo lleva un simple atributo que es una LinkedList<Dato> y los mtodos set y get
correspondiente. El cdigo xhtml con el h:dataTable para ver estos datos es el siguiente
<h:dataTable value="#{holaMundo.datos}" var="dato">
<h:column>
<f:facet name="header">
<h:outputText value="valor"></h:outputText>
</f:facet>
<h:outputText value="#{dato.valor}"></h:outputText>
</h:column>
<h:column>
<h:outputText value="nombre"></h:outputText>
</f:facet>
<h:outputText value="#{dato.nombre}"></h:outputText>
</h:column>
<h:column>
<h:form>
<h:commandButton action="#{holaMundo.removeValor(dato)}"
value="Borrar"></h:commandButton>
</h:form>
</h:column>
</h:dataTable>
Al h:dataTable le hemos puesto un value="#{holaMundo.datos}", que es la forma de indicar que cogemos el

atributo datos de la clase HolaMundo para los datos de nuestra tabla. Como hemos comentado, puede ser
un Array, Collection, List, ResultSet, etc. El h:dataTable iterar sobre esta coleccin de forma automtica.
Hemos puesto var="dato" para indicar que el elemento concreto de la coleccin al que le toca el turno se
llamar "dato", de forma que dentro del h:dataTable, lo referenciaremos con este nombre.
Dentro del h:dataTable ponemos tantos <h:column> como columnas que queramos que tenga la tabla.
Dentro de cada <h:column> podemos poner un <f:facet> para que haga de cabecera de la columna y el
dato que queramos para esa celda concreta. Fijmonos en la primera columna
<h:column>
</f:facet>
</h:column>
<f:facet name="header"> es para indicar que esto es columna de la tabla. Se podra poner
name="footer" para el pi de la tabla. Dentro del f:facet ponemos el h:outputText con el texto de esta
cabecera, "valor" en este caso. Por supuesto, podramos poner cualquier elemento que queramos que
haga de cabecera.
<h:outputText value="#{dato.valor}"> indica el contenido de la celda, que ser el atributo valor de la
variable dato, que es la que habamos definido en el var="dato" del h:dataTable.
La mini aplicacin
Vamos a hacer una mini aplicacin que nos permita desde el navegador aadir y borrar Dato a la lista de
datos que hay en HolaMundo.
En HolaMundo.java hacemos unos cambios. Le ponemos mtodos addValor() y removeValor que permitan
aadir y borrar datos de la lista. Tambin, a HolaMundo le ponemos @ApplicationScoped para que los
datos sean igual para todos los usuarios que usen esta aplicacin (mientras no se rearranque la aplicacin,
no vamos a hacer persistencia en base de datos).
...
@ManagedBean
@ApplicationScoped
public class HolaMundo {
...
public void addValor(Dato valor) {

datos.add(valor);
}
public void removeValor(Dato valor) {

datos.remove(valor);
}
}
A la clase Dato.java vamos a ponerle un id nico, de forma que cuando queramos borrar un dato, sepamos
cual es. Le ponemos un mtodo equals() que haga campo de ese campo id nada ms, de forma que dos
instancias de Dato son equals() si tienen el mismo id. El mtodo equals() lo genera automticamente el IDE
si se le pide. Y si se define equals(), las buenas costumbres requieren que se defina tambin el mtodo
hashCode(), que hace tambin automticamente el IDE.
Para el id nico ponemos un contador esttico, d e forma que cada vez que hagamos un new de esta clase,
se incremente en uno y el valor nos sirva de id. Esto, por supuesto, no es necesario si tuviramos detrs
una base de datos que gestione los id de verdad.
@ManagedBean
public class Dato {
private static int contador = 0;
private int id;
private int valor;
public Dato() {
id = contador++;
}
public int getId() {

return id;
}
public void setId(int id) {

this.id = id;
}
/** Generado automticamente por eclipse */

@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + id;
return result;
}
/** Generado automticamente por eclipse */

@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Dato other = (Dato) obj;
if (id != other.id)
return false;
return true;
}

return nombre;
}

}
public int getValor() {

return valor;
}
public void setValor(int valor) {

this.valor = valor;
}
}
Ya tenemos todo preparado. Ahora slo nos queda el xhtml, que ser un dataTable con tres columnas. La
primera con el atributo valor, la segunda con el atributo nombre.... y la tercera con el botn de borrar el
elemento.
<h:dataTable value="#{holaMundo.datos}" var="dato">

<h:column>
</f:facet>
</h:column>
<h:column>
<h:outputText value="nombre"></h:outputText>
</f:facet>
<h:outputText value="#{dato.nombre}"></h:outputText>
</h:column>
<h:column>
<h:form>
<h:commandButton action="#{holaMundo.removeValor(dato)}"
value="Borrar"></h:commandButton>
</h:form>
</h:column>
</h:dataTable>
Fjate que en la tercera columna, donde est el botn de borrar, la action es la llamada al mtodo
removeValor de HolaMundo, al que pasamos como parmetro el dato de la fila en cuestin.
Y en la pgina pondremos tambin un formulario para crear un nuevo elemento. Para que quede bien
organizadito, lo ponemos en un panelGrid, de forma que las etiquetas ocupen la primera columna y las
cajas de texto la segunda. El botn de enviar ir en la segunda columna de la tercera fila, por lo que
ponemos un elemento vaco para ocupar la primera columna de la tercera fila
<h:form>
<h:panelGrid columns="2">

<h:outputText value="Valor:"></h:outputText>
<h:inputText id="valor" value="#{dato.valor}"></h:inputText>


<h:outputText value="Nombre:"></h:outputText>
<h:inputText id="nombre" value="#{dato.nombre}"></h:inputText>

<h:outputLabel></h:outputLabel>
<h:commandButton action="#{holaMundo.addValor(dato)}"
value="Aadir"></h:commandButton>
</h:panelGrid>
</h:form>
Aqu dato hace referencia al @ManagedBean Dato.java, no a la variable del h:dataTable, ya que este
formulario est fuera del h:dataTable. En el botn hemos puesto como action la llamada al metodo
addValor() de HolaMundo.
Si arrancamos y visualizamos esto, veremos lo siguiente
donde los botones de "borrar" y el botn de "Aadir" funcionan.
http://programacionextrema.com/2015/10/28/ordenar-tablas-con-jquery-tablesorter/
Ordenar tablas con jQuery
(tableSorter)
Hoy en da es muy comn tener que ordenar tablas con jQuery. Es por eso que en este tutorial
aprenderemos a realizar esta tarea utilizando el plugin para jQuery llamado tableSorter. Este
simple plugin permite ordenar tablas por columna de cualquier tipo, ya sea nmeros, fechas o
palabras.
Cmo ordenar tablas con jQuery?

Antes de comenzar a tirar cdigo debemos incluir las dependencias de jQuery y del
plugin tableSorter, este ltimo lo pueden descargar desde su sitio oficial:
http://tablesorter.com/docs/#Download.
Una vez descargada podemos empezar con nuestro ejemplo. El siguiente cdigo es el ejemplo
ms bsico para ordenar una tabla con diferente columnas:
<html>
<head>
<title>Ordenar listas con jQuery</title>
<style type="text/css">@import "themes/blue/style.css";</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){
//Cuando la pgina se cargue convertimos la tabla con id "myTable" en
una tabla ordenable
$("#myTable").tablesorter();
});
</script>
<style>
body{font-family:Arial;}
</style>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Compra total</th>
<th>Web</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
La tabla anterior se puede visualizar en la siguiente captura de pantalla:
Es importante mencionar que el tema se puede cambiar o incluso crear uno propio con CSS.
Con ese cdigo simple ya podemos ordenar una tabla con diferentes columnas. Es muy
importante saber que este plugin admite muchas ms configuraciones, estas mismas las pueden
ver en el sitio oficial (ya mencionado antes) donde tambin pueden encontrar muchos ejemplos.
Bueno hemos llegado al final de este tutorial, espero que les haya servido y ante cualquier
problema no duden en dejar un comentario.
Datepicker con jQuery UI
En este tutorial aprenderemos a utilizar el Datepicker del plugin jQuery UI con varios ejemplos
sencillos.
Ejemplos de Datepicker con jQuery UI

En este primer ejemplo veremos lo bsico que se debe tener en cuanta a la hora de mostrar un
Datepicker al hacer click sobre un input de tipo text:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Una caracterstica importante de este plugin es que nos permite configurar nuestro Datepicker a
gusto. Estas son algunas de las opciones que nos proporciona:
Rango de fechas en Datepicker con jQuery UI

Esto lo debemos indicar con las variables minDate y maxDate. Los valores pueden ser un
nmero (en das) o un string (meses y das) como el siguiente ejemplo:
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
Dar formatos a fechas en Datepicker con jQuery UI
Esto lo podemos realizar de la siguiente manera:
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy'});
});
Los distintos formatos que se aceptan son: DD, d MM, yy, d MM, y, d M, y, yy-mm-dd y
mm/dd/yy.
Animar Datepicker con jQuery UI

Para animar el Datepicker debemos indicarle una animacin con la variable showAnim
$(function() {
$( "#datepicker" ).datepicker({ showAnim: 'clip'});
});
Las animaciones pueden ser: show, slideDown, fadeIn, blind, bounce, clip, drop, fold
y slide.
Estas son unas de las tantas cosas que se pueden hacer con un Datepicker en jQuery UI.
Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.
Si se quedaron con ganas de ver ms ejemplos pueden ingresar a la pgina ofical de jQuery UI:
https://jqueryui.com/datepicker
Modal dialog en Bootstrap
En este tutorial aprenderemos a crear nuestro propio modal dialog en Bootstrap y Java Script.
Ejemplo de modal dialog en Bootstrap
Con el siguiente cdigo se podr crear un modal al tocar un botn:
<!DOCTYPE html>
<html>
<head>
<title>Modal dialog en Bootstrap</title>
<meta name="viewport" content="initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></sc
ript>

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
">

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-
theme.min.css">

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"><
/script>
</head>
<body>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Ttulo del modal</h4>
</div>
<div class="modal-body">
<p>Cuerpo del modal;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Aceptar</button>
</div>
</div>

</div>

</div>


<button type="button" class="btn btn-primary btn-lg" data-
toggle="modal" data-target="#myModal">
Abrir modal
</button>
</body>
</html>
A veces nos puede pasar que tenemos un listado de items y necesitamos abrir un modal por
cada uno de ellos para mostrar su informacin en detalle o realizar una determinada accin. En
ese caso podramos combinar el cdigo anterior con un poco de Java Script:
<!DOCTYPE html>
<html>
<head>
<title>Modal dialog en Bootstrap</title>
<script
ript>

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
">

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-
theme.min.css">

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"><
/script>
</head>
<body>
<h2>Lenguajes de programacin</h2>
<ul class="list-group">
<li class="list-group-item" onclick="abrirModal(0)">Java Script</li>
<li class="list-group-item" onclick="abrirModal(1)">PHP</li>
<li class="list-group-item" onclick="abrirModal(2)">Python</li>
</ul>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-title">Ttulo del modal</h4>
</div>
<div class="modal-body" id="modal-body">
<p>Cuerpo del modal;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Aceptar</button>
</div>
</div>

</div>

</div>

<script>
// Listado de lenguajes de programacin
var lenguajes = [{nombre: 'Java Script', descripcion: 'JavaScript
(abreviado comnmente "JS") es un lenguaje de programacin interpretado,
dialecto del estndar ECMAScript. Se define como orientado a objetos,
basado en prototipos, imperativo, dbilmente tipado y dinmico.'},
{nombre: 'PHP', descripcion: 'PHP es un lenguaje de
programacin de uso general de cdigo del lado del servidor originalmente
diseado para el desarrollo web de contenido dinmico.'},
{nombre: 'Python', descripcion: 'Python es un
lenguaje de programacin interpretado cuya filosofa hace hincapi en una
sintaxis que favorezca un cdigo legible.'}]
// Funcin para abrir un modal y agregar la informacin
// del lenguaje del indice pasado por parmetro
function abrirModal(indice){
$('#modal-title').html(lenguajes[indice].nombre);
$('#modal-body').html('<p>' + lenguajes[indice].descripcion
+ '</p>');
$('#myModal').modal('show');
}
</script>
</body>
</html>
Espero que les sea de gran utilidad el cdigo y ante cualquier problema no duden en dejar un
comentario.
Agregar texto a un div con jQuery
En este tutorial aprenderemos las distintas formas de agregar texto a un div con jQuery,
adems incluiremos un ejemplo completo y muy sencillo.
Antes de comenzar es requisito incluir la dependencia de la librera jQuery en nuestro HTML.
Cmo agregar texto a un div con

jQuery?
Esta tarea la podemos realizar con las siguientes funciones que nos ofrece jQuery:
.html() Con esta funcin se pueden obtener y agregar textos con HTML.
.text() Funciona igual que la funcin anterior pero solamente se pueden obtener y agregar
textos.
.val() Funciona solamente sobre un input para obtener y agregar textos.
.append() Agrega al contenido existente texto con HTML.
En el siguiente ejemplo podemos ver como utilizar la funciones mencionadas:
<!DOCTYPE html>
<html>
<head>
<title>Agregar texto a un div con jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script
ript>
</head>
<body>
<div id="html"></div>
<div id="text"></div>
<input id="val" type="text">
<div id="append">Ejemplo con </div>
<script>
$(function() {
$('#html').html('<strong>Ejemplo con html()</strong>');
$('#text').text('Ejemplo con text()');
$('#val').val('Ejemplo con val()');
$('#append').append('append()');
});
</script>
</body>
</html>
Espero que les sea de gran utilidad este sencillo tutorial en el cual se explica cmo agregar
texto a un div con jQuery. Ante cualquier inconveniente no duden en dejar un comentario.
Agregar estilos CSS con jQuery

Si nos encontramos desarrollando un sitio web bien dinmico es muy comn tener que agregar
estilos CSS con jQuery o Java Script sin libreras. Es por eso que en este tutorial
aprenderemos a realizar dicha tarea un con un ejemplo muy sencillo.
Cmo agregar estilos CSS con jQuery?
Antes de comenzar tenemos que incluir la librera de jQuery en nuestro archivo de HTML. En
nuestro caso vamos a cambiar el estilo de un cuadrado al oprimir distintos botones. La funcin
principal de jQuery que utilizaremos para esta tarea es css() como podemos ver en el siguiente
ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Superponer divs en HTML usando CSS</title>
<script
ript>
<style>
#cuadrado{
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="cuadrado">
</div>
<button onclick="cambiarColor();">Cambiar color</button>
<button onclick="redondearBordes();">Redondear bordes</button>
<button onclick="bordesNegros();">Bordes negros</button>
<button onclick="agregarTransparencia();">Agregar
transparencia</button>
</body>
<script>
function cambiarColor(){
$('#cuadrado').css('background', 'blue');
}
function redondearBordes(){
$('#cuadrado').css('border-radius', '25px');
}
function bordesNegros(){
$('#cuadrado').css('border', '2px solid black');
}
function agregarTransparencia(){
$('#cuadrado').css('opacity', '0.4');
}
</script>
</html>
Al visitar la pgina que hemos creado y oprimir los distintos botones se van a ejecutar las
funciones de Java Script que cambiarn la esttica del cuadrado.
Bueno gente, hemos llegado al final de este breve tutorial para agregar estilos CSS con
jQuery, espero que les sea de gran utilidad y como digo siempre ante cualquier problema
pueden dejar un comentario.
Obtener todos los checkbox

seleccionados en jQuery
En este rpido tutorial aprenderemos a obtener todos los checkbox seleccionados en jQuery.
Esto nos puede ser de gran utilidad en muchos casos, por ejemplo si no queremos enviar
nuestros checkbox seleccionados a travs de un formulario.
Cmo obtener todos los checkbox

seleccionados en jQuery?
Para hacer esto primero debemos incluir la librera de jQuery, en nuestro caso la vamos a usar
desde google. Luego podemos comenzar a programar:
<!DOCTYPE html>
<html>
<head>
<title>AJAX en jQuery</title>
<script
ript>
</head>
<body>
<input type="checkbox" value="1" checked>
<input type="checkbox" value="2">
<input type="checkbox" value="3" checked>
<input type="checkbox" value="4">
var selected = new Array();
$(document).ready(function() {
$("input:checkbox:checked").each(function() {
alert($(this).val());
});
});
</script>
</body>
</html>
Con el cdigo anterior vamos a mostrar en pantalla todos los checkbox seleccionados, ahora si
solamente queremos los que no fueron seleccionado tenemos que hacer lo siguiente:
$("input:checkbox:not(:checked)");
Y si simplemente queremos todos los checkbox podemos hacer:
$("input:checkbox");
Bueno gente, esto es todo lo que tenemos que saber para obtener todos los checkbox
seleccionados en jQuery, ante cualquier problema no duden en dejar un comentario.
Reloj en Java Script
En este tutorial aprenderemos a crear un sencillo reloj en Java Scrit y HTML para insertarlo
directamente en una web.
A veces puede ser de gran utilidad tener un reloj en una web o simplemente algo decorativo. Lo
importante es que no consuma muchos recurso, es por ese motivo que a la hora la vamos a
obtener de la computadora local y no de un servidor.
Cmo crear un reloj en Java Script?

Es importante mencionar que vamos a utilizar la librera jQuery pero podra no ser necesaria. La
vista del reloj la podemos desarrollar con una simple etiqueta div de la siguiente manera:
<div id="reloj"></div>
Luego con Java Script Vamos a crear una funcin que actualice el div con la hora actual:
function actualizarReloj(){
fechaActual = new Date();
hora = fechaActual.getHours()
minuto = fechaActual.getMinutes()
segundo = fechaActual.getSeconds()
$('#reloj').text(hora + ':' + minuto + ':' + segundo);

}
Una vez creada la funcin que actualice la hora necesitamos que alguien la ejecute cada un
segundo para que se mantenga actualizada. Esta tarea la podemos realizar usando la
funcin setInterval de la siguiente manera:
setInterval(actualizarReloj,1000);
En la funcin setInterval le pasamos por parmetro la funcin que queremos ejecutar (sin los
parntesis) y los milisegundos.
Ese es todo el cdigo que permite crear un reloj en Java Script y HTML actualizndose cada un
segundo. Pero para que quede un poco ms vistoso le podemos agregar un poco de estilo para
que se vea de la siguiente manera:
A continuacin les dejo el cdigo fuente completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reloj en Java Script</title>
<style>
body{font-family: Arial;}
#reloj{
color: white;
background: #2980b9;
width: 65px;
padding:5px;
border-radius: 5px;
text-align:center;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<div id="reloj"></div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$( document ).ready(function(){
//Evento que actualiza el reloj cada un segundo

setInterval(actualizarReloj,1000);
//Funcin para actualizar el reloj

function actualizarReloj(){
fechaActual = new Date();
hora = fechaActual.getHours()
minuto = fechaActual.getMinutes()
segundo = fechaActual.getSeconds()
$('#reloj').text(hora + ':' + minuto + ':' + segundo);

}
//Actualizamos al iniciar la pgina

actualizarReloj();
});
</script>
</body>
</html>
Buenos gente, espero que les haya sido til este pequeo tutorial, y como siempre digo ante
cualquier problema no dejen de enviar un comentario.
Validar un formulario con jQuery

Si bien siempre es recomendable validar los formularios desde el servidor, hoy en da se
utilizan mucho las validaciones desde el cliente usando Java Script. Uno de los motivos
principales es para evitar hacer un request al servidor, esto viene muy bien para los sitios con
mucha sobrecarga de usuarios.
En este artculo vamos a entender cmo validar un formulario con jQuery usando el
plugin validationEngine version 2.6.1, como primer paso se pueden descargar este plugin
desde el repositorio de validationEngine en GitHub. Ah tambin podrn encontrar toda la
documentacin requerida.
Ahora vamos a validar un formulario con

jQuery y validationEngine
Es importante mencionar que este plugin permite validar direcciones de correo, telfonos, URL,
contraseas, nmeros entre muchas otras opciones.
Ahora vamos a crear un formulario con algunos campos de textos requeridos y otros no, combos
de seleccin, adems un campo para validar una URL y contrasea.
<form id="formID" class="formular" method="post">

<fieldset>
<legend>
Requerido!
</legend>
<label>
<span>Este campo es requerido: </span>
<input value="" class="validate[required] text-input"
type="text" name="req" id="req" />
</label>
<legend>
Opcional
</legend>
<label>
<span>Este campo es opcional : </span>
<input value="" class="validate[custom[url]] text-input"
type="text" name="optional" id="optional" />
</label>
<legend>
Placeholder & required
</legend>
<label>
<span>Deporte favorito 1:</span>
<select name="sport" id="sport" class="validate[required]">
<option value="">Seleccione un deporte</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Deporte favorito 2:</span>
<select name="sport2" id="sport2"
multiple class="validate[required]">
<option value="">Seleccione un deporte</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<br/>
</fieldset>
<fieldset>
<legend>
Personalizado
</legend>
<label>
<p>Viene con muchas expresiones regulares predifined (telfono,
URL, ip, email..etc)</p>
<br/>
<span>Ingresar URL : </span>
<input value="http://" class="validate[required,custom[url]]
text-input" type="text" name="url" id="url" />
<br/>
</label>
</fieldset>
<fieldset>
<legend>
Iguales
</legend>
<label>
<span>Password : </span>
<input value="karnius" class="validate[required] text-input"
type="password" name="password" id="password" />
</label>
<label>
<span>COnfirmar password : </span>
<input value="kaniusBAD"
class="validate[required,equals[password]] text-input" type="password"
name="password2" id="password2" />
<br/>
</label>
</fieldset>
<input class="submit" type="submit" value="Validate & Validar
formulario"/><hr/>
</form>
Para validar un campo simplemente hay que agregarle la clase validate, por ejemplo para
indicar que un campo es obligatorio habra que agregarle la clase validate[required], y en caso de
validar un email validate[required,custom[url]].
Para poder activar el plugin es necesario introducir el siguiente cdigo de java script, el cual se
va a ejecutar una vez cargada la pgina:
jQuery(document).ready(function() {
// se une el envo de formularios y campos para el motor de validacin
jQuery("#formID").validationEngine();
});
Luego si intentamos enviar el formulario sin completar los campos el resultado sera el siguiente:
Espero que se haya entendido las interesantes funcionalidades que ofrece este plugin para
jQuery. Ante cualquier problema no duden en consultar.
Tutorial de jQuery para
principiantes
En este tutorial de jQuery para principiantes aprenderemos los conceptos bsico de esta
librera y veremos algunos ejemplos muy sencillos para poner en prctica nuestras habilidades
de programadores.
Qu es jQuery?
jQuery es una librera creada inicialmente por John Resig para Java Script que trabaja de
forma rpida, es sencilla y tiene muchas funcionalidades para explorar. Sus tareas principales
son la manipulacin de cdigo HTML, manejo de eventos, animaciones,
peticiones AJAX mucho ms simples y una API fcil de usar, la cual es compatible con muchos
navegadores. Con una combinacin de versatilidad y extensibilidad, jQuery ha cambiado la
forma en que millones de personas escriben Java Script.
Es importante mencionar que jQuery es software libre y de cdigo abierto, adems utiliza las
licencias Licencia MIT y la Licencia Pblica General de GNU v2, permitiendo su uso en
cualquier tipo de proyecto.
Plugins para jQuery

Podemos decir que jQuery es una libreara orientada a plugins, esto quiere decir que cualquier
persona con muchos o pocos conocimientos puede agregar nuevas funcionalidades
mediante plugins de forma muy rpida y sencilla.
Debido a que jQuery es utilizado en todo el mundo, hay millones de desarrolladores que se
encargan de crear nuevos plugins, a continuacin un listado de los ms importantes:
1. jQuery UI: Este plugin ofrece un conjunto de widgets y efectos visuales para mejorar la
usabilidad e interfaz grfica de nuestros sitios.
2. jQuery Form: Permite serializar formularios y mandar la informacin al servidor
rpidamente, entre muchas cosas ms.
3. Fullcalendar: Nos permite mostrar y manipular un calendario con diferentes vistas y la
posibilidad de registrar eventos.
4. jqGrid: Nos permite manipular y crear grillas de forma rpida y sencilla. Adems es
compatible con dispositivos mviles.
5. jQuery Mobile: Este plugin tiene similares caractersticas que jQuery UI, con la
diferencia de que se puede adaptar a dispositivos mviles.
6. Fancybox: El mejor plugin para crear galeras de imgenes usando el atributo rel.
Incluir jQuery en HTML

Antes de comenzar es un requisito indispensable descargar esta librera desde su sitio
oficial: https://jquery.com/download, en nuestro caso vamos a utilizar la versin 2.1.4.
Una vez que tenemos en nuestro poder la librera debemos incluirla en nuestro
archivo HTML usando la etiqueta script dentro del head:
<script type="text/javascript" src="path/to/jquery.min.js"></script>
Introduccion a jQuery
Llegamos a la parte ms interesante de este tutorial de jQuery para principiantes, en esta
seccin aprenderemos a utilizar las funciones bsicas que nos ofrece esta librera.
Ante de comenzar a manipular el DOM es importante que la pgina se cargue completamente,

para asegurarnos que esto pase, debemos utilizar la funcin $(document).ready();, la cual
recibe por parmetro un callback donde ir nuestro cdigo:
$(document).ready(function(){
// Aqu va nuestro cdigo para manipular el DOM
});
La caracterstica ms interesante de esta librera es que permite cambiar el contenido de una

pgina sin tener que recargarla (esto si pasa en PHP) a travs de peticiones AJAX y
manipulacin del cdigo HTML.
La funcin $() es la ms importante, ya que nos facilita la forma de obtener elementos HTML con
solamente indicar la clase o el identificador:
midiv = $('#midiv'); // Devolver el elemento HTML con id="midiv"
mispan = $('.mispan'); // Devolver el elemento HTML con class="mispan"
});
Una vez obtenidos los elementos o nodos podemos aplicarles una gran variedad de funciones
que nos ofrece la librera:
alert(midiv.text()); // Obtengo el texto de midiv y lo muestro en pantalla

midiv.html('<h1>' + midiv.text() + '</h1>') // Pongo el contenido de midiv
en un tag H1
mispan.css('color', 'red'); // Le agrego color rojo al texto de mispan
Incluso podemos realizar animaciones grficas para ocultar o mostrar una etiqueta HTML:
mispan.slideToggle("slow"); // Oculto mispan con una animacin

AJAX en jQuery
Otra interesante caracterstica que nos ofrece jQuery es la posibilidad de realizar
peticiones AJAX fcilmente y con un cdigo compatible en la mayora de los navegadores. Esta
caracterstica se puede realizar con varias funciones, a continuacin un ejemplo sencillo:
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function( data ) {
$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
}
});
Para saber un poco ms sobre peticiones AJAX los invito a pasar por el tutorial: Cmo realizar
una peticin AJAX con jQuery.
A continuacin les dejo el cdigo completo que hemos visto en este tutorial:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial de jQuery</title>
<script src="path/to/jquery.min.js"></script>
midiv = $('#midiv'); // Devolver el elemento HTML con id="midiv"
mispan = $('.mispan'); // Devolver el elemento HTML con
class="mispan"
alert(midiv.text()); // Obtengo el texto de midiv y lo muestro en

pantalla
midiv.html('<h1>' + midiv.text() + '</h1>') // Pongo el contenido
de midiv en un tag H1
mispan.css('color', 'red'); // Le agrego color rojo al texto de
mispan
mispan.slideToggle("slow"); // Oculto mispan con una animacin
});
</script>
</head>
<body>
<div id="midiv">Contenido de un div</div>
<span class="mispan">Contenido de un span</span>
</body>
</html>
Bueno gente, hemos llegado al final de este tutorial de jQuery, espero que les sea de gran
utilidad y ante cualquier problema no duden en dejar un comentario.
Eliminar y agregar clases con
jQuery
En este tutorial aprenderemos a eliminar y agregar clases con jQuery utilizando las
funciones addClass y removeClass. Esto nos puede beneficiar en muchas ocasiones, como por
ejemplo cuando queremos manipular muchas propiedades CSS de una etiqueta.
Cmo eliminar y agregar clases con

jQuery?
Para realizar esto debemos incluir la librera de jQuery, en nuestro caso vamos a utilizar las que
nos ofrece google de manera online. Luego vamos a definir dos clases en CSS las cuales
representan a dos cuadrados de distintos colores y tamaos que vamos utilizar con las
funciones addClass y removeClass de jQuery como se muestra en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Eliminar y agregar clases con jQuery</title>
<script
ript>
<style>
.cuadrado-rojo-chico{
width:200px;
height: 200px;
background: red;
}
.cuadrado-verde-grande{
width:400px;
height: 400px;
background: green;
}
</style>
</head>
<body>
<div id="cuadrado" class="cuadrado-rojo-chico"></div>
<button type="button" onclick="cambiarRojoChico()">Rojo chico</button>
<button type="button" onclick="cambiarVerdeGrande()">Verde
grande</button>
<script>
function cambiarVerdeGrande(){
// Elimino la clase de color rojo y tamao chico
$('#cuadrado').removeClass('cuadrado-rojo-chico');
//Agrego lla nueva clase de color verde y tamao grande

$('#cuadrado').addClass('cuadrado-verde-grande');
}
function cambiarRojoChico(){
// Hago lo contrario que en el caso anterior
$('#cuadrado').removeClass('cuadrado-verde-grande');
$('#cuadrado').addClass('cuadrado-rojo-chico');
}
</script>
</body>
</html>
Simplemente al presionar los botones vamos a ver el resultado de eliminar y agregar una clase
en jQuery, cambiando as el color y tamao del cuadrado.
Bueno gente, hemos llegado al final de este tutorial en el cual se explica cmo eliminar y
agregar clases con jQuery. Ante cualquier problema no duden en dejar un comentario.

Prueba JSF

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Prueba JSF

Uploaded by

Copyright:

Available Formats

http://www.arquitecturajava.

JSF Ajax (Conceptos)

<?xml version="1.0" encoding="UTF-8"?>

private String nombre;

public String getNombre() {

public void setNombre(String nombre) {

Si rellenamos el nombre y pulsamos el boton de Aceptar obtendremos el siguiente resultado.

JSF y Ciclo de vida

JSF Ajax (Ejecucin y Render)

<?xml version="1.0" encoding="UTF-8"?></pre>

Lo importante de todo este cdigo son las siguientes lneas

JavaServer Faces I (JSF): action y

public void miActionListener(ActionEvent event) {

public String miAction() {

<img src="TuImagen.gif" onClick="Enviar()">

Claro que tambien se pueden mesclarun enlace con una imagen

<a href="javascript:Enviar()"><img src="TuImagen.gif"></a>

Bueno esperoesto te sirva.

public String getNombre() {

public void setNombre(String nombre) {

public int getValor() {

public void setValor(int valor) {

public LinkedList<Dato> getDatos() {

public void setDatos(LinkedList<Dato> datos) {

Al h:dataTable le hemos puesto un value="#{holaMundo.datos}", que es la forma de indicar que cogemos el

public void addValor(Dato valor) {

public void removeValor(Dato valor) {

public int getId() {

public void setId(int id) {

/** Generado automticamente por eclipse */

/** Generado automticamente por eclipse */

public String getNombre() {

public void setNombre(String nombre) {

public int getValor() {

public void setValor(int valor) {

<h:dataTable value="#{holaMundo.datos}" var="dato">

<!-- tercera fila. el outputLabel esta vacio y es para hacer

donde los botones de "borrar" y el botn de "Aadir" funcionan.

Cmo ordenar tablas con jQuery?

La tabla anterior se puede visualizar en la siguiente captura de pantalla:

Ejemplos de Datepicker con jQuery UI

Rango de fechas en Datepicker con jQuery UI

Animar Datepicker con jQuery UI

Modal dialog en Bootstrap

Agregar texto a un div con jQuery

Cmo agregar texto a un div con

.append() Agrega al contenido existente texto con HTML.

En el siguiente ejemplo podemos ver como utilizar la funciones mencionadas:

Agregar estilos CSS con jQuery

Obtener todos los checkbox

Cmo obtener todos los checkbox

Y si simplemente queremos todos los checkbox podemos hacer:

Reloj en Java Script

Cmo crear un reloj en Java Script?

$('#reloj').text(hora + ':' + minuto + ':' + segundo);

//Evento que actualiza el reloj cada un segundo

//Funcin para actualizar el reloj

$('#reloj').text(hora + ':' + minuto + ':' + segundo);

//Actualizamos al iniciar la pgina

Validar un formulario con jQuery

Ahora vamos a validar un formulario con

<form id="formID" class="formular" method="post">

Plugins para jQuery