CSS 解說

http://www.evotech.net/

簡中翻譯
http://www.qianduan.net/

Flex 網路資源教學

製作中文訊息
http://blog.csdn.net/langel/archive/2009/02/09/3870994.aspx


http://www.riahome.cn/?cat=139

Flex 入門 (一)

■ Flex Builder 開發環境介紹
◆ 開發環境介紹
1. Flex元件有 2 種開發使用方式
　在設計檢視模式下視覺化拖拉元件
　在程式碼視圖下使用 MXML 標籤進行描述開發

2. 工作空間(workspace) & 專案(project)
　Flex Builder 可以建立多個工作空間，但一次只能使用一個。
　一個工作空間可以允許有多個專案，這些專案可以共用一個工作空間的基本配置。
　選擇功能表的「File＞Switch Workspace＞Other...」選項，設定好 workspace 後，Flex 會自動重新啟動。
3. 快速鍵
　程式碼自動完成功能(Code Completion)
　按下「Ctrl+spacebar」組合鍵


◆ Flex組件(components)介紹

在視覺化元件方面，包含下列5個類型：
► Custom：自行開發的元件。

► Control：控制組件。除了常見的Button、CheckBox、ComboBox、Radio、TextInput，還有下列的元件：
　－ AdvancedDataGrid
　－ ColorPicker：選取顏色。
　－ DataGrid：顯示多筆資料，具有編輯資料的功能，欄位的型態可以是各種輸入欄位如：Text Input、CheckBox、ComboBox、Radio…。
　－ DateField：日曆。
　－ HorizontalList：顯示水平清單，清單的內容可以是文字或是圖檔。
　－ HSlider、VSlider：使用拖拉的數字欄位。
　－ LinkButton：超連結按鈕。
　－ NumericStepper：使用上下箭頭微調的數字欄位。
　－ PopupMenuButton：結合Button和Popup Menu的一種元件。
　－ ProcessBar：進度百分比。
　－ RichTextEditor：文字編輯器，可以設定裡面任何文字的各種屬性，像是大小、顏色、超連結、對齊…
　－ TileList：像磁磚一樣排列的清單，清單的內容可以是文字或是圖檔。
　－ Tree：樹狀元件。
　－ VideoDisplay：播放影像檔。


► Layout：版面配置組件。
　佈局劃分組件：劃分整體的頁面配置
　－ Canvas：可用來設定元件在頁面上的相對位置
　－ Panel：可用來劃分元件的功能區域
　－ HDividedBox、VDividedBox：將畫面做水平或垂直切割，並且允許使用者在操作時調整大小。
　表單元件
　－ Form：表單容器元件
　　　將某些元件加入 Form 容器內時，會自動生成一個FormItem隱形元件(作為原元件的父元件??)。
　　　例如將 Button、Label、TextInput 等某些元件拖拉到 Form 容器內時，會在該元件左側自動加入
　　　一個 label，這個 label 不是以元件的形式出現，而是以 FormItem 的 label 屬性形式出現。
　－ FormHeading：顯示 Form 的標題
　視窗元件：以對話方塊形式顯示內容或外部資源
　－ ModuleLoader：載入外部模組
　－ TitleWindow：用於對話方塊形式的互動。繼承Panel，多了一個showCloseButton屬性
　線條元件：以線條形式對元件進行內容上的劃分
　－ HRule、VRule：產生水平或垂直分割線

　－ ApplicationControlBar：放在Application Container的一種控制項，在這個控制項裡面可以放置其他元件，像是Button、MenuBar…。
　－ ControlBar：用在Panel或是TitleWindow的一種元件，在這個元件上面可以放置一些像按鈕的控制項，方便與Panel或TitleWindow的內容部分區隔。
　－ Grid：類似Html table元件。
　－ HBox、VBox：將子元件以某個間隔做水平或垂直排列。
　－ Spacer：在元件之間產生間隔。
　－ Tile：將元件以磁磚的方式排列。

► Navigator：導航組件。有些Navigator組件可以包含其它Container，像是Accordion、TabNavigator、ViewStack。
　－ Accordion：手風琴。
　－ ButtonBar：包含多個Button。
　－ LinkBar：包含多個超連結。
　－ MenuBar：功能表。
　－ TabBar：包含多個tabpage，搭配ViewStack可以做出TabNavigator的效果。
　－ TabNavigator：包含多個tabpage，每個tabpage是一個Container，其內容可以任何元件，或是載入另一個Application。
　－ ToggleButtonBar：類似ButtonBar，但是會註記使用者按了那一個Button。
　－ ViewStack：用來控制其所包含的Container的狀態為visible、active或其他。

► Chart：圖表組件。


◆ 建立第一個 Flex
1. 選擇功能表的「File＞New＞Flex Project」選項


2. 輸入「Project name(專案名稱):HelloFlex」，選擇「Application type(程式類型):Web application(runs in Flash Player)」，再選擇「Server technology(伺服端要使用的技術):None」，然後按下「Next」鈕



3. 輸入「Output folder(輸出資料夾): bin-debug」，按下「Finish」鈕，完成專案建立初步步驟


4. 完成專案建立後的畫面如下，按一下編輯區域上方的「Design」圖示切換到設計檢視模式

[.mxml檔案內容]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>

5. 設計檢視模式


6. 拖動 "Components視窗" 內的 Control 目錄下的 "Button" 和 "TextInput" 元件到設計撿視模式的編輯區域內
　設定 Button 元件的 ID : hello_btn，Label : Hello
　設定 TextInput 元件的 ID : hello_txt


7. 切換到程式碼編輯視圖，輸入如下程式碼後執行程式


[程式碼]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button y="233" label="Hello" id="hello_btn" horizontalCenter="0"
click="SayHelloHello()"/>
<mx:TextInput y="169" id="hello_txt" horizontalCenter="0"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
function SayHello():void {
Alert.show("Hello:"+hello_txt.text, "My First Flex!");
}
]]>
</mx:Script>
</mx:Application>



一周學會 Flex
http://www.adobe.com/devnet/flex/videotraining/
中文 http://www.riavideo.net/ODT/list.html

Ext JS

http://www.sporcic.org/tag/extjs/

JQuery VS ExtJS

DIY自製環保捕蚊器

一個在網路流傳的小秘方，激發了小學生實驗靈感，經過不斷嘗試，成為真正的環保良方！台北市永安國小師生從網路偏方得到靈感，利用資源回收(網站)的寶特瓶，以及不到2.5 元的成本，製造出「環保捕蚊罐」，放在地下室，一罐最多
可抓到超過1427隻蚊子，連環保專家都驚歎不已。
「環保捕蚊罐」的環保之處，不只在利用資源回收的廢寶特瓶，更因這種捕蚊法不需使用化學的殺蚊劑無毒又安全。學生估計，只要有五分之一的人改用這種環保捕蚊法，每年全球就可省下10億元新台幣的購買殺蟲劑費用。
其實很多人都曾收到過這則網路偏方的電子郵件，指出只要在室內放一小盆水，再加點洗衣粉，蚊子就會全部溺死在盆中。永安國小學生郭家安的媽媽也看到了這則郵件，並付諸實施，雖然效果不佳，但卻激發郭家安動手研究，並在老師徐佳璋指導下，找出真正有效的捕蚊良方。
徐佳璋表示，剛看到這則網路偏方時，就懷疑是什麼東西誘使蚊子前來？是洗衣粉的成分還是香味？結果按網路傳聞操作，三天只抓到11隻蚊子，把洗衣粉濃度調高後，三天只抓到一隻蚊子，效果並不好。
因此，師生動手實驗，希望找出更有效的誘蚊法。蚊子會被吸引嗎？試試看暖暖包。蚊子會對不同顏色有反應嗎？試著用不同顏色寶特瓶來誘蚊。捕蚊罐放置的高度是否有差異？把捕蚊罐吊高到蚊子飛行高度試試看。學生還試過用蜂蜜、蘆薈、黏鼠板膠來誘蚊或黏蚊。最後發現，蚊子會受到二氧化碳及黑色吸引，即利用發酵糖水會釋出二氧化碳的原理來製造捕蚊罐。
徐佳璋表示，「環保捕蚊罐」研發成功後，曾創下單罐一周內在地下室停車場捕獲1427隻蚊子的紀錄；另一次測試放置九罐捕蚊罐，更共抓到超過五千隻蚊子。徐家安回憶整個實驗過程，最「苦」的就是撈出一坨坨的蚊子屍體，計算到底有幾隻。
而這項成果不但讓永安國小這群師生獲得全國科展特優，並在環保署舉辦的2005年全國環保創意競賽中得到佳作殊榮。有人質疑蚊子會不會再度飛出？糖水罐反而成了「養蚊罐」？徐佳璋指出，只要上下半部的寶特瓶密合，蚊子絕對「只進不出」，還有一些小果蠅也會死在裡面。
但此捕蚊罐也有局限。徐佳璋表示，並非100%的蚊子都會被誘引，在人多的環境，即使放了捕蚊罐，仍免不了有人被叮咬；捕蚊罐使用效果最佳地點，是在停車場、地下室等蚊子較多的室內場所。 尤其是近年來，即使有寒流、強烈冷氣團來襲的冬季，仍有地下家蚊（溫帶家蚊的一種）作怪，出沒地點多集中在地下室，最適合使用環保捕蚊罐來展開抗蚊大作戰。
「蚊子專家」台北市立教育大學環境教育研究所教授黃基森十分肯定「環保捕蚊罐」，認為它有學理根據，不少市售的捕蚊器就是利用散發二氧化碳來誘蚊，只是一般捕蚊器多半價格高昂，如能廢物利用，意義更佳；但要注意的是，不同酵母菌對不同品種的斑蚊、家蚊誘引效果可能還有差異。

設計模式 簡中整理

設計原則：
⊙"開-閉"原則(Open-Close Principle或者OCP)
一個軟件實體應該對擴展開發,對修改say NO!在設計一個模塊的時候,應當思考日後升級過程中,如何不修改源代碼的情況下改變這個模塊的行為

⊙里氏代換原則(Liskov Substitution Principle 或者 LSP)
任何基底類別可以出現的地方,子類別都可以出現,而基底類別與子類別的繼承關係就是抽象化的具體體現

⊙依賴倒轉原則(Dependeney Inversion Principle 或者 DIP)
要以來依賴於抽像不要依賴於實體

⊙介面隔離原則(Interface Segregation Principle 或者 ISP)
應該為客戶端提供盡可能少的單獨的接口,而不是提供大的總接口

⊙組合/聚合復用原則(Composition/Aggregation Principle 或者 CARP)
盡量要使用組合/聚合,而不是繼承關係達到復用的目的

⊙迪米特法則(Law of Demeter或者LoD)
一個軟件實體應當與盡可能少的其他實體發生互相作用

Firefox extension

memory leak monitor
http://dbaron.org/mozilla/leak-monitor/