Windows Desktop Gadget 開發

因為某些原因，最近學了一點Windows Desktop Gadget開發
* Windows Desktop Gadget也就是俗稱的桌面小工具


開發途中發現國內的資料似乎不太多，我想應該是不太熱門吧
在還沒開始玩前，其實我的桌面也不會擺小工具 
後來發現還蠻多人有再用小工具的.. 我見識太淺薄了XD



首先

對Gadget完全沒概念的話，可以看看這邊
裡面有關於小工具的整體架構說明及背景知識


接下來
有點背景知識之後，可以看一點Gadget API

Gadgets for Windows Sidebar - Gadget Object Reference
Gadgets for Windows Sidebar - System Object Reference

因為Gadget基本上是用html/js/css撰寫，只是多了一點可以用的api
到這邊，你可以試著組組看你想要的東西

當然，你可以用你熟悉的jquery或是其他javascript library

不過要注意一點：
這邊有個小問題 (應該是bug)：不支援直接套用click事件
正確一點的說法是，如果這個dom element原本沒有onclick事件的話，是不能直接加入的

舉例來說：


$('#myDiv').click(function(){  doSomething(); });
只寫這樣是不行的，點下去仍然不會觸發doSomething
必須在#myDiv上加入onclick這個attr才可以

<div id="myDiv" onclick="" ></div>
onclick是空的也沒關係，總之要有就對了

但是mouseover, mouseout等就沒這個問題，我也不知道為什麼
或許真的是bug XD

為你的小工具加上背景
要做出美觀的小工具，一個漂亮的背景是不可少的 雖然我偷懶沒用

這篇文章是中文文章，講的是加入背景的方法，還蠻詳細的
當然不可少的是Gadget API: Background Object

這邊先提一個常遇到的問題：
當兩個透明圖疊在一起的時候，會出現紫色的破圖 (Pink Problem)
這個問題就我查到的資料看來，應該沒有比較好的解法
算是一個bug，要不就是用美工避開，或是可用 gbackground元素的addImageObject加入圖片
這樣就不會有這個問題
詳細的說明可以看：Gadget開發實戰總結 2 （I See Pink Problem）


或許有人會想用css3pie或IE的Filter..等方法
做出CSS3的box-shadow(陰影)、border-radius(圓角)這些效果
這些的確是做得出來的
但是一樣要注意透明的部分(陰影、圓角處)，也會出現紫色破圖的問題


在小工具內使用AJAX
這邊大概是我弄最久的地方，雖然最後還是失敗了
直說的話，就是基本上還是沒辦法cross domain的，除非有要的服務提供Rest based API (參考)


我甚至還自己用ActiveX寫了Ajax來測試，確定是不行的 (如果有人試成功的話麻煩跟我說)
不過後來發現用jQuery.ajax其實功能是一樣的，不過要設定強制跨域


為此我還去找了Ajax的readyState狀態碼含意和HTTP的連接狀態碼含意
不然說實在的，只用library都不知道底層做了什麼XD

以下這兩個網址是用另一個方法取網路上的資料，也可以看看
Gadget開發實戰總結 1 （Gadget調用WebService）


英文：
介紹及資源：http://christ-offer.blogspot.com/2011/02/windows-7-gadget-development.html
範例：http://www.codeproject.com/KB/gadgets/DailyDilbert.aspx
很不錯的書，可以用Ctrl+F找關鍵字：http://www.innovatewithgadgets.com/

[Windows Gadget] Now.in Player / Now.in 桌面播放器

Now.in是個很不錯的電台網站，提供很多不同種類的電台供大家收聽

平常我都會把網址餵給撥放器播，最近這兩天就思考到一個問題

我要怎麼知道現在正在播放的歌名呢?

我就想著，不然就來寫個小程式吧!

google了一下，發現windows gadget好像非常適合拿來做這種工作

放在桌面上小小的，很適合當播放器

於是就生出了這個東西。

雖然最後還是沒達成本來的目的啦.. 

一開始以為windows gadget可以cross domain取資料的

後來發現還是要用rest based api(jsonp)才可以，不過Now.in當然是沒提供這種服務XD

真要的話就得自己架server來parse了

而且最近也沒時間，就先把這個未完成品放著，晚點再說囉

還有期末考阿..QQ 莫名其妙就花了兩天在玩這個 

暫時的未完成品是長這樣:

雖然看起來是簡單的小程式

但是不太熟一邊google的情況下，也花了一點時間

不過也算是學到另一種好玩的東西啦!

寫起來跟寫網頁感覺差不多，都是用html/js/css，只是有些特別的語法和怪問題晚點再說

這也表示可以用jquery  ..!

下一篇是開發Gadget的心得，敬請期待!

使用object embed插入音樂 - 參數設定及js控制方法

雖然很不幸的，這是IE only的東西
但是有時候也不得不用阿..

在這邊有很詳細的object參數，javascript的用法則在這邊


參數：
簡單列幾個重要的:

<object id="player" codebase="http://www.apple.com/qtactivex/qtplugin.cab"  classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"  type="application/x-oleobject" width="1" height="1">
        <param name="SRC" value="b.rm"><!--文件路徑,根據需要調整-->
        <param name="AUTOSTART" value="1"> <!--自動播放-->
        <param name="LOOP" value="1"><!--循環播放-->
        <param name="volume" value="50"><!--默認聲音大小0%-100%,50則為50%-->
</object> 


javascript：
以下的player表示object的DOM Element

player.controls.play();     /*   開始撥放   */
player.controls.pause();  /*   暫停撥放   */
player.controls.stop();    /*   停止撥放   */
player.controls.next();    /*   下一首音樂   */

player.URL = url;   /* 將音樂的來源設為url，這個動作會馬上執行，不需要先stop在play */


  ＊注意：此方法只適用於IE

超酷的CSS3 Animate及Shadow

超酷的CSS3 Animate:
demo: http://daneden.me/animate/#cta 
github: https://github.com/daneden/animate.css

順便也介紹一下一個用CSS3+jquery做出的陰影plugin
demo: http://syddev.com/jquery.shadow/
github: https://github.com/sydlawrence/jQuery-Shadow

[jquery] 強制使用跨域(cross domain) Ajax

很簡單，就只有一行code

$.support.cors = true;

不過別以為這樣就真的可以無視瀏覽器限制XD
只是當你有特別為cross domain設定時，這個才有用

不然還是會噴錯誤的!

[Android] 使用自訂的SQLite出現錯誤

Android想使用自己放在SDCard的SQLite Database時，有可能會有無法讀取的情況
這時候可以試著檢查一下資料庫內有沒有android_metadata這個資料表

因為若是在程式內開SQLite Database時，android_metadata會自動建立
但是用自己的就有可能沒注意到這個小地方


可以用以下兩個指令建立:
CREATE TABLE "android_metadata" ("locale" TEXT DEFAULT 'en_US')
INSERT INTO "android_metadata" VALUES (zh_TW')


若是想要將放進SDCard的資料庫移到程式自己的空間的話
可以參考以下連結:  Using your own SQLite database in Android applications

DAO vs ORM

看到一篇有趣的文章
比較了 model, orm, dao和active record

個人覺得寫得不錯，將他翻成繁中記錄在此

  --

在做web開發中，經常會碰到這樣幾個概念：

• Model
• DAO，data access object，數據訪問對象
• ORM，object-relational mapping，對象關係映射
• Active Record

這些概念都是和數據相關的，然而他們之間有怎樣的區別呢？

首先來看Model，模型。模型是MVC中的概念，指的是數據和改變數據的操作（業務邏輯）。模型通常指代現實生活中的某樣實體。以訂單為例，每個訂單都包含許多數據，如客戶、價格、明細等等，這些數據都叫做訂單這個模型的屬性，此外，和訂單相關的一些列操作，比如當購買時，你可能需要先檢查庫存，給與一定的優惠，再更新賬戶餘額和積分等等，這些就叫做業務邏輯，也是模型的一部分，從代碼上來講，是要放在模型中的。

當模型執行完業務邏輯後，我們便要把模型中的數據保存到數據庫中。如果我們直接把和數據庫相關的代碼放在模型裡，會使得以後的維護相當的麻煩。在我之前的一個項目中，我們用戶的增長相當快，導致一台數據庫無法支撐所有的訪問，不得不使用分庫來解決問題。然而前人把SQL語句直接寫在了模型這一層裡，這導致分庫相當的麻煩，我們只能先把這些SQL語句抽出來，才能把分庫進行下去。我們把這些抽出來的SQL代碼放到單獨的一層，這一層便是DAL，Data Access Layer，數據訪問層，它由許多DAO組成，目的便是把和數據庫相關的代碼封裝起來，這樣當我們執行分庫時，便只用調整DAO的代碼了，模型根本不用關心它使用的數據是放在A庫還是B庫。

DAO其實是來源於J2EE的一個設計模式，當初的目的也是使得企業更換數據庫時，不用影響模型層的代碼。

與DAO類似，ORM也是一種封裝數據訪問的概念。然而ORM不像DAO只是一種軟件設計的指導原則，強調的是系統應該層次分明。ORM更像是一種工具，有著成熟的產品，比如JAVA界非常有名的Hibernate，以及很多PHP框架裡自帶的ORM庫。他們的好處在於能將你程序中的數據對象自動地轉化為關係型數據庫中對應的表和列，數據對象間的引用也可以通過這個工具轉化為表之間的join，而Hibernate甚至提供一套他們自己的數據查詢語言HQL來解決複雜的查詢問題。

使用ORM的好處就是使得你的開發幾乎不用接觸到SQL語句。創建一張表，聲明一個對應的類，然後你就只用和這個類的實例進行交互了，至於這個對象裡的數據該怎麼存儲又該怎麼獲取，通通不用關心。

Active Record則是隨著ruby on rails的流行而火起來的一種ORM模式，它是把負責持久化的代碼也集成到數據對象中，即這個數據對象知道怎樣把自己存到數據庫裡。這與以往的ORM有不同，傳統的ORM會把數據對象和負責持久化的代碼分開，數據對象只是一個單純包含數據的結構體，在模型層和ORM層中傳遞。而在Active Record中，模型層集成了ORM的功能，他們既代表實體，包含業務邏輯，又是數據對象，並負責把自己存儲到數據庫中，當然，存儲的這一部分代碼是早已在模型的父類中實現好了的，屬於框架的一部分，模型只需簡單的調用父類的方法來完成持久化而已。


 --


引用這裡的說法：「DAO層是軟件開發演變過程中對於分層概念的產物，目的是更清晰合理的管理軟件開發過程過的代碼和邏輯；而ORM是對數據操作思想的一種改變，不再是面對關係數據庫中的表，而是統一視作對象。」

 --

其他參考:
如何規劃? - DAO模式與ORM概念

javascript/jquery剖析網址 - parseUri(parseUrl)

這個parseUri是我修改Steven Levithan而成的

為了看起來整齊點，我將parseUri包在jquery下
不過其實並沒有用到jquery的東西，大家覺得用不順手可以自己改改

javascript中使用print_r

有用過print_r的php開發者都知道他的好用XD
這邊實現了js的print_r : http://phpjs.org/functions/print_r:493

其實這個網站(http://phpjs.org/functions/index)也有很多其他的函式
有興趣可以晃晃!

flask初體驗

寫了一個用到flask的小專案
用python寫web果然一樣簡潔，還蠻喜歡的

今天google到的一個小成果是:
http://flask.flyzen.com/   - flask官網的中文翻譯XD (只有Quick Start部分)

英文看不懂可以去翻翻~


另外有一個必須記錄的地方..
url_for裡面的值不是@app.route(OOXX)裡面的OOXX
而是對應的 def XXOO 的XXOO

詳細看這邊:
http://stackoverflow.com/questions/3683108/flask-error-werkzeug-routing-builderror

Compass

用了只能說.. cool!


簡單紀錄一下安裝方法:
首先，先確定你有安裝ruby，有ruby之後開cmd打
get install compass

安裝完成XD


接著看一下參考資料
http://marlonyao.iteye.com/blog/652103
http://miau715.blogspot.com/2011/04/compassapp.html
http://www.i-design.tw/archives/170


compass有蠻多套件可使用的，這邊介紹一下 fancy-buttons
網站上的影片可以知道fancy-buttons可以做到怎麼樣的程度
打一段code就有這麼棒的效果實在很方便呀!

安裝
gem install fancy-buttons

要建立compass專案的方法是
compass create 專案名

加入fancy-buttons的話則要用
compass -f fancy-buttons -r fancy-buttons 專案名

最後，到 ruby資料夾/bin 找compass開啟 (不是compass.bat)
加入
require 'compass-colors' 
require 'fancy-buttons'

因為fancy-button需要compass-colors這個套件
所以記得要先
gem install compass-colors

在寫scss的時候，可在專案目錄下用
compass watch

這樣可在你的scss變動時，自動產生對應的css，非常方便!
( 不過不知道為什麼 compass -w 是沒用的 )

[Titanium] tableview

在Titanium找了許久一直沒看到Android的listview
沒想到原來就是Titanium的tableview


那要怎麼像在listview一樣，在tableview裡面自訂格式呢?

這邊寫得很詳細: (好不負責XD)
http://cssgallery.info/custom-row-for-tableview-in-appcelerator-titanium/


這裡也有兩個使用tableview的小技巧，也順便紀錄一下
http://blog.bahrenburgs.com/2010/08/useful-titanium-mobile-tableview-tips.html

javascript的XML操作

不否認這個問題是寫Titanium的時候才遇到的XD
真的沒什麼用js操作xml的機會，剛好也趁機學習了

這邊有很完整的 DOM Level 2 API 的方法，不過沒有怎麼使用，也沒有XPath
http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html


而W3school的就超完整 API和範例都有了~  大推!
XML DOM Reference : http://www.w3schools.com/dom/dom_nodetype.asp
XPath Tutorial : http://www.w3schools.com/xpath/xpath_examples.asp


xml中Node和Element的區別
http://blog.csdn.net/wcydiyi/article/details/4432636


javascript的XPath用法，個人是覺得不錯 不過因為最後沒用到沒有細看
https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript


因為用XPath一直有問題，最後我是用getElementsByTagName完成的
getElementsByTagName在W3school可以找到用法

這邊也有一點點例子
http://developer.51cto.com/art/200902/109968.htm


另外提一下
Titanium的documentElement要用XPath的話，是使用evaluate而不是selectNodes
要取element裡面的值是用 .text 而不是 .textContent
這些是跟w3school的API有一點不同的

或許還有其他的，不過有遇到的就這些!
也歡迎大家補充!

Titanium mobile 介紹及資源

自從COSCUP2011聽到Titanium就很動心
這幾天自己試了一下，真的名不虛傳的好用啊

下面留一點google到的教學資源，不過有些分頁可能被我關掉了...

介紹
http://clayliao.blogspot.com/2010/11/titanium-mobile-tutorial.html
http://www.lis186.com/?p=2235

Titanium Mobile的API:
http://developer.appcelerator.com/apidoc/mobile/latest/

這個外國作者 : Dan Tamas 的Blog寫得很棒!
特別是我覺得 Seven days with Titanium  這篇系列文很值得看看
blog 的 Titanium Appcelerator 分類 : http://cssgallery.info/category/titanium-appcelerator/


另一個外國作者的blog，不過關於Titanium的資料就相對少點
http://blog.bahrenburgs.com/search/label/Titanium

IE的CSS hack

這篇文章寫的就非常清楚了，這邊節錄一下我覺得比較常用的:

(以下皆節錄於: http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/ )

區別IE和Firefox

【辨識符號】：「\9」

【範例練習】：

#tip {

background:blue; /*Firefox 背景變藍色*/

background:red \9; /*IE6、IE7、IE8背景變紅色*/

}

【說明】：因為IE瀏覽器看得懂「\9」，但是非IE的瀏覽器一律看不懂，因此就可以用這個語法來區分IE和Firefox(非IE瀏覽器，像是Opera、Google Chrome、Safari等)，因此以上CSS範例中，非IE瀏覽器是顯示藍色背景，IE系列瀏覽器是顯示紅色背景。

區別IE6、IE7、Firefox (方法 1)

【辨識符號】：「*」、「_」

【範例練習】：

#tip {

background:blue; /*Firefox背景變藍色*/

*background:black; /*IE7 背景變黑色*/

_background:orange; /*IE6 背景變橘色*/

}

【說明】：IE7和IE6可讀「*」(米字號)，IE6又可以讀「_」(底線)，但是IE7卻無法讀取「_」，至於Firefox(非IE瀏覽器)則完全無法辨識「*」和「_」，因此就可以透過這樣的差異性來區分IE6、IE7、Firefox，

區別IE6、IE7、IE8、Firefox

【辨識符號】：「\9」、「*」、「_」

【範例練習】：

#tip {

background:blue; /*Firefox 背景變藍色*/

background:red \9; /*IE8 背景變紅色*/

*background:black; /*IE7 背景變黑色*/

_background:orange; /*IE6 背景變橘色*/

}

【說明】：因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)，因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS語法，所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、Google Chrome、Safari等)。

jquery plugin (3)

jsTree: 做樹狀圖的plugin，有點複雜不過功能很齊全，支援ajax、crrm等
http://www.jstree.com/documentation

jquery.hotkey: 熱鍵plugin，可以簡單實現網站上如ctrl+w的自訂功能
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js

jquery.cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js


printf: 在js上提供類似C的printf函式
http://plugins.jquery.com/project/printf

jquery.address: 類似jquery.history，可用簡單的方式實現deep link(ajax的上一頁)
官網文件 : http://www.asual.com/jquery/address/docs/
不錯的中文API: http://julabs.me/blog/front/jquery-plugin-deep-linking-methods/
簡介: http://blog.maxiang.net/jquery-address-for-deep-linking/59/


Tiny Scrollbar : 漂亮的捲軸
http://www.baijs.nl/tinyscrollbar/



附上一個很多分類plugin的網站
http://www.open-open.com/ajax/3_Tree.htm

Uncaught Error: can't load XRegExp twice in the same frame

在Chrome上debug會出現 Uncaught Error: can't load XRegExp twice in the same frame 已經不是一天兩天的問題了。然而雖然有警告，程式卻都跑得好好的我也就不管它了XD
今天總算是在這裡查到原因了


Chrome: Uncaught Error: can't load XRegExp twice in the same frame


Question:

The following code will fail in both of my chromes on 2 different computers (Windows 7 both of them, Chrome 12.0.742.100).


<script type="text/javascript">
location.hash = "#one";
location.hash = "#two";
location.hash = "#three";
</script>


I feel like I tried everything. Can anyone confirm this error on chrome, and does anyone have an idea as to how I fix it? Thanks a lot.


Answer:

It works fine with me on Chrome 12.0.742.100 on Win7. I'm assuming you have installed extensions? disable all extensions (or go to incognito mode) and try to load your page again. Errors from content scripts are also displayed in the javascript console. If you are not using XRegExp on your page, probably one of the extensions does.

Edit:

The source of the exception should be located to the right. Click it to go to the script that caused the exception.

Report:
I have no clue how I cannot have thought of this. You were completely correct, it was the chrome extension "XML Viewer". Thanks.



結論就是:
很有可能是因為chrome的某些plugin造成的問題，而且使用者那邊裝什麼plugin我們也管不著
既然束手無策而且也不會造成crash，就繼續不管它囉

Windows 7 零售版改成適用於KMS的大量授權版 (0xC004C003)

slmgr -ipk FJ82H-XT6CR-J8D7P-XQJJ2-GPDD4


http://changyy.pixnet.net/blog/post/29445461
http://www.askasu.idv.tw/index.php/2009/10/18/736/
KMS Client Setup Keys

C#內嵌WMP用法

右擊工具箱->選擇項(I)... -> 顯示"選擇工具箱項" -> COM組件 -> Windows Media Player   wmp.dll 添加

axWindowsMediaPlayer1.windowlessVideo = false; //設為false後雙擊屏幕可以全屏
axWindowsMediaPlayer1.fullScreen = true; //設播放器全屏播放

axWindowsMediaPlayer1.URL = @"mms://192.168.0.102/vod/jingwei.wma";

axWindowsMediaPlayer1.Ctlcontrols.play(); //播放
axWindowsMediaPlayer1.Ctlcontrols.stop(); //停止
axWindowsMediaPlayer1.Ctlcontrols.pause(); //暫停

axWindowsMediaPlayer1.settings.autoStart = true; //自動播放

axWindowsMediaPlayer1.settings.mute = false; //靜音
axWindowsMediaPlayer1.settings.volume = 100; //音量　int 0 ~ 100   100 是最大音量

axWindowsMediaPlayer1.currentMedia.duration.ToString();//影片長度
axWindowsMediaPlayer1.Ctlcontrols.currentPosition = 30; //當前的播放位置　double

axWindowsMediaPlayer1.currentMedia.getItemInfo("Title");//標題
axWindowsMediaPlayer1.currentMedia.getItemInfo("Author");//作者

//*****************************************************************************//

MediaPlay 以前版本

右擊工具箱->選擇項(I)... -> 顯示"選擇工具箱項" -> COM組件 -> 瀏覽(B)... -> C:WINDOWS\system32\msdxm.ocx -> 打開
Windows Media Player   msdxm.dll 添加

label4.Text = axMediaPlayer1.Volume.ToString(); //音量
axMediaPlayer1.FileName = @"mms://218.98.101.164/vod/jingwei.wma";//文件路徑
axMediaPlayer1.Play(); //開始播放

//******************************************************************************//
//****************************************************************************//

右擊工具箱->選擇項(I)... -> 顯示"選擇工具箱項" -> COM組件 -> RealPlayer G2 Control   rmoc3260.dll 添加

axRealAudio1.Source = @"F:\mp3\hh.mp3"; //播放路徑

axRealAudio1.CanPlayPause(); //Bool 型是否能暫停
axRealAudio1.CanPause(); //暫停
axRealAudio1.DoPlayPause(); //正在播放的影片暫停播放

axRealAudio1.CanPlay(); //Bool是否能播放
axRealAudio1.DoPlay(); //播放

axRealAudio1.CanStop() //播放是否可以停止
axRealAudio1.DoStop(); //播放停止

axRealAudio1.SetCenter(true); //按影片原大小播放
axRealAudio1.SetFullScreen();//播放器全屏播放影片

int place = axRealAudioP.GetPosition();
axRealAudio1.DoStop();
axRealAudio1.SetCente*(**lse); //拉伸播放 axRealAudio1.SetCenter(true); 按影片原始大小播放
axRealAudio1.DoPlay();
axRealAudio1.SetPosition(place);

nResL = axRealAudio1.GetPosition(); //獲得當前影片 的播放進度
label1.Text = axRealAudio1.GetTitle(); //獲得影片的標題
label2.Text = "當前的帶寬: " + axRealAudio1.GetBandwidthCurrent() / 1024 + "KB";//當前影片的當前的帶寬
label3.Text = "連接的帶寬: " + axRealAudio1.GetConnectionBandwidth() / 1024 + "KB"; //當前的連接的帶寬


參考 http://www.csharpwin.com/csharpspace/9028r9970.shtml

如果再ul li用了display:inline-block，li雖然會列成一排，但是li間就會出現空格
一般來說這種列表通常是用float:left達成，不過有些時候用第一個方法會比較靈活
但是要怎麼解決中間有空白呢?

請參考下面:
ul { letter-spacing:-10px; }
li { letter-spacing:normal; }

就是在ul將letter-spacing調至看不到空白的狀況(請自己多試幾次，找到適合的值)
再設定li回正常的letter-spacing:normal;



本篇參考用display:inline-block做產品列表

AutoHotKey用的GUI編輯器: SmartGUI

在AutoHotKey官網就有下載點
詳細介紹看這邊

HTML5新增的陣列方法

var arr = [1, 2, 3, 4, 5];

arr.every(callback[, thisArg])
對arr內的每個值執行callback，若其中有一個結果回傳false，則函數執行結果為false
thisArg : 做為callback物件的參考
callback: function (value, index, array){ ... }

arr.some(callback[, thisArg])
對arr內的每個值執行callback，若其中有一個結果回傳true，則函數執行結果為true
thisArg : 做為callback物件的參考
callback: function (value, index, array){ ... }

arr.forEach(callback[, thisArg])
對arr內的每個值執行callback
thisArg : 做為callback物件的參考
callback: function (value, index, array){ ... }

Array.isArray(arr)
判斷arr是否為陣列

arr.indexOf(obj[, index])
從arr的索引為index(default=0)的地方開始向右搜索obj，找到傳回obj在陣列的索引，反之則傳回-1

arr.lastIndexOf(obj[, index])
從arr的索引為index(default=陣列長度-1)的地方開始向左搜索obj，找到傳回obj在陣列的索引，反之則傳回-1

arr.map(callback[, thisArg])
函數的回傳值是將arr內的每個值執行callback後，所得的回傳值陣列
callback: function (value, index, array){ ... }

arr.filter(callback[, thisArg])
函數的回傳值是將arr內的每個值執行callback，保留callback回傳true的該值所得的陣列
callback: function (value, index, array){ ... }

arr.reduce(callback[, initValue])
函數將由左至右依序將arr內的值傳入callback，preValue是上一個callback的回傳值，curValue則是目前的值。
函數的執行結果是arr最左邊的值呼叫callback的回傳值
initValue: 若是最右邊的值呼叫callback的時候，preValue=initValue
callback : function (preValue, curValue, currentIndex, array){ ... }

arr.reduceRight(callback[, initValue])
函數將由右至左依序將arr內的值傳入callback，preValue是上一個callback的回傳值，curValue則是目前的值。
函數的執行結果是arr最右邊的值呼叫callback的回傳值
initValue: 若是最左邊的值呼叫callback的時候，preValue=initValue
callback : function (preValue, curValue, currentIndex, array){ ... }

jquery toast

之前就一直在找Toast工具，恰好有看到就紀錄一下

jquery-toastmessage-plugin

Cufon 網頁字體渲染

想在網頁上用特殊字體就用它囉

使用 Cufon 渲染網頁字體
Cufon中文字符無法識別的解決方案

[html5] Canvas一些中文教學

HTML5邊玩邊學（1）畫布實現方法
HTML5邊玩邊學（2）基礎繪圖實現方法
HTML5邊玩邊學（3）像素和顏色

HTML5 Canvas 起步(1) - 基本概念
HTML5 Canvas 起步(2) - 路徑

[flash] 很逼真的閃電效果

參考這邊
http://blog.open-design.be/2010/08/04/lightning-effect-in-flash-as3/

裡面也有精美的DEMO可以看

jquery上傳plugin

其實就是Uploadify，之前好像介紹過
這次又看到在紀錄一次囉

http://css9.net/t/56/
http://www.wowbox.com.tw/blog/article.asp?id=3430


另外有一個上傳效果也不錯，雖然他好像不是jquery (使用 ubr_file_upload.js )

http://www.zhuan-huan.com/convert-excel.php

[轉] Oop 對介面作設計

Oop 對介面作設計

View more presentations from Etrex Kuo.

二進位轉十六進位

最近才知道javascript的parseInt還可以設定基數XD
真是方便呀~


var val = parseInt("11111111", 2); //將 "11111111" 以2為基數剖析 , val = 255
var.toString(16); //將 val 換成16進位表示的字串

有了這兩個方法就可以簡單的完成二進位轉十六進位的程式囉

以下是我試寫的程式碼範例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二進位轉十六進位</title>
<script>
function convert(){
    var source = document.getElementById("source");
    var target = document.getElementById("target");
    var arr = source.value.split("\n");
    target.value = "";
    for (var i in arr )
    {
        var binval = parseInt(arr[i], 2);
        if(!isNaN(binval))
            target.value += "0x" + binval.toString(16).toUpperCase() + "\n";
        else
            target.value += "\n";
    }
}
document.onkeyup = convert;

</script>
</head>

<body >
    <h2>二進位轉十六進位</h2>
    <div style="width:50%; float:left;">
        <span style="font-size: 20px;">二進位</span>
        <textarea id="source" style="width:100%; height:400px;"></textarea>
    </div>
    <div style="width:50%; float:left;">
        <span style="font-size: 20px;">十六進位</span>
        <textarea id="target" style="width:100%; height:400px;"></textarea>
    </div>
    <div style="text-align:center;">
        <button onclick="convert()" >轉換</button>
    </div>
</body>

Mysql Injection 常用函數

[Blogger] code Highlight - 程式碼高亮

今天一直在找該怎麼把程式碼美美的貼在bloger上
試了很多種，有些不是不能用就是很麻煩
最後選了這套 Snippet ，這是用jqeury實現的，方法也很簡單
加上原本就有jquery的底，用起來更是順手 (不過缺點是肥了一點)

依網站上的教學可以快速地完成佈署
不過有些仍然沒有很完美，例如pre會換行..

程式碼換行感覺就蠻奇怪的..所以改了一下 css  (加這行 white-space: nowrap; )
可是這樣好像又會被版型擋住，只好再寫一段小程式碼，讓滑鼠一過去時顯示捲軸

以下是我的設定檔，供大家參考

<link href='jquery.snippet.min.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='jquery-1.4.4.min.js'/>
<script language='javascript' src='jquery.snippet.js'/>

<script language='javascript'>
$(function(){
    $('pre.csharp').snippet('csharp', { transparent: true, style: 'ide-codewarrior' });
    $('pre.cpp').snippet('cpp', { transparent: true, style: 'ide-codewarrior' });
    $('pre.c').snippet('c', { transparent: true, style: 'ide-codewarrior' });
    $('pre.css').snippet('css', { transparent: true, style: 'ide-codewarrior' });
    $('pre.html').snippet('html', { transparent: true, style: 'ide-codewarrior' });
    $('pre.javascript').snippet('javascript_dom', { transparent: true, style: 'ide-codewarrior' });
    $('pre.php').snippet('php', { transparent: true, style: 'ide-codewarrior' });
    $('pre.python').snippet('python', { transparent: true, style: 'ide-codewarrior' });
    $('pre.sql').snippet('sql', { transparent: true, style: 'ide-codewarrior' });
    $('pre.xml').snippet('xml', { transparent: true, style: 'ide-codewarrior' });
    $('pre').hover(function(){ $(this).css('overflow','auto') }, function(){ $(this).css('overflow','hidden') });
});
</script>

在 jquery.snippet.min.css 改一下這段

.snippet-wrap pre.sh_sourceCode{
    padding:1em 0em 1em 0em;
    line-height:20px;
    overflow:hidden;
    position:relative;
    white-space: nowrap;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    box-shadow: 2px 2px 5px #000;
    -moz-box-shadow: 2px 2px 5px #000;
    -webkit-box-shadow: 2px 2px 5px #000;
}

不過一想到現在要把文章裡面的程式碼都翻新一便就很頭大~"~

C# RichTextBox 文字分段改變顏色的方法

因為RichTextBox 的 SelectionColor 指的是選中的文字顏色，所以也包含之後加入的文字
如果需求只是簡單的改變下一行文字的顏色的話，可以這麼用

private void writeMsg(string msg, Color color = new Color())
{
    processBox.SelectionColor = color;
    processBox.AppendText(msg + Environment.NewLine);
}
/*
writeMsg("黑色文字");
writeMsg("紅色文字", Color.Red);
*/

Firefox 開發用套件

xpath checker - 檢視xpath

Tamper data - 檢視POST/GET的資料

Firebug - 這個不用介紹了吧

Modify Headers - 改送出的 Header ， 對有些檢查賄IE only的網站可以騙過

HtmlAgilityPack C#的一個很方便的html paser

比較詳細的介紹可在這邊看
http://msdn.microsoft.com/zh-tw/ee787055


簡單範例:

HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(targetHTML);
HtmlNode n = doc.DocumentNode.SelectSingleNode("/html[1]/body[1]/table[1]/tr[1]/td[2]/font[1]");
string activity = HtmlEntity.DeEntitize(n.InnerHtml).Trim();
HtmlNode node;
if (key == "sex")
    node = doc.DocumentNode.SelectSingleNode("//input[@name='" + key + "' and @checked]");
else
    node = doc.DocumentNode.SelectSingleNode("//input[@name='" + key + "' ]");
if (node != null) signData.Add(key, node.Attributes["value"].Value);
else if ((signData.ContainsKey("chkmeal") && signData["chkmeal"] == "1") && key == "meal")
{
    if (foodDic.ContainsKey(food))
        signData.Add(key, foodDic[food]);
    else
        signData.Add(key, foodDic["不用餐"]);
}

不過不知道為甚麼..  它用XPath分析出來的的東西跟我想的有點差距
因為這樣我還用了Firefox的xpath checker去看，出來的東西果然不一樣


分享一個我的解決辦法~
先設定中斷點在 SelectNodes 方法* 後，然後直接下需要的XPath的Html tag (EX: //input)
之後在每個 HtmlNode 都會有它的絕對XPath路徑，直接去看那邊吧

* SelectSingleNode 是取單一個tag，傳回HtmlNodeCollection
  SelectNodes 是取多個符合的，傳回HtmlNode

找icon的好地方

iconfinder: http://www.iconfinder.com/
有很多icon，搜尋也很方便

conventico: http://www.convertico.com/
有時候iconfinder只能抓png檔，這個網站可以線上轉換png以及其他種類的圖檔成.ico檔

jquery tiptip

tiptip還蠻好用的，只要標籤裡加個title就好了XD
而且也蠻好看的


可是又是因為跟mbExtruder衝突=   =
在mbExtruder裡面就是不給我用((哭哭

說起來也不是非得用mbExtruder，不過這種效果的plugin似乎不常見
還是不懂得下關鍵字呢~"~

jquery fancybox

換了好幾個 lightbox plugin，原本已經選定用fancybox來做了
沒想到跟mbExtruder一起用的時候，發現在mbExtruder的tab開起來的時候開lightbox，tab就掛了((哭

所以只後重找適合的了
不過當時因為發現fancybox沒有像blockUI那樣的message功能，所以就自己寫了一個
需要的話放進fancybox裡就好了~

var messagebox, showbox;
    $.fancybox.message = function(html, options) {
    //first
    if(!messagebox || !messagebox) {
        $('body').append('<div style="display:none;"><div id="fbmessagebox"></div><a id="fbshowmessagebox" href="#fbmessagebox" /></div>');
        messagebox = $('#fbmessagebox');
        showbox = $('#fbshowmessagebox');
    }
    options = $.extend({}, {showCloseButton: false, scrolling: "no" }, options);
    messagebox.html(html);
    showbox.fancybox(options).click();
    setTimeout("$.fancybox.close()", 1000);
}

btw...
facebox用起來不太順手
所以目前應該是試試看shadowbox


補記
facebox雖然頗好看，可是個人覺得不太好用
基本的選標籤的部分就限制重重~"~

jquery 的一些 UI 組件

除了很普遍的jqueryUI之外，其實還有很多很棒的UI可以用
列出一些找到的，都很不錯

jQuery tools

Wijmo

還有之前提過的
mb.jQuery.components

jquery 圓形 plugin

$.fn.circle = function (size) {
 size = size.replace("px", "");
 var _size = size==null? Math.min(this.height(),this.width()) :size;
 this.height(_size);
 this.width(_size);
 this.corner((_size/2) + "px");
}

恰好有需要就寫了，不過好像不太實用XD
基於 http://jquery.malsup.com/corner/

dotplurk 的 getplurks bug

會出這麼嚴重的錯也太誇張了

這個 bug 會導致在 getPlurks 時，怎麼設 offset 都沒用
總覺得這應該是頗常用到的 function ，卻 google 不到甚麼資料
還是用 .net 開發 plurk bot 的人太少了XD
要不是有去翻 source code 我現在應該還是怎麼做都做不出來...


言歸正傳
這個bug是因為作者不知道為甚麼在傳offset參數時多了一個中括號
只要把中括號刪掉就好囉

主要是更動下面兩部分

public plurks getPlurks(DateTime offset, int limit, string filter)
{
    ...
    var url = string.Format("{0}/{1}?api_key={2}&offset={3}&limit={4}&filter={5}", apiUrl, apiAction, apiKey, offset.ToUniversalTime().ToString("s"), limit, filter);
    ...
}
public plurks getPlurks(DateTime offset, int limit)
{
    ...
    var url = string.Format("{0}/{1}?api_key={2}&offset={3}&limit={4}", apiUrl, apiAction, apiKey, offset.ToUniversalTime().ToString("s"), limit);
    ...
}

這樣就OK了
懶惰的人也可以下載我改過的檔案  PlurkApi.dll [載點不保證永久有效]
另外我也將這個bug回報了，希望能快點修好囉

開發 js 的一些工具

jQuery.parseJSON - 將 json 轉為 object
dump - 類似 php 裡面的 print_r / dump
JQuery Timers  - 定時器
主要有三個函式
1. everyTime(時間間隔, [計時器名稱], 函式名稱, [次數限制], [等待函式程序完成])
2. oneTime(時間間隔, [計時器名稱], 呼叫的函式)
3. stopTime ([計時器名稱], [函式名稱])



http://remysharp.com/jquery-api/ 查API的好幫手 (網頁)

jquery plugin - template

真的是很棒的東西
不過在查的時候發現其實有不止一種，而且還長的很像

試了一下，還是這種最強大，而且版本也比較新  jQuery.template()

下面的看完就大概會了
jQuery Templates Plugin筆記1
jQuery Templates Plugin筆記2
jQuery Templates Plugin筆記3
jQuery Templates Plugin筆記4
jQuery Templates Plugin筆記5
jQuery Templates Plugin筆記6
jQuery Templates Plugin筆記7
jQuery Templates Plugin筆記8

特別注意如果抓到的東西要用 html 顯示 ，是使用 {{html data}} 而不是 ${html data}

jquery plugin (2)

這幾天一直在翻 plugin ，想找出一些有用的東西
順便也發現很多好東西，趕快紀錄一下

挑出一些個人覺得比較好的

HoverFade、Coda Slider Effect、Horinaja、jqPlot Charts and Graphs for jQuery
jqFancyTransitions、3d Tag Sphere
特別是 Growl  ，跟 BlockUI 的 growl 差不多功能，可是我覺得這比較棒
以上皆參考 用jquery插件創建視覺震撼的網站  其他的plugin 到網頁裡看吧~


Uploadify - 很漂亮的上傳套件

Supersized - Full Screen Background/Slideshow jQuery Plugin

hoverIntent - 讓hover事件delay一下，避免一直觸發事件

其他網頁還有

14個最新jQuery插件_網頁設計中常用案例
15款提高表格操作的jQuery插件
50個加強表單的jQuery插件
50多個強大的jQuery插件應用實例
100+ jquery插件應用


codrops - js特效教學網站

jquery plugin (1)

這邊大概是以酷炫度/實用度來排列

分別是

mb.jQuery.components

只能說，真是相見恨晚
這個plugin能做出的效果是原本我以為在flash才能做出來的
http://pupunzi.open-lab.com/mb-jquery-components/


jQuery BlockUI Plugin
彈出視窗，用起來很方便，覺得不錯用
同一作者個其他 plugin (http://jquery.malsup.com/) 也都設計的小巧完善
例如: Form Plugin、jQuery Corner Demo


css-template-layout
用很酷炫的方法排版(排版方式: http://a.deveria.com/csstpl/)，不曉得實際應用起來怎樣

UI.Layout

簡易方便的layout


jQSlickWrap

可讓圖片貼齊文字


Equal Heights

讓元素同高

以上有部分參考 http://www.chinahtml.com/1006/127570360318874.html



Flip!

Quicksand

ImageFlow

Slideout Tips

AviaSlider

以上部分參考: http://www.chinahtml.com/1007/128011448019434.html



FontEffect

fancybox

tiptip

[C#] json

在玩 plurk api 看到一個東西，覺得蠻好用的

以後應該有機會用到，先記錄一下

Newtonsoft.Json

http://json.codeplex.com/

http://james.newtonking.com/pages/json-net.aspx
http://www.cnblogs.com/feishan/archive/2008/06/18/1224463.html

[Android] 在 Ubuntu 上用 LG P500 實機開發除錯

本文參考 Android Development with VirtualBox and the LG P500 phone

這邊簡單翻譯並紀錄一下自己的心得

#設定USB驅動為0666(允許使用者 讀/寫/存取)
$ sudo gedit /etc/udev/rules.d/51-android.rules

#加入以下這句 (原本裡面應該是空白的)
#若是其他廠牌的手機，則依廠牌代碼修改 ATTR{idVendor}
SUBSYSTEM=="usb", ATTR{idVendor}=="1004", MODE="0666"

#改變檔案權限
$ sudo chmod a+r /etc/udev/rules.d/51-android.rules
$ sudo udevadm control --reload-rules

#接著用USB連接電腦與手機，並試試 lsusb
$ lsusb

#會列出usb連接的設備，理論上其中會出現類似以下的東西
Bus 002 Device 004: ID 1004:618e LG Electronics, Inc.

#這時用 adb devices 檢視
#若沒有 adb 這個命令的話，請將 android-sdk 內的 platform-tools 加入環境變數
$ adb devices

#如果出現以下訊息，表示前面的設定USB驅動設定有誤
List of devices attached
???????????? no permissions

#正確的話應該會出現
* daemon not running. starting it now on port 5037 *
* daemon started successfully *
List of devices attached
80A354043041595986 device

#設定手機
在手機中選 設定->應用程式->開發
把 USB偵錯、保持清醒、允許模擬位置勾起來

#設定Eclipse
Debug->Debug Configuratioins->Target 選擇 Manual

OK! 大功告成
現在Debug的時候就可以選手機啦~

Wireshark不能執行

http://chunchaichang.blogspot.com/2010/03/sudo-non-root-wireshark.html

無線網路無驅動

至 系統 -> 管理 -> 額外的驅動程式 安裝驅動即可
紀錄一下

ibus 新酷音的 bug 修正

http://max-linux-space.blogspot.com/2010/12/ibus-chewing-bug.html

1/31補記 ：bug似乎還是在的樣子...

安裝 Macbuntu 需要修改的一些問題

http://www.linuxidc.com/Linux/2010-11/30122.htm

wubi 下改變 swap

1 2 3 4 5 6 7

cd /host/ubuntu/disks/ sudo swapoff swap.disk sudo rm swap.disk sudo dd if=/dev/zero of=swap.disk bs=1M count=2100 (2G) sudo mkswap -f swap.disk sudo swapon /host/ubuntu/disks/swap.disk

dd - convert and copy a file
選項與參數：
if ：input file
of ：output file
bs ：一個 block 的大小
count：多少個 bs


參考：
http://forum.ubuntu.org.cn/viewtopic.php?f=159&t=289431&p=2042190
http://linux.vbird.org/linux_basic/0240tarcompress.php#dd

[作品] 新注音解碼器

考完期末考忽然不知道要幹嘛了

閒閒沒事逛噗之際，突然發現了某噗長這樣... (為保護當事人，名字以馬賽克處理XD)
有圖有真相，請看：

疑...是不是有某噗怪怪的阿!?























ji3hl3su3a8 2k7e04

這啥鬼東西呀?
我內心第一個反應就是，該不會是原噗注音沒切換到吧 囧


而在差不多的時間，室友也跟我說了一些跟這個有關係的話(雖然我忘記說了什麼了XD)
總之結果就是，突然覺得做個轉碼器似乎是件好玩的事
手癢又剛好閒閒的，就做了可以把新注音亂碼轉中文的這個小東西的測試版(但是應該不會有正式版)

下載:


用法就是
1. 把要轉的文字貼上文字框按設定
2. 接著開啟隨便一個可以輸入中文(新注音)的程式 (EX: 記事本 or 網址列) 並切換到新注音
3. 按Ctrl + W

然後你就可以看到他開始啪啪啪的打字，打出那段亂碼的新注音輸入(不過當然不會選字)

所以那段文字到底是什麼咧....




自己試試吧XDD

另外再附一句供大家測試 「8 fu0 cl329 cl3dk394」




最後還是要說一下，本篇言論不代表本人立場，一切都是那噗的原噗所說((誤
(這樣會不會被打XD)


Source code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Gui, Add, Edit, vCode x22 y40 w430 h200 , Gui, Add, Text, x22 y20 w110 h20 , 輸入原始字串： Gui, Add, Button, x192 y250 w100 h30 Default, 設定 ; Generated using SmartGUI Creator 4.0 Gui, Show, x423 y257 h296 w480, 新注音解碼器 Return Button設定: Gui, Submit, NoHide Gui, Minimize Return ^W:: send %Code% Return GuiClose: ExitApp

歡迎任意轉載使用