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