阿倫撞破螢幕學FLASH

1.先自定一個EVENT CLASS
package com.C_event{                   //放在SRC/com/C_event的資料夾下
 import flash.events.Event;

 public class WindowsEvent extends Event//繼承EVENT
 {
  public static const WINDOW_RESTORE_START:String="onWindowRestoreStart";//弄個常數
  public function WindowsEvent(type:String)
  {
   super(type);//把東西丟回EVENT
  }
 }
}

2.新增一個MXML(取名為CWindow)也放在SRC/com/C_event的資料夾下(注意![Event(name="onWindowRestoreStart",type="com.C_event.WindowsEvent")]裡的onWindowRestoreStart這個字串要和WindowsEvent 裡的WINDOW_RESTORE_START常數值一樣)

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
 width="400" height="400" minWidth="200" minHeight="200">
 <mx:Metadata>
  [Event(name="onWindowRestoreStart",type="com.C_event.WindowsEvent")]
 </mx:Metadata>
 <mx:Script>
  <![CDATA[
  private function dpWevent(e:MouseEvent):void{//若點擊視窗中的按鈕就視為觸發WINDOW_RESTORE_START這個EVENT
   var W_event:WindowsEvent=new WindowsEvent(WindowsEvent.WINDOW_RESTORE_START);
   this.dispatchEvent(W_event);
  }
   
  ]]>
 </mx:Script>
 <mx:Button x="121" y="103" label="Button" width="155" click="dpWevent(event)"/>
 
</mx:Canvas>

3.在產生一個MXML(主程式)放在 src的資叫夾中去引用CWindow這個TAG

<?xml version="1.0"?>
<!-- charts/CSSFillsArrayExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:Comp="com.C_event.*">
  <mx:Script>
   <![CDATA[
   import com.C_event.WindowsEvent;
    private function onEvent(e:WindowsEvent):void{
     trace(e.currentTarget)
    }
   ]]>
  </mx:Script>
  <Comp:CWindow onWindowRestoreStart="onEvent(event)">
   
  </Comp:CWindow>
</mx:Application>

1.下載套件範例
http://www.quietlyscheming.com/blog/2006/10/02/flex-charting-sample-animated-drilldown/

2.把qs的資料夾CO出來貼到你的專案的SRC資料夾中

3.插進這2行TAG

<effects:DrillDownEffect id="effD" duration="1500"  effectEnd="chart.mouseChildren = true;" />
 <effects:DrillUpEffect id="effU" duration="1500" effectEnd="chart.mouseChildren = true;" />

4.貼上4個FUNCTION
public function genDataFrom(node:XML):XMLList//依次產生一層
   {
    var count:Number = Math.round(Math.random()*2 +2);//產生的筆數
    var aCharCode:Number = ("A").charCodeAt(0);//每個子層級都從A開始命名
    var children:XMLList = rootNode.children();
    trace("children.length()"+children.length())
    if(children.length() == 0)
    {
     var rootLabel:String = node.@label;
     for(var i:int = 0;i < count;i++)
     {
      rootNode.appendChild( <node label={rootLabel + "." +  String.fromCharCode(aCharCode+i)}
       name={rootLabel + "." + String.fromCharCode(aCharCode+i)} Country={Math.random()*100} normal={Math.random()*100} errorD={Math.random()*100} value={Math.random()*100} /> );
     }
    }
    return node.children();
   }
   public function drillDown(e:ChartItemEvent):void//跳到下一層
   {
    chart.mouseChildren = false;
    effD.drillFromIndex = e.hitData.chartItem.index;
   
    series.setStyle("showDataEffect",effD);  
    series2.setStyle("showDataEffect",effD);
    rootNode = XML(e.hitData.chartItem.item);//CHRT ITEM的資料
   
    chart.dataProvider = genDataFrom(rootNode);    
    //crumbs.leaf = rootNode;
   }
   public function drillUp():void//跳到上一層
   {
    if (rootNode.parent() == null)
     return;
     
    drillUpTo(rootNode.parent());
   }
   public function drillUpTo(node:XML):void//往上跳到某一層
   {
    if(rootNode == node)
     return;
     
    while(rootNode.parent() != node)
     rootNode = rootNode.parent();
     
    chart.mouseChildren = false;
    series.setStyle("showDataEffect",effU);
    series2.setStyle("showDataEffect",effD);
    effU.drillToIndex = rootNode.childIndex();  
    rootNode = rootNode.parent();
    chart.dataProvider = genDataFrom(rootNode);    
    //crumbs.leaf = rootNode;
   }

5.貼上import mx.charts.chartClasses.Series;
   import mx.charts.chartClasses.ChartBase;
   import mx.charts.events.ChartItemEvent;
   import mx.charts.ChartItem;
   private var min:Number = 0;
   private var max:Number = 100;
   private var chart:ChartBase;
   private var series:Series;
   private var series2:Series;
   private var rootNode:XML = <root value='' name="root" />;

6.把series chart改成你要的rootNode設計成你要的就可以用了!

在FLEX TRACE中文時，印再CONCOLE的中文字變成問號...

要正常顯示中文設定的畫面如下

1.XMLListCollection提供元件 dataprovider的dynamically updates，但是XMLList和XML不行。
2.var loader:Loader = event.currentTarget.loader;
event.target  得到是info
event.currentTarget.loader;//拿到真正的東西

3.XML當MENU元件(tree也可以)的資料提供結構，轉成XMLListCollection的好處是你再RNTIME時期改XML裡的元素，參考你當資料的元件架構也會同步修正
var httpService:HTTPService=new HTTPService();
    httpService.url="data/menu.xml";
    httpService.resultFormat="e4x";
    httpService.addEventListener(ResultEvent.RESULT, onResultHttpService);
    httpService.send();
private function onResultHttpService(e:ResultEvent):void
   {
var viewXMLList:XMLList=XMLList(e.result);
    menuXMLLC=new XMLListCollection(viewXMLList);
    menu.labelField="@label"
    menu.dataProvider=menuXMLLC;
    menu.showRoot=false
}

4.<mx:showDataEffect>要有效果的前提是dataProvider的DATA(expensesAC)要有變化，所以一開始expensesAC先設為空的在ADD INIT時再填值就可以看到效果了

<mx:BubbleChart id="barChart"
       height="100%"
       width="50%"
       paddingRight="5"
       paddingLeft="5"
       showDataTips="true"
       maxRadius="20"
       dataProvider="{expensesAC}"
       >
    <mx:series>

     <mx:BubbleSeries displayName="Month"
          xField="Profit"
          yField="bet"
          radiusField="result"
          fill="{sc1}"
          stroke="{stroke1}">
          <mx:showDataEffect>
          <mx:SeriesInterpolate duration="1000"/>
         </mx:showDataEffect>
     </mx:BubbleSeries>
    </mx:series>
   </mx:BubbleChart>

5.像AS2 FOR IN可以把OBJECT 裡所有的屬性TRACE出來
import mx.utils.ObjectUtil;
trace(ObjectUtil.toString(e))
//這樣就全印出來了

在flex中找了一個範例來練習一下～
程式碼裡頭標顏色的字是和資料連結有關的部份，其他都是屬性的設定

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">
<mx:HTTPService id="feedRequest" url="http://weblogs.macromedia.com/mchotin/index.xml" useProxy="false" />
<mx:Panel x="25" y="10" width="679" height="482" layout="absolute" id="BR" label="{feedRequest.lastResult.rss.channel.title}">
<mx:TextArea x="33" y="216" width="550" height="184" htmlText="{dgPosts.selectedItem.description}"/>   //dgPosts.selectedItem=feedRequest.lastResult.rss.channel.item
<mx:DataGrid x="33" id="dgPosts" width="550" dataProvider="{feedRequest.lastResult.rss.channel.item}" y="41">              //item重複DataGrid 會知道裡面的資料記錄自己會重複...很無言的功能
  <mx:columns>
   <mx:DataGridColumn headerText="Posts" dataField="title"/>   //item裡頭的標籤有一個叫title的標籤拿來當資料
   <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>   //item裡頭的標籤有一個叫pubDate</mx:columns>
</mx:DataGrid>
<mx:LinkButton x="33" y="411" width="200" label="link to {dgPosts.selectedItem.title}" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" />
</mx:Panel>
</mx:Application>

這裡有個疑問，就是用{}包起來和不包起來有什麼差????好像可以做變數與字串的連結....像這樣"link to {dgPosts.selectedItem.title}"

用起來真的粉方便ㄟ！！

昨天晚上參加了MMUG的線上研討會，MMUG大大們的熱忱讓整個研討會知性且完整～
昨天講的是FLEX2.0的介紹，查爾斯在示範Flex Builder 2基本操作時一直強調要記得安裝Flash debug player ，今天在官方找了一個文章教你安裝順便看看你的PLAYER是什麼版本的～
連結如下：
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_19245
因為惰性加上不好的閱讀習慣，這種文章我都會只看第一行，老外寫文章不是都會用開門見山法嗎？可是咧～這篇文章卻把如何安裝這件事擺在最後一段...(我瞎了...人家有寫一個副標"WorkAround")

more..

第一場:Adobe Flex 2 for Web 2.0 RIA Development (2006-10-16 20:00 pm)
http://mmug.com.tw/forum/mmug_meet.php?m_id=32

第二場:Flex Builder 2 Introduction and Demos (2006-10-18 20:00 pm)
http://mmug.com.tw/forum/mmug_meet.php?m_id=33

第三場:Flex Data Services and beyond AJAX (2006-10-25 20:00 pm)
http://mmug.com.tw/forum/mmug_meet.php?m_id=34

第四場:Real World Flex Project Experience Sharing (2006-10-31 20:00 pm)
http://mmug.com.tw/forum/mmug_meet.php?m_id=35

趕快報名才是～