Flex Gumbo中如何利用<Style/>自定义Button和TextInput的例子

By Minidxer | August 4, 2009

接下来的例子演示了Flex Gumbo中如何利用<Style/>自定义Button和TextInput。编译本例需要5873 (4.0.0.5873) 或者更新的才可以。

让我们先来看一下Demo可以点击这里察看源代码):


下面是完整代码(或点击这里察看):
下面是main.mxml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="FxGumbo_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.     <s:layout>
  7.         <s:BasicLayout />
  8.     </s:layout>
  9.  
  10.     <fx:Style>
  11.         @namespace s "library://ns.adobe.com/flex/spark";
  12.         @namespace mx "library://ns.adobe.com/flex/halo";
  13.  
  14.         global {
  15.             color: red;
  16.             fontStyle: italic;
  17.             fontWeight: bold;
  18.         }
  19.  
  20.         s|Button {
  21.             baseColor: haloOrange;
  22.         }
  23.  
  24.         mx|Button {
  25.             baseColor: haloGreen;
  26.         }
  27.     </fx:Style>
  28.  
  29.     <s:VGroup horizontalCenter="0" verticalCenter="0">
  30.         <s:Button label="I'm a Spark Button" />
  31.         <mx:Button label="I'm a Halo Button" />
  32.         <mx:HRule width="100%" />
  33.         <s:TextInput text="I'm a Spark TextInput" />
  34.         <mx:TextInput text="I'm a Halo TextInput" />
  35.     </s:VGroup>
  36.  
  37.     <s:RichEditableText id="sdkVer"
  38.             editable="false"
  39.             initialize="sdkVer.text = mx_internal::VERSION;"
  40.             bottom="10"
  41.             right="10" />
  42.  
  43. </s:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Button, Gumbo, TextInput | No Comments » | Tags: ,

Search Posts