Flex - Pannello

introduzione

La classe Panel è un contenitore che include una barra del titolo, una didascalia, un bordo e un'area di contenuto per i suoi figli.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per spark.components.Panel classe -

public class Panel
   extends SkinnableContainer

Proprietà pubbliche

Suor n	Proprietà e descrizione
1	controlBarContent : Array L'insieme di componenti da includere nell'area della barra di controllo del contenitore del pannello.
2	controlBarLayout : LayoutBase Definisce il layout dell'area della barra di controllo del contenitore.
3	controlBarVisible : Boolean Se è vero, la barra di controllo è visibile.
4	title : String Titolo o didascalia visualizzati nella barra del titolo.

Metodi pubblici

Suor n	Metodo e descrizione
1	Panel() Costruttore.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di pannello flessibile

Seguiamo i seguenti passaggi per verificare l'utilizzo del Pannello in un'applicazione Flex creando un'applicazione di prova:

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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 volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

↰ Previous page