Flex - Panel

Introducción

La clase Panel es un contenedor que incluye una barra de título, un título, un borde y un área de contenido para sus elementos secundarios.

Declaración de clase

A continuación se muestra la declaración de spark.components.Panel clase -

public class Panel
   extends SkinnableContainer

Propiedades publicas

No Señor	Descripción de propiedad
1	controlBarContent : Array El conjunto de componentes que se incluirán en el área de la barra de control del contenedor Panel.
2	controlBarLayout : LayoutBase Define el diseño del área de la barra de control del contenedor.
3	controlBarVisible : Boolean Si es verdadero, la barra de control es visible.
4	title : String Título o leyenda que se muestra en la barra de título.

Métodos públicos

No Señor	Método y descripción
1	Panel() Constructor.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

spark.components.SkinnableContainer
spark.components.supportClasses.SkinnableContainerBase
spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Ejemplo de panel flexible

Sigamos los siguientes pasos para verificar el uso del Panel en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">

   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Layout Panels Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel id = "panelPanel" title = "Using Panel" width = "500"
            height = "300">
            <s:layout>
               <s:HorizontalLayout  gap = "10"
                  verticalAlign = "middle" horizontalAlign = "center" />
            </s:layout>

            <s:Panel title = "Basic Layout Panel" top = "0"
               left = "5" height = "200" width = "150" >
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "0" />
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "55" />
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "110" />
            </s:Panel>

            <s:Panel title = "Horizontal Layout Panel" top = "0"
               left = "5" height = "200" width = "170" >
               <s:layout>
                  <s:HorizontalLayout/>
               </s:layout>
               
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "0" />
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "55" />
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "110" />
            </s:Panel>
            
            <s:Panel title = "Vertical Layout Panel" top = "0"
               left = "5" height = "200" width = "150" >
               <s:layout>
                  <s:VerticalLayout />
               </s:layout>
               
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "0" />
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "55" />
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" top = "110" />
            </s:Panel>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ ]

↰ Previous page