15 February, 2008

Cómo obtener y asignar el valor de un RadioButton en Javascript. De forma sencilla.

Bien, con este tip pretendo compartir una función sencilla para hace un get y otra para un set, de un grupo de RadioButtons en XHTML + JavaScript. Recordemos que en Javascript no hay una función para obtener o asignar el valor de un grupo de RadioButtons y muchos lo hacen a "mano". Con estas funciones he automatizado eso, y al menos a mí me han servido mucho para las validaciones o asignaciones en JS. Para que estas funciones trabajen de forma adecuada, se requiere que se definan los radiobuttons, bajo el siguiente estándar:

El atributo id de los elementos debe ser: name + "_" + N, donde N es un índice para cada uno de los elementos. N inicia en cero.

De tal forma que si tengo un grupo de 3 RadioButtons con el nombre equipo(recordemos que el nombre vendría siendo el GroupName) el id de cada uno de los RadioButtons sería: equipo_0, equipo_1 y equipo_2. Una vez que tenemos claro el estándar para la definición de los RadioButtons, no queda mas que usar las siguientes funciones( click para ver un ejemplo funcionando):

JavaScript:
  1. function ffw_GetRadioButtonValue(Name)
  2. {
  3. var CurrentElementStr;
  4. var Found;
  5. var Value;
  6. Found = false;
  7. Counter = 0;
  8. CurrentElementStr = Name + "_" + Counter;
  9. while( $(CurrentElementStr) && !Found)
  10. {
  11. if( $(CurrentElementStr).checked )
  12. {
  13. Value = $(CurrentElementStr).value;
  14. Found = true;
  15. }
  16. Counter++;
  17. CurrentElementStr = Name + "_" + Counter;
  18. }
  19. return Value;
  20. }
  21. function ffw_SetRadioButtonValue(Name, Value)
  22. {
  23. var CurrentElementStr;
  24. var Found;
  25. Found = false;
  26. Counter = 0;
  27. CurrentElementStr = Name + "_" + Counter;
  28. while( $(CurrentElementStr) && !Found)
  29. {
  30. if( $(CurrentElementStr).value == Value )
  31. {
  32. $(CurrentElementStr).checked = true;
  33. Found = true;
  34. }
  35. Counter++;
  36. CurrentElementStr = Name + "_" + Counter;
  37. }
  38. return Value;
  39. }

• Publicado en Javascript(0) comentarios Trackback
30 November, 2007

¿Qué tanto sabes de internet?

la100rra me paso este meme. El meme consiste en responder un sencillo examen que evalua tu conocimiento respecto a las cosas mas in de internet. Lo ideal es responderlo sin buscar las respuestas, para medir realmente cuanto sabes.

Yo obtuve 82%. Le paso el meme a cualquiera que quiera responderlo.

• Publicado en Mundo Real(1) comentarios Trackback
6 November, 2007

Tip para seleccionar una fila de un DataGrid

Si alguna vez has intentado seleccionar una fila de una DataGrid, te habrás dado cuenta que utilizar selectedIndex no es suficiente. Ya que únicamente selecciona la fila, pero no mueve el scroll del DataGrid hacía la fila seleccionada. Una solución para esto es utilizar "scrollToIndex". Por ejemplo, para seleccionar el índice 20 de un DataGrid el código sería el siguiente:

Actionscript:
  1. MyDataGrid.selectedIndex = 20;
  2. MyDataGrid.validateNow();
  3. MyDataGrid.scrollToIndex(MyDataGrid.selectedIndex);

• Publicado en Flex(1) comentarios Trackback
26 October, 2007

Creación de eventos personalizados, en Flex. Segunda parte.

Continuando con el tema de los eventos, del post anterior, pasaremos a la parte de crear nuestros propios eventos. Para ejemplificar de mejor forma, estableceré una problemática y la trataré de resolver creando un evento.

Problemática
Crear un evento que controle el momento en el que un usuario escribe el número 23 dentro de un NumericStepper.

Caso de uso
1 El usuario entra a editar el valor de un NumericStepper.
2 El usuario escribe un número.
3 El usuario presiona el botón validar.
4 La aplicación verifica si el número es igual a 23, en caso de cumplirse esta condición, se dispara un evento.

Solución:
Pueden ver en el siguiente link, la solución a este problema, usando un evento personalizado. El demo incluye el código fuente.
Ver Demo

Como podrán ver, en el código, el evento solo se dispara cuando el NumericStepper tiene valor de 23.

Actionscript:
  1. if( nsValue.value == 23 )
  2. {
  3. var NuestroEvento:MyEvent;
  4. //Creamos el evento, y le decimos el tipo
  5. NuestroEvento = new MyEvent( MyEvent.EVENTO_USUARIO_ESCRIBIO_23);
  6. //Disparamos el evento, todos los escuchadores serán notificados
  7. dispatchEvent( NuestroEvento );
  8. }

Este es un ejemplo, pero en realidad hay una infinidad de casos donde los eventos son muy útiles. Solo es cuestión de perderles el miedo, para sacarles el mejor provecho.

• Publicado en Flash, Flex(1) comentarios Trackback
19 October, 2007

Como ciclar el Flash Player, de forma inocente

Hace algunos meses un compañero de la oficina, me solicitó ayuda, en un problema que tenía en Flex 2. Al probar la aplicación, sin razón "aparente", el navegador se congelaba, después de un buen rato de estar revisando el código, vi algo en los estilos que me llamo la atención. La aplicación tenía por nombre "Generador", por lo que se generaban dos archivos, uno era Generador.html y el otro su correspondiente Generador.swf. En algún momento mi compañero(que en ese entonces estaba aprendiendo Flex), se puso a jugar con el CSS e inocentemente puso esta línea:

Actionscript:
  1. backgroundImage="Generador.swf"

Lo que mas me llamó la atención es que de alguna forma el navegador se congelaba(creí que era imposible bloquear una pc con el Flash Player). No aparecía la famosa ventanita para detener el script, ya que semánticamente el código estaba bien y este tipo de "errores" lógicos, no entran dentro del alcance de revisión del Flash Player.

• Publicado en Flash, Flex(2) comentarios Trackback
18 October, 2007

Insertar un componente MXML dentro de otro, en Flex 2

Una forma muy fácil de meter un componente MXML dentro de otro, es la siguiente:

  1. Crear un nuevo proyecto en Flex.
  2. Agregar un nuevo componente MXML, nombrarlo "Nuevo.mxml".
  3. Dentro de "Nuevo.mxml" agrega un Datagrid o el componente que quieras, solamente es para que no este vacio.
  4. Ve al archivo principal de tu aplicación(generalmente main.mxml)
  5. En la vista de código escribe "<"(signo menor que) y presiona las teclas "Ctrl + Espacio"
  6. Te saldra un listado, pero también puedes escribir. Escribe "Nuevo" y presiona la tecla "Enter".

Yo uso mucho esta técnica para agregar componentes en mis proyectos.

• Publicado en Flash, Flex(0) comentarios Trackback
14 October, 2007

Integrar Flex Builder 2 con Subversion

En la actualidad, es muy importante, trabajar con un controlador de versiones que nos ayude a administrar los cambios en el código fuente, mas cuando trabajamos en proyectos de mas de un desarrollador y/o de mediano a gran tamaño. Imagina cuando dos o mas desarrolladores hacen cambios en el proyecto, lo complicado que puede ser combinar los archivos. ¿Qué pasa cuando se un cambio hecho, daña otras partes importantes de un proyecto?, ¿Cómo podrías regresar a una versión anterior de código?. Este tipo de problemáticas, son las que se pueden resolver con un controlador de versiones.

Si aún no trabajas con algún repositorio de código, te recomiendo que leas el siguiente tip:

Ver tip en cristalab

• Publicado en Flex(0) comentarios Trackback
12 October, 2007

México vs Nigeria, este domingo. ¿Veremos buen fútbol?

Creo que con los partidos que hasta ahora a dirigido Hugo Sánchez, una cosa me queda muy clara, fue un buen futbolista. Definitivamente como táctico, deja muchas cosas que desear. México a demostrado un fútbol apático, sin orden e impulsado únicamente por las invidualidades de los futbolistas y no por estrategias bien definidas. Sé que hay mucha gente muy sentimental y emocional, que me dirá que el equipo de México ha jugado bien con Hugo. No estoy de acuerdo, jugar bien es tener la pelota, saber el momento en el que se tiene que adelantar líneas, apretar la salida, mover las marcas, no jugar al contragolpe como táctica si no como circunstancia, no se puede estar a la espera que hombres como Guardado o Nery resuelvan los partidos en una contra. Si hacen memoria México, en la era Hugo Sánchez, ha jugado a la contra y esperanzado únicamente en las individualidades de la gente de arriba.

Nadie tiene dudas, que la selección actual, hombre por hombre es la mejor que ha tenido México en todos los tiempos. La portería no puede estar mejor protegido con Osvaldo y Memo. La defensa "europea" es de primer nivel, con un líder como Marquez, que ha ganado la liga de campeones, acompañado de un elegante del fútbol, como Carlos Salcido, sin olvidarnos de un discreto pero muy efectivo, Ricardo Osorio. El mediocampo sin duda esta comandado por el "Bebe Pardo", que ha demostrado en Alemania su don de liderazgo, mismo que ayudo a su equipo a conseguir el título local. Pavel tienen en Torrado un perro de guardia, que le ayuda con el control de Medio campo. Andrés Guardado, con un fútbol desequilibrante y fresco, se ha convertido en una pesadilla para los rivales, por sus constantes llegadas por izquierda. La parte creativa del equipo recae en el talento de Nery Castillo, para muchos desconocido hasta hace unos meses, en Grecia fue estrella durante varios años en su liga. Además debemos agregar nombres que vienen empujando muy fuerte como Giovanni Dos Santos, Carlos Vela y Efraín Velarde.

Hay suficiente materia prima, como para formar un equipo competitivo, mi preocupación principal en estos momentos no es la calidad de los futbolistas, mas bien la dirección de estos. Espero que el tiempo, los resultados y el estilo del equipo, me demuestre que estoy equivocado, y el Pentapichichi, es tan buen técnico como él dice serlo.

• Publicado en Fútbol, Mundo Real(6) comentarios Trackback
11 October, 2007

Creación de eventos personalizados, en Flex. Primera parte.

En Flex es muy sencillo el manejo de eventos. Para empezar explicaré lo que significa un evento(hablando en términos de programación), según la wikipedia la programación dirigada a eventos es:

Un paradigma de programación en el que tanto la estructura como la ejecución de los programas van determinados por los sucesos que ocurran en el sistema o que ellos mismos provoquen.

En otras palabras, un evento, no es mas que un suceso, que ocurre fuera del contexto de una ejecución de código normal. Para aclarar mas el tema, veamos ejemplos de lo que es un evento, en actionscript:

  • Un click del usuario
  • El inicio de lectura de datos, de un archivo remoto
  • El término de lectura de datos, de un archivo remoto
  • La creación completa de un componente.

¿Cómo podemos controlar el momento en el que un usuario hace click? Tenemos que agregar un escuchador(listener) que este al pendiente de cuando ocurra el evento. Por ejemplo, para saber y controlar el momento exacto en que un usuario da click en un botón nuestro, podrías utilizar el siguiente código:

Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application
  3.     initialize="init()"
  4.     xmlns:mx="http://www.adobe.com/2006/mxml"
  5.     layout="horizontal"
  6.     horizontalAlign="center" verticalAlign="middle"
  7.     >
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Button;
  11.             private var btn:Button;
  12.  
  13.             private function init():void
  14.             {
  15.                 //Aqui llegamos cuando la aplicación se inicie. Controlamos el evento de inicio de la aplicación
  16.                
  17.                 //Crearemos un nuevo botón, para probar en el, el control de eventos
  18.                 btn = new Button();
  19.                 btn.label = "Click Me";
  20.                 //Agregamos un escuchador para el evento click, en el nuevo botón
  21.                 btn.addEventListener(MouseEvent.CLICK, onClick);
  22.                 addChild(btn);
  23.             }
  24.             private function onClick(event:MouseEvent):void
  25.             {
  26.                 //Controlamos el evento del click de nuestro botón
  27.                 //Cada que se dispara el evento, aumentamos el tamaño del botón
  28.                 btn.width += 20;
  29.                 btn.height += 20;
  30.             }
  31.         ]]>
  32.     </mx:Script>
  33.    
  34. </mx:Application>

De hecho en el código anterior, controlamos dos eventos. El primero, el de inicio completo de la aplicación, y el segundo, el del click sobre un botón. Para probar el código, solamente copia y pega el código en una nueva aplicación de Flex 2.

En la siguiente entrega, explicaré como podemos crear nuestros propios eventos y la forma de controlarlos.

• Publicado en Flash, Flex(1) comentarios Trackback
7 October, 2007

Bienvenidos

Por fin he decidido dar el paso, de tener un blog activo. Espero darle a este espacio la atención que se merece. Me gustaría compartir contigo algunas de las experiencias que he tenido a lo largo de mis 4 años, que llevo dedicado al mundo del desarrollo de software. También en este espacio hablaré de fútbol y otras cosas.

Por ahora estos dias estaré estabilizando esto. Así que cualquier detalle que encuentres por favor enviame un comentario. Si quieres también sugerirme cosas que debo hacer para mejorarlo, este es el mejor momento.

• Publicado en Mundo Real(18) comentarios Trackback