Flex - Control TileList

Introducción

El control TileList muestra una serie de elementos dispuestos en mosaicos.

Declaración de clase

A continuación se muestra la declaración de mx.controls.TileList clase -

public class TileList 
   extends TileBase

Métodos públicos

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

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

mx.controls.listClasess.TileBase
mx.controls.listClasess.ListBase
mx.core.ScrollControlBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Ejemplo de control Flex TileList

Sigamos los siguientes pasos para verificar el uso del control TileList 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	Agregue imágenes de una carpeta a la carpeta src . Y agregue imágenes de muestra.
3	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
4	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra la forma de incrustar una imagen en una aplicación flexible.

<fx:Script>
   <![CDATA[
      //images folder should be in src folder 
      //and maven-mini-logo.png should reside inside images folder.
      [Bindable]
      [Embed(source="images/maven-mini-logo.png")]
      public var image1:Class;
   ]]>
</fx:Script>

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" />	
   <fx:Script>
      <![CDATA[
         [Bindable]
         [Embed(source = "images/maven-mini-logo.png")]
         public var image1:Class;

         [Bindable]
         [Embed(source = "images/flex-mini.png")]
         public var image2:Class;

         [Bindable]
         [Embed(source = "images/gwt-mini.png")]
         public var image3:Class;

         [Bindable]
         [Embed(source = "images/junit-mini-logo.png")]
         public var image4:Class;

         [Bindable]
         [Embed(source = "images/cpp-mini-lib-logo.png")]
         public var image5:Class;
      ]]>
   </fx:Script>
   
   <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 = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "tileListPanel" title = "Using TileList" 
            width = "500" height = "300">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />
            </s:layout>					
            
            <s:Label width = "100%" textAlign = "center" color = "0x323232"
               text = "A TileList control displays items in rows and columns." />
            <mx:TileList id = "tileList" height = "200" width = "350"  
               maxColumns = "2" rowHeight = "100" columnWidth = "150">
               
               <mx:dataProvider>
                  <fx:Array>
                     <fx:Object label = "Maven" icon = "{image1}" />
                     <fx:Object label = "Flex" icon = "{image2}" />
                     <fx:Object label = "GWT" icon = "{image3}" />
                     <fx:Object label = "JUnit" icon = "{image4}" />
                     <fx:Object label = "C++" icon = "{image5}" />
                  </fx:Array>
               </mx:dataProvider>
            </mx:TileList>					
         </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: [ Pruébelo en línea ]

↰ Previous page