Bueno, después de una solicitud de ayuda de cómo hacer un simple menú, he decidido empezar a trabajar en el 20 minutos llegó un ejemplo de cómo tomar una TitleList para hacer un simple menú con un código de la aplicación que no más de 30 líneas y un lienzo como itemRender con alrededor de 25 líneas, tenemos un menú que se pueden personalizar y utilizar en diversas ocasiones.
Como se puede ver la imagen en el lado, esto presenta un menú parece bastante simple y agradable sin sobrecargar nuestra aplicación y altamente personalizada. Como los eventos clic, rollover, itemclick y casi todos los eventos están presentes en titleList botón es muy fácil de utilizar menú interceptar estos eventos en TileList.
Aquí está el código ...
testGridMenu.mxml
<? Xml " 1.0 " version = "1.0" " utf-8 " ?> encoding = "UTF-8">
<Mx: Aplicación " http://www.adobe.com/2006/mxml " xmlns: mx = "http://www.adobe.com/2006/mxml" " absolute " layout = "absoluta" " srcview/index.html " > viewSourceURL = "srcview / index.html">
<Mx: Script>
<! [CDATA [
mx.collections.ArrayCollection importación;
menuRender importación;
mx.controls.Alert importación;
/ / Definir los menús
[Bindable]
var privado menuProv: ArrayCollection = new ArrayCollection ([(ButImg: "img/menu1.png," ButLabel: "HOME", ButDesc: "Home, la entrada inicial"), (ButImg: "img/menu2.png," ButLabel: "Ejemplo", ButDesc: "Ejemplo, Ejemplo de la sección 1"), (ButImg: "img/menu3.png," ButLabel: "ejemplo", ButDesc: "Ejemplo 2, de la sección Ejemplo 2 "}]);
/ / Ajusta automáticamente el tamaño de los contenedores para adaptarse a la cantidad de elementos en el menú
/ / Este aumento debe ajustarse automáticamente, si el trabajo no sólo cambiar la multiplicación: * 89
[Bindable]
var privado menWidth: Número = (Número (menuProv.length) * 89);
/ / El clicker
private function menuClicked (ind: int): void (
status.text = "Menú Clickado! Índice:" ind + + "- Label:" menuProv.getItemAt + (ind). ButLabel;
)
]]>
</ Mx: Script>
<Mx: Lienzo " 105 " height = "105" " #3D3D3D " backgroundColor = "# 3D3D3D" " solid " BorderStyle = "sólida" " {menWidth+4} " width = "(4) menWidth" " #000000 " borderColor = "# 000000" " -30 " horizontalCenter = "-30" " -130 " > verticalCenter = "-130">
<Mx: TileList " 1 " x = "1" " false " includeInLayout = "false" " menuContainer " id = "menuContainer" " menuClicked(menuContainer.selectedIndex) " haga clic = "menuClicked (menuContainer.selectedIndex)" " false " useRollOver = "false" " {menuProv} " DataProvider = "() menuProv" " {menWidth} " width = "() menWidth" " 80 " height = "80" " 1 " RowCount = "1" " horizontal " Dirección = "horizontal" " false " allowMultipleSelection = "false" " 100 " rowHeight = "100" " menuRender " itemRenderer = "menuRender" " #3D3D3D " backgroundColor = "# 3D3D3D" " none " BorderStyle = "none" " #FFFFFF " ></ mx:TileList > selectionColor = "# FFFFFF"> </ mx: TileList>
<Mx: Etiqueta " 10 " x = "10" " 83 " y = "83" " HOME MENU " text = "HOME MENU" " {menWidth-30} " width = "(menWidth-30)" " false " includeInLayout = "false" " center " textAlign = "centro" " bold " fontWeight = "negrita" " #FFFFFF " color = "# FFFFFF" " 20 " /> height = "20" />
</ Mx: Lienzo>
<Mx: Texto " 323 " width = "323" " 57 " height = "57" " status " id = "status" " 0 " horizontalCenter = "0" " 0 " /> verticalCenter = "0" />
<Mx: Etiqueta " Estado: " text = "Estado" " 85 " width = "85" " -120 " horizontalCenter = "-120" " -40 " /> verticalCenter = "-40" />
</ Mx: Aplicación>
<Mx: Aplicación " http://www.adobe.com/2006/mxml " xmlns: mx = "http://www.adobe.com/2006/mxml" " absolute " layout = "absoluta" " srcview/index.html " > viewSourceURL = "srcview / index.html">
<Mx: Script>
<! [CDATA [
mx.collections.ArrayCollection importación;
menuRender importación;
mx.controls.Alert importación;
/ / Definir los menús
[Bindable]
var privado menuProv: ArrayCollection = new ArrayCollection ([(ButImg: "img/menu1.png," ButLabel: "HOME", ButDesc: "Home, la entrada inicial"), (ButImg: "img/menu2.png," ButLabel: "Ejemplo", ButDesc: "Ejemplo, Ejemplo de la sección 1"), (ButImg: "img/menu3.png," ButLabel: "ejemplo", ButDesc: "Ejemplo 2, de la sección Ejemplo 2 "}]);
/ / Ajusta automáticamente el tamaño de los contenedores para adaptarse a la cantidad de elementos en el menú
/ / Este aumento debe ajustarse automáticamente, si el trabajo no sólo cambiar la multiplicación: * 89
[Bindable]
var privado menWidth: Número = (Número (menuProv.length) * 89);
/ / El clicker
private function menuClicked (ind: int): void (
status.text = "Menú Clickado! Índice:" ind + + "- Label:" menuProv.getItemAt + (ind). ButLabel;
)
]]>
</ Mx: Script>
<Mx: Lienzo " 105 " height = "105" " #3D3D3D " backgroundColor = "# 3D3D3D" " solid " BorderStyle = "sólida" " {menWidth+4} " width = "(4) menWidth" " #000000 " borderColor = "# 000000" " -30 " horizontalCenter = "-30" " -130 " > verticalCenter = "-130">
<Mx: TileList " 1 " x = "1" " false " includeInLayout = "false" " menuContainer " id = "menuContainer" " menuClicked(menuContainer.selectedIndex) " haga clic = "menuClicked (menuContainer.selectedIndex)" " false " useRollOver = "false" " {menuProv} " DataProvider = "() menuProv" " {menWidth} " width = "() menWidth" " 80 " height = "80" " 1 " RowCount = "1" " horizontal " Dirección = "horizontal" " false " allowMultipleSelection = "false" " 100 " rowHeight = "100" " menuRender " itemRenderer = "menuRender" " #3D3D3D " backgroundColor = "# 3D3D3D" " none " BorderStyle = "none" " #FFFFFF " ></ mx:TileList > selectionColor = "# FFFFFF"> </ mx: TileList>
<Mx: Etiqueta " 10 " x = "10" " 83 " y = "83" " HOME MENU " text = "HOME MENU" " {menWidth-30} " width = "(menWidth-30)" " false " includeInLayout = "false" " center " textAlign = "centro" " bold " fontWeight = "negrita" " #FFFFFF " color = "# FFFFFF" " 20 " /> height = "20" />
</ Mx: Lienzo>
<Mx: Texto " 323 " width = "323" " 57 " height = "57" " status " id = "status" " 0 " horizontalCenter = "0" " 0 " /> verticalCenter = "0" />
<Mx: Etiqueta " Estado: " text = "Estado" " 85 " width = "85" " -120 " horizontalCenter = "-120" " -40 " /> verticalCenter = "-40" />
</ Mx: Aplicación>
menuRender.mxml
<? Xml " 1.0 " version = "1.0" " utf-8 " ?> encoding = "UTF-8">
<Mx: Lienzo " http://www.adobe.com/2006/mxml " xmlns: mx = "http://www.adobe.com/2006/mxml" " 89 " width = "89" " 79 " height = "79" " #ED5B1B " backgroundColor = "# ED5B1B" " changeOver() " mouseover = "Cambio ()" " changeOut() " mouseOut = "changeOut ()" " true " useHandCursor = "true" " true " > buttonMode = "true">
<Mx: Imagen " 0 " horizontalCenter = "0" " -15 " verticalCenter = "-15" " 85 " maxwidth = "85" " 60 " maxHeight = "60" " {data.ButImg} " source = "() data.ButImg" " true " useHandCursor = "true" " true " /> buttonMode = "true" />
<Mx: Etiqueta " 0 " x = "0" " 61 " y = "61" " 89 " width = "89" " bold " fontWeight = "negrita" " #FFFFFF " color = "# FFFFFF" " center " textAlign = "centro" " {data.ButLabel} " text = "() data.ButLabel" " true " useHandCursor = "true" " true " /> buttonMode = "true" />
<Mx: Script>
<! [CDATA [
/ **
* Si es necesario para mostrar las descripciones de los pequeños en el menú, basta con utilizar la etiqueta en la parte superior:
* = Tooltip "(), data.ButDesc"
** /
mx.controls.TileList importación;
/ / Establecer el color cuando el ratón pasa sobre
Private function cambio (): void (
this.setStyle ( "backgroundColor", "# F6870F");
)
/ / Establecer el color cuando el ratón es tomado desde arriba, vuelve a la normal (color de fondo)
changeOut private function (): void (
this.setStyle ( "backgroundColor", "# ED5B1B");
)
]]>
</ Mx: Script>
</ Mx: Lienzo>
<Mx: Lienzo " http://www.adobe.com/2006/mxml " xmlns: mx = "http://www.adobe.com/2006/mxml" " 89 " width = "89" " 79 " height = "79" " #ED5B1B " backgroundColor = "# ED5B1B" " changeOver() " mouseover = "Cambio ()" " changeOut() " mouseOut = "changeOut ()" " true " useHandCursor = "true" " true " > buttonMode = "true">
<Mx: Imagen " 0 " horizontalCenter = "0" " -15 " verticalCenter = "-15" " 85 " maxwidth = "85" " 60 " maxHeight = "60" " {data.ButImg} " source = "() data.ButImg" " true " useHandCursor = "true" " true " /> buttonMode = "true" />
<Mx: Etiqueta " 0 " x = "0" " 61 " y = "61" " 89 " width = "89" " bold " fontWeight = "negrita" " #FFFFFF " color = "# FFFFFF" " center " textAlign = "centro" " {data.ButLabel} " text = "() data.ButLabel" " true " useHandCursor = "true" " true " /> buttonMode = "true" />
<Mx: Script>
<! [CDATA [
/ **
* Si es necesario para mostrar las descripciones de los pequeños en el menú, basta con utilizar la etiqueta en la parte superior:
* = Tooltip "(), data.ButDesc"
** /
mx.controls.TileList importación;
/ / Establecer el color cuando el ratón pasa sobre
Private function cambio (): void (
this.setStyle ( "backgroundColor", "# F6870F");
)
/ / Establecer el color cuando el ratón es tomado desde arriba, vuelve a la normal (color de fondo)
changeOut private function (): void (
this.setStyle ( "backgroundColor", "# ED5B1B");
)
]]>
</ Mx: Script>
</ Mx: Lienzo>
Bien simple ah?
Tomemos el ejemplo online aquí
Espero que sea útil
Abrazar.
la versión en formato pdf disponible temporalmente.
19 Comentarios
Mario, belleza! Gracias. En este caso puse hecho de que vaya a dejar en blanco el menú cuando usted pasa más?
menuRender lo suficiente al final él mismo, algo así como
private function init (): void (
this.addEventListener (MouseEvent.MOUSE_OVER, animaOver);
this.addEventListener (MouseEvent.MOUSE_OUT, animaOut);
)
animaOver private function (ev: MouseEvent): void (
/ / AnimOver siempre terminan con el objetivo de "esta"
)
animaOut private function (ev: MouseEvent): void (
/ / AnimOut siempre terminan con el objetivo de "esta"
)
llama a esta función "init" en creationComplete = "init ()"
ps Puede utilizar las funciones que ya existen en el sentido de: "cambio ()", "changeOut", responde, ni me acordé de que las funciones desempeñadas, que no requieren el código en la parte superior .. pero es en el comentario para ayudar a alguien en situaciones similares.
Esto debería funcionar: p
Abrazar!
Mario puede tener q anda adivinando mis pensamientos eimmmm
c. enfriar este menú ... ja que abrir otro lado q usted me mostró el cargo de los componentes ... .. ... RS RS ¿Qué he intentado y ha funcionado y no he podido gracias .. gracias por la fuerza. Para aterefado con otras cosas, el proyecto, pero una vez que llenar la bolsa más
Oupa thiano.
Me alegro de que te gustaba, y como puedes ver es muy simple, fácil de entender y configurar ah?
Abrazar.
Mario, sería más fácil (y rápido) para hacer este menú usando CSS? Con él sería mucho más fácil y menos complicado, y siga las normas de la web.
Felicitaciones por el trabajo, John.
Erle bueno!
Incluso el flash en sí no siga prácticamente cualquier web estándar y, por supuesto, usted podría utilizar CSS para personalizar el menú de algunos puntos, pero nunca podría hacer el menú en css css desde la que se utiliza en flex todavía no permite muchas cosas. No debe confundirse con el css html css del flash / flex? es que el uso de css flex en el menú que es más dentro de los estándares web ..
Pero, ¿quién utiliza el menú siempre se puede aplicar algunos estilos o mejor aún, utilizar una clase o xml con la constante para definir los colores del menú, el texto y los iconos ...
Pero nada grave ...
Brian, gracias.
Hola Juan! Felicitaciones por un buen trabajo.
Soy un fan de flex, pero totalmente novato, preguntando por dónde empezar? Suscribirse flex en directo es muy complicado. ¿De qué material es nescessário aprender antes de que el flex.
Un abrazo
Nardelis buena, no se preocupe que tendrá tiempo para aprender
Bueno, aquí hay algunos tutoriales en el blog, tales como Adobe Flex a partir de cero, que es incluso para los principiantes, comienza en la instalación y enseñará paso a paso ... a 5 cm de acciones, todos compilados en un solo e-book. Aquí está la lista:
http://msdevstudio.com/blog/2008/06/30/adobe-flex-a-partir-do-zero-livro-actualizado/
Entonces para ayudar a los también está disponible en un blog a partir de la acción Script 3, que sirve para flex, que pueden ver el e-libro en:
http://msdevstudio.com/blog/2008/06/30/tutorial-action-script-3-parte-io-livro/
el resto se puede ejecutar un blog que tiene aquí una gran cantidad de información, aún tienen algunas referencias en portugués como el blog de Vedovello con sus screencasts, tales como listas o flexDev la flexbrasil, o hasta que el foro flexbrasil ... sólo darle una búsqueda en google aún más referencias.
http://vedovelli.com.br
http://br.groups.yahoo.com/group/flex-brasil (flexbrasil)
http://forum.flexbrasil.com.br/ (foro flexbrasil)
http://groups.google.com/group/riapt (riapt.org)
http://groups.google.com/group/flexdev (flexdev)
Bueno, debería llegar a la estancia en los estudios un par de semanas ... sq duda de saber.
Abrazar.
Mario, muy bonito! Falta de estatuto sobre el uso de la creatividad con los componentes nativos de Flex!
Estoy aplicando en mi bastante nuevos sistemas. Ahora veo como los antecedentes adquiridos en el momento en que me "hizo la página" me ha ayudado, sobre todo en el momento en que es necesario ser creativo!
Yo soy tu fan, hombre!
Ved de abrasivos
Hola Mario! Gracias por los consejos, ya bajaron sus tutoriales, muy bien preparado, voy a comenzar a estudiar. Aprovechando la oportunidad, usted puede hacer una página entera sólo usando las características gráficas de la Flex?
Un abrazo!
Hola, Mario. Felicidades! También soy un fan de su blog. Comencé con un par de Flex 2 semanas y mucho de lo que se conoció aquí. Sólo tengo una pregunta: si quiero tener cualquier pregunta que usted o alguien que frecuente el blog, donde tengo que hacer? Abrazar.
Ved. A veces veo a la gente Librería asunto más libras y que sólo ocupan espacio en el que puede hacer las mismas cosas casi sin trabajo, en este ejemplo le da ver la cantidad de código que ... existen recambios Librería de que esto funcionará, pero añadiría mucho más " basura "a nuestra solicitud, dejó claro que el ejemplo anterior pueden ser más limpios, extender el azulejo, pero es sólo para mostrar que a veces lo que parece deficil es bastante fácil
Como aprendió a hacer la página, también es muy útil porque después de todo el flex en última instancia, lograr la sustitución de cualquier frontend ..
En cuanto al ventilador! Gracias, pero es gracias a su blog que me dio inspiración para mi viaje!
Por lo tanto, yo también soy tu fan: =)
Abrazar.
Nardelis.
Como se mencionó anteriormente Ved (autor del blog vedovelli.com.br) y cómo llegó a referirse más a continuación, el flex puede sustituir a una interfaz, sin duda, pero si usted necesita algo más complejo de datos que realmente tienen que entender un poco de AS3, ya que todos los elementos visuales en el momento de la compilación de la aplicación vio puro AS3
Abrazar.
Jorge.
Gracias. Si desea hacer preguntas sobre una entrada de blog puede poner en respuesta, pero la idea será utilizar un pequeño foro para que este construye. Véase: http://forum.msdevstudio.com
Abrazar.
Gracias John, con el poco tiempo que asisten a tu blog aprendido mucho, porque la mayoría de los materiales que se encuentran en la Internet está en Inglés. Tiene varios foros con personas que ya están en nivel más avanzado. No quiero avergonzar a los comentarios respecto de la cuestión iniciado, que ha definido el espacio para la duda? He instalado el Flex 3, con la ayuda de tu tutorial, y dio todo bien. Tengo el flex en un blog que sólo hablan de un eclipse tales, no podía definir los tipos de flex, SDK, etc .. Tampoco el Eclipse. Después de todo la necesidad del flex Eclipse? ¿Qué es Eclipse?
Ahora apreciamos sus consideraciones.
Un abrazo
Nardelis, tuve un poco de tiempo y poner un puesto para explicar sus dudas, ver si ha ayudado a:
http://msdevstudio.com/blog/2008/09/12/flex-sdk-builder-air-eclipse-as3-por-onde-comecar/
dudas acerca de otros puede utilizar el recién creado foro para poner en duda ni siquiera en el blog:
http://forum.msdevstudio.com
Abrazar.
Hola Juan, estoy aprendiendo poco a poco sobre la arquitectura de Flex, pero quisiera saber cómo integrar el flash y flex, porque tengo una pantalla con una introducción animada en el último cuadro de la pantalla y termina con el menú, ¿cómo puedo usar las variables dentro de swf de la flex de manera que cuando haga clic en una llamada que hizo en las páginas externas flex?
weslei, no entiendo muy bien sus dudas, que desea hacer clic en un elemento de un menú (en flex?) abrir una nueva página en el navegador con otro elemento que también en flex?
Se quiere hacer como html normal? al hacer clic sobre un enlace abre una página?
cumps.
Mario fantástico, estoy ya un ventilador de flex un buen momento y yo siempre tratando de aprender de material en la red, pero con la ved y hacerlo con el mejor material y más fácil para los principiantes ... ..
continuar con el buen trabajo ... ....
Oupa Dalian, gracias por las palabras!