Ocean 學習筆記: 12/01/2011

2011年12月27日星期二

Flex PieChart 圓餅圖突出特效



<?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" minWidth="955" minHeight="600"

>

<fx:Script>

<![CDATA[

import mx.charts.events.ChartItemEvent;

import mx.charts.series.items.PieSeriesItem;

import mx.collections.ArrayCollection;

import mx.effects.easing.Elastic;

import mx.events.FlexEvent; 



protected function itemClick(event:ChartItemEvent):void

{

//取得被點擊的切片項目

var item:PieSeriesItem = event.hitData.chartItem as PieSeriesItem;   



//讓餅圖突出的效果

var arr:Array = [];        

arr[item.index] = 0.2;       

pieSeries.perWedgeExplodeRadius = arr;       

}



]]>

</fx:Script>

<fx:Declarations>

<s:XMLListCollection id="provider">

<s:source>

<fx:XMLList xmlns="">

<product label="Product 1" data="3" />   

<product label="Product 2" data="1" />   

<product label="Product 3" data="4" />   

<product label="Product 4" data="1" />   

<product label="Product 5" data="5" />   

<product label="Product 6" data="9" />   

</fx:XMLList>

</s:source>

</s:XMLListCollection>

</fx:Declarations> 

<mx:PieChart id="pieChart" dataProvider="{provider}" showDataTips="true" 

itemClick="itemClick(event);"  width="400" height="400"

>   

<mx:series>   

<mx:PieSeries id="pieSeries" field="@data" nameField="@label" labelPosition="none" reserveExplodeRadius="0.2">   

<mx:showDataEffect>   

<mx:SeriesInterpolate duration="1500" easingFunction="{Elastic.easeOut}" />   

</mx:showDataEffect>   

<mx:filters>   

<mx:DropShadowFilter />   

</mx:filters>   

</mx:PieSeries>   

</mx:series>   

</mx:PieChart>   

</s:Application>

要注意的是：
PieSeries的reserveExplodeRadius數值要與arr[item.index] = 0.2; 的數值相同，不相同時餅圖被click時會看見整體的PieChart縮小。

Flex DataGrid 複製至剪貼簿 CSV格式

<?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"

minWidth="955" minHeight="600"

creationComplete="start(event)"

 >

 <fx:Script>

<![CDATA[

 import flash.desktop.Clipboard;

 import flash.desktop.ClipboardFormats;



 import mx.collections.ArrayCollection;

 import mx.events.FlexEvent;

 import mx.utils.UIDUtil;



 protected function start(event:FlexEvent):void

{

  var provider:ArrayCollection = new ArrayCollection();

  for(var i:int=0 ; i < 10 ; i++)

  {

    provider.addItem( {id:UIDUtil.createUID() , index:i , value:i + "號"});

  }

  grid.dataProvider = provider;

}



 protected function copy(event:MouseEvent):void

{    

  var csv:String = "";

  var item:Object;

  csv = "ID" + "\t" + "Index" + "\t" + "Value" + "\n";

  for(var i:int ; i < grid.dataProvider.length ; i++)

  {

    item = grid.dataProvider.getItemAt(i);

    csv += item['id'] + '\t' + item['index'] + '\t' + item['value'] + '\n';

  }    



 //寫入剪貼簿

Clipboard.generalClipboard.clear();

Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT , csv , false);   

}



]]>

 </fx:Script>

 <s:VGroup>

 <s:DataGrid id="grid"    

  verticalScrollPolicy="off"

  variableRowHeight="false"    

  editable="false" 

  selectionMode="singleRow"  

  alternatingRowColors="{new Array(0xF0F0F0, 0xFFFFFF)}">

  <s:columns>   

   <s:ArrayList>      

    <s:GridColumn dataField="id"     headerText="ID"    resizable="false"    minWidth="300"/> 

    <s:GridColumn dataField="index"  headerText="Index" resizable="false"   minWidth="80"/>    

    <s:GridColumn dataField="value"  headerText="Value" resizable="false" minWidth="80"/>  

   </s:ArrayList>

  </s:columns>

</s:DataGrid>

 <s:Button label="複製到剪貼簿" click="copy(event)"/>

 </s:VGroup>

 </s:Application>

如此可以簡單的貼到execel中。

CSV格式參考文件

BitmapData merge



<?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" 

minWidth="955" minHeight="600"    

creationComplete="start(event)"

>

<fx:Script>

<![CDATA[

import mx.core.BitmapAsset;

import mx.events.FlexEvent;



[Embed(source="assets/iphone4.jpg")]    

private var  Iphone:Class;



[Embed(source="assets/cat.jpg")]   

private var Cat:Class;



[Embed(source="assets/background.jpg")]   

private var BackGround:Class;



protected function start(event:FlexEvent):void

{

var iphone:Bitmap = new Iphone() as Bitmap;    

var cat:Bitmap = new Cat() as Bitmap;   

var backGround:Bitmap = new BackGround() as Bitmap;    

var mixBitMapData:BitmapData = backGround.bitmapData;





var catX:Number = (backGround.width - cat.width)/2;

var catY:Number = (backGround.height - cat.height)/2;



//合併背景與貓

mixBitMapData.merge(cat.bitmapData , cat.bitmapData.rect ,new Point(catX,catY),0x100,0x100,0x100,0x100);





var iphoneX:Number = catX + 110;

var iphoneY:Number = catY + 50;



//0x100這些是RGBA通道的複製值,0x100是完全,以下會混合

mixBitMapData.merge(iphone.bitmapData , iphone.bitmapData.rect , new Point(iphoneX , iphoneY),0x100,0x100,0x100,0x100);    





catUic.width = cat.width;

catUic.height = cat.height;

catUic.addChild(cat);



iphoneUic.width = iphone.width;

iphoneUic.height = iphone.height;

iphoneUic.addChild(iphone);  



uic.addChild(backGround);    

}   

]]>

</fx:Script>

<s:VGroup width="100%" height="100%">

<s:HGroup id="box">

<mx:UIComponent id="catUic"/>  

<mx:UIComponent id="iphoneUic"/>

</s:HGroup>



<mx:UIComponent id="uic"/> 

</s:VGroup>     

</s:Application>

2011年12月5日星期一

node.js Windows 安裝與初步運行測試

Step1.至官網下載node.js

因為要使用windows環境下測試，所以下載node-v0.65.msi

Step2.下載完畢直接點擊安裝

win7平台，預設會安裝在C:\Program Files (x86)\nodejs。

Step3.撰寫運行範本example.js

該範例存在C:\nodeJS_UT\example.js

var http = require('http');

http.createServer

(

function (req, res)

{

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hello Node.js\n');

}

).listen(6101, "127.0.0.1");

console.log('Server running at http://127.0.0.1:6101/');