miércoles, 30 de diciembre de 2009

interceptors en struts2



Los interceptores en struts2 son procedimientos que se ejecutan
antes o despues que se invoque una accion, existen algunos
definidos que podemos utilizar directamente o crear nuevas e
implementarlas, estos dos esquemas que tenemos nos sirve
para entender mejor los famosos interceptor de struts2.

Pero que mejor que un ejemplo para entender mejor este
concepto.

vamos a desarrollar un programa que pasa una palabra de una
pagina a otra y que el momento de hacer la solicitud de cambio
de pagina nos muestre un mensaje que se ejecuta
automaticamente mediante un interceptor.

1.- primiero vamos a crear nuestra pagina inicio, como siempre
la pagina index.jsp


<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="/struts-tags" prefix="s" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>struts2</title>

</head>

<body>

<h1>traspasar la siguiente palabra</h1>

<s:form action="proceso">

<s:textfield name="palabra" label="palabra"/>

<s:submit/>

</s:form>

</body>

</html>


2.- creamos las siguientes clases

import com.opensymphony.xwork2.ActionSupport;

public class parametro extends ActionSupport {

private String palabra;

// @Override
public String execute() {
System.out.println("entro a axecute");
return SUCCESS;
}

public String getPalabra() {
return palabra;
}

public void setPalabra(String palabra) {
this.palabra = palabra;
}
}

-------------------------------------------
esta clase es el interceptor, como cosas claves
podemos decir que implementa de la interfaz
Interceptor y el metodo invoke() es el que nos
delimita los procesos antes o despues de la accion.

import com.opensymphony.xwork2.ActionInvocation;
import com.opensymphony.xwork2.interceptor.Interceptor;

public class PruebaInterceptor implements Interceptor{

public String intercept(ActionInvocation next) throws Exception {


String s= next.invoke();
System.out.println("intercept");

return s;
}

public void init() {
}
public void destroy() {
}
}

si colocamos el System.out.println("intercept"); antes de
String s= next.invoke(); se mostrara el mensaje antes de
System.out.println("entro a axecute"); encontrado en la
clase parametro

3.- creamos la pagina respuesta, que es la asociada a la accion
parametro.


<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="/struts-tags" prefix="s" %>
<html>
<body>

parametro <s:property value="palabra"/>

</body>
</html>

4.- ahora vamos a lo mas importante que seria
nuestro archivo strust.xml, el que tiene toda nuestra
configuracion.


<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<!-- Configuration for the default package. -->
<package name="default" extends="struts-default">

<interceptors>
<interceptor name="tiempo_servidor" class="PruebaInterceptor"/>

</interceptors>

<action name="proceso" class="parametro">

<interceptor-ref name="tiempo_servidor"/>
<interceptor-ref name="defaultStack" />

<result name="success" >/resultado.jsp</result>
</action>

</package>
</struts>

de este codigo podemos decir que es importante que este
interceptor-ref name="defaultStack" en nuestra accion, puesto
que si no esta el parametro palabra no llega a nuestra pagina
respuesta.jsp

ahora al momento de ejecutar nuestro codigo, podemos
apreciar que a simple vista podemos ver que se pasa
el parametro desde una pagina a la otra, pero si vemos
nuestra consola podemos ver que se muestra lo siguiente.

entro a axecute
intercept

bueno trate de hacer un ejemplo lo mas sencillo, para
entender e iniciar los conocimientos de este framework,
creo que lo mas recomendable es leer mucho y tratar
de entender como funciona para evitar estar pegado en
problemas de configuracion, principalmente en el
archivo struts.xml

martes, 29 de diciembre de 2009

struts.xml

Struts2 utiliza un archivo de configuración llamado
struts.xml, este archivo xml es utilizado para iniciar
los recursos del proyecto. Que pueden ser interceptors,
actions, results y otros , también se pueden definir
variables globales, validaciones ósea en pocas palabras
es como el corazon de nuestro proyecto.

se puede trabajar con mas archivos xml, pero todos
tienen que estar incluidos en el archivo struts.xml
de la siguiente forma include file (de forma de tag),
separar este archivo en mas pequeño creo que es
recomendable cuando estamos presentes de un
proyecto muy grande, porque así nos quedaría mas
ordenado y mas fácil de trabajar, se podria de decir
que realizamos un modularizacion de nuestro archivo.

en la practica el archivo yo siempre lo guardo en src
no es necesario tenerlo guardado en la carpeta web-inf
tenemos que tener en cuenta que la estructura de nuestro
struts.xml tiene que respetar las reglas de formato de un
xml, puesto que será trasformado a DTD (archivo xml
bien formado, es como un validador de nuestro archivo xml
y sirve para recorrerlo )para poder leer, en mi copa
experiencia me he percatado que muchos errores son
generados al formar mal o definir mal este famoso archivo,
tenemos que en cuenta que la lectura de este archivo
es secuencial.

además existe el archivo strustdefault.xml y
struts-plugin.xml, estos dos archivos se incluyen
implicitamente (un parecido a la clase Object ) y
tienen la configuracion por defecto y son cargados
en el inicio, en la practica puedo decir que no se ven
en nuestro proyecto, yo trabajo con netbeans, y a
veces con eclipce, pero muy poco

viendo la estructura de este archivo podemos
ver que su principal tag es , ósea su
raíz y dentro de ella encontramos otras como:

package este define el grupo de trabajo, su
tag es podemos compartir atributos
o utilizarlos de forma organizativa, una condición
obligatoria es su nombre y una de sus caracteristicas
es que se puede extender

siguiendo con algunas etiquetas importantes,
podemos encontrar la tag bean, estos son creados
por el por el framework e utilizado y por ultimo
vamos hablar de las constantes(constant), esta
son muy útiles, ya que pueden ser usadas para
definir configuraciones, puede definir que tipo de
bean se debe utilizar, etc . Como dato podemos
decir que en el archivo web.xml los parametros
de inicialización FilterDispatchir se cargan como
constantes. este famoso FilterDispatcher es el punto
de entrada de nuestro proyecto y se configura en
el archivo web.xml

para trabajar con las constantes debe estar
devMode=true, bueno esto lo pueden ver en los
miles de ejemplos que se pueden encontrar en
internet, pero ya saben a que se refiere esta
configuración.

como siempre voy a dejar su buen link, para entrar
en detalle mas sobre strust2, porque podemos encontrar
muchos ejemplos pero si no entendemos lo que hacemos
vamos a dar siempre palos de ciego

link : struts2 muy bueno este link y esta en español, explica bien
la arquitectura de este framework y con solo ver la siguiente imagen
podemos entender muchas cosas de este framework.

sábado, 26 de diciembre de 2009

Empezando con struts 2

espero dar varios ejemplos de este framework, y para comenezar
tenemos que añadir struts2 a nuestro netbeans y entender como
funciona.

el link oficial es struts2

pero no prentendo explicar este framework porque existe muchos
blog y paginas que explican, solamente en este articulo pretendo
dar el punto de inicio para comenzar a trabajar con este framework.

1.-encontre este blog que explica de forma buena como empezar
Aqui

2.- como siempre tenemos que comenzar con el famoso "hola
mundo " jejeje aqui esta el link (la idea no es escribir ya mas de lo
mismo, mejor aprobechamos lo que existe.)

3.- y por ultimo este link explicando varias etiquetas link



viernes, 25 de diciembre de 2009

segundo ejemplo de jquery con jsp


el siguiente ejemplo utilizaremos jsp con jdbc , hoja de estilo,
se trata de ir capturando un texto, guardarlo y rescatarlo, para
despues mostrarlo en secuencia hacia abajo

insert.jsp


<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<%@ page language="java" import="java.sql.*" errorPage="" %>

<script type="text/javascript" src="js/jquery-1.3.1.js">

</script>

<link rel="stylesheet" href="code.css" type="text/css" media="all" />

<script type="text/javascript" >

$(function() {

$(".update_button").click(function() {

var boxval = $("#content").val();

var dataString = 'content='+ boxval;

if(boxval=='')
{
alert("introduzca texto");

}else

{
$.ajax({

type: "POST",
url: "demo.jsp",
data: dataString,
cache: false,
success: function(html){

$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
$("#content").value('');
$("#content").focus(); $("#flash").hide();
}
});

} return false;
});
});

</script>
<div>
<form method="post" name="form" action="">
<h3>ingrese Comuna</h3>
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Ingresar" name="submit" class="update_button"/>
</form>
</div>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>

demo.jsp


<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page language="java" import="java.sql.*" errorPage="" %>
<%

String content=request.getParameter("content");
try{
Class.forName("org.postgresql.Driver");
Connection con =
DriverManager.getConnection
("jdbc:postgresql://localhost/ejemplo","postgres","1234");
Statement st = con.createStatement();
int i=st.executeUpdate
("insert into comuna(nombre) values('"+content+"')");

ResultSet rs=st.executeQuery
("select * from comuna order by nombre desc");

if(rs.next())
{
while(rs.next())
{
String msg=rs.getString("nombre");
%>
<li>
<div align="left">
<span ><%= msg %> </span>
</div>
</li>
<%
}
}else{

out.println("error");}
}
catch(Exception e){

Exception ex = e;
out.println("error de conexion con postgres:"+ex);
}
%>

la base de dato es una tabla sencilla llamada comuna,
con un campo llamado nombre y nada mas.

ahora creamos la hoja de estilo en
netbeans lo podemos crear en nuevo, web ,
cascading style sheet.

root {
display: block;
}

*{margin:0;padding:0;}
ol.timeline{
list-style:none;font-size:0.8em;
}

ol.timeline li{
display:none;position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:0.8em;
background-color:#D3E7F5;
height:25px}

ol.timeline li:first-child{
border-top:1px dashed #000;}


encontre estos ejemplos muy intersantes tambien como son:

auto llenado de un text con java link
para entrar mas en detalle tenemos este otro link,
ademas este ejemplo el cual es un combo dependiente con jsp y
ajax link y por ultimo para entrar mas endetalle de jquery link



org.apache.commons

esta es una libreria super interesante y nos puede ayudar
mucho en nuestro desarrollo, para utilizar esta libreria
debemos bajar el jar correspondiente, el cual lo
podemos encontrar aqui

esta libreria nos brinda ayuda en manejo de String,
numeros, fecha, etc.

despues de bajar el jar lo agregamos a nuestro
proyecto y estamos listos para utilizarlo.

en el siguiente link podemos encontrar mas detalle sobre esta libreria

transmision de datos mediante ajax con jquery

vamos a desarrollar el siguiente ejemplo
a diferencia del ejemplo anterior es que ahora vamos a trabajar
con un archivo estructurado , ademas vamos a trabajar con
un controlador para nuestro ejemplo. pero vamos al ejemplo.

1.- primero vamos a crear nuestra clase libro, encapsulada
como dios manda, solomante los get de los atributos de la
clase, puesto que vamos a setiar mediante un contructor.

public class libro {
private String titulo;
private String tipo;
private int qty;
private String comentario;

libro(){
}

libro(String titulo,String tipo, int qty, String comentario){

this.titulo=titulo;
this.tipo=tipo;
this.qty=qty;
this.comentario=comentario;

}

public String getTitulo() {
return titulo;
}

public String getTipo() {
return tipo;
}

public int getQty() {
return qty;
}

public String getComentario() {
return comentario;
}

}


2.- como segundo paso creamos la clase libros, el cual
nos gestionara los objetos de la clase libro.

import java.util.*;


public class libros {

Map books = new LinkedHashMap();

public libros() {

books.put(11, new libro(
"Java Swing", "java", 1 ," para aplicaciones de escritorio"));
books.put(27, new libro(
"php","daniel",1," libro para iniciar php"

)
);

}
public libro fetch(int id) { return books.get(id); }
public Set fetchIds() { return books.keySet(); }

}

3.- despues vamos a crear nuestro archivo getbook_as_table.js de
tipo javascript y añadimos lo siguiente.

$(function() {
$("#button").click(function() {
$.ajax({
type: "GET",
url: "book_table.jsp",
data: { id: $("#sel").val() },
success: function(data) {
$("#out").html( data )
}
})
})
})

4.- ahora vamos a crear las paginas jsp, la primera sera
getbook_as_table.jsp


<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="java.util.*" %>

<%@ page import="modelo.*" %>

<jsp:useBean id="books" scope="session" class="modelo.libros"/>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Seleccion de libro </title>

<script type="text/javascript" src="js/jquery-1.3.1.js"></script>

<script type="text/javascript" src="js/errors.js"></script>

<script type="text/javascript" src="js/getbook_as_table.js"></script>

</head>

<body>

<h3>Buscar libro</h3>

<select id="sel">

<% for( Integer i: books.fetchIds() ) { %>

<option value="<%=i%>"><%=i%></option>

<% } %>

</select>

<button id="button">Buscar libro</button>

<br /><br />

Seleccion de libro:

<div id="out"></div>

</body>

</html>

y por ultimo la pagina book_table.jsp


<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<%@ page import="modelo.*" %>

<jsp:useBean id="libros" scope="session" class="modelo.libros"/>

<%

String id = request.getParameter("id");

int num_id = Integer.parseInt(id);


libro book = libros.fetch(num_id);

String comentario = book.getComentario();

String titulo = book.getTitulo();

String tipo = book.getTipo();

int qty=book.getQty();

%>

<table border="1" cellpadding="5">

<tr>

<td>Titulo:</td> <td><%=titulo%></td>

</tr>

<tr>

<td>tipo:</td> <td><%=tipo%></td>

</tr>

<tr>

<td>qty:</td> <td><%=qty%></td>

</tr>

<tr>

<td>comentario:</td> <td><%=comentario%></td>

</tr>

</table>

sobre el codigo, si no entienden como trabaja useBean pueden buscar
en este blok como se trabaja. Aqui

jueves, 24 de diciembre de 2009

Ejemplo de jquery seleccion en base a un combobox

en el articulo anterior solamente explique una introduccion,
pero realmente lo que importa es la implementacion es por
ello que vamos a dar unos ejemplos que encontre muy
interesante para empezar a entender mejor lo que es jquery
y como trabajar con ella.

primero tenemos que tener nuestro proyecto con la
carpeta js en la cual encontramos jquery-1.3.1.js, esto lo
podemos ver en el articulo anterior.

en la misma carpeta creamos un archivo para trabajar
con javascript esto lo hacemos asi:



creamos el archivo client_getperson y dentro de ella introducimos
el siguiente codigo:

$(function() {
$("#button").click(function() {
$("#out").html( $("#sel").val() )
})
})



luego en souce parckage creamos el paquete modelo,
en donde creamos la clase People

package modelo;

public class People {

private String people[]
= new String[] { "jorge", "felipe", "hector", "enzo", "sergio", };
public int getNumPeople() { return people.length; }
public String getPerson(int num) { return people[num]; }
}

ahora en nuestra pagina jsp


<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="java.util.*" %>

<%@ page import="modelo.People" %>

<jsp:useBean id="people" scope="request" class="modelo.People"/>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Seleccion con javascript</title>

<script type="text/javascript" src="js/jquery-1.3.1.js"></script>

<script type="text/javascript" src="js/client_getperson.js"></script>

</head>

<body>

<h3>Seleccion de Persona</h3>

<select id="sel">

<% for( int i = 0; i < people.getNumPeople(); ++i ) { %>

<option value="<%=people.getPerson(i)%>"><%=i%></option>

<% } %>

</select>

<button id="button">Ver persona</button>

<br /><br />

Persona Seleccionada: <span id="out"></span>

</body>

</html>

y la salida nos queda asi:

bueno este es el ejemplo mas simple, pero el mismo de otra forma
mas completa es asi.


<%@ page import="java.util.*" %>

<%@ page import="modelo.People" %>

<jsp:useBean id="people" scope="request" class="modelo.People"/>



<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Selection con ajax</title>

    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>

    <script type="text/javascript" src="js/server_getperson.js"></script>

  </head>

  <body>

    <h3>AJAX " Obtener Persona "</h3>



    <select id="sel">

      <% for( int i = 0; i < people.getNumPeople(); ++i ) { %>

      <option value="<%=i%>"><%=i%></option>

      <% } %>

    </select>

    <button id="button">buscar persona</button>

    <br /><br />

    persona Seleccionada: <span id="out"></span>

  </body>

</html>


en el archivo server_getperson.js temos que escribir :

$(function() {
$("#button").click(function() {
$.ajax( {
type: "GET", // the default
url: "GetPerson",
data: { id: $("#sel").val() },
success: function(data) {
$("#out").html( data )
}
} )

luego tenemos un servlet llamado GetPerson

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import modelo.People;

public class GetPerson extends HttpServlet {

private People people = new People();


protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {

String id = request.getParameter("id");
out.print(people.getPerson(Integer.parseInt(id)));

} finally {
out.close();
}
//.....
}

miércoles, 23 de diciembre de 2009

jquery con jsp


jquery es una libreria javascript que se esta utilizando mucho,
una de las caracteristicas de esta libreria es su version bien
comprimida y comparte muchas de caracteristicas de prototype
(una de las diferencias son la llamada de metodos).

en un link anterior explico un poco de ajax y si existe alguna duda
seria bueno ver este tema, ademas tengo unos link para profundizar
mas el tema.

http://ungranoparajava.blogspot.com/2009/05/empezando-con-ajax.html

si ya tenemos entendemos ajax o queremos ir directo a lo practico
podemos ver este manual de jquery muy bueno( en la pagina oficial
existe mucha documentacion e incluso en español)

http://www.librosweb.es/ajax/capitulo10/la_libreria_jquery.html

en el link anterior podemos encontrar tambien un manual de
prototype y de ajax, es muy bueno este link.

ahora vamos a los que nos reune jajajaja, a lo entretenido a lo
que es codigo.

como siempre vamos a utilizar nuestro netbeans y lo primero
que vamos hacer es un proyecto web, el cual no incluimos
ningun framework ( como hibernate, jsf, struts, etc aunque
se puede utilizar con jsf , struts , spring etc).

como podemos apreciar nuestro proyecto tiene una carpeta js, esta
la creamos en nuevo->otro->carperta. Para trabajar con esta libreria
tenemos que bajar el archivo jquery-1.3.1.js , esta es la version
pero podemos trabajar con la anterior que es la 1.2.1 bueno existen
muchas. este archivo lo guardamos en la carpeta js que creamos en
nuestro proyecto , asi de simple es.

y ahora trabajamos como uno lo hace con javascript , pero tenemos
que definir nuestro jquery en el codigo.


<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script src="js/jquery-1.3.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {

alert("CARGADO");

});

</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JSP Page</title>

</head>

<body>

<h1>JSP Page</h1>


podemos ver en el codigo anterior un pequeño ejemplo
de como implementar la libreria jquery en netbeans

En el siguiente link podemos ver que podemos
lograr con esta libreria , ejemplos buenos


Ahora vamos a dar un link de este ejemplo que esta muy bueno, la idea
es comunicar jsp y jquery. solamente date este link porque encontre
muy bueno el ejemplo para empezar y la idea no es copiar, sino reutilizar
codigo jejejej la idea es dar una manito a la comudidad java.

http://rekkeb.wordpress.com/2009/03/15/comunicar-jsp-y-jquery/

como el tema es interesante creo que vamos a crear otra entrada sobre el tema, con unos ejemplos mas interesantes.