簡睿隨筆 《科技篇》

沒想到看來毫不起眼的速查表（Cheat Sheet）也能做到如此專業與美觀！DZone Network推出了REFCARDZ網站，由多名書籍作 者操刀，彙集了多種電腦資訊領域的速查表，雖說是為了推銷網站上的電腦書籍（Manning Publications的in Action系列），但仍有值得參考與可觀之處。以下列出幾個我有興趣的速查表：

• IntelliJ IDEA：有7頁
• jQuery Selectors：有6頁
• Design Patterns
• NetBeans IDE 6.1 Java Editor
• Windows PowerShell
• Spring configuration
• Getting Started with Ajax
• ．．．
• 似乎是每周推出一個表，Core CSS 2排到9月22日了

取得的方法很簡單：到Dzone註冊一下， 再登入就能點選要下載的速查表，DZone會把速查表PDF檔寄到你填的信箱裡。

##

我使用的主力開發語言是Java，使用得最久的IDE就是IntelliJ IDEA了，一直以為有關IDEA的資訊都只有英文版，沒想到昨天為了查JSP Debug的問題而發現到了一個的IntelliJ IDEA中文愛好者的簡體網站，這個網站以中文介紹了許多與IDEA相關的文章，也推薦了不少方便的Plugins，如果你也有使用IDEA，這個網站值得參訪，不過，要耐心點，點線速度有些慢。

##

今天看到的幾篇值得注意的Subversion相關文章，先留個紀錄：

• Subversion branching in my experience

• Subversion Cheat Sheet

• Learning how to resolve conflicts within Subversion (SVN) using TortoiseSVN

• How To Upgrade WordPress Using Subversion

• Introduction to Subversion for .NET Developers

##

對於每一個開發團隊而言，正確且順暢的溝通協調運作機制是不可或缺的，少了這些協同機制，就像在交響樂團裡的走調雜音，或像團體裡我行我素的獨行俠，都會 使團隊戰力大打折扣，畢竟現今的軟體開發已經複雜到無法依賴單打獨鬥的曠世天才而能完成的。只要體認到開發不能只依靠少數人、必須群策群力、互相配合、遵 循共同的流程規定，那麼像Tracking system、Version control system等就必然變成開發人員的好朋友，無法離開它們而能順利運作的了。

然而現實的狀況是：功能強大且完整的協同軟體不是每天在生存線上掙扎的台灣小軟體公司能用得起的，導入與使用費用之高都令人咋舌，因而導入Open source的工具再搭配部份自訂流程就變成不得不的選擇。我們最早的版本控制工具是微軟的Visual SourceSafe，但當開發團隊分散兩地時，Visual SourceSafe就陣亡了，雖然有第三方廠商的Source OffSite讓Visual SourceSafe能在Internet上使用，但所費不貲，最終才使用了CVS+WinCVS的組合，在CVS上我們開發了重要的產品和許多個大小專案，期間也是跌跌撞撞，歷經許多錯誤嘗試。

接著是Bug/Issue tracking system的導入，用以補足問題的自動追蹤功能與任務的線上分派。最早使用的是Track+，選用它的原因是它是以Java撰寫的，而Java正是我們的主力開發語言且2.X版時能下載程式碼，因而給了我們自行修改的機會（現在3.x版已經沒辦法修改原始碼了），再者Track+具備國際化(I18N)的能力，約在2003年我在珠海趁晚上和假日完成了繁體中文語言包，再經幾個小專案的測試後推動到所有專案。

CVS用了幾年後，因為Subversion提供更快速的存取與相容CVS的操作方式，在這兩三年裡就逐步由CVS+WinCVS轉移到Subversion+TortoiseSVN，轉移的策略是舊的專案或較少變動的專案就保留在CVS上，新的專案與更新頻繁的專案就移到Subversion上。而2007年又開始試用Trac，嘗試把Wiki、Tracking、Subversion整合在一起，以下是我們使用Trac的幾個試驗：

• 在Wiki首頁放置一個公佈欄：PM、SA要公佈的開發事項以日期排序，以通知專案成員。以前大多是用E-Mail聯絡通知，但新成員是沒辦法看到的，全部放在Wiki上就不怕有疏漏的狀況。
• 任務分派用Ticket發送：SA透過Trac分派給PG(Programmer)要撰寫的作業，開始日期與期望完成日期皆有紀錄，PG的作業狀況與績效都能追蹤考核。
• 透過異動歷程了解開發活動：每天PM透過異動歷程能大致了解PG的進度與程式撰寫狀況。
• 我們把Trac的Component存模組代碼，再增加模組報表，如此便能輕易地知道各個模組作業的完成進度。

Subversion 則是所有文件與程式碼的統一窗口，所有專案成員皆以Subversion上的檔案為準，這樣以前用Mail寄來寄去，或透過File Server取檔導致版本不一致的問題就消弭於無形了。一般專案開發組織裡，我們尚有測試組的配置，當PG經由Trac通知測試人員開始測試時，測試人員 由Subversion取出程式，在他的本地端編譯、測試，以確保測試的版本是正確、一致的，若有差錯也能立即被發現。

這裡再分享幾個推動上的小經驗。

• 中文化是必須的：要能順利推動某個工具，一定要有中文介面，缺少中文介面一定都會大打折扣，且會給成員推拖的藉口。尤其是大陸同事，看到英文心就亂一半，要他們用非中文工具，簡直是比登天還難。
• 要循序漸進、不可躁進：推行此類會影響作業流程的工具時，切忌一開始就全面推動，若不先經小範圍測試再逐步修改調整，可能對團隊帶來翻天覆地的混亂感受，從而增加推行失敗的機率。
• 主管要堅持，成員要配合：導入初期的不適應，勢必引起反彈，但只要是對的政策就應該堅持，主管、成員都要敞開心胸，針對扞格不合之處做調整與修正，最終才能磨合成適合環境的較理想運作模式。

事 實上，Tracking system與Version control system僅是專案運作的基本功而已，但這些基礎都無法運作順利，遑論其他更因人而異的管理機制了。從以上的推動描述可以看出我們對於推動新的流程與控 管機制是抱持慎重其事的心態，因為一個機制的變更影響到的是許多聰明、又有想法的開發人員，最終還是要讓這些機制內化成每天的標準動作，而這樣的流程也才 有執行的必要。

以上小小經驗與大家分享。

##

初學Java時因不諳ClassPath的觀念與用法，經常會因為找不到jar檔而出現ClassNotFoundException或NoClassDefFoundError的例外狀況。LibraryFinder就是一個讓我們指定特定目錄以搜尋類別是置放在那個jar檔裡的工具。

使用範例

  java -jar LibraryFinderv1.2.1.jar c:\jdk1.6\lib com.sun.*

• 先指定要找那個資料夾，再指定要找那些類別
• 類別可以用星號

下載

• 請由這裡下載
• 在這個網站裡除了項說明外，也有示範的影像可以觀看
• 這個小工具有提供IntelliJ IDEA的插件，Eclipse與NetBeans的版本則尚在準備開發階段

雖然腦袋裡被飛天遁地的光明界和黑暗界的超凡人佔據著，還是在《幽巡了幾個詞 彙，因其趣味特予誌之。

• 溫徹斯特硬碟：原本以為是因地名來命名的，結果在譯註裡看到說明。以下這段文字和Wikipedia裡的說明幾乎一模一樣，看來本書譯者太偷懶 了，要整段抄也不多加調整。或許Wikipedia已經成了翻譯者們重要的參考依據了：

《幽巡者》77頁譯註：
一九七三年IBM 3340硬碟問世，綽號「溫徹斯特」，源自它有兩個30MB的儲存量，恰是當時出名的「溫徹斯特來福槍」的口徑和填彈量。

Wikipedia：
1973年IBM 3340問世，他擁有「溫徹斯特」這個綽號，來源於他兩個30MB的儲存單元，恰是當時出名的「溫徹斯特來福槍」的口徑和填彈量。

• Cygnus的起源：Cygnus的創始人之一的Michael Tiemann為了推廣自由軟體之父史托曼的GNU軟體，準備成立公司，有網友從字典裡找出含有GNU的單 字，Cygnus是最沒有猥褻含意的一個，因此Cygnus 就問市了。
  
• SourceForge網站的來由：Internet上有一個名 為「鮮肉」(Fresh Meat)的網站，專門發佈Open source軟體的消息，VA Research購入FreshMeat的 母公司後又設了一個「冷藏」(Cold Storage)網站，用來存放「鮮肉」發佈新聞裡的軟體；後來VA Research合併了「鮮肉」和「冷藏」，又加上論壇、FTP等功能後，形成新的「原始碼熔爐」(Source Forge)，於2001年1月4日起免費服務 Open source的開發專案。老外真是有趣，幾個名詞生動活潑，又息息相關 :-)
  
• Linux裡的「美酒」(Wine) 是在Linux裡模擬Windows環境的軟體；Wine有兩個涵義：
  1. WINdows Emulator
  2. Wine Is Not Emulator

• Python原因是來自英國廣播公司連續劇《Python的空中飛人馬戲團》，這齣劇是Python作者Guido Rossum最喜歡的電視劇

學習Java時，最多人提及的整合開發環境非Eclipse莫屬，但對於初學者而言，從安裝、設定、學習到能發揮生產力，是一段漫長的摸索與錯誤嘗試的艱苦過程。EasyEclipse的出現簡化了這整個辛苦的程序。

EasyEclipse依開發類型而分門別類的分成了Expert、Desktop、Server、Mobile等不同的安裝版本。

下載：http://www.easyeclipse.org/site/distributions/index.html

正規運算式(Regular Expression)對於動態腳本的程式撰寫用處頗多，但我卻沒有很仔細的學習，總是要用到時才翻書查閱、尋找類似的Pattern再套用。今天找了些 輔助工具，希望能透過這些工具讓自己對於正規運算式能瞭解得更透徹，在使用上能更得心應手。

工 具名稱	下 載	試 用狀況
The Regex Coach 0.9	http://weitz.de/files/regex-coach.exe	功能齊 全，但執行時效能很差
reWork: a regular expression workbench	http://osteele.com/tools/rework/	網站。 我的首選
Expresso 2.1	http://www.ultrapico.com/Expresso.htm	運行 在.NET上。但跑一個運算式時無法通過剖析，但以上兩個卻可以

##
...繼續閱讀

為 了要讓網頁的頁面與資料傳遞能夠做到更理想，開始研究AJAX，試看看是否能透過AJAX來解決部份以GET方式而受到的限制能有所突破。以下將測試環境 與程式按步就班地呈現出來，測試的過程裡，特別針對中文的傳入與傳回做了較詳盡的反覆測試。

測試環境：

• 作業系統：Windows 2003 Server
• 瀏覽器：IE 6.0.3790.0、FireFox 2.0.0.2
• Application Server：Resin 2.12、Resin 3.0.21

首先撰寫啟始的前端網頁文件，命名為 ajax.html， 網頁裡放三個控制項，一個用來輸入文字的TEXT1、 觸發AJAX執行的按鈕btnOK1和 接收Server回應的文字框RESULT， 呈現頁面如圖2。

<form id="idForm">   <input type="text" name="TEXT1" id="TEXT1">   <input type="button" name="btnOK1" id="btnOK1" value=" TEST 1 ">   <textarea name="RESULT" id="RESULT" rows=10 cols=50></textarea> </form>

圖2

把按鈕RESULT的 onclick 事件放在window.onload裡： 

window.onload = function() {     document.getElementById("btnOK1").onclick = function() {       request = httpRequest();       document.getElementById("RESULT").innerHTML = "";       request.open("POST", "ajax2.jsp", true);       request.onreadystatechange = handleResponse;       request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");       request.send("TEXT1=" + document.getElementById("TEXT1").value +                    "&TEXT2=中文傳到Server");     }  //~ btnOK1   } //~ window.onload

幾個說明如下：

1. XMLHttpRequest物件建立後，變數名稱是request
2. 用了避免傳遞的參數有字數長度的限制，因此用POST的方式傳參數；使用POST傳遞參數時，必須有 request.setRequestHeader，此處必須特別注意的是：request.setRequestHeader 必須寫在request.open後面，否則 IE 會有"錯誤: 無法指出的錯誤"，而FireFox會有"uncaught exception"錯誤
3. Query String會以問號開頭，而使用request.send傳送時不能用問號開頭！
4. Server的處理程式檔名為 ajax2.jsp
5. Server處理完畢後會被執行的函數是 handleResponse，把接收回的字串寫入RESULT文字框

Server上的 ajax2.jsp 主要邏輯如下：

<%@ page contentType="text/html;charset=UTF-8"%> <%   //response.setContentType("text/html;charset=UTF-8");   //response.setHeader("Charset", "Big5");   request.setCharacterEncoding("UTF-8");   out.println("由Server輸出回網頁.....");   String _sText1 = request.getParameter("TEXT1");   out.println("TEXT1=" + _sText1); %>

重點說明：

1. XMLHttpRequest傳出與接收的編碼都是UTF-8， 因此JSP的反應編碼(第一行)與接收傳入參數的request(第5行)都使用UTF-8，如此接進來的參數與傳回的輸出，才能正確的被 XMLHttpRequest 處理
2. 有的網站會把request參數用ISO8859-1再編碼成UTF-8，或用 response.setCharacterEncoding設定UTF-8，其實只要用說明1的方法就能都解決了；另外，若使用的 Application Server使用的是JSDK 2.3的話，是無法使用response.setCharacterEncoding的，這個method是JSDK 2.4後才增加的

再來把 ajax1.html  的Server換用Servlet來處理(xxx換成自己的Webapp名稱)：

request.open("POST", "/xxx/servlet/ajax_Servlet2", true);

ajax_Server2的主要邏輯是：

protected void doPost(HttpServletRequest request, HttpServletResponse response)                           throws ServletException, IOException {     response.setContentType("text/html; charset=UTF-8");     request.setCharacterEncoding("UTF-8");     PrintWriter out = response.getWriter();     String _sText1 = request.getParameter("TEXT1");     String _sText2 = request.getParameter("TEXT2");     //_sTEXT1 = new String(_sTEXT1.geresponse.setCharacterEncodingtBytes("ISO-8859-1"), "UTF-8");     StringBuffer buf = new StringBuffer();     buf.append("訊息1=" + _sText1);     buf.append("訊息2=" + _sText2);     out.println(buf.toString());     out.close();   }

response和request都使用UTF-8就 對了。

完整的 ajax1.html列表在下：
<html> <body> <form id="idForm">   <input type="text" name="TEXT1" id="TEXT1">   <input type="button" name="btnOK1" id="btnOK1" value=" TEST 1 ">   <textarea name="RESULT" id="RESULT" rows=10 cols=50></textarea> </form> <span id='spaParam'></span> </body> </html> <script>   var request;   function httpRequest() {     var req;     if (window.XMLHttpRequest) {  // Mozilla-based browsers       req = new XMLHttpRequest();     } else if (window.ActiveXObject) {  // IE 5, IE 6       req = new ActiveXObject("Msxml2.XMLHTTP");       if (!req) {         req = new ActiveXObject("Microsoft.XMLHTTP");       }     }     return req;   } //~ httpRequest   function handleResponse() {     if (request.readyState == 4) {       if (request.status == 200) {         //!! innerText在FF裡竟然不行!         document.getElementById("RESULT").innerHTML = request.responseText;       } else {         alert("Error: " + request.status + " " + request.statusText);       }     }   } //~ handleResponse   window.onload = function() {     document.getElementById("btnOK1").onclick = function() {       request = httpRequest();       document.getElementById("RESULT").innertext = "";       request.open("POST", "/mis/servlet/ajax_Servlet2", true);       //request.open("POST", "ajax2.jsp", true);       request.onreadystatechange = handleResponse;       request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");       request.send("TEXT1=" + document.getElementById("TEXT1").value +                    "&TEXT2=中文傳到Server");     }  //~ btnOK1   } //~ window.onload </script>
##

...繼續閱讀