domingo, 23 de mayo de 2010

Crear controles personalizados en Flex

Una de las ventajas que tiene el desarrollo con el framework de Flex, es la capacidad de crear controles personalizados basados en otros controles es decir, crear controles de usuarios con características especiales, que cumplan con ciertos procesos y que nos ahorren trabajo.








..
Para iniciar, vamos a crear un nuevo proyecto de Adobe Flash Builder 4, para este caso lo llamare ControlPersonalizado, en tipo de proyecto seleccionamos proyecto WEB y utilizamos la SDK4 (con Flex 3 también es posible). Una buena práctica en el desarrollo de software, es tener un proyecto de pruebas, donde se creen las rutinas de prueba, los controles personalizados y todo lo que eventualmente pueda llegar a constituir un problema en el desarrollo, bien sea por su complejidad o por los riesgos del ejercicio.

Presionamos el botón “Finish para cargar la aplicación.


Una de las ventajas del nuevo Flash Builder, es la posibilidad de trabajar paquetes (package), los paquetes son carpetas lógicas que permiten administrar de una manera ordenada nuestros componentes, clases, y recursos de código, etcétera. En el explorador de proyectos, buscamos la carpeta src, presionamos clic derecho, new package, y lo llamamos Componentes (la primera letra de la palabra debe están en mayúscula).


En el paquete, presionamos clic derecho, new, MXML Component.


Ponemos el nombre del Componente (cómo este funcionará como una clase, entonces la primera letra debe ir en mayúscula al igual que la primera letra de cada palabra compuesta). Para este ejercicio, vamos a crear un Campo de texto que tenga restricciones para que solo acepte números, en el campo Base don, seleccionamos la clase Group, cambiamos el tamaño por defecto a 200px por 200px (estos valores van a cambiar), y presionamos Finish.

Ahora, tenemos un nuevo archivo con código independiente de la aplicación, que también cuenta con un entorno de diseño, sin embargo no lo vamos a utilizar. Después de la etiqueta “s:Group” vamos a crear un campo de texto y debe quedar de esta manera:


Descripción: En la etiqueta s:Group, editamos el valor de ancho y alto, y lo ponemos del mismo tamaño de un campo de texto clásico: 132 x 22.


Creamos una etiqueta TextInput, esto crea un campo de texto en el formulario, el campo id, es muy importante, ya que gracias a este id, podemos acceder directamente a la información del campo. Las propiedades X y Y quedan en 0, para que se alineen al borde superior izquierdo del grupo. La propiedad restrict nos permite restringir o permitir valores dentro del campo de texto, en este caso, el campo solo admite valores numéricos, al intentar ingresar letras o caracteres especiales no será posible entrar ese tipo de datos. Finalmente las propiedades de ancho y alto del campo, las dejamos en 100% cada una, esto asegura que sin importar el tamaño final del control, el campo de texto se acoplara a su contenedor.


Guardamos y vamos al archivo del proyecto, es decir a ControlPersonalizado.mxml, estando en la vista de diseño, vamos al panel components y nos podemos dar cuenta que hay un nuevo control en la carpeta Custom:


Ahora solo basta con arrastrar el control y probar el proyecto:


Si intentamos introducir algún carácter que no sean números, no los acepta el campo de texto. La propiedad restrict se puede adicionar a cualquier campo de texto, la ventaja de hacerlo de esta manera es que no es necesario añadir esa línea cada vez que necesitemos hacer un control numérico, solo basta con crear un componente personalizado y utilizarlo las veces que sea necesario.

Finalmente para acceder a la información del campo de texto, es necesario recurrir al id del control en el formulario y al id del campo de texto, de esta manera:


Lo último que hacemos es poner un botón en el formulario, que al presionar click, llame al método mostrarTexto(), este método muestra una alerta con el texto del campo de texto. Lo realmente importante es que para acceder a la información del campo de texto, solo se necesita poner el nombre del control en el formulario (campo1Txt), el nombre del campo de texto en el componente (campoTexto) y la propiedad text de este último.


Este es el ejemplo:





Espero sus comentarios.


Leer más...

lunes, 17 de mayo de 2010

Lenguaje C# - Segunda parte (Operadores)

Siguiendo con la serie de tutoriales para aprender a programar con C#, esta vez escribiré sobre el uso de los operadores, su importancia y algunos ejemplos de como funcionan, no es un tema complicado pero siempre es necesario saber cómo funcionan.


Nota: recuerda que este es el segundo de una serie de tutoriales, el primero esta aquí.

--

--
Lo primero es definir el concepto de operador. Un operador es un símbolo que representa una acción determinada para una variable o valor y así como en español la coma ( , ) indica una pausa corta y el punto ( . ) indica una pausa un poco más larga, en aritmética existen operadores que indican la ejecución de determinado proceso, por ejemplo:
2 + 2 = 4
En este caso el operador es el signo mas ( + ) que indica que se debe hacer una suma o un incremento de dos valores dados.
Los operadores en programación están en categorías dependiendo de su funcionalidad, los primeros son los operadores aritméticos que a su vez se dividen en binarios y unarios, los operadores relacionales y los operadoresLógicos.

Operadores Aritméticos

Binarios: los operadores binarios indican operaciones sencillas de incremento (suma o multiplicación ) y decremento (resta, división y modulo), estos son los operadores binarios:
  • +: representa la suma de dos o más valores o variables.
  • -: representa la resta de dos o más valores o variables.
  • *: representa la multiplicación de dos o más valores o variables.
  • /: representa la división de dos o más valores o variables.
  • %: representa el modulo (obtención del residuo de una división) de dos o más valores o variables.
Unarios: los operadores unarios representan operaciones simplificadas de incremento decremento y modificación de signos, estos son los operadores unarios:
  • ++: Incrementa el valor de una variable en una unidad.
  • --: Decrementa el valor de una variable en una unidad.
  • -: Cambia el signo de una variable, es como multiplicar por -1.
Ejemplos:
  • 2 + 2 = 4
  • 10 - 5 = 5
  • 4 * 6 = 24
  • 8 / 2 = 4
  • 8 % 2 = 0 (cero es el residuo de la división 8/2)
  • c=4; c++; //c=5 (c inicia siendo igual a 4, después del incremento [c++], c vale 5)
  • d=10; d--; //d=9
  • e = -(4) // e = -4
  • f = -(-6) // f = 6 (por regla de signos menos por menos igual a mas)
En conclusión los operadores unarios, simplifican el proceso de modificación de valores ya que al escribir c++ se hace lo mismo que c=c+1.

Operadores Relacionales

Son operadores que se encargan de unir y comparar dos o más valores, siempre se utilizan en comparaciones de parejas y están dadas por los símbolos:
  • = : igual que
  • != : diferente a
  • > : mayor que
  • < : menor que
  • >= : mayor igual que
  • <= : menor igual que
Estos operadores se usan para comparar valores de variables por pares es decir,no se pueden comparar más de 2 valores al tiempo:
  • a > b > c //ERROR
  • (a > b) && (b > c) //BIEN
Cuando se requiere hacer una comparación de varios valores se deben usar losOperadores Lógicos, que son operadores de unión, también llamados compuertas lógicas, estos operadores pueden unir dos o más pares de valores comparados por medio de los operadores relaciones y están dados por estos símbolos:

  • && : Operador AND (Y) quiere decir que todas las condiciones deben ser verdaderas para que se ejecute una acción.
  • || : Operador OR (O) quiere decir que de todas las condiciones solo una debe ser verdadera y se asume que con eso es suficiente para hacer determinada acción.
  • ! : Operdaro NOT (NO) quiere decir que se niega la afirmación para cambiar su valor, es decir cambia de verdadero a falso y de falso a verdadero.
Es muy importante reconocer cuando y como se deben utilizar los operadores lógicos, ya que estos indican cual será el flujo de ejecución de nuestras aplicaciones. Supongamos que estamos desarrollando un formulario en el que todos los datos del usuario son obligatorios, cuando el usuario final presione clic en el botón para guardar los datos, debemos validar si toda la información está debidamente diligenciada, en ese caso usaríamos al operador && ya que este indica que todo debe ser igual a verdadero.

if(nombre.text != "" && apellido.text != "" && telefono.text != "" ) // OK

La condición pregunta por el valor del texto de tres campos de texto (nombre, apellido, telefono), si el valor de texto es diferente de nada (es decir, si está lleno) quiere decir que todo está bien, ahora en caso de que alguno de los campos no cumpla la condición no se puede guardar la información y se le mostrará una alerta o un mensaje al usuario.

Es importante ver como las condiciones están dadas por parejas: telefono.text!= "" estas parejas se forman por valor operador relacional valor y cuando se desea comparar ese resultado por otro valor es necesario implementar los operadores lógicos.

Esto es todo para este tutorial, en el siguiente escribiré sobre las tablas de verdad, y sobre el manejo de condiciones en C#.

Espero sus comentarios.
--

Leer más...