2012年12月21日 星期五

使用jQuery(Plot)製作即時圖表 - Real-Time Chart

以前如果要在網站上顯示即時的圖表,通常需要使用Flash或是Silverlight,不然可能就是要用SVG.
由於jQuery的盛行,網路上其實已經有非常多使用jQuery就可以做出圖表的Plug-In,在這個範例中我選擇用Plot來製作即時的圖表.

基本的實作概念如下:
1. 資料部分是採取Tick的方式來記錄,也就是一秒會有一筆記錄.
2. 每按一次手動增加,就會抓取目前的時間來隨機增加一筆記錄
3. 資料的記錄是透過類似json的方式記錄在JavaScript陣列中
4. 圖表的更新則是利用setInterval的方式,每隔一秒重新進行擷取最近三十秒內的資料來進行顯示

範例下載: jQueryFlot.zip

效果如下:




延伸閱讀:
SharePoint 即時網站流量追蹤 (SignalR) - SharePoint real-time page tracking
SharePoint 即時網站流量追蹤 (SignalR) 2 - SharePoint real-time page tracking 2

2012年12月20日 星期四

SharePoint 即時網站流量追蹤 (SignalR) 2 - SharePoint real-time page tracking 2

延續上一篇: SharePoint 即時網站流量追蹤 (SignalR) - SharePoint real-time page tracking



這次主要加入了伺服器的CPU的使用率,這樣可以有個對比可以參考.

擷取CPU使用率的方法主要是透過在伺服器安裝一個Windows服務,每隔一秒進行擷取,然後透過SignalR直接將資料傳送到Client的IE進行資料的計算,並顯示出即時的圖表!

2012年12月14日 星期五

GridViewScroll with jQuery 更新 20121214-2

更新(20121214-2):

一般使用前端jQuery進行標題列固定時,時常會遇到如果GridView中有INPUT相關表單的元素時,ASP.NET的Postback會有不一致的問題,針對這個部份我們已經有進行修正,可以參考以下的範例.

新增兩個將表單元素放置於GridView的範例.




相關範例請參考: 案 例 展 示

GridViewScroll with jQuery 更新 20121214

更新(20121214):

v0.3.1 修正GridView中包含Input元素問題

相關範例請參考: 案 例 展 示



2012年12月11日 星期二

GridViewScroll with jQuery 更新 20121211

更新(20121211):

v0.2.4 新增設定值與問題修正
v0.2.5 標題列數支援:標題列列數不再受限,可支援更多的數量.

相關範例請參考: 案 例 展 示



2012年12月7日 星期五

SharePoint 即時網站流量追蹤 (SignalR) - SharePoint real-time page tracking

更新: 加入展示影片

在網站上,總是希望可以知道現在網站上的使用者在看哪一些頁面,通常我們會在每一個頁面執行時,透過ASP.NET來進行一些記錄的動作,然後當需要觀看這些記錄時,就可以從資料庫中去做一些統計的動作.

上述的方法,如果需要即時(Real-Time)的顯示記錄,必須花費較多的系統資源來進行處理,而且必須不斷的重新整理頁面,來取得最新的統計資料.

ASP.NET未來將有一個SignalR的新技術(目前還在Preview),就是要來實現(Client <-> Server)之間的Real-Time行為.在這篇文章中就是使用這個技術來達到即時統計的效果.

在SharePoint上,佈署了一個客制的功能SignalRTracking,只要在你希望看到即時資料的網站上啟用這個功能,該網站的瀏覽資料就會包含在統計中.



展示影片

2012年12月5日 星期三

GridViewScroll with jQuery 實作技巧2

延續上一篇 GridViewScroll with jQuery 實作技巧

了解如何取得正確的寬度方法後,接下來就是如何在適當的時機取得寬度並進行設定

在GridViewScroll的做法,我是採取先將GridView所產生出來的HTML使用jQuery加以加工,大略會像以下的HTML:

<div id="GridView1wrapper">
    <div id="panelHeaderGridView1">
        <table id="GridView1Copy">
            <tr>
                <td>欄位一<td>
                <td>欄位二<td>
            </tr>
        </table>
    </div>
    <div id="panelItemGridView1">
        <table id="GridView1">
            <tr>
                <td>欄位一<td>
                <td>欄位二<td>
            </tr>
            <tr>
                <td>資料一<td>
                <td>資料二<td>
            </tr>
        </table>
    </div>
</div>

藍色部分為GridView預設產生的部分,綠色則為jQuery

一個TABLE如果有將每一個TD設定不自動斷行(white-space: nowrap)將會自動撐開TABLE的大小,這樣一來使用jQuery加入每一個TD中的DIV元素也會自動因為這個因素而改變寬度,一方面利用DIV未設定寬度時,自動是100%寬度的特性,就可以知道需要設定的寬度是多少.

寬度設定的大略步驟為:

1.由GridView1標題列取得每一個TD的DIV寬度(當尚未加工時寬度是瀏覽器依據內容自動排列,這時的寬度也就是我們要設定的寬度).

2. 設定GridView1Copy標題列TD的DIV寬度與GridView1資料列第一列TD的DIV寬度.

3. 將GridView1的標題列隱藏.

接下來就可以利用DIV(panelHeaderGridView1與panelItemGridView1)的特性,來進行捲軸捲動的效果.

2012年12月4日 星期二

GridViewScroll with jQuery 實作技巧

本篇將會說明GridViewScroll實作上最重要的技巧!

要固定標題列,基本的做法就是將標題的那一列獨立到另一個DIV中,就像以下的HTML語法一樣:

<div id="tableHeader">
    <table>
        <tr>
            <td style="width:180px;">欄位一<td>
            <td style="width:100px;">欄位二<td>
        </tr>
    </table>
</div>

<div id="tableItem" style="height:200px;overflow:auto;">
    <table>
        <tr>
            <td style="width:180px;">資料一<td>
            <td style="width:100px;">資料二<td>
        </tr>
    </table>
</div>

將每個欄位設定固定的寬度,並將tableItem設定為固定高度且超出高度顯示捲軸(overflow:auto)就可以做到簡易的固定標題列.

但上述的做法,遇到的最大問題在於"標題列與項目資料有可能不對齊",在不同的瀏覽器中,不對齊的狀況又會不太一樣.

使用Javascript來操作DOM相關的屬性並設定寬度,也會因為框線(border)或間距(cellspacing,cellpadding)的關係,造成無法容易計算出正常的寬度.

後來我發現,如果在每一個欄位(TD)中,再用一個DIV將裡面的資料包起來,並使用這個DIV來進行寬度的設定,幾乎就可以完整的解決上述的問題,可以參考下圖:




從上圖可以看到,其實每一個欄位都另外加了DIV,這樣一來就可以正確的對齊每個欄位.

2012年11月29日 星期四

GridViewScroll with jQuery 更新 20121129

更新(20121129):

v0.2.1 增加捲軸大小設定值與執行效能改善
v0.2.2 修正高度計算與滑鼠捲動問題

相關範例請參考: 案 例 展 示



2012年11月22日 星期四

GridViewScroll with jQuery 更新 20121122

更新(20121122):

顯示外觀加強 - 增加使用滑鼠進行內容捲動時捲軸可改變顏色與捲軸箭頭圖片的設定.

2012年11月14日 星期三

GridViewScroll with jQuery 網站正式上線

GridViewScroll with jQuery 測試上線,主要是提供一個快速的解決方案,如下所述:
「輕 鬆 的 將 您 的 GridView 固 定 標 題 列 與 凍 結 欄 位」

有興趣可以到以下的網址看看:
如果您有任何問題,都歡迎您直接來信與我聯繫 E-Mail: twlikol@msn.com

2012年11月7日 星期三

ASP.NET GridView 固定欄位標題列 jQuery

重要更新:
我們提供了一個更完整的方案,請到以下網址參考: http://gridviewscroll.aspcity.idv.tw/




分享一個GridView 固定欄位標題列的程式碼,主要是使用jQuery來進行處理,使用說明請參考以下:

1. 下載GridViewScroll.js (直接選擇左上角檔案->下載)

2. 在頁面上加入相關javascript參考 (順序需一致)

2.1. jquery-1.8.2.min.js
2.2. jquery-ui.js
2.3. jQuery-slimScroll (slimScroll.min.js)
2.4. GridViewScroll.js

3.使用下列的HTML將GridView用DIV包起來,GridView的UseAccessibleHeader屬性必須設定為False

<div id="gridHeader">
</div>
<div id="gridItem">
   <asp:GridView ID="GridView1" runat="server"
        UseAccessibleHeader="False" Width="100%">
   </asp:GridView>
</div>

3.1. 如果是使用.NET 4.0 可以再加上屬性ClientIDMode="Static",可以更方便套用此功能.

4. 套用功能

4.1. .NET 4.0 直接於GridView下方加入以下程式:

<script type="text/javascript">ApplayScroll("gridHeader", "gridItem", "GridView1", 250);</script>

4.2. .NET 2.0 在Page_Load加入註冊Script如下:

this.ClientScript.RegisterStartupScript(typeof(WebForm1), "GridView1",
    string.Format("ApplayScroll(\"gridHeader\", \"gridItem\", \"{0}\", 250);", this.GridView1.ClientID),
    true);

5. 執行網頁檢視結果

注意事項:
1. 如果欄位有設定Header寬度,請務必一併設定Row寬度.

2012年10月30日 星期二

免費範例程式碼服務測試上線 - Free Sample Code Service

「免費範例程式碼服務」測試上線,有興趣的人可以到以下網址:
如果您有任何問題,都歡迎您直接來信與我聯繫 E-Mail: twlikol@msn.com

2012年10月17日 星期三

免費範例程式碼服務 - Free Sample Code Service

我們即將發佈一個免費的服務稱為「免費範例程式碼服務」,服務的精神如下:
「如果您是一位程式開發人員,歡迎您提出您目前開發上遇到的問題或需求,我們將會盡力提供給您相關的技術參考或範例程式碼,讓您可以完成您的任務!」
目前我們主要提供ASP.NET相關問題的範例服務,網站上線後將會有更清楚的服務項關資訊!

以下是一些目前系統開發的畫面參考:















2012年10月3日 星期三

ASP.NET 自訂控制項試用下載 - 更新(2012/10/03)

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
  控制項設計階段支援檔案

試用期限:2013-06-30

使用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

2012年10月1日 星期一

內容管理系統 - CMS方案瀏覽器 - Content Management System - CMS Explorer in Visual Studio

為了讓開發人員可以快速的了解目前CMS系統中所部屬的方案有哪些,因此我們在VisualStudio中開發了一個CMS Explorer的Extension,可以直接在VisualStudio中瀏覽方案的內容.

1. 選擇VisualStudio選單的 View(檢視)->CMS Explorer


2. 選擇CMS Explorer工具列上的新增Server,填入名稱與網址


3. 使用CMS Explorer就可以瀏覽該Server方案內的資訊


UPDATE 2012/10/02 10:24

4. 整合了屬性視窗(Property Window),可以直接看到相關屬性

2012年9月28日 星期五

內容管理系統 - 整合應用程式 - Content Management System - Integration Web Application

本篇主要說明如何將自行開發的Web頁面整合到CMS系統中.

1. 選擇CITUO -> CMS Web Application範本建立Web專案


2. 專案開啟後,可以看到預設的MasterPage與source.cmswebapp檔案
3. 新增一個目錄Sample並加入一個WebForm1.aspx的頁面
4. 在WebForm1.aspx頁面中,加入取得目前登入使用者與頁面權限的程式碼
5. 開啟source.cmswebapp檔案,將要佈署的檔案加入(如下圖)


6. 建置成功後,可以看到Bin的目錄中多了一個"_CMSWebApplication"的目錄,裡面有一個壓縮檔案,這個檔案就是要佈署的檔案.


7. 到CMS系統的 系統管理->方案->上傳新方案


8. 上傳成功後將顯示該方案的詳細資料


9. 在系統管理->應用程式->新增新應用程式 加入剛剛佈署的檔案至CMS系統中,指定該功能要放到哪一個分類中顯示,並設定使用的權限


10. 回到分類導覽中可以看到連結到該功能的頁面


11. 執行結果


優點:
可以快速的將獨立開發的應用程式崁入CMS系統,並整合CMS本身所提供的使用者與權限管理進行控管

2012年9月19日 星期三

內容管理系統 - 版面範本- Content Management System - Master Template

版面範本:預設版面


版面範本:置中選單版面


版面範本:置左選單版面

2012年9月14日 星期五

內容管理系統 - 操作介面(二)- Content Management System - Web UI

內容編輯操作介面:
1. 純 文 字 內 容 範 本
2. 程 式 碼 內 容
3. HTML 內 容
4. 純 文 字 與 單 張 圖 片
5. 單 一 圖 表
6. SQL Server 資 料 內 容
7. 類 別 頁 面 清 單
8. 多 張 圖 片
9. 意 見 回 應
10. 多 張 圖 片 與 純 文 字
11. 檔 案 分 享
12. 投 票 調 查
13. 頁 面 內 容 錨 點
14. 網 頁 連 結
15. 聯 絡 人 清 單
16. 行 事 曆
17. 計 分 卡
18. 子 分 類 清 單