La respuesta rapida y eficiente a una peticion realizada por un usuario (cliente) acredita y potencializa la vida actual del software y su sobrevivencia al medio (Servidor e Internet).
Como dijo mi amigo Darwin Todo es Evolucion, aun la mas simple libreria existente actualmente para el ambiente web, empezo con unas pequeñas lineas de codigo con redundancia y simpleza. Hoy en dia las librerias evolucionan a un ritmo impresionante con tecnicas que en realidad me asustan. Sino Veamos Algunas de ellas y de quienes vivo muy agradecido por brindar sus recursos a la comunidad desarrolladora del mundo.
Hablemos un poco de AJAX. Ajax no es un lenguaje, ni un API mucho menos, Ajax es un a tecnica de pogramacion para el engranaje de apis en diferentes lenguajes de forma eficiente y adaptable a los nuevos entornos web 2.0
Si bien diversos navegadores existen en la actualidad es porque la limitacion de la evolucion en la tecnologia no existe en esta era ni mucho menos lo sera en las que vienen, y bien, tambien muchos desarrolladores se han ido involucrando en la creacion de mecanismos (Api´s,. IDE´s, Motores de BD, Servidores, Librerias, Frameworks, etc) que con mucho esfuerzo y dedicacion nos hacen la vida facil a muchos que los usamos sus creaciones y las adaptamos a nuestras aplicaciones web.
Es Gracias a Todos Ellos que ahora puedo escribir personalizadamante este tipo de recursos y compartirlos con ustedes.
Si bien diversos navegadores existen en la actualidad es porque la limitacion de la evolucion en la tecnologia no existe en esta era ni mucho menos lo sera en las que vienen, y bien, tambien muchos desarrolladores se han ido involucrando en la creacion de mecanismos (Api´s,. IDE´s, Motores de BD, Servidores, Librerias, Frameworks, etc) que con mucho esfuerzo y dedicacion nos hacen la vida facil a muchos que los usamos sus creaciones y las adaptamos a nuestras aplicaciones web.
Es Gracias a Todos Ellos que ahora puedo escribir personalizadamante este tipo de recursos y compartirlos con ustedes.
- JQuery
- Mootools
- JfreeChart
- Itext
- JDom
- etc.
Hasta Este momento supongo que la persona que va a observar este tutorial sabe de:
- Tecnologia Java y JSP (Servlet)
- Hojas de Estilo CSS
- Javascript - Jquery (Framework Javacript)
- Mysql (SQL)
- Servidores TOMCAT o RESIN
- AJAX
Bueno ahora si vamos a ver el Ejemplo 100% Funcional
Para ahorrarme la descripcion del ejemplo he puesto los comentarios en todos los codigos (API) usados.
SQL
-- -- Estructura de tabla para la tabla `tabla` -- CREATE TABLE `tabla` ( `nombre_li` varchar(50) NOT NULL, `posicion` varchar(100) NOT NULL, `id` int(11) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1; INSERT INTO `tabla` VALUES (\'listItem_1\', \'2\', 1); INSERT INTO `tabla` VALUES (\'listItem_2\', \'1\', 2); INSERT INTO `tabla` VALUES (\'listItem_3\', \'3\', 3); INSERT INTO `tabla` VALUES (\'listItem_4\', \'4\', 4); INSERT INTO `tabla` VALUES (\'listItem_5\', \'5\', 5); INSERT INTO `tabla` VALUES (\'listItem_6\', \'6\', 6);
Stylo Visual CSS
/* Estilo Visual para la GUI
* Es muy importante conocer CSS y la aplicacion de estos
* estilos de manera dinamica con Javascript.
*/
* { margin: 0; padding: 0; }
body {
font: 0.9em Arial;
padding: 10px;
}
#info {
display: block;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #333;
background-color: #efefef;
}
#test-list {
list-style: none;
}
#test-list li {
display: block;
padding: 20px 10px; margin-bottom: 3px;
background-color: #efefef;
}
#test-list li img.handle {
margin-right: 20px;
cursor: move;
}
#test-lista {
list-style: none;
}
#test-lista li {
display: block;
padding: 20px 10px; margin-bottom: 3px;
background-color: #efefef;
}
#test-lista li img.handles {
margin-right: 20px;
cursor: move;
}
#tabla{
border: 1px solid black;
}
Java JSP
<%@page import="java.sql.*, java.util.Date, javax.swing.*, javax.servlet.*, java.util.*" session="true" %>
<jsp:useBean id="conect" scope="session" class="Control.BeanConnection" />
<jsp:useBean id="consulta" scope="session" class="Control.Consultas" />
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tecnologia Arrastrar y soltar elementos con AJAX (JSP, Java, MySql, Javascript, CSS)</title>
<!--Llamado a los componentes Jquery
La mejor manera de no consumir recursos en nuestro servidor
es llamar directamente las librerias desde la zona de recursos
de JQUERY en google Sources
Excelente.! siempre se mantienen actualizadas.
-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<link rel=\'stylesheet\' href=\'styles.css\' type=\'text/css\' media=\'all\' />
<script type="text/javascript">
$(document).ready(function() {/*Nos ponemos a la Escucha*/
$("#test-list").sortable({//Creamos el elemento
placeholder: \'tabla\',/*Le Programos sus propiedades y Acciones*/
containment: "ul",
items: "li",
axis: \'y\',
opacity: 0.6,
handle : \'.handle\',
update : function () {//Al Actualizarse
var order = $(\'#test-list\').sortable(\'serialize\');//Toma en serie los componentes y almacenelos en una variable arreglo order
$("#info").load("sortable.jsp",{ordenar: order, evento: "Run"}),//envio de Parametros a la Pagina Sortable.jsp
//Quien sera la encargada de procesar la informacion con la BD
alert(order);
}
});
});
</script>
</head>
<body>
<pre>
<div id="info">Esperando Para Actualizar</div>
</pre>
<ul id="test-list" >
<%
int cont = 0;//
ResultSet ListaImagenes = consulta.ListaImagenes(conect);//Llamamos el resultet
while (ListaImagenes != null && ListaImagenes.next()) {//Lo vaciamos y tiene registros
cont++;
%>
<li id="listItem_<%=cont+ ""/*Valor de la Serie*/%>"><img src="img.png" alt="move" width="16" height="16" class="handle" /><strong><%=ListaImagenes.getString("id") + " con nombre de fila:" + ListaImagenes.getString("nombre_li") + ""%> </strong></li>
<%}%>
</ul>
</body>
</html>
Clase Java para consulta SQL
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package Control;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
*
* @author Yovany Suarez Silva
*/
public class Consultas {
public Consultas() {
}
/**
* Este es el metodo que consulta y almacena en un componente tipo
* resultSet todos los valores de la Tabla
*
* @ListaImagenes Arreglo de Registros en la Tabla
*/
public ResultSet ListaImagenes(BeanConnection conect) throws SQLException {
String strSQL = "select * from tabla";
ResultSet ListaImagenes = conect.ejecutar_select_catch(strSQL);
return ListaImagenes;
}
}
Pagina JSP de ACCION
<%--
Document : index
Created on : 2/05/2010, 07:36:48 PM
Author : Yovany Suarez Silva
--%>
<%@page import="java.sql.*, javax.servlet.*, java.util.*" session="true" %>
<jsp:useBean id="conect" scope="session" class="Control.BeanConnection" />
<%//Esto es Java Basico De VI Semestre
try {//Las Excepciones No permiten reventar nuestras aplicaciones y nos informan de los errores.
if (request.getMethod().equals("POST")) { //Se recibe el metodo
String evento = request.getParameter("evento"); //Se recogen los parametros
String order = request.getParameter("ordenar");
if (evento.equals("Run")) {
String palabras[] = order.split("&");//Se separan los items que vienen en el arreglo JSON
for (int i = 0; i < palabras.length; i++) { //Se vacea el arreglo
String palabras2[] = palabras[i].split("=");
String b = palabras2[0];
String a = palabras2[1];
String consulta = "UPDATE tabla SET posicion=\'" + a + "\' " +
"WHERE nombre_li=\'" + (b.substring(0, 8)) + "_" + (i + 1) + "\' ";//Se Actualiza y con se escribe la respuesta
conect.ejecutar_sql_catch(consulta);//se llama al metodo de ejecucion para enviar datos a la bd
out.println(consulta);
}
}
}
} catch (SQLException e) {//Si hay una Excepcion en SQL
out.println(e.getMessage());
}
%>
BEAN De Conexion
package Control;
/**
*
* @author Yovany Suarez Silva
*/
import java.sql.*;
public class BeanConnection{
private Connection con = null;
private PreparedStatement st = null;
private Statement st1;
private ResultSet rs;
private int id=0;
public BeanConnection() {
}
public int getId(){
return id;
}
public void setId(int _id){id=_id;}
String cadena="";
public void instituciones(){
cadena="ajax?user=root&password=";
}
public void conecta(){
instituciones();
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
con = (Connection) DriverManager.getConnection("jdbc:mysql://localhost/"+cadena);
} catch(Exception e) {
System.out.println("\nERROR pool: " + e.toString());
}
}
public Connection getConect(){return con;}
public void close() {
try {
} catch(Exception e) { }
}
public void closing() {
try {
st.close();
con.close();
} catch(Exception e) { }
}
public ResultSet ejecutar_select_catch(String la_sql) throws SQLException {
conecta();
rs = null;
st= con.prepareStatement(la_sql);
rs = st.executeQuery();
return rs;
}
public int ejecutar_sql_catch(String la_sql) throws SQLException {
conecta();
int num_filas = 0;
st=con.prepareStatement(la_sql);
num_filas = st.executeUpdate();
return num_filas;
}
}
Espero le Aprovechen, lo remodelen y me cuenten como les fue, a traves de pequeños comentarios.
y Termino con Esta magnifica Frase "Todo lo que no Se Comparte se Pierde", Hafary.
