Primeros pasos con la flexión

Instalación o configuración (Apache Flex)

Hay dos formas de configurar Apache Flex SDK. Puede utilizar el instalador Apache Flex SDK proporcionado, una aplicación de Adobe AIR que automatiza el proceso (en Windows o OS X/macOS). O puede instalarlo manualmente, lo que obviamente requiere una mayor comodidad con su plataforma pero brinda más flexibilidad con los detalles de instalación.

Instalación de Apache Flex SDK mediante el instalador de Apache Flex

  1. Descargue el instalador binario para su sistema operativo (Windows, Mac or Linux).
  2. Ejecute el instalador
  3. Seleccione la versión del SDK que desea descargar. El proyecto Apache Flex sugiere que descargue la última versión publicada.
  4. Seleccione la versión de Flash Player. El proyecto Flex sugiere que lo deje como predeterminado. Haga clic en Siguiente**.
  5. Seleccione un directorio donde desee instalar el SDK. Haga clic en Siguiente**.
  6. Verifique todos los acuerdos de licencia. Haga clic en Instalar.
  7. Espere a que el instalador descargue e instale Apache Flex SDK.

Instalar Apache Flex SDK manualmente

NOTA: Este puede ser un proceso largo y complicado.

Prepara tu sistema

  1. Descargue e instale la última versión de Java JDK
  2. Descarga e instala la última versión de Ant
  3. Descarga e instala la última versión de Git
  4. Descarga e instala la última versión de JUnit

Configurar la estructura de carpetas

  1. Cree la siguiente estructura de directorios en su computadora para Flex SDK, generalmente almacenada en el directorio raíz o Documentos.
/ApacheFlex
/ApacheFlex/dependencies
/ApacheFlex/source

Fuente de descarga

  1. Abra una terminal y cambie el directorio a:
/ApacheFlex/source
  1. Ejecute el siguiente comando git para descargar la fuente Flex SDK:
git clone https://git-wip-us.apache.org/repos/asf/flex-sdk.git flex-sdk
  1. Ejecute el siguiente comando git para descargar la fuente TLF:
git clone https://git-wip-us.apache.org/repos/asf/flex-tlf.git flex-tlf
  1. Cambie al directorio flex-sdk:
/ApacheFlex/source/flex-sdk
  1. Cambie a la rama ‘desarrollar’ (Opcional):
git checkout develop

Edite las propiedades del entorno

Para que los scripts de compilación funcionen, debe configurar las Variables de entorno. El archivo de propiedades del entorno contiene las variables de entorno que apuntan a las ubicaciones de las dependencias que utilizará a lo largo del proceso. Estos son utilizados por los diversos scripts de compilación para ejecutar y compilar el SDK. Agregará variables de entorno adicionales a lo largo del resto de este tutorial. Cuando ejecute el script de compilación más tarde, el script validará las rutas proporcionadas y le advertirá si son incorrectas.

  1. Cree el archivo de propiedades del entorno:

En el directorio flex-sdk, cree una copia del archivo env-template.properties y asígnele el nombre env.properties.

Dado que ya instaló Java y Ant, configure la ruta de estos agregando lo siguiente al final del archivo env.properties:

env.JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/Current/Commands/java

env.ANT_HOME=/Applications/Ant/bin
  1. A continuación, agregue la ruta al directorio TLF:
env.TLF_HOME=/ApacheFlex/source/flex-tlf

Agregar dependencias requeridas

SDK de Adobe AIR

  1. Descargue Air SDK Flex Edition (Asegúrese de descargar la edición específicamente diseñada para Flex).
  2. Extracto a:
/ApacheFlex/dependencies/AIRSDK/4.0

donde el nombre del directorio final hace referencia a la versión del SDK de AIR que descargó.

  1. Establezca la variable de entorno AIR_HOME en la ruta del SDK de AIR que eligió en el paso anterior. Por ejemplo,
env.ANT_HOME=/ApacheFlex/dependencies/AIRSDK/4.0

Proyector Adobe Flash Player

  1. Descargar el Proyector Flash Player
  2. Ejecute el instalador. El programa de instalación de Projector Content Debugger no se instala en ningún lugar (al menos para mí). Una vez que ejecute el instalador, debe copiarlo en la ubicación que desee. En este caso, cópielo en el directorio /ApacheFlex/dependencies/player. Nota: en OSX, agregue ‘.app/Contents/MacOS/Flash Player Debugger’ a la ruta de acceso a Flash Player.
/ApacheFlex/dependencies/player/Flash Player.app/Contents/MacOS/Flash Player Debugger
  1. Establezca la variable de entorno FLASHPLAYER_DEBUGGER en la ruta de instalación del proyector.
env.FLASHPLAYER_DEBUGGER=/ApacheFlex/dependencies/player/Flash Player.app/Contents/MacOS/Flash Player Debugger

También puede utilizar el complemento Flash Player. Por lo general, se encuentra aquí: /Library/Internet Plug-ins/Flash Player/ La ruta completa sería: /Library/Internet Plug-ins/Flash Player.app/Contents/MacOS/Flash Player Debugger

Adobe Flash Player playerglobal.swc

  1. Descargar playerglobal.swc: se encuentra en la misma página que el depurador de contenido que acabas de descargar.
  2. Cópialo en:
/ApacheFlex/dependencies/PlayerGlobal/player/12.0

donde el número corresponde a la versión que descargas. 3. Cambie el nombre del archivo copiado a ‘playerglobal.swc’ 4. Configure la variable de entorno PLAYERGLOBAL_HOME en:

env.PLAYERGLOBAL_HOME=/ApacheFlex/Dependencies/PlayerGlobal/player

Juego de herramientas de Adobe Pixel Bender

  1. Descarga Pixel Bender para Windows o para Mac
  2. Instale Pixel Bender. Cuando instala el programa, le da la opción de elegir la ubicación de instalación. Copie esta ubicación antes de instalar.
  3. Configure la variable de entorno PIXELBENDER_HOME en el directorio de instalación.

Preparar sistema

Para realizar pruebas, el archivo mm.cfg de Adobe Flash Player debe tener las propiedades adecuadas establecidas y un archivo FlashPlayerTrust debe permitir que los archivos SWF locales accedan a los archivos locales.

  1. Abra el archivo mm.cfg en un editor. La ubicación del archivo mm.cfg depende de su sistema operativo. Ver esta página.
  2. Si no existe, inicie manualmente el depurador de contenido de Adobe Flash Player Projector y debería crear mm.cfg en ese momento.
  3. Agregue o verifique que las siguientes entradas estén en el archivo:
ErrorReportingEnable=1
TraceOutputFileEnable=1
  1. En el mismo directorio que el archivo mm.cfg se encuentra el directorio FlashPlayerTrust.
  2. Abra ese directorio y cree un nuevo archivo de texto llamado ApacheFlex.cfg.
  3. En ese archivo, agregue el directorio principal de Apache Flex SDK. Por ejemplo:
#Path to Apache Flex Source
/ApacheFlex/source
  1. Guarde el archivo.

Establecer las propiedades de construcción

  1. En el directorio flex-sdk se encuentra el archivo de propiedades de compilación. Este contiene los números de versión del software que descargó.
  2. Abra este archivo y establezca los siguientes valores en la versión de Flash Player y AIR SDK que está utilizando:
# Flash player version for which player global swc to use
playerglobal.version = 12.0

# AIR version number
air.version = 4.0

Estos valores se utilizan para crear la ruta al SDK. Entonces, si guardó playerglobal.swc en el siguiente directorio: /ApacheFlex/dependencies/PlayerGlobal/player/12.0 el valor de playerglobal.version sería 12.0.

Nota: dado que este valor construye la ruta, asegúrese de usar el valor completo, 12.0, en lugar de 12 si su ruta lo contiene.

Nota: si está utilizando una nueva versión de Flash Player que aún no se menciona en la versión de Flex SDK con la que está trabajando, es posible que reciba el mensaje: Error: configuration variable ‘swf-version’ value contains unknown token ‘playerglobal.swfversion’ Deberá actualizar el archivo /ApacheFlex/source/flex-sdk/frameworks/build.xml con un código de verificación de versión actualizado.

Hello World (se ejecuta en el navegador)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:Label text="Hello World!" />

</s:Application>

Hello World (se ejecuta en la aplicación)

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:Label text="Hello World!" />

</s:WindowedApplication>