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!!!....

Empezamos con Java (JSP y Servlets).

Después de una semana de inicio y calentamiento, hoy (15 Noviembre 2010) empezamos con el lenguaje de programación Java para integrarlo con Flex cuando llegue el momento.

Instalamos el entorno de Desarrollo Netbeans IDE 6.9.1.  

Hemos visto las características de JSP y como interactúa con los Servlets.

Un ejemplo muy sencillo:

Petición del cliente (index.jsp)  --> Servidor (Servlet) --> Resultado en pantalla (Navegador del cliente)  

Desde el Netbeans nos vamos a Archivo - Proyecto Nuevo - Categorias(Java Web) - Proyectos ( Web Application) ; Siguiente ; y ponemos un nombre al proyecto "Hola Mundo" ; Siguiente ; Elegimos como Servidor el GlassFish Server 3 ; Terminar ;

Ahora se abre el proyecto que hemos creado, con lo que vamos a crear un Servlet para que reciba la petición del cliente(desde la pagina inicial index.jsp) "servletHolaMundo".

Nos situamos encima del proyecto "HolaMundo", btn derecho , Nuevo, Servlet y le ponemos el nombre "servletHolaMundo" y el Paquete "RIA" ; Terminar ;


En el archivo index.jsp introducimos un formulario para enviar datos al Servlet.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <form name="formularioServletHolaMundo" action="servletHolaMundo">
            <input type="text" name="persona" value="introduce tu nombre..." />
            <input type="submit" value="Enviar" name="btn" />
        </form>
    </body>
</html>

Y el Servlet obtiene el valor de "persona" y la envía al Cliente con el método processRequest.

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
           
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Servlet servletHolaMundo</title>"); 
            out.println("</head>");
            out.println("<body>");
            out.println("<h1> Tu amig@ " + request.getParameter("persona") + ", te dice HOLA MUNDO </h1>");
            out.println("</body>");
            out.println("</html>");


        } finally {
            out.close();
        }
    }

En imagenes:

Eso es todo amigos!!!....

¡¡¡ Buena suerte !!! Comienza el curso RIA: Adobe Flex y Java

Hola, Bienvenidos.

Esta semana ha dado comienzo el curso de RIA: Adobe Flex y Java.

Lo aprendido ha sido mucho y de calidad, empezando con fundamentos de flex y maquetación.

Lo que más me ha llamado la atención es el control de eventos, el dataGrid (lo muestra todo del tiron, jeje) y el maravilloso dataBinding(pasalo pasalo).

Me ha parecido de interes insertar este video donde se resume un cambio en los namespaces de la version 3 a la 4 de flex (se ve algo de css, !!! interesante ¡¡¡):
http://tv.adobe.com/watch/adc-presents/migrating-to-flex-4-namespace-changes/