Flex - Control de botones

Introducción

El componente Botón es un botón rectangular de uso común. Button normalmente utiliza detectores de eventos para realizar una acción cuando el usuario selecciona el control. Cuando un usuario hace clic en un control de botón, envía un evento de clic y un evento buttonDown.

Declaración de clase

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

public class Button 
   extends ButtonBase
      implements IButton

Propiedades publicas

No Señor	Descripción de propiedad
1	emphasized : Boolean Refleja el botón predeterminado solicitado por el administrador de enfoque.

Métodos públicos

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

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

spark.components.supportClasses.ButtonBase
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 control de botón flexible

Sigamos los siguientes pasos para verificar el uso del control de botones 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" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;

         protected function button_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "550" height = "400" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "buttonPanel" title = "Using Button" width = "400" 
            height = "200" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            
            <s:Button id = "clickMeButton" label = "Click Me" 
               click = "button_clickHandler(event)" />
            <s:Button id = "disabledButton" label = "Disabled Button" 
               enabled = "false" />
            <s:Button id = "emphasizedButton" label = "Emphasized Button" 
               emphasized = "true" click = "button_clickHandler(event)" />
         </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