Creacion de Menú Estilo Windows en Flash Builder 4

Planeta Rica - Córdoba - Colombia / Teléfono (57 + 4) 766 38 22
Envigado - Antioquia - Colombia Cra. 48 No. 35 Sur 40 /

Ed. Glamar Of. 201 / Teléfono (57 + 4) 444 54 55
CREACIÓN DE UN MENÚ ESTILO WINDOWS EN ADOBE FLASH BUILDER 4

Cuando iniciamos el desarrollo de una aplicación, siempre es importante ofrecerle al
usuario una vista (ventana) organizada en la que se encuentren relacionados los
diferentes módulos que hacen parte de dicha aplicación, permitiéndole acceder a cada
uno de ellos de una manera rápida y sencilla. Para este fin un Menú, es tal vez la mejor
opción. En este tutorial aprenderás a crear un Menú, con el estilo de los usados por
Windows, para tu aplicación.
Para la creación del nuestro Menú vamos a dividir el proceso por fases, la primera de estas
fases será crear nuestro proyecto (Flex Project):
FASE I: Creación del Proyecto
El primer paso para crear nuestro proyecto será crear una carpeta en cualquier
parte de nuestro disco duro, en la cual guardaremos nuestro proyecto, para
nuestro ejemplo usaremos una carpeta creada en el disco local D: llamada
EjemploMenu.
El segundo paso es abrir el Adobe Flash Builder 4 y en Workspace seleccionaremos
la ruta de nuestra carpeta a través del botón Browse… luego pulsamos OK.
Una vez cargado nuestro proyecto, vamos a la sección Package Explorer que se
encuentra en la parte superior izquierda de la ventana, debe verse así:
Creado por Víctor Julio Martínez Barrios

vjmartinez@softcaribbean.com Página 1
Hacemos clic derecho en la opción New y escogemos Flex Project. Le damos un nombre
al proyecto, en este caso EjemploMenu. Luego pulsamos Next, Next, Finish y ya tenemos
nuestro proyecto creado.
FASE II: Creación de la s:Application que contendrá el Menú:
Luego de crear nuestro proyecto, Adobe Flash Builder ha creado una aplicación con el
mismo nombre de nuestro proyecto (EjemploMenu.mxml) que se encuentra en el
paquete default package, dentro de la carpeta src. Esta será la aplicación que usaremos
para crear nuestro menú.
Luego de creada la aplicación la abrimos y abrimos el modo de diseño (Design),
para empezar crearemos un Panel (s:Panel), es muy sencillo solo debemos buscarlo
dentro de los componentes(Components) y arrastrarlo hacia nuestra aplicación así:

Luego de ubicarlo lo arrastras a la aplicación y quedará más o menos así.

Una vez creado el panel podemos editar sus propiedades (colores, titulo, ect.) a
nuestro antojo hasta convertirlo en algo de nuestro agrado.
Una vez hayamos terminado nuestro panel, empezaremos a crear nuestra barra de
menús, esa es la tercera fase.
FASE III: Creación de la barra de menús:
Para nuestro ejemplo usaremos un componente llamado s:ButtonBar, como su

nombre lo indica este componente nos permite crear una barra de botones, los
cuales usaremos para crear nuestros menús.
Para la creación de la barra iremos a la pestaña source de nuestra Aplicación.
Al hacer clic en el botón source nos abrirá una ventana con el siguiente código:
<?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" minWidth="955" minHeight="600">
<fx:Declarations>

</fx:Declarations>
<s:Panel x="20" y="10" width="925" height="564" title="Ejemplo Menu">
Aquí irá el contenido de nuestro Menú
</s:Panel>
</s:Application>
Dentro de nuestro panel (espacio marcado en el recuadro), crearemos nuestra barra de botones, a
la cual llamaremos: “myButtonBar” para nuestro ejemplo usaremos el siguiente código:
--- Se crea la barra -----

<s:ButtonBar id="myButtonBar" chromeColor="#E2ECE3" fontWeight="bold" x="0" y="0">
---- Dentro de la barra se crea un ArrayCollection que contendrá nuestros menus -----
<mx:ArrayCollection>
<fx:String>Archivo</fx:String> ----- Cada fx:String representa un botón(menú) -----
<fx:String>Edición</fx:String>
<fx:String>Ver</fx:String>
</mx:ArrayCollection>
</s:ButtonBar>
Una vez hecho esto, nuestro menú irá tomando forma si abrimos la pestaña Design se
verá así(los colores varían según tu gusto):
Ya tenemos nuestros menús, pero ¿y los contenidos?
Eso nos hace pasar a nuestra siguiente fase.

FASE IV: Creación de los menús:
Esta será nuestra última fase, en la que crearemos los contenidos de nuestros menús. Es
hora de regresar a la pestaña source, una vez allí procederemos a crear un
fx:Script(Código Action Script) que será quien nos ayude a interactuar con nuestro menú.
Dentro del script crearemos la función que nos mostrará el menú al hacer click sobre los
botones creados en la fase III.
Este será nuestro Código, lo colocaremos debajo de la declaración de la aplicación:
<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" minWidth="955" minHeight="600">
---- SE INICIA LA CREACION DEL SCRIPT ----

<fx:Script>
<![CDATA[
/*SE IMPORTA LA CLASE MENU */
import mx.controls.Menu;
/* SE IMPORTA LOS EVENTOS DE FLEX*/

import mx.events.FlexEvent;
/*SE IMPORTAN LOS EVENTOS DEL MENÚ*/

import mx.events.MenuEvent;
/* SE CREA UNA VARIABLE DE TIPO MENÚ */

protected var myMenu:Menu;
/* La siguiente evalúa que botón de la barra creada en la fase III ha

sido pulsado y crea un menú con los datos respectivos*/
protected function showHandler(event:MouseEvent):void

{
/* Se crea el menú, la variable datosMenuArchivo hace referencia a un XML

que contendrá los datos del menú (debajo se explica cómo crearlo) */
myMenu = Menu.createMenu(null, datosMenuArchivo, false);

myMenu.labelField="@label";
myMenu.show(90, 35);
}
/* Esta función cierra nuestro menú */
protected function hideHandler(event:MouseEvent):void
{
myMenu.hide();
}
]]>
</fx:Script>

¿Cómo crear el XML que contendrá los datos de nuestro Menú?
Recuerdan la sección:
<fx:Declarations>

</fx:Declarations>
Ahora la usaremos:
< fx:Declarations >
/*Ahora creamos un XML y le asignamos como id el mismo nombre de la variable con la que
creamos el menú… recuerdan= datosMenuArchivo */
<fx:XML format="e4x" id="datosMenuArchivo">

<root>
/*Se crea el menu principal*/
<menuitem label="Guardar como" >
/*label indica el texto que aparecera en el menú*/
/*Se crea los submenus */

<menuitem label="Documento .txt" enabled="false"/>
/* enabled indica si el menú está habilitado o no*/
<menuitem label="Documento .doc"/>
</menuitem>
/*Se crea un separador */
<menuitem type="separator"/>
/*Se crea un menú checkeable */
<menuitem label="Activar actualizaciones" type="check"
toggled="true"/>
<menuitem type="separator"/>
/*Se crea un menú tipo radio */
<menuitem label="Ordenar por" >
<menuitem label="Nombre" type="radio"
groupName="one"/>
<menuitem label="Fecha de cración" type="radio"
groupName="one" toggled="true"/>
<menuitem label="Tipo" type="radio"
groupName="one"/>
</menuitem>
</root>
</fx:XML>
</fx:Declarations>
Por último algo muy importante:

Una vez terminada nuestra función encargada de crear y mostrar el menú y después de
haber creado nuestra lista XML con los datos y las especificaciones de las opciones de
nuestro Menú, procedemos a asociar dicha función a nuestra barra de botones
(“myButtonBar”)para que nos muestre el menu indicado cuando se pulse un boton
especifico, para eso hacemos los siguientes cambios:
En la declaración de nuestra barra de botones.
<s:ButtonBar id="myButtonBar" change="showHandler(event)" chromeColor="#E2ECE3"

fontWeight="bold" x="0" y="0">
Como se pueden dar cuenta hemos agregado la función showHandler(event) en el evento

change de nuestra barra de botones, quiere decir esto que cada vez que cambiemos de botón en
nuestra barra, se mostrará el menú correspondiente al botón pulsado. Pero para que eso pase aun
falta hacer un cambio, esta vez a nuestra funcion showHandler(event).
En la función showHandler(event):
protected function showHandler(event:MouseEvent):void

{
if(myButtonBar.selectedItem=="Archivo"){
myMenu = Menu.createMenu(null, DatosMenuArchivo,false);
}
if(myButtonBar.selectedItem=="Edición"){
myMenu =Menu.createMenu(null,DatosMenuEdicion,false);
}
if(myButtonBar.selectedItem=="Ver"){
myMenu = Menu.createMenu(null,DatosMenuVer,false);
}
}
Así nos aseguramos que nuestra barra muestre el menú correspondiente al botón
pulsado. Cabe aclarar que deben haber sido creadas las listas XML
DatosMenuEdicion, y DatosMenuVer.
Una vez hecho todo esto siguiendo los pasos anteriores, podremos ejecutar nuestra
Aplicación y si todo anda bien nuestro Menú se verá más o menos así:
Espero les sea de utilidad, ya saben que cualquiera inquietud se pueden comunicar con
nosotros a cualquiera de los correos que se encuentran en el enlace Contáctenos de este
mismo sitio.

Creacion de Menú Estilo Windows en Flash Builder 4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creacion de Menú Estilo Windows en Flash Builder 4

Uploaded by

Copyright:

Available Formats

Planeta Rica - Córdoba - Colombia / Teléfono (57 + 4) 766 38 22

Envigado - Antioquia - Colombia Cra. 48 No. 35 Sur 40 /

CREACIÓN DE UN MENÚ ESTILO WINDOWS EN ADOBE FLASH BUILDER 4

FASE I: Creación del Proyecto

Creado por Víctor Julio Martínez Barrios

FASE II: Creación de la s:Application que contendrá el Menú:

Luego de creada la aplicación la abrimos y abrimos el modo de diseño (Design),

Creado por Víctor Julio Martínez Barrios

Luego de ubicarlo lo arrastras a la aplicación y quedará más o menos así.

Creado por Víctor Julio Martínez Barrios

FASE III: Creación de la barra de menús:

Para nuestro ejemplo usaremos un componente llamado s:ButtonBar, como su

Para la creación de la barra iremos a la pestaña source de nuestra Aplicación.

<?xml version="1.0" encoding="utf-8"?>

Aquí irá el contenido de nuestro Menú

--- Se crea la barra -----

Creado por Víctor Julio Martínez Barrios

<s:ButtonBar id="myButtonBar" chromeColor="#E2ECE3" fontWeight="bold" x="0" y="0">

Ya tenemos nuestros menús, pero ¿y los contenidos?

Eso nos hace pasar a nuestra siguiente fase.

Creado por Víctor Julio Martínez Barrios

FASE IV: Creación de los menús:

Este será nuestro Código, lo colocaremos debajo de la declaración de la aplicación:

---- SE INICIA LA CREACION DEL SCRIPT ----

/* SE IMPORTA LOS EVENTOS DE FLEX*/

/*SE IMPORTAN LOS EVENTOS DEL MENÚ*/

/* SE CREA UNA VARIABLE DE TIPO MENÚ */

/* La siguiente evalúa que botón de la barra creada en la fase III ha

protected function showHandler(event:MouseEvent):void

/* Se crea el menú, la variable datosMenuArchivo hace referencia a un XML

myMenu = Menu.createMenu(null, datosMenuArchivo, false);

Creado por Víctor Julio Martínez Barrios

¿Cómo crear el XML que contendrá los datos de nuestro Menú?

<fx:XML format="e4x" id="datosMenuArchivo">

/*label indica el texto que aparecera en el menú*/

/*Se crea los submenus */

Por último algo muy importante:

Creado por Víctor Julio Martínez Barrios

<s:ButtonBar id="myButtonBar" change="showHandler(event)" chromeColor="#E2ECE3"

Como se pueden dar cuenta hemos agregado la función showHandler(event) en el evento

protected function showHandler(event:MouseEvent):void

Creado por Víctor Julio Martínez Barrios

You might also like

/SE IMPORTAN LOS EVENTOS DEL MENÚ/

/label indica el texto que aparecera en el menú/

/Se crea los submenus /