sábado, 6 de marzo de 2010

Mejorar la Navegabilidad de Nuestra Aplicacion

Continuando con otro nuevo tutorial veremos como mejorar la forma que que el usuario interactua con nuestra aplicacion ya que como la tenemos hasta este punto es un poco difil porque la actualizacion se hace manual ademas de que no es la mejor forma pero ahora veremos los tips para que paresca mas profecional..

ahora ya no voy a poner todo el codigo solo pondre la parte que se anexo para dicha funcionalidad..

1.-Al boton de Actualizar le vamos a cambiar por "Guardar" ademas del id tenia btnActualizar ahora se va a llamar btnGuardar. lo vamos a colocar despues del boton nuevo, ahora desde sus propiedades de ese boton vamos a establecer la etiqueta enabled ="false"

2.-Los dos campos de texto tambien vamos a establecer su propiedad editable a "false" recuerden esto es desde el modo diseño de flex..

3.-Ahora vamos a hacer una funcion para que cuando demos clik en algun registro del dataGrid nos envie esos datos a las cajas de texto

private function copiaUsuarios():void
{
/*lo unico que vamos a hacer es pasar la inforamcion del
registro seleccionado a nuestras cajas de texto*/
txtUsuario.text=dtaUsuarios.selectedItem.nombre_usuario;
txtEdad.text=dtaUsuarios.selectedItem.edad_usuario;
}



depues para que funcione vamos a llamar a esa funcion desde la propiedad click de la grilla y nos quedaria asi:

click="copiaUsuarios()"
//esto se lo agregan al dataGrid puede ser adelante de donde definen el dataSource.


5.-Para cargar los datos directamente al arrancar nuesta aplicacion vamos a llamar la funcion cargarUsuarios(); pero la ponemos en el metodo iniciar(); que esta al principio de nuestro codigo AS3 ahora cuando corremos nuestro ejemplo pueden ver que se cargan los datos inmediatamente y ademas que si seleccionamos algun registro esa informacion se cambia en las cajas de texto ademas de que aparecen desabilitadas junto con el boton guardar..

6.-Para tratar de reduci el codigo y que generemos una buena practica de programacion vamos a declarar una variable de tipo string, la cual nos servira para saber si el usuario va a guardar o editar un registro yo llamare a dicha variable "private var operacion:String="";"

7.-Ahora en la propiedad click del boton nuevo hasta ahorita llamavamos a click="addUsuarios();" lo vamos a cambiar por uno nuevo que se va a llamar nuevoUsuario y nos va a quedar de la siguiente manera click="nuevoUsuario();;" obviamente esta funcion la vamos a declarar y lo ariamos de la siguiente manera:


private function nuevoUsuario():void
{
/*ponemos el valor de nuevo en nuestra variable string
que declaramos hace algunos momentos y aprovechamos para
habilitar y limpiar los campos y ademas poner el cursor
en usuario automaticamente*/
txtUsuario.editable=true;
txtEdad.editable=true;
txtUsuario.text="";
txtEdad.text="";
txtUsuario.setFocus();

//ademas desabilitamos el boton nuevo, editar, y eliminar
btnNuevo.enabled=false;
btnEditar.enabled=false;
btnEliminar.enabled=false;
//y habilitamos el boton de guardar
btnGuardar.enabled=true;
}


8.- Ahora vamos con el boton editar hasta ahora teniamos en su propiedad click="updateUsuarios();" lo cambiaremos por uno nuevo que se llamara edtUsuario(), tendra el mismo funcionamiento que el anteriro pero la variable strign le vamos asignar el valor "editar" y no vamos a limpiar los campos de texto el codigo seria:


private function edtUsuario():void
{
operacion="editado";
txtUsuario.editable=true;
txtEdad.editable=true;
//txtUsuario.text="";
//txtEdad.text="";
txtUsuario.setFocus();

btnNuevo.enabled=false;
btnEditar.enabled=false;
btnEliminar.enabled=false;
btnGuardar.enabled=true;
}


9.- Ya para terminar toca el turno al boton guardar hasta ahora lo teniamos como click="cargarUsuarios();" suponiendo que siguen el tuto y le cambiaron el nombre recuerden que se llamaba actualizar bueno le vamos a poner realizarAccion() y nos quedaria click="realizarAccion();" y el metodo seria:

private function realizarAccion()
{
/*solo vamos a validar que
operacion se solicito y llamar
a los metodos que hacen dicha
operacion, ademas habilitamos
los campos de texto, deshabilitamos
el boton guardar y habilitamos
los demas (lo contradio a los
botones de nuevo y editar*/
if(operacion=="nuevo")
{
addUsuarios();
}
if(operacion=="editado")
{
updateUsuarios();
}

txtUsuario.editable=!true;
txtEdad.editable=!true;


btnNuevo.enabled=!false;
btnEditar.enabled=!false;
btnEliminar.enabled=!false;
btnGuardar.enabled=!true;

}


10. Para que todo se actualize automaticamente necesitamos llamar a la funcion que nos carga los datos (cargarUsuarios();)justo despues de cada operacion osea que la tenemos que poner tres veces una cuando hace un nuevo registro debajo de donde mandamos la ventanita que dice insercion exitosa se acuerdan?? los otros lugares donde lo tenemos que poner seria debajo de las otras dos ventanitas edicion exitosa y registro eliminado , y con eso tendremos 100% nuestra aplicacio mas navegable e intuitiva... sino pueden seguir el tuto comenten y pongo el codigo completo para quiens lo llevan siguiendo desde el principio no creo que haya problema

disfrutenlo y se vale agradecer...

a peticion de un usuario aqui cuelgo el archivo php

5 comentarios:

  1. Muy bueno! mañana lo voy a probar, la verdad que me sorprendiste, excelente tutorial, como siempre. Estaría bueno agregar una función imprimir, y el buscar que te dije la vez pasada. Hasta ahora es la mejor web de flex o la mas útil, por lo menos para mí que vengo de la programación de escritorio con Delphi. Gracias!!!

    ResponderEliminar
  2. Quedo muy bien con las nuevas funciones, te hago una consulta, tengo problemas con el deleteUsuario y el updateUsuario ya que no me funcionan, es un problema del php, porque lo pruebo en el amfphp/browser y tengo todas la funciones pero esas dos no me hacen nada, el add y el cargar andan bien, pero esas dos no. Calculo que es un problema del PHP. Serias tan amable de colgar un link con el archivo? solo el php, ya que creo es un problema del editor que uso que al copiar los ' o ´ , los esta tomando mal. Así los comparo. Gracias!

    ResponderEliminar
  3. Gracias!!! ya me funciona, tenía mal una '.
    Ahora sí, Gracias!!!

    ResponderEliminar
  4. verdad que tiene mejor funcionalidad que el primero?? esten pendientes que de ahora en adelante voy a ir sacando video Tutoriales pienso que es una manera mejor de aprender solo que no soy muy experimentado en esto del camtasi ejej asi que no se molesten por la calidad la ire mejorando poco a poco

    ResponderEliminar
  5. Si quedo muy completo, me sirvio de mucho, gracias!

    ResponderEliminar