2009年4月30日星期四

.NET的AndAlso與OrElse

今天看看一個比較Fresh的同事做的VB Project,看到一些(IF中IF),我問他為什麼不用AndAlso,他似乎不知道是什麼,但他寫的C# Code卻有"&&",最後我告訴他,其實"&&"是AndAlso,不是And,他就:( 哦~~~~!!!)
其實除了AndAlso之外,還有OrElse,自.NET第一代已經有。不過的確我看到很多討論區,一些學生問VB功課,他們都是用And/或者Or,可能教他們的老師都是受VB6影響。一些比較老的Code Sample或Soruce Code都比較難見到AndAlso/OrElse的蹤影。而C#上的"&&"和"||",在其他Language中,如PHP,名稱上又的確是"And"和"Or"(PS: PHP也有分"&"/"&&"和"|"/"||",但命名一樣。)
(http://www.w3schools.com/PHP/php_operators.asp),所以.NET新手或者會忽略箇中分別。

AndAlso和OrElse都是一種Conditional Operators,只會在有需要時才運算。

例如以這段Code為例,一定會出現錯誤: FormatException :Input string was not in a correct format.
因為在IF的部份,"a"不可能轉做Integer。
當然你可以分兩段IF...End IF,先TryParse,得到True之後才做Convert.ToInt32。但最好寫法就是把And轉成AndAlso。

轉成AndAlso後,程式會判斷第一部份是否True,然後才決定執行之後部份。
Visual Basic :
Dim s As String() = New String(3) {"1", "2", "3", "a"}
Dim i As Integer
For Each _s As String In s
If Integer.TryParse(_s, i) And Convert.ToInt32(_s) <= 3 Then
System.Diagnostics.Debug.Print(_s)
End If
Next

C# :
string[] s = new string[4] { "1", "2", "3", "a" };
int  i;
foreach (string _s in s)
{
if (int.TryParse(_s, out  i) & Convert.ToInt32(_s) <=3)
{ System.Diagnostics.Debug.Print(_s); }
}

And("&")和AndAlso("&&")的分別 :

And :
Visual Basic :
Dim a As Integer = 1
Dim b As Integer = 1
If a = 2 And b = Convert.ToInt32(Date.Now) Then '產生錯誤 : Invalid cast from 'DateTime' to 'Int32'.
Debug.Print("Hello!")
End If

C# :
int a= 1;
int b= 1;
if (a == 2 & b == Convert.ToInt32(DateTime.Now)) //產生錯誤 : Invalid cast from 'DateTime' to 'Int32'.
{ Console.WriteLine("Hello!");  } 

AndAlso :
Visual Basic :
Dim a As Integer = 1
Dim b As Integer = 1
If a = 2 AndAlso b = Convert.ToInt32(Date.Now) Then 
Debug.Print("Hello!") 'Output "Hello!"
End If

C# :
int a= 1;
int b= 1;
if (a == 2 && b == Convert.ToInt32(DateTime.Now))
{ Console.WriteLine("Hello!");  } //Output "Hello!"

Or("|")和OrElse("||")的分別 :

而OrElse的情況跟AndAlso相似。
AndAlso是只要任何一Part是False的話,都不再執行其餘的expression;
而OrElse則是只要前面的Boolean expression是True的話,後面的就不再運算,直接執行內裡的statement。

Or("|") :
Visual Basic :
Dim a As Integer = 1
Dim b As Integer = 1
If a = 1 Or b = Convert.ToInt32(Date.Now) Then '產生錯誤 : Invalid cast from 'DateTime' to 'Int32'.
Debug.Print("Hello!")
End If

C# :
int a= 1;
int b= 1;
if (a == 1 | b == Convert.ToInt32(DateTime.Now)) //產生錯誤 : Invalid cast from 'DateTime' to 'Int32'.
{ Console.WriteLine("Hello!");  } 


OrElse("||") :
Visual Basic :
Dim a As Integer = 1
Dim b As Integer = 1
If a = 1 OrElse b = Convert.ToInt32(Date.Now) Then 
Debug.Print("Hello!") 'Output "Hello!"
End If

C# :
int a= 1;
int b= 1;
if (a == 1 || b == Convert.ToInt32(DateTime.Now)) 
{ Console.WriteLine("Hello!");  } //Output "Hello!"

2009年4月26日星期日

jQuery教學(2) - GridView/Table的slide/fade/animate/Class效果

jQuery的效果其實並不算很多,除了基本的Show/Hide/Toggle,就還有slide / fade / animate 三種。這次依然是用GridView Table做示範,但其實這幾種效果都可以用於其他的HTML element之上,另外還有Add/Remove Class的應用。
有需要可先看看上一次教學 : jQuery教學(1) - GridView/Table中使用Selectors
大家可以先試試效果 :


1. Click一下Row,會把整列Highlight起來。
2. 選取Row後,按Delete按鈕會把Row FadeOut。
3. Double click 藍色的格子會動畫式把文字放大。
4. Double click 粉紅色的格子會把文字摺疊起來。

我想只有toggleClass才需要用一點點文字表達,其他的,相信只放上代碼大家都能看得懂。

toggleClass
1.用Selector+filter把整個Table的cell return,filter的意義並不是把符合的去掉,而是相反地return給jQuery API。
2.再remove所有row的的Class:currRow,確保所有Row都沒有Highlight。
3.最後才把click() event中的row加上currRow class達至選取效果。
    <script type="text/javascript">
        //HighLight Row after mouse click
        $('#gridtable tr').filter(function () {
            return $('td', this).length && !$('table', this).length
        }).click(function () {
            $('#gridtable tr').removeClass("currRow");
            $(this).toggleClass('currRow');
        });
    </script>

fade
    <script type="text/javascript">
        //delete row
        $("#del").click(function () {
            var hideRows = $("#gridtable tr").hasClass("currRow");
            if (hideRows == true) {
                $("#gridtable tr.currRow td").fadeOut(1000);
            }
        });
    </script>

animate & slide
    <script type="text/javascript">
        //animate & slide 
        //Only td with div inside will be select.
        //title="ani" is the flag for animate.
        $('#gridtable tr td div').dblclick(function () {
            if ($(this).attr('title') == 'ani') {
                $(this).animate({
                    width: "100%",
                    opacity: 0.4,
                    marginLeft: "0in",
                    fontSize: "50px",
                    borderWidth: "10px"
                }, 1500);
            } else {
                $(this).slideToggle("slow");
            }
        });
    </script>

大家可見其實,透過jQuery去做這些效果並不複雜。其實WordPress中的Admin頁上,或者很多Web 2.0網站上,大家都看到很多類似的效果。

完整的網頁HTML碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>亞特蘭提斯 Net Atlantis - jQuery教學(2) - GridView/Table的slide/fade/animate效果</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //HighLight Row after mouse click
            $('#gridtable tr').filter(function () {
                return $('td', this).length && !$('table', this).length
            }).click(function () {
                $('#gridtable tr').removeClass("currRow");
                $(this).toggleClass('currRow');
            });

            //delete row
            $("#del").click(function () {
                var hideRows = $("#gridtable tr").hasClass("currRow");
                if (hideRows == true) {
                    $("#gridtable tr.currRow td").fadeOut(1000);
                }
            });

            //animate & slide
            //Only td with div inside will be select.
            //title="ani" is the flag for animate.
            $('#gridtable tr td div').dblclick(function () {
                if ($(this).attr('title') == 'ani') {
                    $(this).animate({
                        width: "100%",
                        opacity: 0.4,
                        marginLeft: "0in",
                        fontSize: "50px",
                        borderWidth: "10px"
                    }, 1500);
                } else {
                    $(this).slideToggle("slow");
                }
            });

        });
    </script>
    <style type="text/css">
        body
        {
            font: small arial;
        }
        tr:first-child
        {
            background-color: #F5F5DC;
        }
        tr:first-child:hover
        {
            background-color: #F5F5DC;
        }
        tr:hover
        {
            background-color: #E8FFEC;
            cursor: pointer;
        }
        td
        {
            border: #ccc 1px solid;
            text-align: center;
            width: 100px;
        }
        td:hover
        {
            background-color: #E8FFEC;
            border: #666 1px solid;
            width: 100px;
            cursor: pointer;
        }
        .currRow
        {
            background-color: #F0BD00;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="gridtable">
    <tr>
    <th>Product id</th><th>Console Name</th><th>Colour</th>
    </tr>
    <tr>
    <td><div title="ani"  style="background-color:#ADD8E6">1</div></td><td>Play Station 3</td><td>Black</td>
    </tr>
    <tr>
    <td>4 </td><td>Xbox 360</td><td><div title="ani" style="background-color:#ADD8E6">White</div></td>
    </tr>
    <tr>
    <td>11 </td><td><div title="slide" style="background-color:#FFB6C1">NDSL</div></td><td>Red</td>
    </tr>
    <tr>
    <td>18</td><td>PSP</td><td><div title="slide" style="background-color:#FFB6C1">Silver</div></td>
    </tr>
    <tr>
    <td>26</td><td><div title="ani" style="background-color:#ADD8E6">Wii</div></td><td>White</td>
    </tr>
    </table>
    <button id="del" type="button">Delete Selected Row</button>
    <button id="reload" type="button" onclick="window.location.reload()">Reload Table</button>
</body>
</html>

2009年4月21日星期二

jQuery教學(1) - GridView/Table中使用Selectors

這段時間在公司比較空閒,做了幾個Sample,順道放上來介紹一下jQuery。
我會講下jQuery中的Core Function / Event /Selectors / Effect的用法,和Ajax如何Call ASP.NET Web Service/Page Method,以及如何對JSON做Serialization 和 Deserialization。

其實大家都知道ASP.NET的GridView Control在Browser顯示是以Table形式顯示,唯一特別的地方是GridView的Header的Cell是用<th>表示,而Row的Cell則用<td>,所以GridView和一般HTML是可以混為一談的。

有時候我們會想知道Table中某一行某一格的Value是什麼,又或者想因應不同情況要Apply CSS去其中一格,當然在Server-Side那邊,在Row Collection中找尋是很容易。但在Client-Side用上JavaScript,要在DOM中找尋Table再找尋特定的Cell都會很麻煩。

先看看Demo :


jQuery的Selectors最強的地方就是可以在整個HTML文件中穿梭,即使遇上很複雜的Table,只要是正確的DOM文件,你亦可以很容易找到你想要的,而jQuery的Selectors有很多種運作模式,務求用最少的Code去做最多的工作。

此文就以這個Table做範例,有三個Column,五個Row去示範如何用Selector去取得Cell的Column index和Row Index,同時亦相反地用Index去取得Cell中的Value。當然就如之前所講,此Table等同Browser中的GridView Control。

Table的HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body style="font-family: Tahoma; font-size: 11px;">
    <table id="gridtable">
        <!--&#32202;&#35352;&#21152;&#19978;id-->
        <tr>
            <th>Product id</th>
            <th>Console Name</th>
            <th>Colour</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Play Station 3</td>
            <td>Black</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Xbox 360</td>
            <td>White</td>
        </tr>
        <tr>
            <td>11</td>
            <td>NDSL</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>18</td>
            <td>PSP</td>
            <td>Silver</td>
        </tr>
        <tr>
            <td>26</td>
            <td>Wii</td>
            <td>White</td>
        </tr>
    </table>
</body>
</html>

首先第一步當然就是jQuery的js檔。其實大家可以直接引用Google-Host的jQuery或者jQuery官網上的。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

再來就是Javascript部份,我要做的是,當Click每一個Cell時,會alert出三個Index值,分別是TD在Table中順序的Index / TD在那個TR的Column Index和Row在Table中的Row Index。
<script type="text/javascript">
        $(document).ready(function () {
            $('#btnGetCell').click(function () {
                var col = $('#colindex').val();
                var row = parseInt($('#rowindex').val()) + 1;
                var result = $('#gridtable tr:eq(' + row + ') td:eq(' + col + ')').html();
                alert('value is : ' + result);
            })

            $('#gridtable tr td').click(function () {
                alert('cell index in table : ' + $('td').index(this));
                alert('cell index in selected row : ' + this.cellIndex);
                alert('row index in grid : ' + (this.parentNode.rowIndex - 1));
            })
        });
    </script>

第二行的$(document).ready是很重要的,因為這代表了Page_Load的Event,把底下的function載入。
只需要定義一次就可以,可以如上面一樣,同時把多個不同的function放進ready event之中。

第一個btnGetCell click的Function就是使用Selector取得Index,而Selector都是由'$'開始,例如$('#btnGetCell') , '#'之後的就是element的ID,之後的#colindex和#rowindex加val()就是要取得TextBox中的value。而val(),html(),text()三者是不同的, val()是取得如input當中的value,而html()則是innerHTML,例如<td>123</td>中的'123,而text()則同html()相似,但會省略其他的Tag,例如<p><b>Hello</b> World</p>,當我使用alert($("p").text()); 便會出現Hello World,而不是<b>Hello</b> World

值得一提的就是'eq',
一般情況下Selector可以是階層式運作,例如我要Table中的TR中的TD,我可以寫成$('#gridtable tr td'),但一個TR中會有多個TD,這時就要寫成$('#gridtable tr td:eq(2)')。
2代表Index,是Zero-Base,亦即是第三個TD。

至於第二個Function,中的this代表TD的Collection,大家可以奇怪為什麼會Skip了Header的Cell。其實這就是Selector其中一種的工作方式,因為如之前所說Header是TR->TH ,而不是TR -> TD。所以在第二個function中,一切Header的th cell都會省卻。

而this.cellIndex和this.parentNode.rowIndex 則是HTML DOM properties,與jQuery無關,但亦同時顯示到jQuery利害之處就是能配合傳統的Javascript和HTML工作。

下次,我會講下使用jQuery的animate effect和slide effect。

完整的網頁HTML碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>亞特蘭提斯 Net Atlantis - jQuery教學(1) - GridView/Table中使用Selectors</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#btnGetCell').click(function () { //Event Helpers
                var col = $('#colindex').val();
                var row = parseInt($('#rowindex').val()) + 1;
                var result = $('#gridtable tr:eq(' + row + ') td:eq(' + col + ')').html();
                alert('value is : ' + result);
            })

            //http://www.quirksmode.org/dom/w3c_html.html 
            //http://www.quirksmode.org/dom/tests/tablesIndices.html
            $('#gridtable tr td').click(function () {
                alert('cell index in dom : ' + $('td').index(this));
                alert('cell index in selected row : ' + this.cellIndex);
                alert('row index in grid : ' + (this.parentNode.rowIndex - 1));
            })

        }); //<--End ready event
    </script>
    <style type="text/css">
        body
        {
            font: small arial;
        }
        tr:first-child
        {
            background-color: #F5F5DC;
        }
        tr:first-child:hover
        {
            background-color: #F5F5DC;
        }
        tr:hover
        {
            background-color: #E8FFEC;
            cursor: pointer;
        }
        td
        {
            border: #ccc 1px solid;
            text-align: center;
            width: 100px;
        }
        td:hover
        {
            background-color: #E8FFEC;
            border: #666 1px solid;
            width: 100px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="gridtable">
    <tr>
    <th>Product id</th><th>Console Name</th><th>Colour</th>
    </tr>
    <tr>
    <td>1</td><td>Play Station 3</td><td>Black</td>
    </tr>
    <tr>
    <td>4 </td><td>Xbox 360</td><td>White</td>
    </tr>
    <tr>
    <td>11 </td><td>NDSL</td><td>Red</td>
    </tr>
    <tr>
    <td>18</td><td>PSP</td><td>Silver</td>
    </tr>
    <tr>
    <td>26</td><td>Wii</td><td>White</td>
    </tr>
    </table>
    column index :<input id="colindex" type="text" size="1" value="1" />
    row index :<input id="rowindex" type="text" size="1" value="1" />
    <button id="btnGetCell">Get Cell Value</button>
</body>
</html>

2009年4月18日星期六

SlideZoom v1.1.1 Release



Changed : This version is maintenance release. I suggest everyone should update to this version.
Fixed "Stack overflow in IE6 / IE7 / IE8" Javascript error alert.
ie_stack_overflow_at_line_0.gif
Changed : Update HighSlide JS to 4.1.4, and reduce the size of highslide.js from 50KB to 25KB.
Changed : Remove the "Powered by..." label. It is legal action.
See: http://highslide.com/forum/viewtopic.php?f=4&t=608

Download SlideZoom v1.1.1 at WordPress Plugin Directory
http://wordpress.org/extend/plugins/slidezoom/

2009年4月17日星期五

Essential PHP Techniques for Web Designer and Developers

睇完呢個網Desizn Tech , 介紹左廿多種PHP的東西是Web Designer和Web Developer都要識的,當然無所謂絕對。但到了今天,Web Application實在五花百門,無論是設計或者程式部份已經比以前複雜很多,要學的東西自然會多。
雖然近期ASP.NET MVC 1.0已推出,Silverlight 3.0又差不多說要Release。但我還是認為,我把時間花在PHP和jQuery會更幫到我工作。而jQuery是我覺得Designer或Developer都要學習的技術。

PHP
200px-php-logo.png
自從上年10月開始,工作轉寫PHP後,我好認同PHP是種好Flexible,好岩入門甚至Designer去學的一種語言,除左免費同資源多之外,PHP本身語法實在容易,假如你完全未接觸過Programming,只要你每天花幾小時去學,幾星期內已經學有所成。其實外國很多Web Designer都能寫基本的PHP,即使日後有機會接觸到PHP或者轉職做Programmer時,都不會臨急抱佛腳。其實PHP+MySQL拎資料都只是10行不到的Syntax,何不一試。

jQuery
logo_jquery.png
其實接觸jQuery都是這幾個月的事,看到連Microsoft都支持,而Visual Studio 2008更native support jQuery,用左幾個月,現在差不多9成工作都依賴jQuery。jQuery的Selectors實在太強,配合ASP.NET的GridView或Repeater使用都十分方便。其次就Ajax + Web Service / Page Method都是十分好用。除非必要,如果唔係我都會用jQuery的Ajax多過Microsoft的Ajax。jQuery其中一個好用亦是我最常用之處是Selectors配合eq可以十分輕易取得Dom中的資料,例如一個Grid模式的Table,要取得Table中第幾個TR中第幾TD中的innerHTML,jQuery幾隻字已經做到。在Web Designer方面,jQuery除左本身的effects有很多PlugInUI可以使用。幾乎不用什麼Java Script基礎都可以用得很好。在Javascript Framework來說,jQuery是最容易使用,亦是Documentation最齊,Sample最易明白的。

香港IT界要走出困境

岩岩起香港討論區,睇到有個網友講既o野,想分享下。
香港IT界要走出困境,其中有一位網友回應 : ( 香港 IT 界要走出困境,一定唔系靠外來因素或者僱主因素,而系我地每個 IT 人付出既力量,呢種力量才是最大的。)

其實我都幾同意,自從科網爆破後,已經唔可能講什麼"外來因素",外國不用想,連最近香港的大陸亦唔見有什麼大公司會o黎香港大量請人,"僱主因素"更加講都唔洗講。該回應主要話,先由社群開始,集結一班真正的IT人,用作技術交流,業界消息分享等等。
雖然或者只是一個討論區,或者一個網站,但是的確有一個無形的力量起度。

其實香港IT業行頭唔大,如果有一個地方,可以俾行內人傾計,甚至宣洩下工作的壓力其實是不錯。始終電腦工作,所遇到的問題,只有同行至了解。
又話者某人做過一間好有問題的公司,一個人做十樣o野,某人可以公開俾其他同行知道,至少知情的人不會去這間公司工作,呢間公司亦不會咁容易請到人,搵人苯。
事實上香港是完完全全沒有一個似樣的交流地方給IT業,就算人流算高的什麼香港討論區IT版,做版主的都不能公正嚴明,而版上文章亦有好多學生問功課,或者未畢業已經問人工的Post。

其實我曾經想搞過一個,反正我咁多年都keep住有用Hosting / Dedicated 或 VDS Server,只是Host一個討論區真的沒有什麼難度,但是宣傳方面,單人之力,實在太難。

2009年4月1日星期三

WordPress PlugIn - SlideZoom 1.1 Release!

用左幾天時間,剛剛完成更新SlideZoom至version 1.1。
主要是新增真正Resize圖片功能,不是單單把原圖片set Width同Height~
刪除HighSlide中沒有用的File,減低HighSlide JS的Size。
另外再加進Output BBCode功能。
Update HighSlide JS 至 v4.1.2

寫SlideZoom途中,真的覺得PHP很多Function都很好用,有很多都是.NET沒有的。
已經很久沒有在寫程式過程當中找到樂趣了。

ScreenShot和ChangeLog可以去SlideZoom專頁
或者可以直接去WordPress Plug-in官網下載。
http://wordpress.org/extend/plugins/slidezoom/