Introducción rápida Flash ComboBox y componentes DataGrid

En este Consejo rápido sobre los componentes de Flash Professional, analizaremos ComboBox y DataGrid..

Breve descripción

En el SWF de demostración, verá un ComboBox y un DataGrid. La elección de un estado en el ComboBox hará que una etiqueta muestre la población de ese estado y cargue la bandera del estado. Eligiendo una fila en el DataGrid navegará al sitio elegido.

Paso 1: Configuración del documento

Abra un nuevo documento de Flash y establezca las siguientes propiedades.

Tamaño del documento: 550x400px
Color de fondo: #FFFFFF (blanco)

Paso 2: Añadir componentes al escenario

Abra la ventana de componentes yendo a Ventana> Componentes o presionando CTRL + F7.

Arrastre un ComboBox, un DataGrid y dos etiquetas al escenario.

En el panel Propiedades, asigne a ComboBox el nombre de instancia "statesCombo".

Si el panel de Propiedades no se muestra, vaya a Ventana> Componentes o presione CTRL + F3

Establezca la X de ComboBox a 20.00 y su Y a 39.00

En el panel Propiedades, asigne a DataGrid el nombre de instancia "sitesDG".

Establezca las DataGrids X en 20.00 y su Y en 236.00.

En el panel Propiedades, asigne a la primera etiqueta el nombre de instancia "statesLabel".

Ajuste la X de la etiqueta a 200.00 y su Y a 39.00.

En el panel Propiedades, asigne a la segunda etiqueta el nombre de instancia "sitesLabel".

Ajuste la X de esta etiqueta a 20.00 y su Y a 209.00.

Paso 3: Importando las Clases

Cree un nuevo archivo ActionScript y asígnele el nombre Main.as

Estaremos declarando nuestros componentes en Main.as, por lo que debemos desactivar las instancias de la etapa de declaración automática; El beneficio de hacer esto es que obtendrá sugerencias de código para la instancia.

Ir Archivo> Configuración de publicación

Haga clic en "Configuración" junto a "Script [Actionscript 3.0]".

Desmarque "Declarar automáticamente instancias de la etapa".

En Main.as abrir la declaración del paquete e importar las clases que usaremos

Agregue lo siguiente a Main.as.

 paquete import flash.display.MovieClip; // necesario para mostrar imágenes import flash.display.Loader; // nuestros componentes en el escenario importan fl.data.DataProvider; importar fl.controls.ComboBox; importar fl.controls.Label; importar fl.controls.DataGrid; import flash.events.Event; // necesario para el tamaño automático de los campos de texto import flash.text.TextFieldAutoSize; importar flash.net.URLRequest; importar flash.net.navigateToURL;

Paso 4: Configurar la clase principal

Agregue la declaración de clase, extienda MovieClip y configure nuestra función de constructor. Más información sobre clases de documentos está disponible aquí.

Agregue lo siguiente a Main.as.

 clase pública principal extiende MovieClip public var statesCombo: ComboBox; public var statesLabel: Label; public var sitesDG: DataGrid; public var sitesLabel: Label; var comboDP: DataProvider; var DataGridDP: DataProvider; var flagLoader: Loader; función pública Main () setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid ();

Paso 5: Funciones en el constructor principal

Aquí definimos las funciones setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels y setupSitesDataGrid.

Los proveedores de datos proporcionan una manera fácil de configurar los datos que se proporcionarán a los componentes.

En el setupStatesCombo también agregamos un cargador al escenario para cargar imágenes de las banderas; podríamos haber definido una función separada para configurar el cargador, pero aquí solo lo hacemos dentro de esta función.

Agregue lo siguiente a Main.as.

 función privada setupComboDP (): void comboDP = new DataProvider (); comboDP.addItem (Etiqueta: "Alabama", población: "4661900"); comboDP.addItem (Etiqueta: "Alaska", población: "686293"); comboDP.addItem (Etiqueta: "Arizona", población: "6500180"); comboDP.addItem (Etiqueta: "Arkansas", población: "2855390"); comboDP.addItem (Etiqueta: "California", población: "36756666"); comboDP.addItem (Etiqueta: "Colorado", población: "4939456"); comboDP.addItem (Label: "Conneticut", population: "3501252"); comboDP.addItem (Etiqueta: "Delaware", población: "873092"); comboDP.addItem (Etiqueta: "Florida", población: "18328340"); comboDP.addItem (Etiqueta: "Georgia", población: "9685744"); comboDP.addItem (Etiqueta: "Hawaii", población: "1288198"); comboDP.addItem (Etiqueta: "Idaho", población: "1523816"); comboDP.addItem (Etiqueta: "Illinois", población: "12901563"); comboDP.addItem (Etiqueta: "Indiana", población: "6376792"); comboDP.addItem (Etiqueta: "Iowa", población: "3002555");  función privada setupDataGridDP (): void DataGridDP = new DataProvider (); // agrega elementos a las columnas correspondientes en DataGrid DataGridDP.addItem (site: "Activetuts", descripción: "Flash Tutorials", dirección: "http://active.tutsplus.com"); DataGridDP.addItem (site: "Nettuts", descripción: "Varios tutoriales de diseño web", dirección: "http://net.tutsplus.com"); DataGridDP.addItem (site: "Mobiletuts", descripción: "Mobile Device Tutorials", dirección: "http://mobile.tutsplus.com"); DataGridDP.addItem (site: "Psdtuts", descripción: "PhotoShop Tutorials", dirección: "http://psd.tutsplus.com"); DataGridDP.addItem (site: "Vectortuts", descripción: "Vector Program Tutorials", dirección: "http://vector.tutsplus.com"); DataGridDP.addItem (site: "Aetuts", descripción: "After Effects Tutorials", dirección: "http://ae.tutsplus.com"); DataGridDP.addItem (site: "Phototuts", descripción: "Tutoriales de fotografía", dirección: "http://photo.tutsplus.com");  función privada setupStatesCombo (): void statesCombo.width = 150; statesCombo.prompt = "Elija un estado"; statesCombo.dataProvider = comboDP; flagLoader = new Loader (); flagLoader.x = 200.00; flagLoader.y = 60.00; addChild (flagLoader); statesCombo.addEventListener (Event.CHANGE, loadData);  función pública setupLabels (): void statesLabel.text = ""; statesLabel.autoSize = statesLabel.autoSize = TextFieldAutoSize.LEFT; sitesLabel.text = "Haga clic en la fila para visitar el sitio"; sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;  public function setupSitesDataGrid (): void // Las columnas se colocan en una matriz aquí tenemos 3 columnas sitesDG.columns = ["site", "description", "address"]; sitesDG.dataProvider = DataGridDP; sitesDG.width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);

Paso 6: oyentes del evento

Aquí codificamos nuestros oyentes de eventos.

Obtenemos la etiqueta del artículo seleccionado y mostramos la población para el estado correspondiente.

Cargamos la imagen correspondiente convirtiendo el item seleccionado (estado) a minúsculas y anexando ".jpg".

Agregue lo siguiente a Main.as.

 función pública loadData (e: Evento): void // Obtenga la etiqueta de artículos seleccionados, p. ej. "Alabama" // Cargue un archivo .jpg relevante, p. Ej. "alabama.jpg" convertimos el ítem seleccionado (estado) a estados minúsculosLabel.text = e.target.selectedItem.Label + "la población es" + e.target.selectedItem.population; flagLoader.load (new URLRequest ("flagsLarge /" + e.target.selectedItem.Label.toLowerCase () + ". jpg"));  función pública gotoSite (e: Evento): void navigationToURL (nueva URLRequest (e.target.selectedItem.address));  // Cerrar la clase // Cerrar el paquete

Conclusión

El uso de los componentes ComboBox y DataGrid es una buena manera de mostrar una lista de datos para elegir.

Notará en el panel de parámetros de componentes de los componentes que puede verificar y seleccionar ciertas propiedades.

La imagen de arriba es para el componente ComboBox.

Las propiedades son las siguientes para el componente ComboBox.

proveedor de datos: el modelo de datos de la lista de elementos a visualizar
editable: un valor booleano que indica si el componente ComboBox es editable o de solo lectura
habilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuario
rápido: el indicador del componente ComboBox.
restringir: los caracteres que un usuario puede ingresar en el campo de texto.
número de filas: el número máximo de filas que pueden aparecer en una lista desplegable que no tiene una barra de desplazamiento.
visible: un valor booleano que indica si la instancia del componente es visible

Las propiedades para el DataGrid son las siguientes.

allowMultipleSelection: un valor booleano que indica si se puede seleccionar más de un elemento de la lista a la vez
editable: un valor booleano que indica si el componente DataGrid es editable o de solo lectura
headerHeight: la altura del encabezado de DataGrid, en píxeles.
horizontalLineScrollSize: "un valor que describe la cantidad de contenido que se debe desplazar horizontalmente cuando se hace clic en una flecha de desplazamiento.
horizontalPageScrollSize: establece el recuento de píxeles por los que se mueve el pulgar de desplazamiento en la barra de desplazamiento horizontal cuando se presiona la barra de desplazamiento.
horizontalScrollPolicy: un valor booleano que indica si la barra de desplazamiento horizontal está siempre activada.
columnas ajustables: Indica si el usuario puede cambiar el tamaño de las columnas.
altura de la fila: la altura de cada fila en el componente DataGrid, en píxeles.
showHeaders: un valor booleano que indica si el componente DataGrid muestra los encabezados de columna.
sortableColums: Indica si el usuario puede ordenar los elementos en el proveedor de datos haciendo clic en una celda de encabezado de columna.
verticalLineScrollSize: un valor que describe cuántos píxeles se desplazan verticalmente cuando se hace clic en una flecha de desplazamiento.
verticalPageScrollSize: el número de píxeles por los que se mueve el control de desplazamiento en la barra de desplazamiento vertical cuando se presiona la pista de la barra de desplazamiento.
verticalScrollPolicy: un valor que indica el estado de la barra de desplazamiento vertical

Los archivos de ayuda son un gran lugar para aprender más sobre estas propiedades.

Para obtener más información sobre las propiedades de las etiquetas, asegúrese de consultar la Sugerencia rápida en los componentes Botón y Etiqueta.

Para aprender cómo cargar el DataGrid desde un archivo xml, consulte mi tutorial en Datgrid con XML.

Gracias de nuevo a http://www.state-flags-usa.com por permitirme usar sus imágenes de bandera. Y gracias a usted por leer - busque más presentaciones de componentes!.

Código