Sunteți pe pagina 1din 5

INSTITUTO TECNOLOGICO SUPERIOR DE ALVARADO Manual de Practicas Departamento de Ingeniera en Sistemas Computacionales Carrera Ingeniera en Sistemas Computacionales Practica

No. 1 Plan de Estudios ISIE-TWR-2007-01 Clave SCD-1027 Asignatura


TOPICOS AVANZADOS DE PROGRAMACIN

Nombre de la Practica Uso de botones, etiquetas, cajas de texto, etc.

Unidad II

Duracin (Horas) 2

1. INTRODUCCION
Qu es Adobe Flex? Adobe Flex es un trmino que agrupa una serie de tecnologas publicadas desde Marzo de 2004 por Macromedia para dar soporte al despliegue y desarrollo de Aplicaciones Enriquecidas de Internet, basadas en su plataforma propietaria Flash. Los programadores tradicionales de aplicaciones ven como un desafo adaptar la metfora de la animacin sobre la plataforma con la cual fue originalmente construido Flash. Flex minimiza elegantemente este problema proveyendo un flujo de trabajo y un modelo de programacin que es familiar a los desarrolladores de aplicaciones. Flex fue inicialmente liberado como una aplicacin de la J2EE o biblioteca de etiquetas JSP que compilaba el lenguaje de marcas Flex (MXML) y ejecutaba mediante ActionScript aplicaciones Flash (archivos SWF binarios). Versiones posteriores de Flex soportan la creacin de archivos estticos que son compilados, y que pueden ser distribuidos en lnea sin la necesidad de tener una licencia de servidor. El objetivo de Flex es permitir a los desarrolladores de aplicaciones web construir rpida y fcilmente Aplicaciones de Internet Ricas, tambin llamadas RIAs. En un modelo multi-capa, las aplicaciones Flex son el nivel de presentacin. Qu es Action Script? Adobe ActionScript es el lenguaje de programacin de la Plataforma Adobe Flash. Originalmente desarrollado como una forma para que los desarrolladores programen de forma ms interactiva. La programacin con ActionScript permite mucha ms eficiencia en las aplicaciones de la plataforma Flash para construir animaciones de todo tipo, desde simples a complejas, ricas en datos e interfaces interactivas. La versin ms extendida actualmente es ActionScript 3.0 , que signific una mejora en el manejo de programacin orientada a objetos al ajustarse mejor al estndar ECMA-262 y es utilizada en las ltimas versiones de Adobe Flash y Flex y en anteriores versiones de Flex. Desde la versin 2 de Flex viene incluido ActionScript 3, el cual mejora su rendimiento en comparacin de sus antecesores, adems de incluir nuevas caractersticas como el uso de expresiones regulares y nuevas formas de empaquetar las clases.

2. OBJETIVOS (COMPETENCIAS)
El alumno realizar programas en lenguaje Adobe Flex para editar compilar y ejecutar distintos programas que incluyan el uso de formularios, botones, etiquetas y cajas de texto.

3. FUNDAMENTO

Pgina 1 de 5

INSTITUTO TECNOLOGICO SUPERIOR DE ALVARADO Manual de Practicas Departamento de Ingeniera en Sistemas Computacionales
Salida. Al ejecutar el cdigo se visualizar una aplicacin web, donde se podr introducir los datos personales de un alumno. El formulario cuenta con un botn de Guardar que se puede vincular con una base de datos (MySQL, SQL Server, etc) para registrar esos datos. Cabe mencionar, que la funcin principal de este programa es visualizar al alumno lo que puede hacer con los elementos del formulario donde en cada caja de texto deber escribir los datos que se le solicita.

4. EQUIPAMIENTO Y MATERIAL DE APOYO


Se requieren maquinas con IDE Eclipse 3.4, Adobe Flex 3.0 y Flash Player 10.0 o superior.

5. DESARROLLO DE LA PRACTICA
1.- Definir un espacio de trabajo (workspace) en la unidad C:\ITSAV\TopicosProg\Practicas. Esto con el propsito de mantener un repositorio legible de todos los proyectos que se vayan desarrollando a lo largo de tu carrera. 2.- Asegurarnos que el entorno Eclipse este activado con la perspectiva de Flex Development. Para ellos vamos a ir al men WindowOpen perspectiveOther ( ver Fig. 1)

Fig 1. Perspectiva de Desarrollo de Flex

3. Hacer clic en la opcin Flex Development y presionar OK

Pgina 2 de 5

INSTITUTO TECNOLOGICO SUPERIOR DE ALVARADO Manual de Practicas Departamento de Ingeniera en Sistemas Computacionales
4.- Crear nuestro proyecto Flex en el men FileNewFlex Project (ver Fig. 2). El nombre del proyecto es Practica1. Dejar por default las otras opciones.

Fig. 2 Creacin de proyecto Flex Practica 1

5.- Hacer clic en el botn Next 6.- Por default Eclipse estable como ruta bin-debug. Eliminamos esta opcin y dejamos que la salida de nuestro proyecto sea en la misma carpeta. Hacer clic en el botn Finish. (Ver Fig. 3).

Fig. 3 Ruta de salida del proyecto.

Pgina 3 de 5

INSTITUTO TECNOLOGICO SUPERIOR DE ALVARADO Manual de Practicas Departamento de Ingeniera en Sistemas Computacionales

7.- En la seccin Source, dentro del cdigo resultante, en layout sustituye absolute por vertical. (Ver Fig. 4).

Fig. 4. Entorno de desarrollo del proyecto Practica1.

8.- Escribir el cdigo siguiente en la Seccion Source: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Form width="80%" height="80%"> <mx:FormHeading label="ALUMNO"/> <mx:FormItem label="Nombre"> <mx:TextInput id="txtNombre"/> </mx:FormItem> <mx:FormItem label="Apellido Pat."> <mx:TextInput id="txtAppPat"/> </mx:FormItem> <mx:FormItem label="Apellido Mat."> <mx:TextInput id="txtAppMat"/> </mx:FormItem> <mx:FormItem label="Direccin"> <mx:TextInput id="txtDireccion"/> </mx:FormItem> <mx:FormItem label="Tel."> <mx:TextInput id="txtTel"/> </mx:FormItem> <mx:FormItem label="Correo electronico"> <mx:TextInput id="txtEmail"/> </mx:FormItem> <mx:FormItem label=""> <mx:Button label="Guardar"/> </mx:FormItem> </mx:Form> </mx:Application>

Pgina 4 de 5

INSTITUTO TECNOLOGICO SUPERIOR DE ALVARADO Manual de Practicas Departamento de Ingeniera en Sistemas Computacionales
9.- Compilar y ejecutar

6. REPORTE DE LA PRACTICA
1. Realizar otro formulario con el mismo nmero de campos nicamente por diseo (arrastrando componentes) y estimar tiempos. 2. Investigue los componentes Hbox y Vbox para poder implementarla en su formulario, modifique su formulario utilizando estos componentes y cree otro nuevo diseo. 3. Inserte nuevas cajas de texto (por cdigo) por ejemplo (Carrera, Semestre y Grupo) y despus por diseo. Estime los tiempos en los resultados finales. 4.- Dirigase a la carpeta donde guardo su proyecto y mencione los archivos que se crearon.

7. RESULTADOS Y CONCLUSIONES
Presentar en una imagen capturada de cada formulario, as como los cdigos resultante del reporte de prctica.

8. ANEXOS
Si deseas saber ms acerca de cmo empezar una aplicacin utilizando Adobe Flex, da clic a la siguiente liga: http://www.cristalab.com/tutoriales/tutorial-de-flex-builder-2-c216l/

9. REFERENCIAS
http://tv.adobe.com/watch/lyndacom-training-for-developers/flex-3-essential-training-ch3/ http://www.madeinflex.com/

Elaboro:

Reviso:

Autoriz:

Docente

Academia de Ingeniera Sistemas Computacionales

en

Jefe de Carrera de Ingeniera en Sistemas Computacionales

Pgina 5 de 5

S-ar putea să vă placă și