Download Adobe FLEX, WEBorb, JAVA y MySql

Adobe FLEX, WEBorb, JAVA y MySql
En este documento se tratara de explicar mediante un ejercicio ya prediseñado la
manera de hacer el puente de comunicación a una base de datos en el servidor MySql
5.1 mediante una aplicación en Adobe Flex haciendo para esto, uso del servidor para
Java WEBorb 3.0 y objetos del lenguaje de programación JAVA.
Utilidades:
Server MySql 5.1 y Tools
Adobe Flex Builder 3
WEBorb for JAVA 3.0
Màquina Virtual JAVA
IDE Net Beans 6.8
Connector mysql-connector-java-5.0.8-bin
Se supone que estos paquetes de software ya los tiene instalados el lector, solo el
paquete .JAR del conector se utilizara más adelante; pasaremos a realizar una base de
datos utilizando lo que el lector más le convenga:
*El código SQL y su ejecución en una línea de comando cliente de MySql
*Usando el Tool Adminisrator y realizarla de manera gráfica.
Código: Creamos una base de datos llamada empleados y en esta agregamos una tabla
llamada “datos”.
CREATE TABLE empleados (
`clave` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
`nombre` VARCHAR(45) NOT NULL,
`paterno` VARCHAR(45) NOT NULL,
`materno` VARCHAR(45) NOT NULL,
`departamento` VARCHAR(45) NOT NULL,
`sexo` VARCHAR(45) NOT NULL,
`horas_trabajadas` VARCHAR(45) NOT NULL,
`sueldo` VARCHAR(45) NOT NULL,
`sueldo_neto` VARCHAR(45) NOT NULL,
PRIMARY KEY (`clave`)
)
Modo Gráfico con Tool Administrator:
Ya tenemos la base de datos lista.
Ahora se compilaran y ejecutaran los objetos (clases) JAVA que nos servirán para la
comunicación con la base de datos; ya que JAVA soporta la transferencia y
comunicación con bases de datos que implementen para este lenguaje.
Ejecutamos IDE Net Beans y seguimos los siguientes pasos para abrir y configurar un
nuevo proyecto:
File->>New Project:
Java Aplication->>Next
Es indistinto el nombre del proyecto para esta documentación lo llamaremos
“empleados” y lo dejaremos con las propiedades marcadas.
Con el proyecto creado vamos a agregar una clase siguiendo lo siguiente:
->Click derecho sobre el proyecto->New->Java Class
(Esto lo haremos dos veces ya que necesitamos dos clases)
A una clase le llamaremos javaclientes y a la otra select (estos objetos son los que se
comunican digamos, directamente con la Base de Datos). Por lo que entonces
tendremos dos clases listas para ser compiladas, a continuación el código de las dos
clases que será agregado a las dos clases creadas previamente y que posterior a esto
serán compiladas (copiarlo y agregarlo a cada una de las clases creadas en Net Beans
respectivamente):
Objeto o CLASE javaclientes
importjava.sql.*; //paquete del API de JAVA para soporte de sentencia SQL
publicclassjavaclientes { //Inicio clase
//Varibles(cadenas) para espeficicarparametros de nuestra base de datos
staticStringbd = "empleados"; //Nombre de la base de datos
static String login = "root"; //usuario
static String password = "udl";//password
static String url = "jdbc:mysql://localhost/"+bd;//URL (especificacionpara Server Mysql)
Connection conn = null; //Variable tipo Connection
publicjavaclientes() { //Constructor
//Las sentencias que manejan cualquier actividad a la base de datos
//Necesitan tratamiento de errores (try)
try{
//obtenemos el driver para mysql
Class.forName("com.mysql.jdbc.Driver");
//obtenemos la conexión
conn = DriverManager.getConnection(url,login,password);
if (conn!=null){
System.out.println("Conección a base de datos "+bd+" OK");
}
}catch(SQLException e){
System.out.println(e);
}catch(ClassNotFoundException e){
System.out.println(e);
}
}
/**Permite retornar la conexión*/
public Connection getConnection(){
return conn;
}
publicvoid desconectar(){
conn = null;
}
}
Objeto o CLASE selct
importjava.sql.*; //paquete del API de JAVA para soporte de sentencia SQL
publicclassselect { //incio de la clase
javaclientescn; //Referencia al objeto javaclientes para establecer la conexion
publicselect() {//Instancia del objeto javacliente y autmaticamenteobenemosconexion
cn = new javaclientes();
}
//Metodo encargado de hacer un SELECT a una tabla de la base de datos
//Regresara un arreglo con tipo de dato Object
public Object[][] seleccionar(){
int registros = 0; //Bandera indicadora del numero de tuplas en la tabla
//Asegurar posibles errore en tiempo de ejecucion(Try)
try{
//Instancia al objeto PreparedStatement el cual prepara una sentancia SQL
//Sentencia usando el metodoMysqlcount(1) para saber el numero de tuplas de la tabla
PreparedStatementpstm = cn.getConnection().prepareStatement("SELECT count(1) as cont" +
" FROM datos ");
ResultSet res = pstm.executeQuery();//Ejecucion de la sentencia citada enteriormente
//metodo .next para recorrer los resultados obenidos de la consulta
//en este caso nada mas regresara un solo dato(El numero de tuplas)
res.next();
registros = res.getInt("cont");//Obtenemos el unico dato obtenido
res.close(); //Cierre de Conexiòn a la base de datos
}catch(SQLException e){
System.out.println(e);
}
Object [][] data = new Object[registros][8];
//Creacion de matriz tipo Object con los parametros de cuantas filas
//y columnas cerran requeridos
//en este caso el numero de renglones=registros
//8= Numero de columnas
//Misa matriz cerra regresada por este metodo.
//Segunda consulta a la base de datos seleccionando los campos indicados
try{
PreparedStatementpstm = cn.getConnection().prepareStatement("SELECT nombre," +
" paterno," +
" materno," +
" departamento," +
" sexo," +
" horas_trabajadas," +
" sueldo," +
" sueldo_neto " +
" FROM datos " +
" ORDER BY clave ");
ResultSet res = pstm.executeQuery(); //Ejecucion de la sentencia
int i = 0; //Contador auxiliar para recorrer los resultados obtenidos
//de la consutla
//Mientras se acaben de recorrer todas las tuplas de resultados obtenidos
while(res.next()){
//Obtencion del dato cuyo campo se manda como parametro
String nombre = res.getString("nombre");
String paterno = res.getString("paterno");
String materno = res.getString("materno");
String departamento = res.getString("departamento");
String sexo = res.getString("sexo");
Stringhoras_trabajadas = res.getString("horas_trabajadas");
String sueldo = res.getString("sueldo");
Stringsueldo_neto = res.getString("sueldo_neto");
//Asignacion a la matrix de los datos obenidos
data[i][0] = nombre;
data[i][1] = paterno;
data[i][2] = materno;
data[i][3] = departamento;
data[i][4] = sexo;
data[i][5] = horas_trabajadas;
data[i][6] = sueldo;
data[i][7] = sueldo_neto;
i++; //Incremento que provoca la matrix cambie su indice para
//la proximaaignacion de datos
}
res.close();//Cierre de conexiòn
}catch(SQLException e){
System.out.println(e);
}
return data;
}
//Metodo para la insercion de datos en la tabla
//recibira como parametros nueve cadenas para posteriormente ser asignadas
//a la tabla en la base de datos
public void insertar(String una,Stringdos,Stringtres,Stringcuatro,Stringcinco
,Stringseis,Stringsiete,Stringocho,Stringnueve){
int i=java.lang.Integer.parseInt(una);
//en la tabla se requiere que el primer dato asignado sea un entero por eso
//existe el requerimiento ded esta cadena convertirla en entero
try{
//construimos la sentencia SQL
PreparedStatementpstm = cn.getConnection().prepareStatement("insertinto datos(clave," +
"nombre,paterno,materno," +
"departamento,sexo,horas_trabajadas,sueldo,sueldo_neto)values "+
"("+i+","
+"'"+dos+"'"+","+"'"+tres+"'"+","+"'"+cuatro+"'"+"," +
""+"'"+cinco+"'"+","+"'"+seis+"'"+","+"'"+siete+"'"+"" +
","+"'"+ocho+"'"+","+"'"+nueve+"'"+")");
pstm.executeUpdate();//Ejecucion, en consiguiente una inserccion a la tabla.
}catch(SQLException e){
System.out.println(e);
}
}
}
Luego entonces aparecen nuestras dos clases listas para compilar no sin antes agregar
el conector de comunicación a la base de datos, de hecho al inicio del documento lo
cito como parte de las utilerías, es el archivo JAR Connector mysql-connector-java5.0.8-bin
Clases ya con código Agregado.
Para agregara el conector es simple, justo en el proyecto en Net Beans daremos clic
derecho sobre el icono del folder el cual dice Libraries, en seguida AddJarFloder,
ubicamos el archivo JAR del conector donde lo tengamos ubicado. Y ahora esta
completo ya el proyecto para ser compilado.
Lo compilaremos usando el icono que a continuación la imagen muestra; de esta
manera nos creara un archivo JAR el cual es el que nos interesa porque posteriormente
lo tenemos que agregar al servidor WEBorb. El archivo JAR esta ubicado en la ruta que
marca el output de NET BEANS como marca igual la imagen.
Hasta este momento tenemos la base de datos creada con una tabla y el archivo JAR
producto de la compilación de las dos clases anteriores. Ahora vamos a arrancar el
servido WEBorb y vamos a agregarle el archivo JAR obtenido.
Para arrancar el servidor se supone que ya se instaló el paquete WEBorb y el mismo ha
dejado una carpeta de instalación que por Default lo hace en la unidad C: \, partiendo
de este punto y desde una consola de comando Windows ejecutaremos el siguiente
comando ubicados en la ruta:C:\weborb30
Java -jar weborb.jar
El server y en general el servicio es arrancado por el puerto 8080 que es el Default.
El archivo JAR obtenido en pasos anteriores lo vamos a agregar al servidor de la
siguiente manera:
Copiar y pegar en la siguiente ruta el archivo JAR (para este caso en donde la
instalación de WEBorb dejo sus archivos en la carpeta C:\)
Ruta: C:\weborb30\webapp\WEB-INF\lib
Para comprobar que el archivo esta agregado abriremos la consola grafica HTML del
WEBorb para verificarlo, la cual abriremos con el siguiente url: http://localhost:8080/
Una vez abierta la interfaz verificamos el nombre del archivo JAR en la pestaña
Management y subpestaña Services como se muestra a continuación:
Podemos comprobar también que en el mismo JAR están los métodos que declaramos
en las clases compiladas en JAVA y que de hecho podemos invocar desde la misma
interfaz mandándole los parámetros en el caso necesario que así el método lo
requiera.
Si desde la misma invocación desde WeBorb de los métodos creados con JAVA resultan
satisfactorios, es decir, en el ejemplo del método insertar a la hora de ser ejecutado
mandando sus respectivos parámetros estos son insertados en la tabla de la base de
datos empleados; si es así continuaremos con los últimos pasos para unir la aplicación
en FLEX al proyecto.
Con la aplicación FLEX se dispondrá a crear un nuevo proyecto el cual va tener la
particularidad de estar vinculado con un servidor JAVA (WEBorb, el cual ya tiene lo
necesario para invocar métodos y comunicarse a la base de datos)
Entonces: FILE  NEW  Flex Project…
Lo configuramos usando el server J2EE que es el de JAVA y el nombre es indistinto en
este proyecto lo nombramos MySql y avanzamos (NEXT):
Los parámetros puestos en esta ventana deberán coincidir con la carpeta ubicada de la
instalación previa WEBorb, como se mencionaba anteriormente, la carpeta por Default
se colocó en C:\weborb30
Así como se muestra en la figura la especificaremos los siguientes datos:
Root folder: C:\weborb30\webapp
Root URL: http://localhost:8080
Contextroot: /flex
Por ultimo validaremos en el boton: ValidateConfiguration (puede que marque una
alerta, mientras no sea error finalizamos (FINISH):
Por Default el proyecto aparece con un archivo XML del mismo nombre que el
proyecto; vamos a sustituir el código por Default de este por el siguiente:
Codigo XML de la aplicacion en FLEX
<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="1005.6" height="811.8"
creationComplete="carga();">
<mx:TabNavigator x="21" y="14.6" width="818.21216"
height="352.92426" change="carga();" >
<mx:Canvas label="Captura" width="100%" height="100%">
<mx:Label x="95" y="12" text="Clave"/>
<mx:Label x="95" y="46" text="Nombre"/>
<mx:Label x="95" y="72" text="A. Paterno"/>
<mx:Label x="94" y="98" text="A. Materno"/>
<mx:Label x="92" y="130" text="Departamento"/>
<mx:ComboBox x="178" y="126" width="122"
dataProvider="{A1}" id="depa"></mx:ComboBox>
<mx:Label x="83" y="162" text="Sexo"/>
<mx:RadioButton x="136" y="160" label="Masculino"
id="mas"/>
<mx:RadioButton x="218" y="160" label="Femenino"
id="fem"/>
<mx:Label x="83" y="199" text="Hras. Trabajadas"/>
<mx:Label x="83" y="238" text="Pago por hora"/>
<mx:ComboBox x="196" y="199" width="98"
dataProvider="{A2}" id="tiempo"></mx:ComboBox>
<mx:TextInput x="162" y="10" width="86" id="cve"/>
<mx:TextInput x="162" y="44" width="137" id="nom"/>
<mx:TextInput x="162" y="70" width="137" id="apa"/>
<mx:TextInput x="162" y="96" width="137" id="ama"/>
<mx:TextInput x="175" y="236" width="119" id="pago"/>
<mx:Button x="149" y="279" label="Enviar"
click="enviar();" width="89"/>
</mx:Canvas>
<mx:Canvaslabel="Datos capturados" width="100%"
height="100%">
<mx:DataGrid x="10" y="10" width="733.1061"
height="155.60605" id="registro">
<mx:columns>
<mx:DataGridColumnheaderText="Nombre"
dataField="0"/>
<mx:DataGridColumnheaderText="A. Paterno"
dataField="1"/>
<mx:DataGridColumnheaderText="A. Materno"
dataField="2"/>
<mx:DataGridColumnheaderText="Departamento" dataField="3"
width="100"/>
<mx:DataGridColumnheaderText="Sexo"
dataField="4"/>
<mx:DataGridColumnheaderText="HorasTrabajadas" dataField="5"
width="130"/>
<mx:DataGridColumnheaderText="Sueldo"
dataField="6"/>
<mx:DataGridColumnheaderText="SueldoNeto"
dataField="7"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:TabNavigator>
<mx:RemoteObject id="remoteObject"
destination="GenericDestination"
source="select"
showBusyCursor="true"
fault="falla(event)">
<mx:method name="seleccionar" result="resultados(event)"/>
<mx:method name="insertar"/>
</mx:RemoteObject>
<mx:Script>
<![CDATA[
importmx.rpc.events.FaultEvent;
importmx.rpc.events.ResultEvent;
importmx.rpc.*;
importmx.collections.ArrayCollection;
importmx.controls.Alert;
importmx.controls.Alert;
privatevarEjemplo_Alerta:Alert;
publicvar cadena2:Array;
publicvarcadena:String;
publicvartotal:String;
publicvars_neto:String;
publicvar A1:ArrayCollection = newArrayCollection(
[ {label:"Sistemas", data:1},
{label:"Redes", data:2},
{label:"Soporte", data:3},
{label:"Asesores", data:4},
{label:"Desarrollo", data:5}
]);
publicvar A2:ArrayCollection =
[ {label:"35", data:1},
{label:"36",
{label:"37",
{label:"38",
{label:"39",
{label:"40",
{label:"41",
{label:"42",
{label:"43",
{label:"44",
{label:"45",
]);
newArrayCollection(
data:2},
data:3},
data:4},
data:5},
data:6},
data:7},
data:8},
data:9},
data:10},
data:11}
publicfunctionenviar(): void
{
if(mas.selected==true)
cadena="masculino"
else
cadena="femenino"
if(Number(tiempo.selectedLabel)>40)
{
total=String(40*Number(pago.text));
s_neto=String(((Number(tiempo.selectedLabel)40)*1.5*100) + Number(total));
}
else
{
total=String(Number(tiempo.selectedLabel)*Number(pago.text));
s_neto=total;
}
remoteObject.insertar(cve.text,nom.text,apa.text,ama.text,depa.s
electedLabel,cadena,tiempo.selectedLabel,total,s_neto);
}
publicfunctioncarga():void{
remoteObject.seleccionar();
}
publicfunctionresultados(event:ResultEvent):void{
cadena2= event.resultas Array;
registro.dataProvider=cadena2;
}
publicfunctionfalla(event:FaultEvent):void{
Alert.show(event.fault.faultString,"error");
}
]]>
</mx:Script>
</mx:Application>
Quedará una interfaz algo parecida a lo siguiente
Si todo anduvo bien durante todo este proceso; lo único que queda es ejecutar la
aplicación FLEX y verificar que de esta manera se hacen inserciones mediante el
formulario y selecciones mediante el objeto Data Grid.
El lector podrá concluir que para una aplicación desarrollada en FLEX se necesitó en
este proyecto de Objetos JAVA ,los cuales fueron, por nombrarlo así, “compartidos”
por el servidor WEBorb para que Flex mediante objetos tipo Object Romote pudiera
acceder a estos métodos que a su vez generaban una consulta en la Base de datos.
Documentado por:
ING. Nayeli del Roció Díaz Reyes
ING. Pérez Romero Eduardo
[email protected]
[email protected]
10/12/10