Arranca el proyecto Web.

Hola, ¿que tal estais?. Bueno pues esta semana hemos empezado un proyecto Web con J2EE basado en un portal donde compartiremos conocimientos varios sobre programación web, movil, en fin nuevas tecnologías.
Cuando se complete un poco más ire introduciendo mas información sobre como transcurre el proyecto.

Un Saludo.

Miniaplicación Web con Java y Flex.

Reportaje podcast sobre Flex y RIA.

Aqui teneis una nueva entrada un poco diferente. Esta vez es un podcast sobre Flex y RIA.

Podcast RIA y Flex

Eso es todo amigos!!!

Java and Flex - CRUD (Crear, Leer, Modificar, Eliminar)

Después de una semana de "puente" hemos realizado un blog, y ahora he perfeccionado una aplicación CRUD, con Java y Flex.

Se trata de una aplicación para listar, insertar, eliminar y modificar los datos de un usuario. Esta aplicación esta desarrollada para tener un único acceso a la base de datos, lo explicare a continuación.

Vamos con los ejemplos:

+++ Código Flex +++

*** Declaración de los HTTPService que realizan una llamada  a los respectivos Servlets de Java ***


        <!-- HTTPService insertarUsuario,
             result llama a una función que recoge el id devuelto por la inserción
             y lo introduce junto con los datos del usuario en el XMLListCollection, "listUsuarios" , para tratarlos
             en el datagrid asociado a el.-->
        <s:HTTPService id="insertarUsuario" url="ServletInsertar" useProxy="false" method="POST" result="resultHandlerInsertarUsu(event)" resultFormat="e4x">
            <s:request xmlns="">
                <nombre>{txtNombre.text}</nombre>
                <apellidos>{txtApellidos.text}</apellidos>
                <direccion>{txtDireccion.text}</direccion>
                <ciudad>{txtCiudad.text}</ciudad>
                <provincia>{txtProvincia.text}</provincia>
                <pais>{txtPais.text}</pais>
                <telefono>{txtTelefono.text}</telefono>
                <fax>{txtFax.text}</fax>
                <correo>{txtCorreo.text}</correo>
                <web>{txtWeb.text}</web>
                <mensajeria>{txtMensajeria.text}</mensajeria>
            </s:request>
        </s:HTTPService>
       
        <!-- Se llama al inicio(creationComplete) y tenemos los datos de los usuarios introducidos en el datagrid -->
        <s:HTTPService id="listarUsuarios" url="ServletListar" useProxy="false" method="POST" resultFormat="e4x"/>
       
        <!-- Elimina un usuario pasandole el dg.selectedItem.id -->
        <s:HTTPService id="eliminarUsuario" url="ServletEliminar" useProxy="false" method="POST" resultFormat="e4x">
            <s:request xmlns="">
                <id>{dg.selectedItem.id}</id>
            </s:request>
        </s:HTTPService>
       
        <!-- Modifica un usuario, se le pasan los datos modificados y el id(dg.selectedItem.id) seleccionado en el dg -->
        <s:HTTPService id="modificarUsuario" url="ServletModificar" useProxy="false" method="POST" resultFormat="e4x">
           
            <s:request xmlns="">
                <id>{dg.selectedItem.id}</id>
                <nombre>{txtNombre.text}</nombre>
                <apellidos>{txtApellidos.text}</apellidos>
                <direccion>{txtDireccion.text}</direccion>
                <ciudad>{txtCiudad.text}</ciudad>
                <provincia>{txtProvincia.text}</provincia>
                <pais>{txtPais.text}</pais>
                <telefono>{txtTelefono.text}</telefono>
                <fax>{txtFax.text}</fax>
                <correo>{txtCorreo.text}</correo>
                <web>{txtWeb.text}</web>
                <mensajeria>{txtMensajeria.text}</mensajeria>
            </s:request>
           
        </s:HTTPService>


*** Declaración de los XMLListCollection ***


        <!-- Obtine la colección de usuarios -->
        <s:XMLListCollection id="listUsuarios" source="{listarUsuarios.lastResult.user}"/>
        <!-- Obtine el id (en la base de datos) del usuario insertado -->
        <s:XMLListCollection id="insertUsuarios" source="{insertarUsuario.lastResult.user}"/>




<fx:Script>
        <![CDATA[
             import mx.rpc.events.ResultEvent;
           
            /*
                Inserta un nuevo usuario.
            */
            private function insertar_Usuario():void{
                  
                    insertarUsuario.send();
   
            }
           
            /*
             * Función que introduce un usuario en un XMLListCollection "listUsuarios" 
            */
            private function resultHandlerInsertarUsu(event:ResultEvent):void {
                
                /*
                * Se declara un XML para insertarlo en listUsuarios, que esta asociado al datagrid 
                * dg(dataProvider=" {listUsuarios}")
                * Se observa que el "event" esta el id de la inserción(event.result) que se devuelve desde java.
                */
                var miXML:XML=
                    <user>
                        <id>{event.result}</id>    //
                        <nombre>{txtNombre.text}</nombre>
                        <apellidos>{txtApellidos.text}</apellidos>
                        <direccion>{txtDireccion.text}</direccion>
                        <ciudad>{txtCiudad.text}</ciudad>
                        <provincia>{txtProvincia.text}</provincia>
                        <pais>{txtPais.text}</pais>
                        <telefono>{txtTelefono.text}</telefono>
                        <fax>{txtFax.text}</fax>
                        <correo>{txtCorreo.text}</correo>
                        <web>{txtWeb.text}</web>
                        <mensajeria>{txtMensajeria.text}</mensajeria>
                    </user>
                
                // Se introduce el XML al listUsuarios
                listUsuarios.addItem(miXML);
               
            }

            /*Elimina el usuario seleccionado*/
            private function eliminar_usuario():void{
               
                eliminarUsuario.send();
                // Se eliminar el usuario seleccionado del XMLListCollection listUsuarios
                listUsuarios.removeItemAt(dg.selectedIndex);

            }       
           
        ]]>
    </fx:Script>


+++ Código Java +++

            //Inserta un usuario en la base de datos

            sql="INSERT INTO usuarios(nombre,apellidos,direccion,ciudad,provincia,pais,telefono,fax,correo,web,mensajeria) "
                        + "VALUES('" + request.getParameter("nombre") + "',"
                        + "'" + request.getParameter("apellidos") + "',"
                        + "'" + request.getParameter("direccion") + "',"
                        + "'" + request.getParameter("ciudad") + "',"
                        + "'" + request.getParameter("provincia") + "',"
                        + "'" + request.getParameter("pais") + "',"
                        + "'" + request.getParameter("telefono") + "',"
                        + "'" + request.getParameter("fax") + "',"
                        + "'" + request.getParameter("correo") + "',"
                        + "'" + request.getParameter("web") + "',"
                        + "'" + request.getParameter("mensajeria") + "')";

            intrst = stm.executeUpdate(sql);
            
            //rs obtiene el id que se ha generado en la base de datos en la inserción realizada
            ResultSet rs = stm.getGeneratedKeys();

            if( rs.next() )
                //aqui se devuelve el id hacia Flex(cliente)
                out.print(rs.getInt(1));



Como se ha podido observar hay una única llamada inicial de petición de la lista de usuarios que se introduce en un XMLListCollection (listUsuarios) y después se crea, modifica, elimina sobre esta lista. Por supuesto esta que las inserciones, modificaciones y eliminaciónes se envían al servidor y Java se encarga de todo ello devolviendo por ejemplo el id de un usuario insertado(visto en el ejemplo) y minimizando el trafico de datos entre el servidor y el cliente. De aquí lo de tener un único acceso a la base de datos, ya que si se modificara la base de datos por más de un cliente tendríamos que realizar otro trato con la lista de usuarios ya que esta podría modificarse en la base de datos y no estar actualizada en nuestro cliente.

Eso es todo amigos¡¡¡

ActionScript y Validator (StringValidator)

Hoy os voy a hablar de validar un formulario en un archivo mxml, utilizando el entorno de desarrollo flash builder(de prueba).
Utilizare StringValidator para que no se envié un formulario sin rellenar al servidor controlando los campos que sean validados.

Os pongo un ejemplo:

   <fx:Declarations>    
        <!-- Variable global booleana para poder insertar un usuario si su valor es true -->
        <fx:Boolean id="formularioNuevoUsuario"/>
 
        <!--
            StringValidator asociado a un boton "insertUsu" el cual se ejecuta cuando se activa un click (triggerEvent).     
            Si es valido pone la variable formularioNuevoUsuario="true" si no es valido lo pone a "false".
        -->
        <mx:StringValidator source="{txtNombre}" property="text" minLength="4" maxLength="20"
                            tooShortError="* Minimo cuatro caracteres" tooLongError="* Máximo veinte caracteres" required="true"
                            trigger="{insertUsu}" triggerEvent="click"
                            valid="formularioNuevoUsuario=true"
                            invalid="formularioNuevoUsuario=false"/>
   </fx:Declarations>


    <fx:Script>
        <![CDATA[
            /*
                Inserta un nuevo usuario si formularioNuevoUsuario=="true".
            */
            private function insertar_Usuario():void{          
                if(formularioNuevoUsuario){        
                    // insertarUsuario.send();
                    // currentState="ListarUsuarios";
                }               
            }
        ]]>
    </fx:Script>


    <mx:Form x="150" y="93" width="440"  textAlign="center">
        <mx:FormItem label="Nombre:" required="true">
            <s:TextInput id="txtNombre" restrict="a-z,A-Z"/>
        </mx:FormItem>
    </mx:Form>

   <!-- Llama al método insertar_Usuario() -->
   <s:Button id="insertUsu"  label="Insertar Usuario" click="insertar_Usuario()" x="155" y="450"/>

De esta manera se pueden realizar la Validación y ejecución de una inserción con todos los campos que tengamos que Validar para no llamar a una función con valores incorrectos o vacíos.

Eso es todo amigos!!!

JavaScript.

Hola hola ....
Después de una semana llena de problemas con mi conexión a internet os pido disculpas por no introducir ninguna entrada mas a menudo... !!! ya se que os gustan mis estradas ¡¡¡  :)



Bueno os voy a introducir un código que hemos realizado (en realidad hace una semana que lo hicimos, pero voy un poco con retraso, espero coger el día a día muy pronto) para validar formularios.
Este código se ejecuta en el Cliente, es decir, antes de enviar los datos del formulario hacia el Servidor.
Lo que se realiza es comprobar que los datos no se van a enviar en blanco hacia el servidor y no tener que malgastar el tiempo de ida  y venida.

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

        <center>

            <h4>Logeate</h4>

         <form action="inicio.jsp"  name="frm" id="IdFormulario">

           <label> Nombre: </label> <br>
           <input align="center"  type="text" name="txtNombre" id="IdNombre"/>
           <span id="spanErrorNombre"></span><br>

           <label> Contraseña: </label><br>
           <input type="text" name="txtContrasena" id="IdContrasena"/>
           <span id="spanErrorContraseña"></span><br>

           <input type="button" name="BtnEnviar" id="BtnEnviarId" value="ENVIAR" onclick="Validar();" />

         </form><br><br>


            <a href="formulario.jsp">Nuevo Usuario</a>
        </center>


    <script>

        function Validar() {

           var entrar=true;

           if (document.getElementById("IdNombre").value == "") {
               entrar=false;
                document.getElementById("spanErrorNombre").innerHTML = "<font color='red'>* Campo obligatorio</font>";
           }else{
                document.getElementById("spanErrorNombre").innerHTML ="";
           }

           if (document.getElementById("IdContrasena").value == "") {
               entrar=false;
               document.getElementById("spanErrorContraseña").innerHTML = "<font color='red'>* Campo obligatorio</font>";
           }else{
               document.getElementById("spanErrorContraseña").innerHTML ="";
           }

           if(entrar){
            document.frm.submit();
           }

        }
    </script>

    </body>
</html>


Eso es todo amigos¡¡¡¡

MySQL Workbench y XAMPP.

Hola holita.

En estos dos días hemos realizado la instalación y prueba de dos programas más para el correcto desarrollo de las clases. Uno de ellos es el XAMPP, que nos simplifica la instalación y configuración de un servidor Apache y  una base de datos MySQL, y el otro es el MySQL Workbench que es un magnífico editor visual de bases de datos MySQL.

Imagenes del editor visual MySQL Workbench:

Como se puede observar es un completo editor para crear, modificar, eliminar bases de datos, tablas, procedimientos, vistas .... en fin, una pasada.

Con los proyectos Web que estamos creando con Netbeans hemos creado una base de datos con Workbench y la hemos enlazado desde un programa web en Java, para insertar datos y listarlos.

Ejemplo:
1. Crear una base de datos "prueba" en donde insertar tareas (nombre, descripción).
2. Desde el Netbeans realizar un proyecto Web donde se inserte las tareas y se listen en una tabla, previamente se deben de introducir en la BBDD y listar desde esa BBDD.

El punto 1 ya se puede observar en la imagen anterior (es muy intuitivo).

El punto 2 se realiza modificando el index.jsp del nuevo proyecto Web, en el que introduciremos un formulario para introducir el nombre y descripción de la tarea a realizar. Desde este formulario se pueden realizar dos cosas o insertar tarea o listar las tareas.
Los datos que son enviados desde el formulario llegan a un Servlet que los procesa para listar o insertar las tareas (el index.jsp es el que lista las tareas).

Insertar tarea:

Listar tareas:

Eso es todo amigos!!!....