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/');


  • 6101是ProtNumber,請自行調整。

Step4.在console執行命令使其運行






  • node example.js是執行命令
  • Server running at http://127.0.0.1:6101/,代表server啟動成功。
Step5.於瀏覽器中呼叫http://127.0.0.1:6101或 http://localhost:6101




2011年12月1日 星期四

Eclipse系列工具中文化

//文中圖片是已經中文化過,因此圖片中已經可以看到中文

1.先確定開發工具所用的Eclipse版本 
  • 打開About面板Help -> About











  • 點擊Eclipse圖示















  • 確定Eclipse版本,下圖為3.62


















2.到Eclipse官方,查詢Eclipse版本代號
  • 得知3.6為Helios



















3.至Eclipse Babel Project Downloads
  • 可以找到Helios的語言包路徑http://download.eclipse.org/technology/babel/update-site/R0.9.1/helios




















4.安裝語言包

  • Help -> Install New Sofware












5.Work with 欄中填入語言包下載位置

  • 找到Bable Language Packs in Chinese(Traditional)將其打勾,按下Next,依循安裝指示即可完成。
















6.更改IDE安裝路徑中的組態設定檔

  • Aptana Studio3 為  AptanaStudio3.ini
  • FlashBuilder為FlashBuilder.ini
在ini設定檔中加入以下設定,並重新開啟即看見套用的語言介面:

//顯示繁體中文
-nl
zh_TW


//顯示簡體中文  ,當然簡中的話你必須先安裝對應的語言包。
-nl
zh_CN


//顯示英文
-nl
en_US


PS.所有Eclipse為基底的開發工具都可使用



2011年11月30日 星期三

CSS text-shadow + ShlideBar


CSS text-shadow + HTML5 SliderBar
參考資料
CSS Text Level 3
HTML5 Presentation (在裡面有一篇Shodw,可以觀看他的原始碼參考做法,在2599行)
切割法

這是一個簡單的sampe,實際運用,必須用javaScript動態設定抓取css的值給slider的value做初使化才會同步。



0

陰影效果


x= 0 y= 0

<style type="text/css">
#shadow_demo_001
{
 /*text-shadow: x offset y offxet radius*/
 text-shadow: 0px 0px 3px #674ea7;
}
</style>
<span id="_outputValue">0</span>
<input id="_sliderBar" max="30" min="0" type="range" value="0" />
<script type="text/javascript">

$(document).ready(start);

function start()
{ 
 $('#_sliderBar').change(showValue);
}

function showValue(value)
{  
  var newValue = $(this).val();  
  
  //切割css   
   var result = $('#shadow_demo_001').css('text-shadow').match(/(-?\d+px)|(rgb\(.+\))/g);
   //var shadowsX = result[1];  
   var shadowsX  = newValue + 'px';
   var shadowsY = result[2];
   var shadowsSsize = result[3];
   var shadowsColor = result[0];
   var newShadow =  shadowsX +" "+ shadowsY + " " + shadowsSsize + " "+ shadowsColor;  
  
  //更新css
  $("#shadow_demo_001").css({'text-shadow': newShadow})
  //更新<span>的內容
  $("#_outputValue").html(newValue);
}
</script>
<h1>
 <span id="shadow_demo_001">陰影效果</span>
</h1>

CSS3 Borders - border-[top or bottom]-[left or right]-radius

CSS3 module: Border (選擇其中一角做圓角)
參考資料:W3C module Border

border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

<style type="text/css"> 
.classBorderB
{
 width:220px;
 height:50px;
 background-color:LemonChiffon;
 border:1px solid LightSkyBlue;
 margin-top:5px; 
 margin-left:10%; 
 margin-right:auto; 
 margin-bottom:20px; 
}

#testDiv1
{
 border:2px solid;
 border-top-right-radius:10px;
 -moz-border-top-right-radius:10 /* Firefox */
 -webkit-border-top-right-radius:10 /* Safari and Chrome */
 -o-border-top-right-radius:10 /* Opera */
}
#testDiv4
{
 border:2px solid;
 border-top-left-radius:10px;:10px;
 -moz-border-top-left-radius:10px; /* Firefox */
 -webkit-border-top-left-radius:10px; /* Safari and Chrome */
 -o-border-top-left-radius:10px; /* Opera */
}
#testDiv2
{
 border:2px solid;
 border-bottom-right-radius:10px;
 -moz-border-top-right-radius:10 /* Firefox */
 -webkit-border-top-right-radius:10 /* Safari and Chrome */
 -o-border-top-right-radius:10 /* Opera */
}
#testDiv3
{
 border:2px solid;
 border-bottom-left-radius:10px;
 -moz-border-bottom-left-radius:10px; /* Firefox */
 -webkit-border-bottom-left-radius:10px; /* Safari and Chrome */
 -o-border-bottom-left-radius:10px; /* Opera */
}

</style>
<div class="classBorderB" id="testDiv1">border-top-right-radius:10px;</div>
<div class="classBorderB" id="testDiv4">border-top-left-radius:10px;</div>
<div class="classBorderB" id="testDiv2">border-bottom-right-radius:10px;</div>
<div class="classBorderB" id="testDiv3">border-bottom-left-radius:10px;</div>