Likol Lee

Project Management System - 專案管理系統 (五) - CodeReview 與 Subversion

2012-01-09T14:21:00.006+08:00

在先前的Project Management System - 專案管理系統 (三) - 整合Subversion中,我透過了AnkhSVN與Subversion來達到Check-In程式碼時,需要選取相對應的工作項目,以利程式碼與工作項目的追蹤.

這時我又想起了另外的一個功能"Code Review",在目前正式發表的Visual Studio中並沒有內建此項功能,不過就我所知,在下一版中就會有這項功能了.一方面要跟現在開發的Project Management System整合的話,只有重頭進行開發了.

在開始介紹前,目前的功能將會檢查幾項條件
[*] 開啟的方案必須已經Check-In到Source Control中(Subversion)
[*] 方案必須已經有指定Issue Tracker Setup(AnkhSVN設定)

另外,存取資料的介面都是透過一個WCF的服務來進行處理.

1. 開啟方案後,先選取我們要建立CodeReview的程式碼,使用右鍵選擇"CodeReview -> Create Review Item".

2. 在跳出的視窗中填入相關資料,選擇Send就會建立該項目.

3. 完成後,在Visual Studio的View的選單中找到一個Code Review的項目並點選.

4. 在Code Review的視窗中有預設的兩個項目
[*] Solution: 目前開啟方案中的所有CodeReview項目
[*] Active Document: 目前編輯中檔案的CodeReview項目

5. 在Code Review視窗中使用滑鼠DoubleClick要檢視的項目,會自動將當時建立所標記的程式碼重新標示出來,另外會開啟一個"Code Review Properties"的視窗,裡面記錄著建立時的一些資訊.

6. 選擇"Code Review Properties"視窗中的第二個Icon(Comment)則可以針對該項目進行意見的回應.

7. 另外,如果在點選Code Review項目時,該文件還沒有被開啟,則會自動開啟該檔案.

Code Review項目是根據"檔案在Source Control的路徑"來進行對應,因此未來也可以與工作項目進行整合.

Project Management System - 專案管理系統 (四) - Subversion 與 MSBuild

2012-01-03T00:35:00.008+08:00

在上一篇Project Management System - 專案管理系統 (三) - 整合Subversion中,使用Subversion來做為Source Control的工具,如果要做到像TFS可以建立Build的定義,然後自動建置能有什麼樣的方式來達到?

經過一些搜尋和測試後,我採用了SharpSvn這個Library來進行程式碼的存取.

1. Build的定義設定

BuildFileName: 建置時的Visual Studio方案檔名稱
SubversionPath: 要從Subversion中取得的程式碼路徑(包含路徑以下全部)
OutputPath: 取出程式碼放置的路徑

另外,則為建置完成後的佈署動作
CopyOutput: 是否將建置完成的結果複製到指定路徑

DeployFeature: 用於整合先前所提到的佈署機制,可先參考以下介紹:
ASP.NET 程式佈署解決方案 - ASP.NET Deploy Solution
ASP.NET 程式佈署解決方案 - ASP.NET Deploy Solution (二)

為了可以整合此功能,我已經在ASP.NET Deploy Solution網站中,新增了一個WCF的一些功能,可以透過WCF直接上傳包裝好的檔案進行安裝.

選擇了DeployFeature的選項,可以填入上述的WCF Address,就可以在建置完成後直接進行自動佈署的作業.

2. 當按下Build時,會將正在進行編譯的設定進行鎖定.

3. 實際上進行處理Build動作的則為一個Windows Service,主要功能:
[*] 一個WCF服務,做為通知編譯的介面
[*] 從Subversion中取回相關的程式碼檔案
[*] MSBuild的執行

4. 當編譯完成後就可以看到編譯過程中的相關記錄

5. 相關輸出的檔案

6. 如1所提的DeployFeature功能,就會自動進行WebFeature的佈署

Project Management System - 專案管理系統 (三) - 整合Subversion

2011-12-08T16:45:00.008+08:00

在專案管理系統中已經定義了WorkItem(工作項目)的部份,但實際上更需要管理的是程式碼,而且必須將程式碼與工作項目有效的進行關連,這樣未來在維護上才能進行相關的追蹤,但該如何對應至原始碼管理系統呢?

在這裡我採用的是Subversion的原始碼管理,Server是使用CollabNet Subversion Edge,Client整合Visual Studio 2010則是用AnkhSVN,採用AnkhSVN的原因是他有提供Extension的介面來進行相關的擴充,也才能達到此文章要做的功能.

1. 加入專案到原始碼管理系統

2. 加入後就可以看到目前等待簽入的檔案清單

3. 這裡有一個關鍵的工作叫做"Pending Changes - Issues",目前仍是處於需要設定的狀態.

4. 選擇方案右鍵,可以看到"Issue Tracker Setup",這個部份就是這次用來擴充的功能

5. 在設定中先選擇自訂的Connector,接著輸入Service Address,連線後就可以選擇要關聯的專案

6. 完成後可以看到原本的Pending Changes - Issues,列出了剛剛選擇專案的工作項目.

7. 接下來,嘗試進行簽入,會跳出一個訊息說"簽入前,必須要先選擇工作項目",這個部份就是為了要讓簽入的程式碼與工作項目產生關聯所設定的限制.

8. 勾選任何一個工作項目進行簽入,完成後至專案系統的管理頁面,就可以查詢的到工作項目與原始碼簽入的相關記錄.

Project Management System - 專案管理系統 (二) - 階層檢視

2011-12-05T18:08:00.006+08:00

前言:
Project Management System - 專案管理系統

這個部份展示的是可以在一個畫面中,管理Feature,FeatureItem,WorkItem的項目.這樣一來可以很快的了解到目前專案執行的相關資訊,一方面也可以在這直接進行修改的動作.

Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure (四)

2011-12-05T13:29:00.006+08:00

前言:
Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure
Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure (二)
Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure (三)

這次一樣針對功能的部份進行改進,也因為功能變多了,所以重新的將UI進行一些歸納,讓操作上更便利.

1. 加入了一個Count Columns的設定,主要用來當需要利用目前Table的欄位去計算其他Table的資料列數使用.

2. 加入SELECT,Get,Delete相關SQL的操作功能設定

Get,Delete大致上與SELECT是一樣的,因此就不附上畫面

Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure (三)

2011-12-01T17:17:00.004+08:00

前言:
Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure
Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure (二)

在開發Project Management System - 專案管理系統發現了一個滿大的問題,也就是如果目前的Template中的欄位需要透過JOIN取得其他關連Table的欄位時,會無法達到這個功能,採用其他方案時則會花費較多的時間來達到,因此加入了相關的邏輯來處理.

1. 加入了一個Relation Columns的區塊,主要用來設定目前Table與關連Table的JOIN關係.

2. 加入或編輯的設定如下圖:

3. 完成後存檔,將會產生相關Model的Property,與SQL Script JOIN語法.

有鑒於可能會需要一次大量更新專案中的Template內容,一個ㄧ個去執行更新動作實在需要花費太多時間,因此在專案的右鍵選單中加入更新的選項,可以一次更新專案中所有DataTemplate的範本內容.

Project Management System - 專案管理系統

2011-11-29T16:31:00.010+08:00

由於未來可能會需要一個專案管理的系統,因此參考了TFS11的UI設計,寫了一個基本的管理系統,目前大都是資料的管理部份,還未有資料分析(專案進度,工作效率).以下是一些擷圖:

1. 專案清單

2. 專案基本資料

3. 專案首頁 - 基本資料,公告,事件,文件

4. 專案基本資料編輯

5. 專案公告編輯

6. 專案功能清單 - 功能代表此專案需製作哪些功能,左方是以分類方式顯示,主要內容則是以優先權的方式分類

7. 專案功能分類設定

8. 專案功能優先權設定

9. 專案功能基本資料 - 包含功能基本資料與功能項目管理

10. 專案功能基本資料編輯

11. 專案功能項目編輯

12. 專案工作項目清單 - 主要用於定義目前工作項目有哪些,也包含Bug+Issue

13. 專案工作項目分類設定

14. 專案工作項目狀態設定

15. 專案工作項目編輯

16. 專案行事曆 - 左邊可根據分類進行事件的篩選

17. 專案行事曆分類設定

18. 專案行事曆事件編輯

19. 專案文件清單

20. 專案文件上傳

21. 專案文件編輯

Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure (二)

2011-11-24T09:41:00.007+08:00

此篇為Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure的延伸,主要為處理Text Template的內容版本問題,讓開發人員可以更快速的更新範本的內容.

1. 在設定的介面點選Update的按鈕

2. 將會透過WCF的方式存取在DB中的DataTemplate的相關資訊,選擇後就會將相關的Text Template內容進行取代.

3. WCF存取的Service位址是存在Visual Studio "工具"->"選項"中.

4. 另外,也有一個Web的介面可以管理相關的DataTemplate資料.

ASP.NET 程式佈署解決方案 - ASP.NET Deploy Solution (二)

2011-11-09T09:25:00.005+08:00

先前已經有介紹過ASP.NET 程式佈署解決方案 - ASP.NET Deploy Solution的功能,後續在使用上也遇到了一些考量不周全的地方,因此又加了一些功能,另外,也強化了佈署管理上的機制.

1. 在佈署程式上可能會需要執行一些SQL相關的指令(例如:新增資料表或建立預儲程序),因此加入了相關設定.

2. 佈署管理上,加入了一個Web的管理介面,一方面會記錄目前佈署的相關資訊,也可以透過這個網站進行佈署.

3. 佈署機制如下:

3.1. 進到Install的頁面,選擇要佈署的壓縮檔案後,按下Install.

3.2. 如果佈署過程有發生錯誤,則會將錯誤相關的訊息顯示在畫面,如果成功則會導向至該功能的詳細頁面

4. 版本的判斷的機制大略如下:
[A] 如果有設定父功能(Parent),父功能需已佈署
[B] 新佈署版本必須大於或等於已經佈署版本
[C] 相同版本可以重新佈署,但必須包含相同內容
[D] 當佈署版本大於現有版本時,佈署版本內容必須包含現有版本內容

Visual Studio 2010 資料範本 - Data Template - Data Model & Store Procedure

2011-11-07T21:07:00.013+08:00

先前已經有介紹過一些關於Text Templdate的應用如下:
1. Visual Studio 2010 T4 Text Templates - 文字範本與程式碼產生
2. Visual Studio 2010 SqlExector - 快速執行.sql檔案
3. Visual Studio 2010 T4 Text Templates 與 SqlExector 整合

由於為了讓這個應用可以發揮更好的效果,也希望可以跟開發工具整合的比較完整,所以也採用了Visual Studio Editor的方式來處理,將資料的定義儲存在XML檔案中,並可以直接在Visual Studio中進行管理與設定.

1. 開啟一個ASP.NET專案,選擇新增一個項目,並選擇Visual C# -> Likol -> Data Template,名稱Product.datatemplate

2. 新增完成後會看到以下畫面,專案總管中的Product.datatemplate會包含了兩個Text Template的子項目
[A] Product.Data.tt - 產生DataModel的程式碼內容
[B] Product.SQL.tt - 產生對應的Store Procedure
在主視窗中就是資料來源的相關設定

3. 接下來,選取Import來匯入資料表的相關屬性,在跳出得視窗中選擇ConeectionName(來自於Web.Config)與Table進行匯入.

4. 匯入後可以看到在資料表中欄位的一些相關資訊.

5. 設定每個欄位的相關屬性
[A] DataType - 表示對應到.NET Framework中的型別
[B] Insert - 指定這個欄位是否為新增資料時的必要欄位
[C] Update - 指定這個欄位是否為更新資料時的必要欄位

6. 設定完成如下圖:

7. 儲存完成後,可以試著開啟產生的結果
[A] Product.Data.cs - 產生資料表對應的類別內容與方法(Create,Update,Delete,Get)

[B] Product.SQL.sql - 產生資料表異動所需的Store Procedure

8. 接下來就可以用由Product.Data.cs所產生的"Product"這個類別來進行資料表的操作.

Visual Studio 2010 程式碼協助工具 - Code Tool

2011-10-17T11:53:00.007+08:00

使用Visual Studio進行程式開發時,常常為了需要找到一段曾經寫過的程式碼或是共用的部份而需要翻遍整個專案,或在過去寫過的專案尋找,雖然Visual Studio有內建了Code Snippets的功能,不過我實在不常用它,而且似乎沒有一個快速分享給其他人的方式.

這個工具的主要目的就是可以在Visual Studio中快速插入常用的程式碼片段,也可以儲存正在開發檔案中的程式碼片段.資料的存取方式則是透過一個WCF的服務來進行Visual Studio與DB的溝通.這樣一來也可以讓一起開發的人員共用所有的程式碼片段內容.

1. 先選取要加入的程式碼片段,然後使用滑鼠右鍵選擇CodeTool->Save Code

2. 視窗可以看到已經將選擇的程式碼片段加入,填入程式碼片段名稱並選擇分類

3. 要加入程式碼片段只要在要填入的位置使用滑鼠右鍵選擇CodeTool->Insert Code

4. 在視窗左邊先選擇分類並展開,選取程式碼片段名稱就可以看到對應的程式碼片段內容

5. 點選Insert進行插入.

ASP.NET 程式佈署解決方案 - ASP.NET Deploy Solution

2011-10-07T02:31:00.008+08:00

現有的Visual Studio 2010已經整合了Web Deploy (Web Deployment Tool)工具,大體來說在佈署上解決了不少佈署上的困擾,不過總覺得每次都一大包的把所有東西重新佈署一次,實在是有點麻煩.

因此根據了一些簡單的需求,設計了一個可以將功能分散在不同壓縮檔的佈署方式,以下就介紹這個解決方案:

1. 假設現在要開發一個新的功能,新增一個專案選擇Visual C# -> Likol -> Web Feature,並命名為ProductFeature

此專案範本是由空的ASP.NET網站範本修改而來,並加入一個source.webfeature檔案與修改了建置專案的細節.

2. 我在專案中加入了一個Product的目錄,並新增了ListForm NewForm EditForm三個ASPX程式,也就是要用來進行佈署的程式.

3. 選擇source.webfeature並開啟檔案,即可看到佈署的設定界面.

上面的四個欄位就是佈署時的一些資訊,比較重要的是下面的兩個部份
I. Assemblies 代表所要包含的組件檔
II. Files 表示要加入的ASPX或是ASCX的檔案

4. 選擇Add Assembly,於跳出的視窗中選擇Output並確定.

這個動作將會在Assemblies加入一筆資料,並標示Type為Output,也就是會把這個專案編譯出來的組件(DLL)加入佈署中.

5. 另外,當然也可以額外指定其他的組件(DLL)檔案,加入佈署.

6. 選完組件後,就是透過Add File來選擇要加入的檔案,在選擇的視窗中僅可以選擇在專案中的檔案

如果檔案已經加入,則不會顯示出來

7. 設定完成後,直接執行Visual Studio的建置專案,建置完成後,就可以在專案的目錄中找到"_WebFeature"的目錄,裡面以GUID為檔名的檔案就是要進行佈署的檔案.

可以看到剛剛所選擇的檔案都有包含在內.

8. 在佈署的部份,目前是先用一個簡單的Web程式進行佈署,將上述產生的佈署檔案,透過一支ASPX上傳,就可以將相關組件與檔案佈署至Web Application中.

為了整個解決方案可以很容易並順暢,因此在與Visual Studio整合上花了不少時間,主要的部份也就是:

A. Visual Studio 2010 自訂編輯器 - Custom Editor
B. Visual Studio 2010 自訂建置工作項目 - Custom MSBuild Task

實做了這兩項功能,整個流程就大大的不一樣了.

Visual Studio 2010 自訂建置工作項目 - Custom MSBuild Task

2011-10-04T16:46:00.007+08:00

在Visual Studio中方案或是專案的編譯,其實是透過一個叫做MSBuild(Microsoft Build Engine)的平台來執行,它會根據在專案(.csproj)的XML描述來進行編譯的判斷與順序.

在MSBuild定義中是依靠許多已經內建的工作項目(Task)來進行處理,因此我們也可以透過撰寫Task的方式來達到我們想要的建置動作.

參考資料:
A. How to: Extend the Visual Studio Build Process
B. Task Writing

在這裡我想要達到的功能是:在專案建置完成後,會根據一個XML檔案內容,將指定的檔案壓縮到一個Zip中.

1. 建立BuildWebFeature的Task,它會讀取source.webfeature這個檔案,然後根據內容把相關的檔案加入一個用Guid為檔案名稱的Zip中.

2. 在C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v10.0\Likol\中,加入一個Likol.target,並加入要執行的MSBuild定義(部份如下),並將建置的Task Assembly檔案一併複製過來

3. 使用一般的文字編輯器開啟我們要加入建置動作的專案檔,並加入以下的內容

4. 完成後使用Visual Studio建置該專案,完成後就會產生一個Zip的壓縮檔.

Visual Studio 2010 自訂編輯器 - Custom Editor

2011-10-04T01:28:00.005+08:00

在Visual Studio中其實每一種副檔案都會對應到一個特定的編輯器,不同的編輯器又會有不同的檢視方式.例如Web Form就有設計與程式碼的兩種檢視方式,而XML編輯器就只有程式碼的檢視.

在Visual Studio SDK中,有一個非常不錯的範例.

Designer View Over XML Editor
範例所展示的功能是,當我們在進行XML檔案的編輯時,通常只能使用程式碼的檢視方式.

透過自訂編輯器,可以根據XML的格式來定義出UI進行編輯作業,一方面可以更容易進行XML的維護,一方面也可以有效的控制格式的正確性.

其實當安裝了Visual Studio 2010在進行Visual Studio Package的開發時,也有類似的編輯器功能.

在這篇文章中也使用相同的方式製做了一個編輯器,來進行XML檔案的維護界面.

稍微比較特別的是,透過這樣的編輯方式一樣會有編輯復原的功能可以使用.

ASP.NET 自訂控制項試用下載

2011-09-25T23:35:00.008+08:00

Likol.Web.v4.0.zip For ASP.NET 4.0

Likol.Web.v3.5.zip For ASP.NET 3.5

WebControls.css WebControls 樣式檔

壓縮檔內容說明:

1. Likol.Web.dll
　　控制項主要組件,可使用Visual Studio加入控制項至工具箱內

2. Likol.Design.Web.dll
　　控制項設計階段支援檔案

試用期限:2011-12-31

使用DateBox控制項時需搭配AJAX Control Toolkit

如果在使用上有任何問題或疑問,歡迎您直接與我聯繫 E-Mail: twlikol@msn.com

控制項範例與使用請參考以下連結的展示:

[ASP.NET 自訂控制項 - Live Demo]
http://www.aspcity.idv.tw/demo.aspx

[ASP.NET UI Sample Demo]
http://www.aspcity.idv.tw/sample.aspx

近期將會釋出ASP.NET 自訂控制項試用

2011-09-21T16:03:00.004+08:00

目前已經開始準備釋出控制項的相關作業!

控制項功能如下連結:

[ASP.NET 自訂控制項 - Live Demo]
http://www.aspcity.idv.tw/demo.aspx

[ASP.NET UI Sample Demo]
http://www.aspcity.idv.tw/sample.aspx

ASP.NET 自訂控制項 - DataFieldForm

2011-08-30T16:56:00.004+08:00

在ASP.NET 自訂控制項 - QueryFieldForm中已經有介紹過用定義的方式來產生一些基本的表單,並容易的取得相關參數來進行程式的處理.不過最重要的還是如何針對一筆資料庫中的資料進行維護.

在這個展示中,我一樣用類似於QueryFieldForm的方式來定義需要維護的欄位,並更快速的透過控制項的方法來取得類別的實例來進行後續的資料的維護.

定義需要的欄位

比較特殊的參數是
DataObjectTypeName="Likol.Web.TestWebSite.Data.Product, Likol.Web.TestWebSite"
這表示定義中的欄位會對應至這個類別的屬性,並做出相對應的處理(驗證,取值或設定)

執行結果UI

接下來透過控制項提供的存取方法來取得類別的實例

類別的實例就是在控制項屬性:DataObjectTypeName所設定的

以這樣的設定方式,可以很快的由定義好的資料類別來設定出維護的UI,另一方面資料類別也可以直接用來進行資料相關處理.

ASP.NET UI Sample Demo - 資料檢視切換

2011-08-25T16:14:00.004+08:00

此編所展示的功能基本上與ASP.NET UI Sample Demo - 單一資料表維護是差不多的,不同的地方在於,此篇中的範例在清單列表時,可以進行切換,使用像Windows檔案總管"縮圖"的方式進行管理.

[二] 資料檢視切換

在畫面右上角使用了一個群組的按鈕{#GroupButton}來進行Grid或是Image的切換

Grid:

Image:

編輯的方式與ASP.NET UI Sample Demo - 單一資料表維護相同模式,圖片的選擇則需要先上傳,然後進行選擇{#ImagePicker}(目前尚未處理上傳部份)

上述的範例可以在ASP.NET UI Sample Demo]網址中看到Live Demo.
相關注記的部份{#??????}也可以在[ASP.NET 自訂控制項 - Live Demo]網址中看到.

[ASP.NET UI Sample Demo]
http://www.aspcity.idv.tw/sample.aspx

[ASP.NET 自訂控制項 - Live Demo]
http://www.aspcity.idv.tw/demo.aspx

部份DEMO因程式更新不完整,造成錯誤,目前已經修正!

2011-08-22T06:39:00.001+08:00

如標題!!

ASP.NET 自訂控制項 - QueryFieldForm

2011-08-18T06:18:00.006+08:00

在Web Form的資料列表中,每一次都要根據不同的資料進行搜尋條件的使用者介面設計,往往在這個階段要投入很多的時間,而且當需求者想要對這個部份進行修改時,也需要耗費相當多的心力進行處理,QueryFieldForm也就為了這樣的不便而產生.先看看該如何定義與產生的結果:

定義需要的欄位(在這裡我預設這個控制項會是以兩欄的方式往下延伸)

執行結果UI

接下來可以透過控制項提供的存取方法來取得使用者所填入的值

整體的概念應該是類似FormView,不過在這個部份我稍微做了一些變化,每一個欄位UI是從外部的使用者控制項(User Control)載入,一方面能有效的達到共用的目的,一方面也容易進行修改.

ASP.NET 自訂控制項 - Live Demo (2011/08/16)

2011-08-16T21:58:00.003+08:00

[2011/08/16]
[NEW] ImageView
[NEW] RepeaterPager

在Windows檔案總管有一個檢視的模式是縮圖,如果要用GridView來做,實在是很難可以達到那個效果,ImageView就是為了這樣的效果而實作的.

搭配RepeaterPager這個控制項,就可以有效的處理在Web上瀏覽的行為

[Live Demo]
http://www.aspcity.idv.tw/demo.aspx

ASP.NET UI Sample Demo - 單一資料表維護

2011-08-12T02:35:00.009+08:00

接下來我將會用ASP.NET 自訂控制項 - Live Demo中所建立的控制項,開發出一些使用的方式與情境.

[一] 單一資料表維護

瀏覽畫面可以區分為四個區塊
1. 功能列(包含搜尋) {#Expander}
2. 搜尋條件列 {#SearchKeyPanel}
3. 資料顯示區 {#ScrollGridView}
4. 資料分頁資訊與選項 {#GridViewPager}

功能列(包含搜尋)可以進行縮小{#Expander},讓資料可以有更多的顯示範圍

搜尋完成後,搜尋條件列{#SearchKeyPanel}就會顯示輸入的條件或其他參數,可以點選搜尋條件列進行條件的移除或移除所有

搜尋條件上的Parent Category是使用彈出視窗{#DialogBox}的方式來進行選擇

點選新增按鈕或選取其中一筆資料編輯時,會開啟一個網頁內的小視窗{#WindowsPanel}進行資料的新增

上述的範例可以在ASP.NET UI Sample Demo]網址中看到Live Demo.
相關注記的部份{#??????}也可以在[ASP.NET 自訂控制項 - Live Demo]網址中看到.

[ASP.NET UI Sample Demo]
http://www.aspcity.idv.tw/sample.aspx

[ASP.NET 自訂控制項 - Live Demo]
http://www.aspcity.idv.tw/demo.aspx

ASP.NET 自訂控制項 - Live Demo (2011/08/08)

2011-08-08T17:52:00.003+08:00

[2011/08/08]
[NEW] Expander
[FIX] DialogBox在非IE瀏覽器無法傳值問題
[BUG] DialogBox目前仍無法在Opera中使用

Expander這個控制項在預設的展開模式時,當滑鼠移到內容中就會在控制項下方跳出可縮小的按鈕(如下圖)

當按下縮小後,就會僅呈現一行說明文字的方式,可以有效的將資料可以顯示的範圍盡量的擴大.

[Live Demo]
http://www.aspcity.idv.tw/demo.aspx

ASP.NET 自訂控制項 - Live Demo (2011/08/02)

2011-08-02T17:47:00.006+08:00

[2011/08/02]
[NEW] ScrollGridView 加入凍結欄位設定
[NEW] Spinner
[NEW] WindowPanel

Spinner是一個類似UpdateProgress的控制項,不過原始的UpdateProgress只能顯示在一個固定的地方,而且沒辦法根據畫面來呈現,Spinner在顯示時,會最大化在目前的視窗,並加上一個半透明的背景,然後顯示讀取的圖示與訊息在視窗中間.你只要把Spinner放在會透過UpdatePanel更新的頁面上,就會自動在更新時出現效果,步需要額外的設定.

WindowPanel主要用於動態的載入使用者控制項,並可根據目前視窗的大小進行選擇.當視窗關閉時也可以根據需要進行重新整理動作.

[Live Demo]
http://www.aspcity.idv.tw/demo.aspx

ASP.NET 自訂控制項 - GridView 固定標題列與凍結欄位

2011-07-28T14:51:00.006+08:00

經過相當多的測試,終於找出比較可行的GridView凍結欄位做法,以下是畫面擷圖與Demo.

P.S. 可以試著把瀏覽視窗稍微縮小一點,就可以看到凍結的效果.

[Live Demo]
http://www.aspcity.idv.tw/demo.aspx
選擇左邊選單的ScrollGridView

如果此範例在你的瀏覽器中有任何的問題,希望您可以讓我知道,謝謝!

ASP.NET 自訂控制項 - Live Demo (2011/07/27)

2011-07-27T21:21:00.004+08:00

[2011/07/27]
[NEW] TabStrip

[Live Demo]
http://www.aspcity.idv.tw/demo.aspx

ASP.NET 自訂控制項 - Live Demo (2011/07/26)

2011-07-26T17:30:00.003+08:00

[2011/07/26]
[NEW] GroupButton
[FIX] 修正ScrollGridView在Mozilla Firefox的標題列高度問題

[Live Demo]
http://www.aspcity.idv.tw/demo.aspx

ASP.NET 自訂控制項 - Live Demo (2011/07/25)

2011-07-25T01:42:00.003+08:00

[2011/07/25]
[FIX] 修正PopUp對齊問題
[FIX] DropDownButton -> DorpDownList
[NEW] DropDownButton
[NEW] SplitButton

新增了一個比較多功能的控制項SplitButton,功能說明如下:
1. 包含一個預設的按鈕
2. 可額外連結一個ContextMenu的控制項,按下控制項額外的指標就會以PopUp的方式顯示.
3. 可設定為大圖示顯示與小型圖示顯示

[Live Demo]
http://www.aspcity.idv.tw/demo.aspx

ASP.NET 自訂控制項 - Live Demo

2011-07-21T08:52:00.004+08:00

目前已經開發完成的控制項有下列幾種
ContextMenu
DateBox
DateRangeBox
DialogBox
DropDownButton
GridViewPager
MultiItemBox
NavigationBar
ScrollGridView
SearchKeyPanel
SplitterPanel

我準備了一個範例的網頁,可以直接進行一些簡單的操作,有興趣的人可以到
http://www.aspcity.idv.tw/demo.aspx

提出您的想法或感興趣的議題!!

2011-07-15T07:37:00.002+08:00

如果你有任何想法,或是對任何相關技術有興趣的,歡迎您直接EMail給我.

ASP.NET自訂控制項 - 簡單的日期選擇輸入框 DateBox (二)

2011-07-14T21:05:00.005+08:00

此篇將延續
ASP.NET自訂控制項 - 簡單的日期選擇輸入框 DateBox

在上次的分享中,雖然這個控制項已經可以正常的運作,但是不知道有沒有人發現在設計階段(Design-Time)是有一些小問題的.

控制項在設計階段的確是可以正常顯示.

在屬性設定視窗中仍然有以下問題:

1. Date這個屬性應該是在執行階段中,用程式碼來進行存取使用的
2. ImageUrl沒有辦法像Image一樣可以使用挑選的方式進行設定

針對上述問題,我們可以透過以下方式進行處理

1. 使用Browsable Attribute隱藏屬性是否顯示


[
Browsable(false)
]
public DateTime Date
{
    get { return Convert.ToDateTime(this.DateText); }
    set { this.DateText = value.ToString(this.Format); }
}

2. 使用Editor Attribute指定屬性的編輯器


[
Editor("System.Web.UI.Design.ImageUrlEditor", typeof(UITypeEditor))
]
public string ImageUrl
{
    get
    {
        object value = this.ViewState["ImageUrl"];

        if (value == null) return "";

        return (string)value;
    }
    set { this.ViewState["ImageUrl"] = value; }
}

3. 透過DefaultValue Attribute來設定屬性預設值與Category Attribute來設定屬性的分類


[
DefaultValue("yyyy/MM/dd"),
Category("Likol")
]
public string Format
{
    get
    {
        object value = this.ViewState["Format"];

        if (value == null) return "yyyy/MM/dd";

        return (string)value;
    }
    set { this.ViewState["Format"] = value; }
}

修正完成後,就可以在設計階段中看到對應的效果

修改後的完整程式碼如下

DateBox.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using System.ComponentModel;
using System.Drawing.Design;

namespace Likol.Web.DemoWebSite.WebControls
{
    [
    ToolboxData("<{0}:DateBox runat=server>")
    ]
    public class DateBox : CompositeControl
    {
        private TextBox txtValue;
        private ImageButton ibButton;
        private CalendarExtender ceCalendar;

        [
        DefaultValue(""),
        Category("Likol"),
        Editor("System.Web.UI.Design.ImageUrlEditor", typeof(UITypeEditor))
        ]
        public string ImageUrl
        {
            get
            {
                object value = this.ViewState["ImageUrl"];

                if (value == null) return "";

                return (string)value;
            }
            set { this.ViewState["ImageUrl"] = value; }
        }

        [
        DefaultValue("yyyy/MM/dd"),
        Category("Likol")
        ]
        public string Format
        {
            get
            {
                object value = this.ViewState["Format"];

                if (value == null) return "yyyy/MM/dd";

                return (string)value;
            }
            set { this.ViewState["Format"] = value; }
        }

        [
        DefaultValue(""),
        Category("Likol")
        ]
        public string DateText
        {
            get
            {
                this.EnsureChildControls();

                return this.txtValue.Text;
            }
            set
            {
                this.EnsureChildControls();

                this.txtValue.Text = value;
            }
        }

        [
        Browsable(false)
        ]
        public DateTime Date
        {
            get { return Convert.ToDateTime(this.DateText); }
            set { this.DateText = value.ToString(this.Format); }
        }

        protected override void CreateChildControls()
        {
            this.txtValue = new TextBox();
            this.txtValue.ID = "Value";
            this.txtValue.MaxLength = 10;

            this.ibButton = new ImageButton();
            this.ibButton.ID = "Button";
            this.ibButton.ImageUrl = this.ImageUrl;

            this.ceCalendar = new CalendarExtender();
            this.ceCalendar.ID = "Calendar";
            this.ceCalendar.TargetControlID = this.txtValue.ID;
            this.ceCalendar.PopupButtonID = this.ibButton.ID;
            this.ceCalendar.Format = this.Format;

            this.Controls.Add(this.txtValue);
            this.Controls.Add(this.ibButton);
            this.Controls.Add(this.ceCalendar);
        }
    }
}

ASP.NET自訂控制項 - 簡單的日期選擇輸入框 DateBox

2011-07-14T14:32:00.006+08:00

有了AjaxToolkit之後,應該就可以很容易的使用CalendarExtender與TextBox來達到日期選擇的功能,不過仍然需要花費一點時間在CalendarExtender控制項上的設定,其實透過一些簡單的程式碼包裝成Server Control就可以很容易的使用這樣的功能.

1.先來看看整合的效果與使用方式
ASPX


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="scriptManager1" runat="server" />
        
        <Demo:DateBox ID="DateBox1" runat="server"
            ImageUrl="~/Images/DateBox.gif" Format="yyyy/MM/dd" /><br/>
            
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
            OnClick="btnSubmit_Click" /><br/>
            
        Date: <asp:Label ID="lblDate" Font-Bold="true" runat="server" /><br/>
        DateText: <asp:Label ID="lblDateText" Font-Bold="true" runat="server" />
    </form>
</body>
</html>


namespace Likol.Web.DemoWebSite
{
    public partial class DateBox : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            this.lblDate.Text = this.DateBox1.Date.ToString("yyyy/MM/dd");
            this.lblDateText.Text = this.DateBox1.DateText;
        }
    }
}

我們可以透過兩個屬性Date(DateTime), DateText(string)來取得輸入資料.

日期選擇輸入框 DateBox Demo
http://www.aspcity.idv.tw/DateBox.aspx

雖然在這個範例中似乎沒有帶來相當大的便利性,可是對程式設計師來說能少一個步驟就少一個步驟,能把更多的時間花費在重要的程式碼上,其實才是重要的.

DateBox.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

namespace Likol.Web.DemoWebSite.WebControls
{
    [
    ToolboxData("<{0}:DateBox runat=server>")
    ]
    public class DateBox : CompositeControl
    {
        private TextBox txtValue;
        private ImageButton ibButton;
        private CalendarExtender ceCalendar;

        public string ImageUrl
        {
            get
            {
                object value = this.ViewState["ImageUrl"];

                if (value == null) return "";

                return (string)value;
            }
            set { this.ViewState["ImageUrl"] = value; }
        }

        public string Format
        {
            get
            {
                object value = this.ViewState["Format"];

                if (value == null) return "";

                return (string)value;
            }
            set { this.ViewState["Format"] = value; }
        }

        public string DateText
        {
            get
            {
                this.EnsureChildControls();

                return this.txtValue.Text;
            }
            set
            {
                this.EnsureChildControls();

                this.txtValue.Text = value;
            }
        }

        public DateTime Date
        {
            get { return Convert.ToDateTime(this.DateText); }
            set { this.DateText = value.ToString(this.Format); }
        }

        protected override void CreateChildControls()
        {
            this.txtValue = new TextBox();
            this.txtValue.ID = "Value";
            this.txtValue.MaxLength = 10;

            this.ibButton = new ImageButton();
            this.ibButton.ID = "Button";
            this.ibButton.ImageUrl = this.ImageUrl;

            this.ceCalendar = new CalendarExtender();
            this.ceCalendar.ID = "Calendar";
            this.ceCalendar.TargetControlID = this.txtValue.ID;
            this.ceCalendar.PopupButtonID = this.ibButton.ID;
            this.ceCalendar.Format = this.Format;

            this.Controls.Add(this.txtValue);
            this.Controls.Add(this.ibButton);
            this.Controls.Add(this.ceCalendar);
        }
    }
}

Updated: ASP.NET自訂控制項 - 簡單的日期選擇輸入框 DateBox (二)

Demo - ASP.NET自訂控制項 - 固定欄位標題列 ScrollGridView

2011-07-12T10:57:00.004+08:00

我準備了一個關於ScrollView的Demo網頁,大家可以去實際看一下它的效果是如何,有任何的問題或想法也可以讓我知道.

你可以試著將瀏覽的視窗拉大或拉小,這樣可以比較看得出來效果.

[固定欄位標題列 ScrollGridView Demo]
http://www.aspcity.idv.tw/demo.aspx
選擇左邊選單的ScrollGridView

Visual Studio 2010 T4 Text Templates 與 SqlExector 整合

2011-07-10T07:38:00.011+08:00

在先前的分享中有提到以下兩個部份:
1. Visual Studio 2010 T4 Text Templates - 文字範本與程式碼產生
2. Visual Studio 2010 SqlExector - 快速執行.sql檔案

現在我將兩個工具進行了一些整合,並將整合後的結果更能應用在實際的程式開發上,以下就是這整個概念的說明

1. 在SQL Server上建立如下的資料庫與包含的資料表

2. 在Visual Studio 2010中,建立一個空白的Web Application(C#)專案,並建立如下圖的資料夾結構

3. 編輯專案中的Web.Config檔案,加入你需要連線的資料庫連結字串

4. 接下來會使用到的功能就是這次整合好的成果.

5. 滑鼠右鍵選取SQL這個資料夾並選擇新增項目,在視窗中可看到一個新的分類"Likol",選擇"Sql Text Template"項目,並修改檔案名稱為"ProductCategory.tt".

6. 完成後會出現資料表的選擇畫面,先選擇稍早鎖建立的資料庫連線設定,並選擇"ProductCategory"這個資料表

7. 重複5的步驟,但這次選擇的新增項目改為"Data Text Template",並一樣選擇"ProductCategory"這個資料表

8. 重複5,6,7步驟,但資料表的部份選擇"Product"

9.上述步驟完成後可看到如下圖的畫面

10. 接下來我們在SQL這個資料夾使用右鍵選擇,並選取SqlExector來執行由Text Template所產生的SQL Script

11. 執行完成後,我們可以在資料庫中看到,相關資料異動的Store Procedure都已經建立完成.

12. 現在,我們就可以使用由"Data Text Template"所產生的相關資料表操作,來進行程式的撰寫.我建立了如下的程式界面與程式


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td colspan="2"><b>Create</b></td>
            </tr>
            <tr>
                <td><asp:TextBox ID="txtName" runat="server" /></td>
                <td><asp:Button ID="btnCreate" Text="Create" runat="server" 
                        onclick="btnCreate_Click" /></td>
            </tr>
        </table>
        <br/>
        <br/>
        <table>
            <tr>
                <td colspan="2"><b>Select</b></td>
            </tr>
            <tr>
                <td><asp:TextBox ID="txtID" runat="server" /></td>
                <td><asp:Button ID="btnSelect" Text="Select" runat="server" 
                        onclick="btnSelect_Click" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    Name: <asp:Label ID="lblName" Font-Bold="true" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>


namespace WebApplication1
{
    public partial class ProductCategory : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnCreate_Click(object sender, EventArgs e)
        {
            Data.ProductCategory productCategory = new Data.ProductCategory();
            productCategory.ID = Guid.NewGuid();
            productCategory.Name = this.txtName.Text;

            Data.ProductCategory.Create(productCategory);
        }

        protected void btnSelect_Click(object sender, EventArgs e)
        {
            Data.ProductCategory productCategory = new Data.ProductCategory();
            productCategory.ID = new Guid(this.txtID.Text);

            productCategory = Data.ProductCategory.Select(productCategory);

            this.lblName.Text = productCategory.Name;
        }
    }
}

13. 輸入要新增的ProductCategroy名稱,並選擇Create.

14. 從資料表中找出剛剛新增的資料ID,並填入畫面,接著按下Select按鈕,就會將該Category的名稱顯示出來.

Data\SQL\ProductCategory.tt 產生的內容如下:


IF EXISTS(SELECT * FROM sys.objects WHERE type='P' AND name='sp_ProductCategory_Create')
 DROP PROCEDURE sp_ProductCategory_Create
GO

CREATE PROCEDURE sp_ProductCategory_Create
 @ID AS uniqueidentifier, 
 @Name AS nvarchar(50) 
AS
BEGIN

 INSERT INTO ProductCategory
 (
  ID, 
  Name 
 )
 VALUES
 (
  @ID, 
  @Name 
 )
END
GO

IF EXISTS(SELECT * FROM sys.objects WHERE type='P' AND name='sp_ProductCategory_Update')
 DROP PROCEDURE sp_ProductCategory_Update
GO

CREATE PROCEDURE sp_ProductCategory_Update
 @ID AS uniqueidentifier, 
 @Name AS nvarchar(50) 
AS
BEGIN

 UPDATE ProductCategory SET
  Name=@Name 
 WHERE
  ID=@ID 
END
GO

IF EXISTS(SELECT * FROM sys.objects WHERE type='P' AND name='sp_ProductCategory_Delete')
 DROP PROCEDURE sp_ProductCategory_Delete
GO

CREATE PROCEDURE sp_ProductCategory_Delete
  @ID AS uniqueidentifier 
AS
BEGIN

 DELETE ProductCategory WHERE
  ID=@ID 
END
GO

IF EXISTS(SELECT * FROM sys.objects WHERE type='P' AND name='sp_ProductCategory_Select')
 DROP PROCEDURE sp_ProductCategory_Select
GO

CREATE PROCEDURE sp_ProductCategory_Select
  @ID AS uniqueidentifier 
AS
BEGIN

 SELECT * FROM ProductCategory WHERE
  ID=@ID 
END
GO

Data\ProductCategory.tt 產生的內容如下:


//------------------------------------------------------------------------------
// 
// This code was generated by Likol.VisualStudio.Template Tool.
// Last generater time: 2011/7/10 上午 06:23:11
// 
//------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using Likol.Data;
using Likol.Web.Validation;

namespace WebApplication1.Data
{
 public partial class ProductCategory
 {
  private Guid _ID;
  private string _Name;

  public Guid ID
  {
   get { return this._ID; }
   set { this._ID = value; }
  }

  [Length(50)]
  public string Name
  {
   get { return this._Name; }
   set { this._Name = value; }
  }

  public static void Create(ProductCategory _ProductCategory)
  {
   SqlParameter[] parameters = new SqlParameter[]{
    new SqlParameter("ID", _ProductCategory.ID), 
    new SqlParameter("Name", _ProductCategory.Name) 
   };

   string commandText = "sp_ProductCategory_Create";

   DatabaseManager.ExecuteNonQuery(commandText, parameters);
  }

  public static void Update(ProductCategory _ProductCategory)
  {
   SqlParameter[] parameters = new SqlParameter[]{
    new SqlParameter("ID", _ProductCategory.ID), 
    new SqlParameter("Name", _ProductCategory.Name) 
   };

   string commandText = "sp_ProductCategory_Update";

   DatabaseManager.ExecuteNonQuery(commandText, parameters);
  }

  public static void Delete(ProductCategory _ProductCategory)
  {
   SqlParameter[] parameters = new SqlParameter[]{
    new SqlParameter("ID", _ProductCategory.ID) 
   };

   string commandText = "sp_ProductCategory_Delete";

   DatabaseManager.ExecuteNonQuery(commandText, parameters);
  }

  public static ProductCategory Select(ProductCategory _ProductCategory)
  {
   SqlParameter[] parameters = new SqlParameter[]{
    new SqlParameter("ID", _ProductCategory.ID) 
   };

   string commandText = "sp_ProductCategory_Select";

   SqlConnection sqlConnection = null;

   SqlDataReader sqlDataReader = DatabaseManager.ExecuteReader(commandText, parameters, ref sqlConnection);

   bool hasData = sqlDataReader.Read();

   if (!hasData) return null;

   ProductCategory __ProductCategory = new ProductCategory();

   __ProductCategory.ID = (Guid)sqlDataReader["ID"];
   __ProductCategory.Name = (string)sqlDataReader["Name"];

   sqlDataReader.Close();
   sqlConnection.Close();

   return __ProductCategory;
  }

  public static string GetLookupText(object propertyValue)
  {
   ProductCategory _ProductCategory = new ProductCategory();
   _ProductCategory.ID = (Guid)propertyValue;

   _ProductCategory = ProductCategory.Select(_ProductCategory);

   if (_ProductCategory != null) return _ProductCategory.Name;

   return "";
  }
 }
}

用T4 Text Templates的好處其實在於產生出來的格式雖然是固定的了,還是可以透過一些程式設計的方式進行異動,而且可以根據當時的需求進行修改,完全還是在程式設計的範疇之中.

Visual Studio 2010 SqlExector - 快速執行.sql檔案

2011-07-04T15:44:00.004+08:00

這是一個Visual Studio 2010的自訂Package,主要的目的是希望可以在方案總管直接點選一個.sql的檔案或目錄,來快速執行SQL的語法.

1. 開啟包含.sql檔案的專案,並在.sql檔案上點選滑鼠右建,可以看到一個自訂的選單"SqlExector".

2. 選擇"Execute Sql Files"後,選擇要執行的.sql項目.

3. 完成選擇後,選擇要用來執行的ConnectionString,在這裡選擇的Connection的項目是直接由專案中Web.Config檔案中所設定的configuration\connectionStrings項目.

4. 確定完畢後,就會開始執行選擇的項目,可以在Visual Studio 2010的Output Window中看到執行的結果

預設如果你是點選一個目錄執行sql語法,尚未儲存的檔案將會自動存檔,如果僅選擇一個檔案,該檔案尚未存檔,將會跳出訊息框讓使用者確認.

感謝您把這篇文章看完了,也幫我按個讚吧!

Visual Studio 2010 T4 Text Templates - 文字範本與程式碼產生

2011-07-01T09:33:00.008+08:00

T4 Text Templates在Visual Studio 2010中,算是一個滿不錯的功能,可以用範本的方式來快速產生相同格式的程式碼或是檔案內容.這裡我試著讀取資料庫中的Table Schema來產生相對應的Class.

1. 在專案中新增一個項目,Add New Item -> General 選擇 Text Template

2. 新增完成後可以看到剛剛新增的項目(.tt)與它底下包含的項目(.txt)

3. 修改output extension=".txt",就可以改變產生檔案的附檔名

4. 透過一些自行寫的程式就可以產生一些固定格式的內容如下:

Product.tt


<#@ template debug="true" hostspecific="true" language="C#" #>
<#@ output extension=".cs" #>
<#@ assembly name="Likol.VisualStudio" #>
<#@ import namespace="Likol.VisualStudio.Template" #>
<#

string ConnectionName = "Template"; // ConnectionString Name in Web.Config
string TableName = "Product"; // Table Name

TableTemplate tableTemplate = new TableTemplate(this.Host, ConnectionName, TableName);
tableTemplate.Fill();
#>
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated by Likol.VisualStudio.Template Tool.
// Last generater time: <#= DateTime.Now.ToString()#>
// </auto-generated>
//------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Likol.Web.Validation;

namespace Likol.Web.TestWebSite.Data
{
　public class <#= tableTemplate.TableName #>
　{
<#
foreach(TableColumn tableColumn in tableTemplate.Columns)
{
#>
　　private <#= tableColumn.DataType #> _<#= tableColumn.Name #>;
<#
}
#>

<#
foreach(TableColumn tableColumn in tableTemplate.Columns)
{
#>
<# if (!tableColumn.Nullable){ #>
　　[Required]
<#}#>
<# if (tableColumn.Length != 0){ #>
　　[Length(<#= tableColumn.Length.ToString() #>)]
<#}#>
　　public <#= tableColumn.DataType #> <#= tableColumn.Name #>
　　{
　　　get { return this._<#= tableColumn.Name #>; }
　　　set { this._<#= tableColumn.Name #> = value; }
　　}

<#
}
#>
　}
}

Product.cs - 產生的結果


//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated by Likol.VisualStudio.Template Tool.
// Last generater time: 2011/7/1 上午 09:54:25
// </auto-generated>
//------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Likol.Web.Validation;

namespace Likol.Web.TestWebSite.Data
{
　public class Product
　{
　　private int _ID;
　　private Guid _CategotyID;
　　private string _Name;

　　[Required]
　　public int ID
　　{
　　　get { return this._ID; }
　　　set { this._ID = value; }
　　}

　　[Required]
　　public Guid CategotyID
　　{
　　　get { return this._CategotyID; }
　　　set { this._CategotyID = value; }
　　}

　　[Required]
　　[Length(50)]
　　public string Name
　　{
　　　get { return this._Name; }
　　　set { this._Name = value; }
　　}
　}
}

TableTemplate是一個用來與SQL Server溝通讀取Table Schema的Class,它會讀取Table中欄位相關的資訊,並做一些轉換.

ASP.NET自訂控制項 - 固定欄位標題列 ScrollGridView

2011-06-28T09:44:00.010+08:00

ASP.NET中GridView是一個非常好用的控制項,但一直以來並無法像Windows Form的控制項一樣可以固定欄位的標題列.其實透過Javascript也是有辦法做到相同的功能,以下是一個展示:

1. 自訂一個ScrollGridView的控制項,使用下列的標記


<Likol:ScrollGridView ID="ScrollGridView1" runat="server" Width="100%">
　<Columns>
　　<Likol:TextField HeaderText="ProductID" DataField="ProductID" />
　　<Likol:TextField HeaderText="Name" DataField="Name" />
　　<Likol:TextField HeaderText="ProductNumber" DataField="ProductNumber" />
　　<Likol:TextField HeaderText="Color" DataField="Color" />
　　<Likol:TextField HeaderText="Size" DataField="Size" />
　　<Likol:TextField HeaderText="ListPrice" DataField="ListPrice" />
　　<Likol:TextField HeaderText="Weight" DataField="Weight" />
　　<Likol:DateTimeField HeaderText="SellStartDate" DataField="SellStartDate" />
　　<Likol:DateTimeField HeaderText="SellEndDate" DataField="SellEndDate" />
　　<asp:TemplateField>
　　　<HeaderTemplate><div> </div></HeaderTemplate>
　　　<ItemTemplate><div> </div></ItemTemplate>
　　</asp:TemplateField>
　</Columns>
　<HeaderStyle CssClass="ScrollGridViewHeader" />
　<RowStyle CssClass="ScrollGridViewItem" />
</Likol:ScrollGridView>

2. 連結資料來源

3. 顯示結果

當顯示範圍超過目前視窗大小會自動顯示出水平與垂直的卷軸

當拉動垂直的卷軸時,GridView的標題列一樣會固定於最上方

當拉動水平的卷軸時,GridView的標題列會跟著內容一起移動

4. 這個控制項的行為一樣可以相容於Google Chrome與Mozilla Firefox

基本上這個控制項是繼承ASP.NET原本的GridView來進行開發,並加入Ajax一些應用來達到這樣的功能.

Updated: Demo - ASP.NET自訂控制項 - 固定欄位標題列 ScrollGridView

Visual Studio 2010與SharePoint 2010 - Send Code To SharePoint

2011-06-22T10:27:00.003+08:00

在前幾篇中介紹了Visual Studio的選單功能延伸與SharePoint 2010自訂欄位,以下將會展示如何把這兩個功能整合起來:

1. 開啟一個新的專案,並編輯任一的程式碼檔案,選擇要傳到SharePoint的程式碼

2. 點選滑鼠右鍵,並選擇"SharePoint->Send Code To SharePoint"

3. 上傳視窗中的參數分別代表 SharePoint中的SiteUrl,WebID,ListID與傳送到SharePoint上的標題與內容

4. 傳送完成

5. 開啟上傳的SharePoint網頁,就可以看到經由Visual Studio所建立的項目

6. 選擇項目標題瀏覽,可以看到在檢視模式中的程式碼

P.S. 在這裡與SharePoint整合的方式是透過"SharePoint 2010 Managed Client Object Model"來存取相關的資訊

SharePoint 2010 自訂欄位 - Custom Field with SyntaxHighlighter

2011-06-21T22:39:00.005+08:00

SharePoint 2010的Custom Field對於擴充性是非常有幫助的,可以藉由自訂欄位提供一些比較實用的功能.

以下的部份是自訂是一個欄位,並結合SyntaxHighlighter來顯示程式碼的範例

1. 於網站中新增一個自訂清單(Custom List).

2. 新增完成後,進到清單設定畫面建立一個新的欄位,選擇SourceCodeField與設定欄位要顯示的Source Code是C#或XML

3. 設定完成後新增一筆資料到清單中,可以在清單顯示頁面上看到附圖

4. 選擇View Code的按鈕,會開啟一個新視窗,並顯示內容

5. 選擇項目名稱進到檢視畫面

自訂Visual Studio專案建置項目 - Target

2011-06-16T07:01:00.012+08:00

在Visual Stduio中專案進行建置時會透過MSBuild進行編譯,它的定義檔會是以XML方式呈現,試著打開由Visual Studio所建立的專案檔(*.csproj)可以看到類似以下的內容:


<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
  <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
  <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
  <ProductVersion>8.0.30703</ProductVersion>
  <SchemaVersion>2.0</SchemaVersion>
  <ProjectGuid>{B6B8C599-6FA9-4E30-8985-5D50B048FB6B}</ProjectGuid>
  <OutputType>Library</OutputType>
  <AppDesignerFolder>Properties</AppDesignerFolder>
  <RootNamespace>MyBuild</RootNamespace>
  <AssemblyName>MyBuild</AssemblyName>
  <TargetFrameworkVersion>v4.0</TargetFrameworkVersion>
  <FileAlignment>512</FileAlignment>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
  <DebugSymbols>true</DebugSymbols>
  <DebugType>full</DebugType>
  <Optimize>false</Optimize>
  <OutputPath>bin\Debug\</OutputPath>
  <DefineConstants>DEBUG;TRACE</DefineConstants>
  <ErrorReport>prompt</ErrorReport>
  <WarningLevel>4</WarningLevel>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
  <DebugType>pdbonly</DebugType>
  <Optimize>true</Optimize>
  <OutputPath>bin\Release\</OutputPath>
  <DefineConstants>TRACE</DefineConstants>
  <ErrorReport>prompt</ErrorReport>
  <WarningLevel>4</WarningLevel>
</PropertyGroup>
<ItemGroup>
  <Reference Include="System" />
  <Reference Include="System.Core" />
  <Reference Include="System.Xml.Linq" />
  <Reference Include="System.Data.DataSetExtensions" />
  <Reference Include="Microsoft.CSharp" />
  <Reference Include="System.Data" />
  <Reference Include="System.Xml" />
</ItemGroup>
<ItemGroup>
  <Compile Include="Class1.cs" />
  <Compile Include="Properties\AssemblyInfo.cs" />
</ItemGroup>
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
     Other similar extension points exist, see Microsoft.Common.targets.
<Target Name="BeforeBuild">
</Target>
<Target Name="AfterBuild">
</Target>
-->
</Project>

在最後可以看到Visual Studio本身就提供了兩個Target(BeforeBuild,AfterBuild)給使用者進行自定,但是如果不用這兩個該如何處理?

1. 複寫BuildDependsOn屬性(位於C:\Windows\Microsoft.NET\Framework\'vVersion'\Microsoft.Common.targets)


<PropertyGroup>
<BuildDependsOn>
  MyCustomTarget1;
  $(BuildDependsOn);
  MyCustomTarget2
</BuildDependsOn>

2. 新增上述加入的新Target


<Target Name="MyCustomTarget1">
<Message Importance="High" Text="Running MyCustomTarget1..."/>
</Target>
<Target Name="MyCustomTarget2">
<Message Importance="High" Text="Running MyCustomTarget2..."/>
</Target>
</PropertyGroup>

完成後,就可以在Visual Stduio進行編譯,並可以在Output的視窗看到以下結果:

如何延伸Visual Studio 2010功能 - Menu

2011-06-16T06:19:00.006+08:00

Visual Studio 2010是一個非常好的程式開發工具,不過它也具備了很不錯的延展性,你可以透過一些Add-In的方式,或Integration Package來將自己需要用的功能加到Visual Studio中.

先介紹一下如何在Menu上加上自己的項目.

1. 開啟Visual Studio選擇新增一個專案,並選擇Extensibility->Visual Studio Package,命名為"MyVSPackage"

2. 接下來會出先專案的精靈畫面,基本上都先以預設值方式進行,除了選擇VSPackage Options,你必須勾選Menu Command.

3.專案建立完成後,可以直接使用F5建置,並看到在Tools選單中多了一個My Command name的選項.

當然如果想要直接到主選單上也是可以做到,你可以參考以下的步驟:

1. 開啟專案中的MyVSPackage.vsct檔案.

2. 找到<GuidSymbol name="guidMyVSPackageCmdSet"...>區段,加上以下的XML元素:


<IDSymbol name="MyMenu" value="0x3000"/>
<IDSymbol name="MyMenuGroup2" value="0x3001"/>
<IDSymbol name="MyMenuCommand" value="0x3002" />

3. 找到<Groups>區段,加上以下的XML元素:


<Group id="MyMenuGroup2" guid="guidMyVSPackageCmdSet" priority="0x0000">
  <Parent id="MyMenu" guid="guidMyVSPackageCmdSet"/>
</Group>

4. 在<Commands package="guidMyVSPackagePkg">區段中,多加一個<Menus>的新區段,並加入以下內容:


<Menu id="MyMenu" guid="guidMyVSPackageCmdSet"
  priority="0x0200" type="Menu">
  <Parent guid="guidSHLMainMenu" id="IDG_VS_MM_TOOLSADDINS" />
  <Strings>
    <ButtonText>MyMenu</ButtonText>
    <CommandName>My Menu</CommandName>
  </Strings>
</Menu>

5. 重新使用F5編譯專案,就可以在主選單上看到定義的Menu.

案例三:Active Directory帳號建立Web系統

2011-04-13T00:14:00.005+08:00

在一般有使用Active Directory管理權限的公司中,建立一個新的使用者帳號往往需要經過很多相關的程序,包含人員屬性設定、授予權限或者由HR系統匯入,都是一個滿煩瑣的步驟.

透過一個Web化的介面就能將此作業自動化,並加入Workflow的一些應用就可以有效的進行這些步驟的整合與異動上的處理.以下是一個簡單的概念圖:

在這個案例中採用的是Windows Workflow Foundation 4.0

案例二:WCF Proxy系統

2011-04-11T03:11:00.004+08:00

這是一個WCF的相關應用案例,系統概念如下圖:

簡單來說,主要是提供一個WCF的Proxy機制,讓所有的WCF Server登錄在這個系統上,使用者如果需要呼叫服務就直接與這個系統溝通,不需要知道實際的服務位址.管理人員可透過系統提供的介面進行服務註冊.

系統所提供的功能大概如下:

1. WCF服務註冊與版本管理

2. 服務Schema發佈功能

3. 即時的服務狀態監控

4. 服務的Policy與Endpoint管理

5. 存取記錄與報表

案例一:寄賣管理系統 - UI開發

2011-04-10T16:11:00.005+08:00

這篇主要介紹一下在開發時如何實做UI,請先參考一下以下第一張圖片

每一個紅色框起來的部份,都是一個自行開發的WebControl,透過組合這些控制項可以很快的完成一個清單的頁面.

1. 上方Toolbar的功能選項,組合一個DropDownButton與ContextMenu就可以做到,選了按鈕就跳出一個浮動的Panel.

2. 一般來說如果想要顯示查詢的條件,需要自行透過程式取得每一個控制項的值進行顯示,在這個控制項我採用與DataSource控制項同樣的方式,透過設定ControlID與PropertyName,來自動取得要顯示的條件,這樣可以在開發過程中只要透過設定就可以很簡單的使用.

3. 資料分頁也是透過一個控制項與GridView關聯就可以處理分頁的行為

開發控制項本身就有點難度,但其實如果要讓開發過程更順利,更要注意的地方是Design-Time(設計階段)的支援,因此在設計控制項時,一定要考量到控制項的寫法是否符合設計階段的一些規則.

案例一:寄賣管理系統 - 權限管理

2011-04-10T15:18:00.004+08:00

先來介紹一下權限的設計,一般來說權限的設計都是透過一個ㄧ個頁面來進行控管,因此在這裡我透過了ASP.NET內建的SiteMap功能來處理.

內建的SiteMap功能,大部分的人都是透過Web.sitemap來定義網頁的結點,我重新繼承了原本的System.Web.StaticSiteMapProvider來進行權限的處理.

1. 在資料庫中設計一個儲存所有需要控管頁面的設定資料

2. 設定可以使用功能的群組設定

3. 在Web.Config中定義自訂的SiteMapProvider

4. 接下來只要在每一個Page上加入一個SiteMapPath的WebControl,就可以做到權限的驗證,在這個我是把這個控制項放到Master中,這樣就不用每個Page都要重新放一次.

接著下來,我會介紹一些UI的處理與WebControls的使用.

案例一:寄賣管理系統

2011-04-10T01:19:00.010+08:00

這是一個幫家人做的系統,主要用於紀錄將手工做的東西"寄賣"到各個出租格子的商店,並可以知道目前在各家店家的物品有哪些.

1.系統首頁,左邊為功能列,右邊則為功能的內容顯示頁面

2. 資料清單的範例,比較特別的是Grid的標題列是鎖定的,不會因為Scroll Bar的下拉而看不見.

3. 功能列的行為模式,點了後會才會跳出可選擇的選項,可有效的減少占用的空間

4. 搜尋功能,當對於資料有輸入搜尋條件,會多出一個搜尋條建列,可直接點選進行條件的移除

5. 單筆資料的維護

6. Master-Detail資料的維護

7. 當編輯資料時,需要選擇其他資料當作參考來源,都會以Popou方式來處理,並有一些條件過濾來加速資料的選取

以上為功能的一些展示與UI介紹,我會在接下來的部份,說明一下技術上的用法.

尋找任何可以合作的機會!?

2011-04-09T01:51:00.000+08:00

我正在尋找可能的合作機會,我想透過這個Blog介紹自己,讓任何有興趣的人知道我做過什麼或是會什麼?

1. 我是個.Net Programmer.
2. 開發資歷 10年, 工作經驗 4-5年
3. 我最擅長的是Web的開發應用(ASP.NET)
4. 使用ASP.NET開發Web時,我會開發Custom WebControls來縮短開發時間
5. 我對於SQL Server有一定的了解程度
6. 我對於系統(Infrastructure)也有相關的開發經驗(AD, Exchange)
7. 待續

接下來我會更清楚的說明我做過什麼!!