Desarrollo WEB.


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.

martes, 18 de diciembre de 2012

Paso de parametros entre paginas html5

En ocasiones en el mundo html5 de requiere de usar otras paginas para independizar un poco y no saturar tanto de cargas ajax nuestra página. en este proceso nace un artefacto muy básico para el paso de parámetros entre paginas HTML: Con jsp seria algo así:
<%= request.getParameter("nombredelparametro") %>
con php seria:
<?php echo $_get["nombredelparametro"] ?>
con html: desde la pagina que se envia la accion.
  
href="paginaquerecibe.html?var1=Yovany&var2=Suarez" 
desde la pagina que recibe. En la cabecera
function leerGET() { 
 var cadGET = location.search.substr(1, location.search.length); 
 var arrGET = cadGET.split("&"); 
 var asocGET = new Array(); 
 var variable = "";
  var valor = ""; 
 for (i = 0; i < arrGET.length; i++) { 
  var aux = arrGET[i].split("=");
  variable = aux[0]; 
  valor = aux[1]; 
  asocGET[variable] = valor; 
 } 
 return asocGET;
 }
luego se lee lo tomado y se opera ya a gusto
$(document).ready(function() { 
 var paresVarValor = leerGET(); 
 for (obj in paresVarValor) { 
  idLote = paresVarValor[obj]; 
  // document.write("'" + obj + "': " + paresVarValor[obj] + "");
   alert("'' + paresVarValor[obj]); 
 } 
});

lunes, 17 de diciembre de 2012

Propiedad Personalizada en un componente HTML

Existen algunos casos dentro de la programacion web en los que se requiere hacer paso de parametros a nivel de javascript, sin regargas de pagina o tener que pasar por GET o POST. Una de las opciones para manejar este caso es agregar propiedades a un elemento HTML, en este caso representamos una img que tiene una propiedad personalizada llamada idEmpresa, le agregamos un accion jquery que al hacer click sobre este img se lea esta propiedad. No aplica para todos los componentes del DOM.!
Ejemplo del caso.
HTML:


img id='imagen' width='120' idEmpresa='500' 
src='http://agrocost.i-project.co/AgroCostMDA/images/logos/agrocost.png' 
Javascript:


 $(function() {
   $('imagen').bind("click",function(){
      var idEmpresa = $(this).attr("idEmpresa");
   )};
 });

sábado, 1 de septiembre de 2012

Desplegar un EAR en glassfish

Glassfish en un potente servidor de aplicaciones j2ee, trae una excelente interfaz gráfica para la administración de recursos en el servidor., desde este panel  se pueden realizar la mayor cantidad de tareas asignadas a un administrador de servidor y llevar el control del rendimiento de las aplicaciones.

Netbeans es una herramienta muy practica para desarrollar aplicaciones empresariales j2ee. Este IDE nos permite realizar después de una ejecución el despliegue automático del EAR en un domain virtual de una manera muy fácil. Cuando queremos construir o reconstruir un EAR debemos simplemente accionar el modo debug para que el IDE fabrique nuevamente un EAR con los cambios mas recientes.
Para ingresar al modo de consola de glassfish, arranque el servidor por consola o desde Netbeans y use http://localhost:4848 para acceder al panel gráfico, si quiere permitir acceso a este panel de admin desde otro nodo en la red, active el dass para que puedan acceder de forma segura a través de https.



Para desplegar un EAR primero hay que saber bien que es?, que contiene? y que recursos necesita configurarle al servidor para que identifique los recursos de conexion a Motores de BD y de persistencia.



Como ya sabemos un EAR es un paquete donde se encuentran compresos todos los módulos que comprenden una aplicación j2ee, en su interior existe una carpeta llamada lib, la cual es la contenedora de todas las librerías que se usen en los diferentes módulos incluyendo los drivers de conexión para java y X motor de base de datos.

  • Despliegue de un EAR


    • Configuración del pool de conexión.
    • Configuración del JDBC
    • Despliegue del EAR
      • Desde un archivo local a servidor local
      • desde un archivo local en el servidor al glassfish en el servidor
      • Re despliegue del EAR
      • Respaldo a archivos físicos construidos previamente después del despliegue anterior.


jueves, 30 de agosto de 2012

Responsive Web Design (Media Query css3)


Diseño Web Sensible


La evolucion de las css es muy notable, se hacen cada dia mas potente en la demanda del usuario, en soluciones con interfaces adptativas a cualquier dispositivo, debido a la gran variedad que el mercado tecnologico presenta .


La tecnología CSS viene encargandose cada vez mas de procesos independientes de visualizacion, de los que los script javascript, eran los encargados. Ahora css3 se potencializa en html5 dandole mucha robustes y flexibilidad a nuestras paginas web personales o empresariales. Las css se convierten en la capa de presentacion unica de nuestras aplicaciones web.

En el mercado del diseño de software se encuentra de que no siempre el cliente desea grandes estructuras de software costosas,  solamente para mostrar la informacion de sus productos, ofertas etc. Ahora se hace necesario que estos diseños sean practicos pero sobre todo, que tengan los atributos necesarios para que integren tecnologias  y desarrollar diseños agiles, adaptativos a multiples resoluciones y plataformas. 
Es decir; que los usuarios puedan acceder a la informacion desde diferentes dispositivos sin perder la individualidad del caracter empresarial o personal. 

A partir de css3 se crean las llamadas Media query css3, donde se puede aplicar condicionantes y operadores en el interior de la sintaxis simple de css.

Es mediante esta tecnología que podemos validar en nuestra hoja de estilos css de la aplicación, la resolución que esta solicitando mi recurso de pagina web  y ejecutar las clases diseñadas para tal resolución.


            /***************************************************
            ----- 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;
                }
            }

Igualmente existe en la actualidad la posibilidad de incrustar fuentes de texto personalizadas en nuestros proyectos y para determinada resolucion usando css3, una de estas alternativas,  tal vez la mas simple, es usar los repositorios de fuentes de http://www.google.com/webfonts 

miércoles, 15 de agosto de 2012

Comparar fechas en un Sesion Bean con EJBQL

Las practicas de programación en EJBQL son muy parecidas a SQL, solo que en EJBQL todo es orientado a objetos, ya no tenemos una tabla sino un objeto construido (clase java)  referenciado a una tabla SQL que es comparada, alimentada y consultada a travez del motor de persistencia JPA. 

Esta practica permite comparar una fecha (java.util.date) que llega como parámetro para ser  identificada como una propiedad de un objeto. Cuando realizamos la comparación mediante la forma tradicional que se usa en SQL, no obtenemos un resultado optimo. es por eso necesario usar el .setParameter("nombre",valor) para que el tipo de dato que viene se mantenga y pueda ser identificado eficientemente.
.
Cuando son enteros o cadenas se pueden comparar mediante el método tradicional de 
propiedadEJB = '"  + campo+ "', pero, ya en fechas, hay que cambiar la forma según la notación EJBQL.

Ejemplo: 


@Override
public List findIdRhEmpleadoEnDisposicion(int idRhEmpleado, Date horaActual) {
        Query query;
            query = em.createQuery("select object(o) from ProduccionPlaneacionTurnoFecha as o where o.idRhEmpleado='" + idRhEmpleado + "' AND o.fechaInicio <= :start AND o.fechaFin >= :start ").setParameter("start", horaActual);
        return  query.getResultList();
    }

Una imagen para mas claridad.


martes, 14 de agosto de 2012

Incompatibilidad de Código CSS3 en Templates Faces

Las experiencias adquiridas en el desarrollo de software y mas prioritariamente en la programación de las interfaces de las mismas, se convierten en una gran oportunidad de encontrarnos en momentos de mucho sosiego cuando de repente algunos mecanismos a artefactos tecnologicos generan incompatiblidad a la hora de su ejecución.

Es el caso mas reciente cuando con el animo de buscar apariencia touch similar a google en sus tonos planos con degrade, logre introducirme en un problema de alto calibre que me llevo días de analisis por la misma sencilles de su solucion.

Esta es la interfaz planteada en el caso de una validacion de usuario mediante lector de código de barras el cual genero conflicto luego de agregar las siguiente clase visual cs4.


/*Clase visual (jquery) general para los botones del paquete de widgets primefaces*/

.ui-button{ 
 text-transform: uppercase; 
 background-color: #4D90FE !important; 
/*Zona Roja*/
 background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED)); 
 background-image: -moz-linear-gradient(top,#4D90FE,#4787ED); 
 background-image: -ms-linear-gradient(top,#4D90FE,#4787ED); 
 background-image: -o-linear-gradient(top,#4D90FE,#4787ED); 
 background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED); 
 background-image: linear-gradient(top,#4D90FE,#4787ED); filter:
 progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed'); 
 border: 1px solid #3079ED; 
 -moz-border-radius: 2px; 
 -webkit-border-radius: 2px; 
 border-radius: 2px; 
 -moz-user-select: none; 
 -webkit-user-select: none; 
/*Fin zona Roja*/
 color: white; display: inline-block; 
 font-weight: bold; height: 29px; 
 line-height: 29px; 
 text-align: center; 
 text-decoration: none; 
 padding: 0 8px; margin: 0px auto; 
 font: 13px/27px Arial, sans-serif; 
 cursor:hand; 
 vertical-align: middle; 
 }

Interfaz obtenida después de aplicar la Clase.

Uno de los detalles para no llegar rapido al problema es que ni el servidor de j2ee ni el Ide y menos aun el firebug nos da un reporte del fallo ni la localización del mismo, es hay donde se entra en pánico programático. Te cuestionas. Pero si todo esta bien.! El navegador es incompatible? que hize ultimamente?, mejor comparto el problema con mi equipo de trabajo para que vean porque estoy bloqueado!, y lo  mas critico es que el servidor de App J2EE en mi caso glassfish solo me reportaba lo siguiente.



Algo ilógico porque ya venia trabajando con el controlador muy eficientemente y nada de lo que reportaba tenia sentido.

Por eso en los momentos de crisis ten calma. Pide a la espiritualidad que te guié para lograr una búsqueda eficiente de la solución a los inconvenientes y realiza siempre un testeo en base a los ultimos cambios realizados. No olvides el backups diario y sobre todo informa del impase a tu equipo de trabajo,siempre te Entenderan.

!OJO. en algunos momentos de ejecucion el navegador nos puede hacer una mala jugada en su almacenamiento de cache y podemos estar mucho rato con el problema sin darnos cuenta de ello.

domingo, 22 de julio de 2012

Construir un objeto primefaces desde Codigo Java

Cuando queremos llenar un componente primefaces en el caso de una tabla se usan los modelos primefaces. que son clases java con una estructura de lista de objetos predeterminados para fácil uso en JSF.


Una alternativa que nos brinda primefaces como paquete de widgets JSF es la opción de crear un objeto primefaces dinámico con x componentes desde la capa de negocio. esta opción nos da la facilidad de hacer mas dinamismo sobre la capa de presentación sin limitarnos a los servicios que los componentes fabricados nos brindan.




El código en el managedBean para crear el componente seria:




  1.     /*
         * Crea componente primefaces desde codigo java y devuelve al componente
         *  primefaces xhtml en su propiedad binding
         */
        private TabView tabView;

        public void setTabView(TabView tabView) {
            this.tabView = tabView;
        }

        public TabView getTabView() {
            FacesContext fc = FacesContext.getCurrentInstance();
            tabView = (TabView) fc.getApplication().createComponent("org.primefaces.component.TabView");

            // cargar la lista de objetos para tabview
            List liscaldimensional = new ArrayList();
            liscaldimensional = ejbFacadeCalidadDimensional.findAll();

            //Se crean dinamicamente las tabs y en su contenido, unas cajas de texto
            for (CalidadDimensional sub : liscaldimensional) {
                Tab tab = new Tab();
                tab.setTitle(sub.getCalidadDimensional());
                Random randomGenerator = new Random();
                int total = 4;
                for (int i = 0; i < total; i++) {
                    InputText inputtext = new InputText();
                    inputtext.setLabel("Label");
                    inputtext.setValue("id:" + inputtext.getClientId());
                    inputtext.setOnfocus("");
                    tab.getChildren().add(inputtext);
                }
                tabView.getChildren().add(tab);
            }
            return tabView;
        }


En la pagina .xhtml

        
  1. <p:tabview binding="#{calidadDimensionalOfController.tabView}" rendered="true" 
  2. style="float: left; margin-left: 5px; margin-top: 10px; width: 500px;" />
  3. </p:tabview>

domingo, 8 de julio de 2012

Evolucion de las estructuras JAVA.

Las eficientes estructuras java vienen evolucionando de manera agil y ordenada. Grandes comunidades desarrolladoras esta inclinadas en brindar al desarrollador la facilidad en la implementacion de esas estructuras. En un caso practico para presentar, están las listas de objetos y el recorrido sobre los contenidos.


La jdk en su versión 7 nos brinda la oportunidad de usar nuevas instancias de código, de una manera practica y super facil, a buen modo, las futuras generaciones de desarrolladores les quedara muy sencillo realizar scripts de programacion y engranar grandes aplicaciones, bastara con sacar una caja de herramientas virtuales y unas interfaces multimedia y la programación iconica estara por todas partes. véase MDA


Primefaces, un paquete de widgets para el framework JSF, usa en sus modelos estas implementaciones a tal agilidad que con solo pasar la lista a un componente este se encarga de recorrerla y validarla.  



  1. <p:dataList value="#{miBeanController.milistadeobjetos}" 
  2. var="objeto" type="ordered">  
  3.     #{objeto.propiedad}, #{objeto.propiedad2}  
  4. <p:dataList>


private List milistadeobjeto; 
milistadeobjetos = new ArrayList(); //es muy importante inicializar las listas de objetos a tipos array list para evitar desbordamientos por falta de ...


Para recorrer estas listas basta con:

  1. Private List milistadeobjetos;
  2. milistadeobjetos = new ArraList();

  3. for(MiObjeto x : milistadeobbjetos){ FacesContext.getCurrentInstance().addMessage(nullnew FacesMessage(FacesMessage.SEVERITY_INFO,"Mensaje""Objeto: "+getPropiedadDeObjeto());  
  4. }
  5.     

Cada dia se realizan depuraciones sobre las grandes librerias que conforman java, asegurando su evolucion y un largo ciclo de vida en el inicio de la era actual de las aplicaciones web.

miércoles, 13 de junio de 2012

Llamar un controlador JSF desde otro controlador (llamados entre ManagedBean)


Los managedBean o controladores son muy parecidos a las partitionClass del framework .Net
Este es el archivo en el que generamos logica de negocio y operaciones entre objetos(entidades).
Una de las necesidades basicas en la implementacion de JSF en nuestros proyectos j2ee, es el tener que asignar valores desde un managedBean a otro managedBean en el caso ejemplo de factura y detalles de factura,en este caso es necesario ingresar detalles a una factura pero se nesecita heredar el id del padre(factura).

@ManagedProperty("#{ingenieriaProductoPiezaBaseController}")
private IngenieriaProductoPiezaBaseController ingenieriaProductoPiezaBaseController;
//generar getter ...and setter...

Tener cuidado que al hacer llamados ciclicos se genera error, es decir si se llama un controlador y este llama al que lo llama, se genera una secuencia circular barbara. 
En glassfish se reporta el siguiente error.

at java.lang.Thread.run(Thread.java:722)
Caused by: com.sun.faces.mgbean.ManagedBeanCreationException: No se puede crear el bean administrado ingenieriaProductoController.  Se han encontrado los problemas siguientes:
     - El bean administrado ingenieriaProductoController contiene referencias cíclicas.  Ruta de evaluación: ingenieriaProductoController -> ingenieriaProductoPiezaBaseController -> ingenieriaProductoController.
at com.sun.faces.mgbean.BeanManager.create(BeanManager.java:265)
at com.sun.faces.el.ManagedBeanELResolver.resolveBean(ManagedBeanELResolver.java:244)


miércoles, 23 de mayo de 2012

uso del p:remoteCommand de Primeface Framework JSF

p:remotecommand actionlistener="{ingenieriaMarcaController.CargarClasificaciones()}" 
autorun="true" name="ActualizarLista" process="@none" update="tabla"


ActionListener : Realiza el llamada a la funcion publica del ManagedBean.
autorun :  Se ejecuta automaticamente
update : El Id del componente primeface que quiere refrescar en contenido.
process : Para procesar parcialmente ....
name : Identificador para invocarle eventos , efectos, etc


Este componente de primeface es utilizado para llamar determinadas acciones de un managedBean en un momento de inicio de pagina o accion de un componente html.

lunes, 21 de mayo de 2012

Instalar subversion en linux suse.



Para instalar subversion se requiere de tener previamente instalado y configurado el servicio apache.
Lo mas practico es usar yast para instalar el software y los servicios pertinentes a subversion, preferiblemente instalar tambien el plugins de netbeans para guardar directamente desde nuestra lugar de desarrollo en el repositorio.

Una vez instalado es necesario crear una carpeta
mkdir /srv/www/htdocs/mirepositorio/miproyecto/
miproyecto es la carpeta que contiene las fuentes para el espejo del proyecto J2EE
se dan permisos de administrador svn a esta carpeta con el comando
svnadmin create /srv/www/htdocs/mirepositorio
se debe dar permisos al servidor de la siguiente manera
chown -R iproject /srv/www/htdocs/mirepositorio

Ahora se debe ir al archivo ubicado en
/etc/apache2/conf.d/subversion.conf y quitar algunas etiquetas de comentario (#)

DAV svn
SVNPath /srv/www/htdocs/mirepositorio
# # Limit write permission to list of valid users.
#
# # Require SSL connection for passwor...


reiniciar el servicio de web desde apache2 con el comando
/etc/init.d/apache2 restart
para mas brevedad use yast - servicios del sistema

Bueno todo este cuento de crear carpetas y dar permisos para repositorios es mejor evitarlo tan solo instalando el cliente de kdesvn desde yast, con este cliente se puede crear repositorios subversion, luego desde el netbeans se crean la configuracion del enlace al repositorio creado como se muestra en la siguiente figura.






Configurar Java JDK1.7 en Linux suse para netbeans


Al empezar a utilizar herramientas de jdk7 en nuestros desarrollos se hace necesario configurar el recurso utilizado por el sistema suse para compilar y usar aplicaciones Java.
update-alternatives --install "/usr/bin/java" "java" "/usr/java/jdk1.7.0_17/bin/java" 1
update-alternatives --config java
Seleccione el numero correspondiente a la version del jdk y enter.
java -version
Para actualizar el java Compilador.
update-alternatives --install "/usr/bin/javac" "javac" "/usr/java/jdk1.7.0_17/bin/javac" 1

domingo, 20 de mayo de 2012

Configurar host de apache para NetBeans en Suse 12.x


Uno de los principales obstaculos al ejecutar proyectos web entreprise en netbeans es reconocer el host de apache para iniciar normalmente los servicios.

Es recomendable realizar el siguiente procedimiento.

Abrir gestor de archivos en modo super
Ir a etc/hosts (abrir con editor de textos)

Añadir
127.0.0.1 dhcppc1 o,y 127.0.0.1 dhcppc2

Restaurar servicio de apache2 por yast servicios del sistema.