[.Note]jquery動態調整欄寬&限制checkbox選取

幾個專案上遇到的小需求,
皆用JQuery來解決,在這裡記錄一下解法

1.動態調整欄寬 :

有一個table,他的第一個欄位長度是固定的,後面的欄位要有相等的寬度,
但是後面的欄位數目是動態產生,欄位的名稱長度也不固定,如果欄位過長則必須要換行

一開始是用%數的方法來指定欄寬長度,但是這個方法並不能夠有效的在所有瀏覽器上運行
後來使用jquery來動態調整欄寬 : 先等table產生,再計算出後面欄位的平均寬度,並將儲存格寬度調整為平均寬度:

$('.sort').each(function() {
    var sum = 0;
    //取得所有要調整的欄寬
    var cells = $(this).find('.sort-item');
    //統計總寬度
    cells.each(function() {
        sum += $(this).width();
    });
    //設定平均欄寬 
    var cellWidth = sum / cells.length;
    cells.each(function() {
        $(this).width(cellWidth);
    });
});

2.限制checkbox選取

有一個多選的CheckboxList,需要限制最大的選取數量
如果超過則不能選擇:

//傳入CheckboxList Container的ID
bindMultiSelectLimit = function(id,limit) {
    $('#' + id + ' input:checkbox').click(function() {
        //使用Jquery selector直接找出所有已選之Checkbox
        if ($('#' + id + ' input:checked').length > limit) {
            return false;
        }
    });
};

3.限制排序問題重覆選取

有一個問卷題型叫排序題,結構上是由許多RadioButtonGroup所構成,
讓使用者能排列喜好選項的順序 : (ex, 有三個選項, 可以選擇 3,2,1 或 1,2,3的排序 )
但使用者希望能夠有防呆機制,讓已經於其他選項選過的排序不能再選第二次
(ex:三個選項的排序可為 1,2,3. 3,2,1 . 但不可為 2,2,1 )
後來選擇了一個比較簡單的作法:當排序被選取時,清空其他有同樣排序值的RadioButton

//傳入ContainerID
bindSortRules = function(id) {
    $('#' + id + ' input').click(function() {
    //設定每個排序RadioButton有同樣的value,將其他有相同value的值都設為false
    $('#' + id + ' input[value=' + $(this).val() + ']').attr('checked', false);
        //設定目前選擇的值
        $(this).attr('checked', true);
    });
}

以上的需求如果使用Javascript不知道要做多久...
所以說JQuery真的是能夠有效增加前端生產力的一個好框架啊,
只要有用到Web的開發者真的都需要接觸一下

[soapUI]如何測試你的WebService

當我們開發WebService時,有一個問題就是我們要如何去測試WebService是否能成功的被呼叫，並且如何去建立測試案例來確認讓服務可以工作。

soapUI提供了完整的WebService相關測試功能以及介面,讓開發與測試WebService變得更容易
包括了呼叫WebService，建立測試案例, LoadTest ,建立Mock Service讓程式呼叫等等

在使用SOAPUI之前，須先對WebService的一些基本架構有些了解 :

WebService透過了WSDL (Web Service Definition Language)定義服務提供的介面，並經由架構在Http上的SOAP(Simple Object Access Protocal)，來傳輸資料，所以在使用WebService之前，須先從url獲得服務定義的wsdl檔，再以SOAP呼叫服務，獲得回傳結果。

0.安裝soapUI

從http://www.soapui.org/
下載安裝檔(這裡是使用 soapui-x32-3_5_1.exe , win32 installer)

1.建立Web Service Project

File => New soapUI Project


選擇專案名稱以及WebService之wsdl定義檔，建立project。

2.呼叫WebService

匯入wsdl後,專案底下會顯示所有可以呼叫的operation



開啟sample request或按右鍵新增Request，進入Request editor



於問號處填入要傳入WebService的參數,並按左上角的箭頭執行呼叫，並取得回傳訊息，這樣就完成WebService的呼叫了。

3.建立測試

建立TestCase:
於Request處按右鍵,選擇Add to Testcase或於專案建立新的TestSuite

設定用來測試的參數


設定Assertion:
定義在什麼樣的情況下測試算是成功:
點選Request Editor的Assertion


選擇加入Assertion，設定Assertion的種類，這裡選擇Contains，會偵測回傳結果中是否包含指定的字串


測試:
按左上角執行測試，可以點選整個TestSuite，執行所有的TestCase並取得結果

建立連續的測試案例

在有些情況下，會需要測試一連串的WebService步驟，並利用之前取得的結果作為下一個參數，在這裏我們可以利用TestCase的Property Transfer來移轉結果作為下一個Request的參數。

1.於TestCase Options勾選Maintain HTTP session

2.於TestCase加入Property Transfer步驟

3.可以用Xpath的方式取得結果內的參數,將其移轉到下一個Request

(如果回傳值為xml字串的話，可以先將結果設為property，再用Xpath把需要的參數轉移到其他Request)

4.Run Testcase

參考資料:

如何建立一個Test Project以及測試

SOAPUI入門

[Continuous Integration]使用CruiseControl.NET實現持續整合

Continuous Integration,CI,中文稱為持續整合
在Martin Flower的網站有著定義如下:
http://martinfowler.com/articles/continuousIntegration.html

Continuous Integration is a software development practice where members of a team integrate their work frequently,usually each person integrates at least daily - leading to multiple integrations per day. Each integration is verified by an automated build (including test) to detect integration errors as quickly as possible.Many teams find that this approach leads to significantly reduced integration problems and allows a team to develop cohesive
software more rapidly.

持續整合是一個軟體開發的實踐,讓開發團隊裡的每個成員頻繁的整合他們的工作,使每天都會有許多次的整合.
每次的整合都都由一台自動建置伺服器來驗證以及執行測試,來盡快的偵測到每次的整合錯誤.
許多團隊發現到這個方法能夠有效的減少整合的問題,並且讓團隊能夠更密切的合作並快速開發軟體.

JosephJ也有一篇很好的介紹文章:
http://www.josephj.com/entry.php?id=251

為什麼要持續整合呢?

每次有人commit code,功能作好了要佈署給使用者或Tester測試,
程式碼要執行測試與分析
要產生程式碼文件等等的時候
我們都是靠人工來執行整合的
每次都要把code checkout下來整合,執行一堆事情
更慘的是往往有人commit上了錯誤的程式碼,或漏掉一些元件
讓其他人update之後程式就不能跑了...然後花上時間去解決這些build problem
然後生命就浪費在這些無意義的事情上面

CI的意義就是利用srcipt的方式把這些工作整合起來
然後放在一個server上執行
只要有固定的script,這個整合步驟的執行頻率就可以提升到最多
可以每次有人commit就執行一次script,然後透過server,將產生的報告顯示在網頁上,或是以email的方式寄給大家,
最後自動將東西佈署到測試伺服器上
或是打包好可以使用,安裝

持續整合的例子 : Google Chrome 的Chromium BuildBot WaterFall
透過buildbot 執行多伺服器的Master-slave的持續整合架構
http://sites.google.com/a/chromium.org/dev/developers/testing/chromium-build-infrastructure/tour-of-the-chromium-buildbot

CruiseControl.NET

CruiseControl.NET是.NET平台一個open source的CI Server,
雖然在設定檔方面比較難以上手,需要用xml調整,
但是卻是適合沒錢和觀望的人嘗試CI的輕量級解決方案
Team City應該是比較好的選擇,只是要花錢
TFS則是很強大,和專案管理完全整合的重量級解決方案,不過要花錢
而且會與source control和其他MS的東西綁死

接下來會說明如何使用CCNET來持續整合一個簡單的專案 :
網路上也有很多說明文章:
http://omaralzabir.com/asp_net_website_continuous_integration_deployment_using_cruisecontrol_net__subversion__msbuild_and_robocopy/
這裡將會使用SVN,msbuild,mstest,msdeploy來作為持續建置的工具

1.安裝CCNet:

從SourceForge下載CCNET:http://sourceforge.net/projects/ccnet/ 並安裝

安裝好了之後在安裝目錄下(C:\Program Files\CruiseControl.NET\server)
會有ccnet.config檔案
這是設定所有持續整合工作的主要設定檔

於ccnet.config加入一個專案與工作:

    
        Hello CCNet
        
            
                c:\projects\Hello.cmd
            
        
    

建立c:\projects\Hello.cmd

echo 'Hello CCNet!!'

然後執行CCNet.exe開始整合
連到http://localhost/ccnet, 可以從DashBoard看到專案建置的狀況,
並可以點選forcebuild來執行工作,從buildlog看到執行訊息

2.設定ccnet.config

config檔的格式說明:http://confluence.public.thoughtworks.org/display/CCNET/Configuring+the+Server

設定專案:

    CITestProject
    c:\projects\CITestProject
    c:\projects\CITestProject\Log

workingDirectory:專案的所在目錄
artifactDirectory:儲存專案建置的Log目錄

之後所有的tag都是放在區塊內

設定Repository:

這裡使用的是SVN,現在也有對應git:

    https://@SVNHost/CITestProject/trunk/
    c:\projects\CITestProject
    BuildMaster
    ********
    36000000
    false
    Always

設定url,使用者名稱與密碼,要checkout的目錄等等,建置伺服器上要安裝svn
tips : 如果有裝Cygwin, commend line的svn 版本可能會是舊版,要先確認版本: svn --version
如果有憑證的話也要先手動接收一次,紀錄憑證訊息

設定trigger:

trigger是指在什麼時候執行整合,有分固定時間執行或定期檢查Source有沒有更改兩種Trigger
這裡設定了檢查頻率為60秒,如果發現SVN上有變更就會update並執行整合

設定build task:

    
    
        C:\Windows\Microsoft.NET\Framework\v3.5\MSBuild.exe
        C:\projects\CITestProject
        CITestProject.sln
        Clean;Build
        300
        C:\Program Files\CruiseControl.NET\server\ThoughtWorks.CruiseControl.MsBuild.dll
        

artifactcleanup:清除專案建置的log

msbuild:
這裡使用visual studio的msbuild建置專案,msbuild的位置為
C:\Windows\Microsoft.NET\Framework\v3.5\MSBuild.exe
如使用.Net 4.0則要使用
C:\Windows\Microsoft.NET\Framework\v4.0\MSBuild.exe
並指定專案的.sln定義檔以執行建置

設定publishers: 如何以email或dashboard發佈專案結果

        
        
        
            
        
        
        
            
                Failed
                Fixed
            
        
        

        
            Failed
            Fixed
        

        
            xsl\header.xsl
            xsl\compile.xsl
            xsl\unittests.xsl
            xsl\modifications.xsl
        
    

email:設定寄信的host
users:設定接收email的使用者
groups:設定接受通知的群組與原則:這裡設定只有在build failed與fixed才會收到通知
modifierNotificationTypes: commit的人在什麼狀況下會收到的email訊息:設定為failed與fixed
xslFiles:email中的訊息會由buildlog + .xsl轉換而來,這裡設定email buildreport要包含的訊息

3.Test and Deploy

以下為我用到的其他整合tasks,放在標籤下
設定Test會讓每次的Build收到測試案例的檢核,如果有TestCase失敗,build也會定義為失敗
deploy則是放在最後一個task,讓每個通過testcase檢核的commit會即時deploy到伺服器上

Mstest:

        deleteTestResult.bat
        C:\projects\ESurvey
        
        300


        C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\mstest.exe
        C:\projects\ESurvey
        /testcontainer:CITestProject.Test\bin\Debug\CITestProject.Test.dll 
     /runconfig:LocalTestRun.testrunconfig 
     /resultsfile:testResults.trx
        300



    
       
           testResults.trx
       
    
    

deleteTestResult.bat:
del testResults.trx

mstest必須要在build server安裝Visual Studio才會有
要指定測試專案中的\bin\debug\@TestProjectName.dll 執行
第一個task是為了刪除mstest的記錄檔testResults.trx而執行的script,不然mstest會告訴你因為已經有了log檔而無法測試
一般mstest的記錄檔名稱是自動產生,但這裡因為要將檔案merge到buildReport所以要指定檔名
詳細說明 : http://blogs.blackmarble.co.uk/blogs/bm-bloggers/archive/2006/06/14/5255.aspx

RoboCopy & msdeploy:

在區域網路的其他機器進行WebApp的deploy時,可以使用robocopy與檔案分享來deploy:

 
    robocopy.exe
    C:\Windows\System32
    c:\projects\CITestProject\Web \\@DeployServerName\CITestProject /XD .svn /E /NDL /NC /NP /XO

或是使用msdeploy來佈署: http://www.iis.net/download/webdeploy

    msdeploy.exe
    C:\Program Files\IIS\Microsoft Web Deploy
    -verb:sync -source:contentPath="c:\projects\CITestProject\Web"
-dest:contentPath="C:\project\CITestProject\Web",computername=@DeployServerName,username=administrator,password=******* 
-skip:objectName=dirPath,absolutePath=.*\.svn
-skip:objectName=FilePath,absolutePath=.*\web.config

在確定整合工作沒有問題後,可以進入控制台=>服務 ,設定ccnet成為自動開啟的系統服務
於client端可以安裝CCTray,會於工作列新增一個小圖示,並隨時監控CI Server上的狀況