Compare the style of controls : Style « Style « Flex






Compare the style of controls

Compare the style of controls
             
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    
      import mx.core.DragSource;
      import mx.containers.Canvas;
      import mx.events.DragEvent;
      import mx.managers.DragManager;

      private function beginDragAndDrop(event:MouseEvent):void {
        var canvas:Canvas = Canvas(event.currentTarget);
        var dragSource:DragSource = new DragSource(  );
        var color:uint = canvas.getStyle("backgroundColor");
        dragSource.addData(color, "backgroundColor");
        var proxy:Canvas = new Canvas(  );
        proxy.width = 50;
        proxy.height = 50;
        proxy.setStyle("backgroundColor", color);
        DragManager.doDrag(canvas, dragSource, event, proxy);
      }

      private function dragEnterHandler(event:DragEvent):void {
        var target:Canvas = Canvas(event.currentTarget);
        var initiator:Canvas = Canvas(event.dragInitiator);
        if(target.getStyle("backgroundColor") ==  initiator.getStyle("backgroundColor")) {
          DragManager.acceptDragDrop(target);
        }
      }

      private function dragDropHandler(event:DragEvent):void {
        var target:Canvas = Canvas(event.currentTarget);
        var initiator:Canvas = Canvas(event.dragInitiator);
        if(target.getStyle("backgroundColor") ==  initiator.getStyle("backgroundColor")) {
          vbox.removeChild(initiator);
        }
      }
  
  </mx:Script>
  <mx:HBox width="100%">
    <mx:VBox id="vbox" height="100%">
      <mx:Canvas width="50" height="50" backgroundColor="#00ff80" mouseDown="beginDragAndDrop(event)" />
    </mx:VBox>
    <mx:VRule height="213"/>
    <mx:HBox id="hbox" height="100%">
       <mx:Canvas width="50" height="50" backgroundColor="#00ff80" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />
       <mx:Canvas width="50" height="50" backgroundColor="#ff8040" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />
    </mx:HBox>
  </mx:HBox>


</mx:Application>

   
    
    
    
    
    
    
    
    
    
    
    
    
  








Related examples in the same category

1.Apply effects with ActionScript and not use stylesApply effects with ActionScript and not use styles
2.Alternate WipeRight and WipeLeft effects for the mouseDownEffect style of a Button controlAlternate WipeRight and WipeLeft effects for the mouseDownEffect style of a Button control
3.Using a local stylesheet to decouple the style implementationUsing a local stylesheet to decouple the style implementation
4.Using the plain style
5.Applying behaviors in MXML using stylesApplying behaviors in MXML using styles
6.Applying behaviors in ActionScript using stylesApplying behaviors in ActionScript using styles
7.Local style definitionsLocal style definitions
8.Inline stylesInline styles
9.Get style declaration for control
10.Flex Style with namespaceFlex Style with namespace
11.Flex supports both camel-case and hyphenated syntax in style sheetsFlex supports both camel-case and hyphenated syntax in style sheets
12.Set style declaration for multiple componentSet style declaration for multiple component
13.Basic Inheritance for styleBasic Inheritance for style
14.Extensible style propertiesExtensible style properties
15.Get style and convert style value to stringGet style and convert style value to string
16.Using inline stylesUsing inline styles
17.Call a method when the style sheet finishes loadingCall a method when the style sheet finishes loading
18.Applying skins by using the Style ManagerApplying skins by using the Style Manager
19.Apply style to globalApply style to global
20.Unload style declaration
21.Use style from style option
22.Set all styles in MXML as tag attributes.Set all styles in MXML as tag attributes.
23.Applying styles by binding tag definitionsApplying styles by binding tag definitions
24.setting the values of the gutterLeft, gutterRight, and gutterBottom style properties. It also sets the paddingTop property to 20.setting the values of the gutterLeft, gutterRight, and gutterBottom style properties. It also sets the paddingTop property to 20.
25.Apply axisTitleStyleName property without specifying itApply axisTitleStyleName property without specifying it
26.Override Base Style PropertiesOverride Base Style Properties
27.Component styles
28.Click to change styleClick to change style
29.Compiled stylesCompiled styles
30.Setting And Getting StylesSetting And Getting Styles
31.Customize Styles at RuntimeCustomize Styles at Runtime
32.Styles SubComponentsStyles SubComponents
33.Set various styles on the textSet various styles on the text
34.Styled Link ElementStyled Link Element
35.Use ActionScript to set StylesUse ActionScript to set Styles
36.To make development easier, however, Flex supports both the camel-case and hyphenated syntax in style sheetsTo make development easier, however, Flex supports both the camel-case and hyphenated syntax in style sheets
37.Data Tip StylesData Tip Styles
38.Inheritable StyleInheritable Style
39.Define MyStyle style and applies that style to the elements on the horizontal axisDefine MyStyle style and applies that style to the elements on the horizontal axis