研發記錄簿-Paladin

2016年8月31日星期三

曾被我們遺忘的台電

在 Cheers 雜誌讀到：

「回溯台灣的百年電力史，第一章可從1887年（清光緒13年）寫起。清朝台灣巡撫劉銘傳邀請江浙仕紳集資白銀五萬兩，於台北市東門外設立「興市公司」（建設公司），隔年裝置小型蒸氣燃煤發電機，在丹麥電氣技師協助下，才在台北城內點亮了「台灣第一盞燈」。

接下來的幾個重要里程碑，包括1905年7月，台灣第一座水力發電所──龜山發電所完工，從此讓台北市區、艋舺及大稻埕地區都進入「有電時代」。而1934年（日據昭和9年）竣工的日月潭水力發電工程，更是推動「農業台灣」進入「工業台灣」的關鍵動力。日月潭水力發電廠是當時亞洲最大、世界第八的發電工程。光是日月潭第一發電所的發電量，即足以滿足1935年時，台灣電力株式會社的全系統實際尖峰負載，還整整多出38％的備載容量。」

原來台灣電力的發展史，也是這麼的迷人。跨越清朝、日治、民國三朝，可真的稱的上是「三朝元老」了，同時也參雜了台灣百年來的政經情勢。拋開政客們偏頗的口號對立，坐下來好好欣賞這曾經有無數人犧牲奉獻所換得的產物，也是令人握緊拳頭、血淚交織啊！

Ref:
01:「一電之間」，決定什麼都行還是萬萬不行

2016年8月29日星期一

使用 jQuery 完成 JSON 資料的傳遞

聽到要透過 JSON 來傳遞資料，心中不免冒出：那不是要寫很多行程式？不是還要引用 JSON 相關的 javascript 模組？不是還要... 總之，就是很煩就是了！

最近看了幾篇 JSON 相關的使用文章後，發現其實不困難，也還蠻簡潔的。或許有很多小細節的地方我還沒發現，但大致上目前會用到的功能，都已經可以達到了。

首先，要先建立一個模擬後端的程式，用來產生 JSON 資料，準備給前端使用，而內容就大概長得像下面這個樣子。

{
"title":"jquery 入門",
"price":"299",
"author":"paladin lee"
}

只是最後要回傳的時候，需將物件序列化成 JSON 格式再回傳，而也只需使用下面這方法就可以了。

System.Web.Script.Serialization.JavaScriptSerializer().Serialize(stringValue)

所以我的後端程式如下：

ser01.ashx

public void ProcessRequest (HttpContext context) {

    StringBuilder sb = new StringBuilder();
    sb.Append(@"{
    ""title"":""jquery 入門"",
    ""price"":""299"",
    ""author"":""paladin lee""
}
");

    //將 sb 物件序列化成JSON格式再回傳
    context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(sb.ToString()));
}

接下來要處理的，就是前端了。透過 jQuery 的 getJSON() 方法，可以讓我們輕鬆的接收回傳的 JSON 資料。再透過 $.each() 來一一處理每個項目的內容。

 $.each(data2, function (property, value) {

   //Do something...

 });

從後端所序列化的內容可知，回傳的資料裡面三筆，以第一筆為例， property 是 "title"，value 則是 "jquery 入門"。這裡要特別注意，因為回傳的 JSON 資料目前只是被視為字串，要透過 $.parseJSON() 將這 JSON 字串轉為 JSON 物件才能進一步被我們使用。

前端完整的測試程式則如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .tb  
        {
            border-collapse:collapse ;                  
        }
        
        .tb th
        {
            border:1px solid black;
            padding:5px;
        }
        
        .tb td
        {
            border:1px solid black;
            padding:5px;
        }
        
    </style>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            
            $.getJSON("ser01.ashx", function (data) {

                var vTable = $("<table class='tb' border='1'></table>");
                var vItem01="";

                //convert JSON string, not an object
                var data2 = $.parseJSON(data);

                $.each(data2, function (property, value) {
                    vItem01 = vItem01 + "<tr><th>" + property + "</th><td>" + value + "</td></tr>";
                });                               

                $(vTable).append(vItem01);
                $(".div01").append(vTable);

            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">   
    <div class="div01">
    </div>
    </form>
</body>
</html>

而畫面結果就會長成這樣子：

這時，或許你可能會說，我其實想要的，是類似好幾本書的資訊，而不是單單某一本書的詳細內容ㄟ！這其實也不難，首先來產生後端的資料，其內容大概如下：

[
 {
 "title":"jquery 入門",
 "price":"299",
 "author":"paladin lee"
 },
 {
 "title":"html5 入門",
 "price":"199",
 "author":"Nikki"
 },
 {
 "title":"麻將",
 "price"":"99",
 "author"":"jason"
 }
]

同樣地，將他序列化後，就可以直接送出去了。

server02.ashx

public void ProcessRequest (HttpContext context) {
 StringBuilder sb = new StringBuilder();
 sb.Append(@"[
 {
 ""title"":""jquery 入門"",
 ""price"":""299"",
 ""author"":""paladin lee""
 },
 {
 ""title"":""html5 入門"",
 ""price"":""199"",
 ""author"":""Nikki""
 },
 {
 ""title"":""麻將"",
 ""price"":""99"",
 ""author"":""jason""
 }
 ]
 ");
 //將 sb 物件序列化成JSON格式再回傳
 context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(sb.ToString()));
}

至於前端的部份，我們則是透過兩次的 $.each() 來把回傳的 JSON 資料解析出來。

$.each(data, function () { 
 //處理每一筆的資料
 $.each(this,function(property, value){
  //處理每一個欄位的資料
 });                    
});

完整前端程式如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .tb  
        {
            border-collapse:collapse ;                  
        }
        
        .tb th
        {
            border:1px solid black;
            padding:5px;
        }
        
        .tb td
        {
            border:1px solid black;
            padding:5px;
        }
        
    </style>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script>
        $(function () {

            // test ser01
            $.getJSON("server02.ashx", function (data) {

                var vTable = $("<table class='tb' border='1'></table>");
                var vItem01 = "";

                //convert JSON string, not an object
                var data2 = $.parseJSON(data);

                //header
                vItem01 += "<tr><th>title</th><th>price</th><th>author</th></tr>";                               

                $.each(data2, function () { 
                    vItem01+="<tr>";
                    $.each(this,function(property, value){
                        vItem01+="<td>"+value+"</td>";
                    });
                    vItem01 += "</tr>";                    
                    
                });

                $(vTable).append(vItem01);
                $(".div01").append(vTable);

            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="div01">
    </div>
    </form>
</body>
</html>

希望透過以上簡單範例，會讓你對於 jQuery 與 JSON 資料傳遞會有更親切的感覺。

2016年8月26日星期五

用Aspose替 PDF 加上底圖

如果一張獎狀的 PDF 檔，內容長得如上圖，會不會覺得哪裡怪怪的？沒錯，少了「框線」。

接下來想要透過 Aspose 工具，來把這張 PDF 檔加上框線。而這原理，可以簡單的想成把 PDF 檔案加上底圖。

首先，先找好一個有框的底圖。大概像下面這樣：

BackGround.png

接著，就可以透過 Aspose 的 Document 物件，來取得原先的 PDF 檔案。這時候的 Document ，可以視為 PDF 的代表。

Document pdfDocument = new Document("PDF來源");

一份 PDF 檔案，可能會有很多頁(Page)，所以，透過 Page 物件，可以讓我們指定要控制第幾個頁面。而這裡的頁面標示，則是從 1 開始算起。

Page pdfPage = pdfDocument.Pages[1];

ImageStamp 則是接下來的主角，他就好比我們的橡皮圖章一樣，待會會蓋在每個頁面上。若用圖層的觀點來看，就有所謂的上下之分，這時，可以利用 ImageStamp 的 Background 屬性來決定，決定這個橡皮圖章的內容是要完全蓋過原先的內容，還是只是當個背景。如果需要微調 ImageStamp 的大小，則有 Width、Height 可以設定。

ImageStamp imgStamp = new ImageStamp(strStampFullPath);

完整程式可以簡述如下：

class PdfFunction
{
    public void AddBackGroundIMG(string PDFPath)
    {

        string setupFile = "BackGround.png";

        //取得執行路徑
        string strExecPath = Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
        //取得檔案的完整路徑
        string strStampFullPath = string.Format("{0}\\{1}", strExecPath, setupFile);

        //設定 license
        Aspose.Pdf.License license = new Aspose.Pdf.License();
        license.SetLicense(string.Format("{0}\\{1}",strExecPath , "Aspose.Total.lic"));


        //透過 Aspose 的 Document 物件，來取得原先的 PDF 檔案
        Document pdfDocument = new Document(PDFPath);
        Page pdfPage;
                       

        for (int i = 0; i < pdfDocument.Pages.Count; i++)
        {        
            //Aspose 是從 1 開始算的
            pdfPage = pdfDocument.Pages[i + 1];

            //取得外部圖片並指定為 ImageStamp 格式
            ImageStamp imgStamp = new ImageStamp(strStampFullPath);

            //將加入的圖片指定設為背景
            imgStamp.Background = true;

            //設定圖片長寬
            imgStamp.Width = 850;
            imgStamp.Height = 600;

            //將底圖加入到 PDF 頁面
            pdfPage.AddStamp(imgStamp);

        }


        // 產出新檔案
        pdfDocument.Save(string.Format("{0}\\{1}", strExecPath, "out.pdf"));

    }
}

要使用時，則是如下呼叫：

class Program
{
 static void Main(string[] args)
 {
  string setupFile = "award.pdf";

  //取得執行路徑
  string strExecPath = Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
  //取得檔案的完整路徑
  string strStampFullPath = string.Format("{0}\\{1}", strExecPath, setupFile);

  PdfFunction oP = new PdfFunction();
  oP.AddBackGroundIMG(setupFile);
 }
}

最後，有框的獎狀就會像下面這樣子：

Ref:
01：how to insert a watermark image into existing .pdf

2016年8月24日星期三

透過 BlockUI 產生遮罩效果

當預期後端 Server 的處理時間會很久時，總是希望讓使用者知道系統還活著，只是正在處理中。這時，就會希望有個「遮罩」效果，讓背景呈現灰階、甚至放一個動態 .gif 圖檔來表示。

網路上蠻多推薦 BlockUI 的文章，自己實際去練習，發現還蠻容易上手的。

首先，必須先把會用到的 .js 抓回來。 ( jQuery, BlockUI )
然後在網頁上引用他們。

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>

而使用 BlockUI 的方法則是：

$.blockUI({ message: '<div>處理中! </div>' });

不過，為了讓等待時不枯燥無聊，所以另外放了一個會動的 .gif 圖檔。可以到 ajaxload 去客製化自己喜歡的動態圖檔再下載使用。

完整程式如下：

Test.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <style>
        .divAlert 
        {
            color:Red;
            font-size:18px;
            line-height:25px;            
            vertical-align:middle;
        }
    </style>
    <script>
        $(function () {
            $("input[id$=btn01]").click(function () {
                $.blockUI({ message: '<div class="divAlert">處理中! &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="20px" src="./images/loader-red.gif"></img></div>' });  
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Button ID="btn01" runat="server" Text="點選" onclick="btn01_Click" />
    
       
        </div>
    </form>
</body>
</html>

Test.aspx.cs

using System.Threading;


protected void btn01_Click(object sender, EventArgs e)
{
    //讓程式跑久一點... 5 秒
    Thread.Sleep(5000);        
}

參考：
01：ajaxload
02：BlockUI Plugin - 功能完善的頁面、訊息遮罩
03：使用 jQuery 的blockUI 顯示讀取中

2016年7月12日星期二

泛型 generic

好久好久以前，學習 C# 應該有聽過 ArrayList 這個類別。還蠻好用的，不僅僅可以把字串丟進去，數字也可以，自訂的類別也可以，甚至...你要混搭，混著丟也可以。

ArrayList al = new ArrayList();
al.Add("字串");
al.Add(66);
al.Add(new Student("1","paladin"));

如同上面的例子，似乎什麼樣的型別，都可以放進 ArrayList，主要是因為 ArrayList 把裡面所有的內容都包裝(Boxing)成「物件(Object)」型別了，換句話說，ArrayList 裡面放的，都是 Object 型別。像這樣的特性，我們又把他歸類為：非泛型集合(nongeneric collection)。可想而知，這種非泛型集合，雖然可以讓你隨性的把任何東西都丟進去，但當你要從裡面把資料取出來時，就不能保證拆解(Unboxing)時，裡面的型別是否就是你所預期的。當然，程式在編譯時，也不會幫你進行型別檢查，往往要等到程式執行時，才會出現所謂的 Run Time Error。聽起來，使用這個非泛型集合很像很「弱」，對不對？沒錯，所以我們會稱非泛型集合裡面的成員為「弱型別」(Weak Typing)。

既然有所謂的「弱」，自然就會有跟它相對應的「強」。強型別 (Strong Typing) 的特性，當然就具備了以下的特徵【Ref.01】：

1.所有的變數的資料型態，在編譯時都要被知道。
2.嚴格的落實資料型態必須相符規則。例如，字串不能轉成數字。
3.所有型別轉換的錯誤，會導致編譯錯誤。也就是說，型別錯誤就無法編譯成功。

強型別具備上述特徵，自然就有了下面的好處【Ref.02,03】：

1.讓 IntelliSense 能夠支援變數。這能讓您在輸入程式碼時看到變數的屬性及其他成員。
2.可以利用編譯器型別檢查，這能找出可能因錯誤 (例如溢位) 而在 Run Time 失敗的陳述式。這也能夠偵測在不支援變數的物件上所進行的方法呼叫。
3.執行程式碼的速度較快。

相對於非泛型集合的，就是泛型集合( generic collection )【Ref. 04】，而裡面所放的成員，則都是屬於強型別。這裡的代表人物 List，於是登場了。這個 T ，代表了某一種資料型別，可以是：int,string...或者是使用者自訂的一個類別。

參考：

01.What is strong-typing versus weak-typing? Which is preferred? Why?
02.Efficient Use of Data Types
03.何謂「強型別」(Strong Type)
04.When to Use Generic Collections

2016年6月6日星期一

只抓片段的 .load()

在 jQuery 中，可以透過 .load() 來抓取其他頁面的資料。

一般來說，我可能只會用到 $("#divContent").load("pageB.htm");

但最近發現，.load(url) 裡的 url ，除了可以填入網址外，也可以透過類似 jQuery 的 select 條件，對 url 的內容進行條件篩選。

舉例來說，$("#divContent").load("pageB.htm div"); ，就可以抓取 pageB.htm 的內容，同時過濾資料，只取有 div 的內容。

同樣的，$("#divContent").load("pageB.htm #myDiv"); ，則是只抓取 pageB.htm 裡 ID 為 myDiv 的內容。

假設 pageB.htm 的內容如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    AAAAA<br />
    BBBBB
    </div>
    <div id="myDiv">
    CCCCC
    </div>
    </form>
</body>
</html>

那 $("#divContent").load("pageB.htm #myDiv"); 的結果，就只會出現：CCCCC 了！

參考：
01..load()
02.loading page framents with Jquery AJAX

Bootstrap 上的 Carousel 輪播

每個輪播元件，其實都各有特色。

而 Bootstrap 自己也有提供一個輪播元件，效果還蠻不錯的。

提供了上下頁切換、索引切換、圖片說明等功能。

<!DOCTYPE html>
<html>
<head>
   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>照片輪播</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

 <meta charset="utf-8" />
</head>
<body>
    <div  id="photoCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
        <!-- 瀏覽控制器-->
        <ol class="carousel-indicators">
            <li data-target="#photoCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#photoCarousel" data-slide-to="1"></li>
            <li data-target="#photoCarousel" data-slide-to="2"></li>
        </ol>


        <!-- 建立相片清單-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://www.discuss.com.hk/attachment.php?aid=2324556&nothumb=yes" />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次牽手的地方</p>
                </div>
            </div>
            <div class="item">
                <img src="http://image5.tuku.cn/pic/wallpaper/fengjing/zhenhanweimeideziranjingguanbizhi/007.jpg"  />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次相見的地方</p>
                </div>
            </div>
            <div class="item">
                <img src="http://www.bz55.com/uploads/allimg/120813/1-120Q3092433.jpg" />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次約會的地方</p>
                </div>
            </div>
        </div>

        <!--上下一張控制-->
        <a class="left carousel-control" href="#photoCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#photoCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

    </div>
</body>
</html>

Carousel 輪播元件的使用，只要在 div 將 class 指定為 carousel slide 就可以了。data-ride="carousel" ，則是讓 Carousel 在頁面上一載入就開始執行輪播。data-interval="3000" 則是設定每3秒換一張圖片。

《瀏覽控制器》，這指的是圖片上會出現的小白點、小圈圈，如果你有四張圖片要輪播，就會有四個小白點。他是透過 <ol> 、 <li> 來完成的。ol 頁籤需要加上 carousel-indicators 樣式類別，而 li 頁籤，則是需要指出 Carousel 元件 ID ： data-target="#photoCarousel"，輪播順序：data-slide-to="0" ...，而第一個 li 頁籤還需加上 class="active" ，表示是從這裡開始的。

《建立相片清單》，則是實際用來定義照片來源集合的地方。他是由兩層 div 來完成。第一層是容器，第二層則是個別每一張圖片的定義。首先看第一層，僅需加上樣式類別 carousel-inner 即可。接著看第二層，則是加上樣式類別 item，不過，第一個圖片需額外多加一個 active 的樣式類別。

在第二層的 div 裡，可以看到 <img> 頁籤，他的 src 屬性，就是用來指出照片來源 URL。如果還需要對照片加上說明的話，可以在此多加一個具有樣式類別 carousel-caption 的 div：<div class="carousel-caption"> ，在這 div 裡，可以顯示照片說明。

《上下一張控制》，則是在照片的左右邊各產生一個按鈕，讓你可以操作上一頁、下一頁的動作。data-slide="prev" 、data-slide="next" 分別指出了動作行為，而按鈕的形狀，則是用 <span> 以樣式類別 glyphicon glyphicon-chevron-left、glyphicon glyphicon-chevron-right 所產生的圖形來表示。

參考：

01：Bootstrap Carousel Plugin
02：網頁程式設計的16堂課： HTML5‧CSS3‧JavaScript ‧jQuery‧AJAX‧Bootstrap‧Google Maps

訂閱：文章 (Atom)

訪客數

青年廣論研討班

熱門文章

網誌存檔

三趨同仁研發心得

好站連結

關於我自己

標籤

追蹤者

2016年8月31日星期三

曾被我們遺忘的台電

2016年8月29日星期一

使用 jQuery 完成 JSON 資料的傳遞

2016年8月26日星期五

用Aspose替 PDF 加上底圖

2016年8月24日星期三

透過 BlockUI 產生遮罩效果

2016年7月12日星期二

泛型 generic

2016年6月6日星期一

只抓片段的 .load()

Bootstrap 上的 Carousel 輪播

訪客數

青年廣論研討班

熱門文章

網誌存檔

三趨同仁研發心得

好站連結

關於我自己

標籤

追蹤者

2016年8月31日 星期三

曾被我們遺忘的台電

2016年8月29日 星期一

使用 jQuery 完成 JSON 資料的傳遞

2016年8月26日 星期五

用Aspose替 PDF 加上底圖

2016年8月24日 星期三

透過 BlockUI 產生遮罩效果

2016年7月12日 星期二

泛型 generic

2016年6月6日 星期一

只抓片段的 .load()

Bootstrap 上的 Carousel 輪播

2016年8月31日星期三

2016年8月29日星期一

2016年8月26日星期五

2016年8月24日星期三

2016年7月12日星期二

2016年6月6日星期一