Las practicas de programación orientadas a la web son muy cambiantes en el tiempo. Es necesario conocer e implementar tecnologías, conocer lenguajes,integrar comunidades,usar Ides, etc, recientes, para responder al mercado que se acerca.
Cuando me encontré con la necesidad laboral de realizar una aplicación móvil según requerimiento del sistema ERP que venimos desarrollando hace dos años, para una empresa multinacional en Panamá empece a investigar a fondo cual seria la opción mas viable para integrar mecanismos de software para móviles que nos permitiera tomar parte de la lógica del negocio ya existente (EJB) , con un costo computacional bajo, tecnología multiplataforma y orientado a la web, tome la decision de usar los recursos de primefaces mobile.
<h:form enctype="multipart/form-data" id="formfileupload" prependid="false">
<!--aca neustro componente se ejecuta automaticamente apenas recibe el archivo-->
<p:fileupload actualiza="" allowtypes="/(\.|\/)(gif|jpe?g|png)$/" auto="true" cancellabel="Cancelar" componente="" donde="" dragdropsupport="true" fileuploadlistener="#{rhEmpleadoFotoController.accionFileUpload}" foto="" grafico="" id="fileupload" imagen="" la="" label="Seleccionar" mi="" mode="advanced" rendered="true" renderiza="" se="" sizelimit="1000000" update=":formpersonal:idRhEmpleadoFoto" uploadlabel="Subir al servidor" xhtml="">
</p:fileupload>
<!--
para tener donde visualizar la imagen despues de ingresarse.
El nombre en el contexto de la aplicacion para mi controlador es rhEmpleadoFotoController
-->
<p:graphicimage cache="false" height="300" id="imagemTmp" style="margin: 0 auto;" value="#{rhEmpleadoFotoController.imagem}">
</p:graphicimage></h:form>
En nuestro xhtml ingresamos el anterior codigo, lo adaptamos de acuerdo al framework que estemos usando en mi caso primefaces.
public void accionFileUpload(FileUploadEvent event) { //evento propio del framework
try {
file = event.getFile();
byte[] foto = event.getFile().getContents();
String nomeArquivo = event.getFile().getFileName();
FacesContext facesContext = FacesContext.getCurrentInstance();
ServletContext scontext = (ServletContext) facesContext.getExternalContext().getContext();
String archivo = scontext.getRealPath("/modulos/rh/rhEmpleadoFoto/fotos/" + nomeArquivo); //guardar en ruta basica para luego mover
crearArchivo(foto, archivo);
imagem = new DefaultStreamedContent(event.getFile().getInputstream()); //agregar geter y seter para poder ser accedida desde otros xhtml
selectedEntidad = new RhEmpleadoFoto(); //entidad para persistir en la base de datos
selectedEntidad.setNombre(nomeArquivo);
selectedEntidad.setIdRhEmpleado(idRhEmpleado);
long peso = event.getFile().getSize();
int x = (int) peso;
selectedEntidad.setPeso(x);
selectedEntidad.setRuta("/modulos/rh/rhEmpleadoFoto/fotos");
selectedEntidad.setLlaveUnica(GenerarRandom().toString());
selectedEntidad.setEstadoEliminado(Boolean.FALSE);
getFacade().create(selectedEntidad); //crea el objeto(RhEmpleadoFoto) en la bd
//dos objetos para hacer renombrado de archivo y copiado a carpetas
RhEmpleadoFoto current = ejbFacade.findObjeto(selectedEntidad);
RhEmpleadoFoto current2 = new RhEmpleadoFoto();
RhEmpleadoFoto current2 = ejbFacade.findObjeto(selectedEntidad);
if (renombrarArchivo(current2.getRuta() + "/" + current2.getNombre(), current2.getRuta() + "/" + (idRhEmpleado.getIdRhEmpleado() + ""))) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Mensaje:", "Ingreso Exitoso"));
} else {
if (renombrarArchivo(current2.getRuta() + "/" + current2.getNombre(), current2.getRuta() + "/" + (idRhEmpleado.getIdRhEmpleado() + ""))) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Mensaje:", "Ingreso Exitoso")); //para enviar el mensaje a la growl del framework
} else {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Mensaje:", "" + current2.getRuta() + "/" + current2.getNombre() + " " + current2.getRuta()));
}
}
recreateModel();
FacesMessage msg = new FacesMessage("Succesful", file.getFileName() + " Fue Cargado Exitosamente.");
FacesContext.getCurrentInstance().addMessage(null, msg);
//cerrarPanelFoto(); //una funcion booleana para renderizar el contenido en el xhtml de acuerdo a lo sucedido
} catch (Exception ex) {
Logger.getLogger(IngenieriaProductoImagenController.class.getName()).log(Level.SEVERE, null, ex.getMessage());
FacesMessage msg = new FacesMessage("Succesful", file.getFileName() + " Error en la carga:" + ex.getMessage());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
/**
* Funcion para mover y renombrar un archivo
*
* @param String archivo Archivo o directorio a renombrar
* @param String directorio Directorio destino
* @exception RCException Se genera una excepción genérica.
* @return boolean
*/
public boolean renombrarArchivo(String archivo, String directorio) {
try {
FacesContext facesContext = FacesContext.getCurrentInstance();
ServletContext scontext = (ServletContext) facesContext.getExternalContext().getContext();
String Sarchivo = scontext.getRealPath(archivo);
File archivos = new File(Sarchivo);
String Sdirectorio = scontext.getRealPath(directorio);
File dir = new File(Sdirectorio);
String name = archivos.getName();
int j = name.indexOf(".");
String newname = "" + GenerarRandom() + "" + name.substring(j, name.length());
boolean semovio = archivos.renameTo(new File(dir, newname));
if (!semovio) {
System.out.print("El archivo no se ha Movido ...");
return false;
} else {
current.setNombre(newname);
current.setRuta("/modulos/rh/rhEmpleadoFoto/fotos/" + idRhEmpleado.getIdRhEmpleado()); //una carpeta con el id del objeto que lo contiene, en mi caso empleado
ejbFacade.edit(current);
System.out.print("Se Movio ...");
return true;
}
} catch (Exception e) {
System.out.print("" + e.getMessage());
return false;
}
}
/**
* Funcion para crear un archivo
*
* @param byte[] bytes objeto
* @param String archivo archivo
* @exception RCException Se genera una excepción genérica.
* @return void
*/
public void crearArchivo(byte[] bytes, String archivo) {
FileOutputStream fos;
try {
fos = new FileOutputStream(archivo);
fos.write(bytes);
fos.close();
} catch (FileNotFoundException ex) {
Logger.getLogger(IngenieriaProductoImagenController.class.getName()).log(Level.SEVERE, null, ex);
} catch (IOException ex) {
Logger.getLogger(IngenieriaProductoImagenController.class.getName()).log(Level.SEVERE, null, ex);
}
}
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class> //de mi framework
<init-param>
<param-name>thresholdSize</param->
<!--tamaño maximo de los archivos para el contexto de la aplicacion-->
<param-value>512000</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
<filter>
<mime-mapping>
<extension>png</extension>
<mime-type>image/png</mime-type>
</mime-mapping>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script type="text/javascript">// <![CDATA[
!window.jQuery && document.write('<script src="jquery.min.js" mce_src="jquery.min.js"> <\/script>')
// ]]></script>
<script type="text/javascript">
function cargarPaginaPHP(pagina, contenedor, data) {
var selected = $("#numeros").val();
var content = $('#' + contenedor);
$.ajax({
type: "GET",
url: "" + pagina,
data: "selected=" + selected,
success: function(data) {
content.html(data);
}
});
}
</script>
fragmento HTML.
<form id="formulario">
<select multiple id="numeros" name="numeros">
<option>uno
<option>dos
<option>tres
<option>cuatro
<option>cinco
</select>
<input type="button" onclick="cargarPaginaPHP('recibeParametro.php','contenedor','')" >
</form>
<div id="contenedor">
</div>
recibeParametro.php
<?php
$seleccionados = explode(',',$_GET['selected']); // convierto el string a un array.
for ($i=0;$i<count($seleccionados);$i++) {
echo "<br> Numero Seleccionado " . $i . ": " . $seleccionados[$i];
}
?>
/***************************************************
----- CONDICIONALES DE MEDIA QUERIES -----
Esta configuracion es la que permite ajustar
los componentes segun la resolucion del dispositivo
donde se invoca la pagina
****************************************************/
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 650px) {
}
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}
-- -- 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);
/* 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;
}
<%@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>
/*
* 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;
}
}
<%--
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());
}
%>
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;
}
}
