FLEX 4(Gumbo)教程之FXG啊FXG，Group啊Group

FLEX 4(Gumbo)教程之FXG啊FXG，Group啊Group

大 | 中 | 小

[ 2008/09/05 00:01 | by uyang ]

         我们首先要对FLEX4(Gumbo)图形设计上的改变做个了解，就是新的FXG格式。
         设计，其实用PS啊，FIREWORK啊就好了，干嘛还要出个FXG，你看看在FLEX4里都把图形代码化了，搞的那么复杂干嘛？其实吧，这也是为了Adobe要发布的Thermo做准备，因为这东西能把你设计的图形界面直接转化成FXG格式，也就是图面代码化，到时候这两个联合搞起来，是很厉害的，所以说啊，ADOBE其实玩的很深沉。
        那也许你会不明白，那FXG格式到底是啥？其实也不算格式，应该说是标签，一个统称。你以为会在代码里看到无数的, , ,等等标签代码，然后把一张正常的图完全按照XML这样的方式显示出来，这个就是叫FXG。反正在我的脑子里，我就不管他什么FXG，我只知道，图形要用XML来表示。其他的兵来将挡，水来土掩。当然如果你对FXG念念不忘，放心，这里有详细的解释，也是一个参考。点击

  

---

        好了，首先要对命名空间来个集体的定义。因为FLEX4里的命名空间让我很头疼，比如：以前的变成，但是这个不符合我们对FLEX3的继承做法，所以，我打算再改回来。所以我自己的命名空间定义是：
  xmlns:mx="library:adobe/flex/halo"
  xmlns="http://ns.adobe.com/mxml/2009"
  xmlns:gumbo="library:adobe/flex/gumbo"(这个系统默认是 xmlns:ns="library:adobe/flex/gumbo")

       第一步：让我懂画个方块
       任何图形的基础都是画方啊，画圆啊开始。我们就说画方块吧，代码如下：
      

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="library:adobe/flex/halo"
  xmlns="http://ns.adobe.com/mxml/2009"
  xmlns:gumbo="library:adobe/flex/gumbo" layout="vertical">

    <gumbo:Rect width="100" height="100">
      <gumbo:fill>
          <SolidColor color="0xff0000" />
      </gumbo:fill>
      <gumbo:stroke>
          <SolidColorStroke color="0x00ff00" weight="2"/>
      </gumbo:stroke>
      </gumbo:Rect>

</mx:Application>

        你看里面的英文单词的意思就明白了，就是定义具体的属性。这就是FXG。

        如果你老实，你肯定会看到，这样的写法编译是错误的，为啥？因为

<gumbo:Rect>

标签内的只是来形容这个组件该怎么倒腾，但是他还不是组件，所以他需要外加个套，就是

<gumbo:Group>和</gumbo:Group>,

这样，Group就是把你对组件里图形各种描述搞成一个组，也许你听的不太明白，但是再往下看就知道了。先放个完全正确的代码段
        
        
        编译出来的就是绿线红块的方块。为了让你大致明白Group，我们再搞两个Group，来对比下。首先是方块和字一组。        

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="library:adobe/flex/halo"
  xmlns="http://ns.adobe.com/mxml/2009"
  xmlns:gumbo="library:adobe/flex/gumbo" layout="vertical">
  <gumbo:Group>
    <gumbo:Rect width="100" height="100">
      <gumbo:fill>
          <SolidColor color="0xff0000" />
      </gumbo:fill>
      <gumbo:stroke>
          <SolidColorStroke color="0x00ff00" weight="2"/>
      </gumbo:stroke>
      </gumbo:Rect>
      
      <gumbo:TextGraphic  fontWeight="blod" fontSize="12"  
        content="一个组的" verticalCenter="0" horizontalCenter="0" >    
          <gumbo:color>0xffffff</gumbo:color>
        </gumbo:TextGraphic>
        
  </gumbo:Group>
  
</mx:Application>

       方块与字在不同组
      

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="library:adobe/flex/halo"
  xmlns="http://ns.adobe.com/mxml/2009"
  xmlns:gumbo="library:adobe/flex/gumbo" layout="vertical">
  <gumbo:Group>
    <gumbo:Rect width="100" height="100">
      <gumbo:fill>
          <SolidColor color="0xff0000" />
      </gumbo:fill>
      <gumbo:stroke>
          <SolidColorStroke color="0x00ff00" weight="2"/>
      </gumbo:stroke>
      </gumbo:Rect>
  
  </gumbo:Group>
  
  <gumbo:Group>      
      <gumbo:TextGraphic  fontWeight="blod" fontSize="12"  
        content="不同组的" verticalCenter="0" horizontalCenter="0" >    
          <gumbo:color>0x000000</gumbo:color>
        </gumbo:TextGraphic>
        
     </gumbo:Group>
</mx:Application>

      这样，你大概就会明白了吧。我们再加个组件，来感觉下。
    

<mx:HSlider minimum="0" maximum="20" value="5" id="strokeDD" liveDragging="true"/>
    //然后把描述方块里的线条代码改为
    <gumbo:stroke>
          <SolidColorStroke color="0x00ff00" weight="{strokeDD.value}"/>
      </gumbo:stroke>

     测试下就明白了。最后出的东西如下图