Desarrollo de Aplicaciones Flex con FlashDevelop – Primera Parte


Buenas noches:

No hace mucho que descubri el entorno de desarrollo flashdevelop.org, la verdad es aunque no he podido utilizarlo todo lo que quisiera, es bastante potente y permite desarrollar comodamente en Flex sin necesidad de utilizar el FlexBuilder o FlashBuilder. Es cierto que tiene limitaciones pero en su mayoría relativas a que el Flex SDK no posee todas las librerias existentes en el FlexBuilder.

Instalarlo es muy sencillo y existen varios tutoriales que lo explican.  Lo que no he encontrado son tutoriales, ejemplos o artículos que lo utilicen a fondo con todas sus posibilidades. Así que he decido adentrarme yo mismo en este territorio inexplorado.

  • Antes de nada he descargarme Flex SDK. Se trata de un fichero zip que es facil de descomprimir. En mi caso, yo lo he hecho en mi disco secundario D:\FlexSDK.
  • Se ejecuta el FlashDevelop. Se selecciona la opción

Crear un nuevo proyecto

Debajo de la pestaña de proyectos recientes “Recent Projects”, existe la opción “New Project”. Esta opción nos dirige a una ventana emergente de donde se puede seleccionar el proyecto deseado. En este caso, se selecciona la opción “ActionScript 3 > Flex Project”.

En este ejemplo especifico se introduce los siguientes valores:

  • Name: AddressBook
  • Location: D:\adobeflexprojects
  • Package: – Se deja en blanco –

Automaticamente, se genera una colección de carpetas como se generarían en el caso de un proyecto utilizando FlexBuilder.

  • bin
  • lib
  • src

En nuestro caso, se desgarga este fichero (fichero), se introduce en la carpeta lib, que se encuentra en
D:/

Se abre el fichero Main.mxml que se encuentra localizado en la carpeta src, al que se puede acceder desde la pestaña Project.

1
<mx:Button id="myButton" label="Hello" />

Queda el siguiente codigo

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button id="myButton" label="Hello" />
</mx:Application>

Una vez salvado, se pulsa sobre el botón “Test Movie”, y el SDK de Flex compila el fichero. Y si se ha cometido ningún error al copiar/pegar aparece un botón.

A continuación, se le añade nuevos elementos de UI,como una etiqueta o un campo donde se almacena el Nombre de Pila del contacto.

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Panel title="New AddressBook Contact" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10">
			<mx:Label id="fNameLabel" text="FirstName."/>
			<mx:TextInput id="fName" text="Enter First Name"/>
			<mx:Button id="myButton" label="Submit" />
	</mx:Panel>
</mx:Application>

Se ha introducido elementos nuevos

  • Label
  • TextInput

Tambien puedo introducir campos múltiples, como este campo lista que me va a permitir seleccionar el tratamiento del individuo:

1
2
3
4
5
6
7
<mx:List> 
	<mx:dataProvider>
		<mx:String>Mr.</mx:String>
		<mx:String>Ms.</mx:String>
		<mx:String>Miss</mx:String>
	</mx:dataProvider>
</mx:List>

Esto es solo el comienzo para abrir boca,en los siguientes capitulos se comenzará de una manera más organizada entendiendo cual debe ser la organización de un desarrollo, como se organiza un formulario y como se puede dar estilos a la aplicación.

Un saludo