#眉標=AJAX
#副標=Gadget小工具設計案例
#大標=台灣高鐵乘車資訊全方位指南
#作者=文／圖	陳明倫
#引言=


==<box>===========
台灣高鐵乘車資訊全方位指南小工具開發五步驟：
1、 首先規劃儲存台灣高鐵乘車時刻與票價資訊的資料庫規格。
2、 取得台灣高鐵乘車時刻與票價資訊的資料進資料庫。
3、 申請 UrMap API 授權碼(因為要使用地圖呈現高鐵站台位置)。
4、 利用ASP.NET 2.0 CallBack機制撰寫AJAX程式。
5、 將AJAX程式包裹成Web Gadget。
==<end>==============


		
==<box>===========
程式1：QSiteTimes
SELECT	dbo.SiteTimes.AltSno, dbo.SiteTimes.NS, dbo.SiteTimes.SiteID, 
		dbo.SiteTimes.SiteTime, SiteTimes_1.SiteID AS ESiteID, 
		SiteTimes_1.SiteTime AS ESiteTime, dbo.SiteTimes.PS
FROM	dbo.SiteTimes INNER JOIN
		dbo.SiteTimes AS SiteTimes_1 ON 
		dbo.SiteTimes.AltSno = SiteTimes_1.AltSno AND 
		dbo.SiteTimes.NS = SiteTimes_1.NS AND 
		dbo.SiteTimes.Sno <> SiteTimes_1.Sno AND (dbo.SiteTimes.NS = 'S' AND 
		SiteTimes_1.SiteID > dbo.SiteTimes.SiteID OR
		dbo.SiteTimes.NS = 'N' AND SiteTimes_1.SiteID < dbo.SiteTimes.SiteID)
==<end>==============



==<box>===========
程式2：GetTime
Create PROCEDURE dbo.GetTime 
	(
	@SSiteID varchar(10),
	@ESiteID varchar(10),
	@SSiteTime varchar(10),
	@ESiteTime varchar(10),
	@SEType varchar(10)
	)
AS
Declare @NS varchar(10)
IF @SSiteID>@ESiteID
	Begin
		Set @NS='N'
	End
Else
	Begin
		Set @NS='S'
	End
IF @SEType='0'
	Begin
		SELECT         AltSno, SiteTime As SETime, IsNull(PS,'')
		FROM             QSiteTimes
		WHERE         (SiteID = @SSiteID) AND (ESiteID = @ESiteID) And NS=@NS And SiteTime Between @SSiteTime And @ESiteTime
	End
Else
	Begin
		SELECT         AltSno, ESiteTime As SETime, IsNull(PS,'')
		FROM             QSiteTimes
		WHERE         (SiteID = @SSiteID) AND (ESiteID = @ESiteID) And NS=@NS And ESiteTime Between @SSiteTime And @ESiteTime
	End
==<end>==============




==<box>===========
程式3：GetPrice
Create PROCEDURE dbo.GetPrice 	
	(
	@SSiteID varchar(10),
	@ESiteID varchar(10)
	)	
AS
Declare @SE varchar(10)
IF @SSiteID>@ESiteID
Begin
	Set @SE=@SSiteID
	Set @SSiteID=@ESiteID
	Set @ESiteID=@SE
End
SELECT         FareType, Prices
FROM             Fare
WHERE         (SDate IS NULL OR
               SDate <= GETDATE()) AND (EDate IS NULL OR
               EDate >= GETDATE()) AND (ESite > SSite) And SSite=@SSiteID And ESite=@ESiteID 
Order By FareType
==<end>==============



==<box>===========
程式4：嵌入UrMap API
<script src="http://www.urmap.com/SearchEngine/api/getapi.jsp?v=1&key=【ThsrcKey】"
type="text/javascript">
</script>
* ThsrcKey：置換為所申請的UrMap API 授權碼。
==<end>==============


==<box>===========
程式5：設定地圖中心點
var map = new UMap(document.getElementById('map'));
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);
==<end>==============


==<box>===========
程式6：自訂地標圖示
// 先產生一個自訂圖示的 UIcon
var myIcon = new UIcon();
myIcon.image = 'http://www.urmap.com/SearchEngine/api/img/s.gif';
myIcon.iconWidth = 26;
myIcon.iconHeight = 30;
myIcon.iconAnchor = new UPoint(13, 30);
myIcon.infoWindowAnchor = new UPoint(13, 0);
==<end>==============


==<box>===========
程式7：自訂圖示的地標
// 函式：用來產生一個使用自訂圖示的地標
function createMarker(point) {
  var marker = new UMarker(point, myIcon);
  marker.addListener('click', function() {
    marker.openInfoWindow('Hello!');
  });
  return marker;
}
==<end>==============



==<box>===========
程式8：小工具CallBack程式Sever-Side程式碼
Partial Class ThsrcDB
    Inherits System.Web.UI.Page
    Implements System.Web.UI.ICallbackEventHandler
    Dim rtnTime As String  '要回傳的時刻字串
    Dim rtnPrice As String  '要回傳的票價字串

    Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
        Return rtnTime & "^" & rtnPrice'時刻字串與票價字串由『^』分隔，查詢後傳回Client-Side
    End Function
　　'eventArgument由Client-Side傳入
    Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
        Dim A() As String
        A = eventArgument.Split("^")
        Dim SSiteID As String = A(0)
        Dim ESiteID As String = A(1)
        Dim SSiteTime As String = A(2)
        Dim ESiteTime As String = A(3)
        Dim SEType As String = A(4)
        rtnTime = GetTimeData(SSiteID, ESiteID, SSiteTime, ESiteTime, SEType)
        rtnPrice = GetPriceData(SSiteID, ESiteID)
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim cbReference As String
        '建立 Call back程式碼-指定回傳函式為 ReceiveServerData
        Dim strArg As String = ""
        strArg &= "document.all." + ddlTimeFrom.ClientID + ".value +'^'"
        strArg &= "+document.all." + ddlTimeTo.ClientID + ".value +'^'"
        strArg &= "+document.all." + ddlSTime.ClientID + ".value +'^'"
        strArg &= "+document.all." + ddlETime.ClientID + ".value +'^'"
        strArg &= "+document.all." + ddlSE.ClientID + ".value"
        cbReference = Page.ClientScript.GetCallbackEventReference(Me, strArg, "ReceiveServerData", "")
        '註冊
        btnSearch.Attributes("onclick") = cbReference

        '設計一個函式(名稱為ReceiveServerData),接收 Server 端 Call Back 回來的值
        Dim ReceiverScript As String = ""
        ReceiverScript += vbCrLf + "<script>"
        ReceiverScript += vbCrLf + " function ReceiveServerData(DataFromServer)"
        ReceiverScript += vbCrLf + "{"
        ReceiverScript += vbCrLf + "var a=DataFromServer.split('^');"
        ReceiverScript += vbCrLf + "document.all.divTime.innerHTML=a[0];"
        ReceiverScript += vbCrLf + "document.all.divPrice.innerHTML=a[1];"
        ReceiverScript += vbCrLf + "document.all.fdsResult.style.display ='block';"
        ReceiverScript += vbCrLf + "document.all.imglodaing.style.display ='none';"
        ReceiverScript += vbCrLf + "}"
        ReceiverScript += vbCrLf + "</script>"
        '在頁面上註冊(寫入)這個函式
        Page.ClientScript.RegisterClientScriptBlock(GetType(String), "ReceiverScript", ReceiverScript)
    End Sub

    Function GetTimeData(ByVal SSiteID As String, ByVal ESiteID As String, ByVal SSiteTime As String, ByVal ESiteTime As String, ByVal SEType As String) As String
        Dim sp As New StringBuilder
        Dim dv As DataView
        With Me.sqldsTime
            .SelectParameters(0).DefaultValue = SSiteID
            .SelectParameters(1).DefaultValue = ESiteID
            .SelectParameters(2).DefaultValue = SSiteTime
            .SelectParameters(3).DefaultValue = ESiteTime
            .SelectParameters(4).DefaultValue = SEType
            dv = .Select(New DataSourceSelectArguments)
        End With

        For Each dr As DataRowView In dv
            If CType(dr(2), String) <> "" Then
                sp.Append(String.Format("<span style='color: red' alt='車次：{0}({1}行駛)' altbg='red' altcolor='yellow' altborder=yellow>{2}</span>、", dr(0), dr(2), dr(1)))
            Else
                sp.Append(String.Format("<span alt='車次：{0}'>{1}</span>、", dr(0), dr(1)))
            End If
        Next
        If sp.ToString = "" Then
            Return ""
        Else
            Return sp.ToString.Substring(0, sp.ToString.Length - 1)
        End If
    End Function

    Function GetPriceData(ByVal SSiteID As String, ByVal ESiteID As String) As String
        Dim sp As New StringBuilder
        Dim dv As DataView

        With Me.sqldsPrice
            .SelectParameters(0).DefaultValue = SSiteID
            .SelectParameters(1).DefaultValue = ESiteID
            dv = .Select(New DataSourceSelectArguments)
        End With

        For Each dr As DataRowView In dv
            sp.Append(String.Format("●【{0}】:{1}元<br>", GetTypeStr(dr(0)), CType(dr(1), String).PadLeft(10, " ")))
        Next
        If sp.ToString = "" Then
            Return ""
        Else
            Return sp.ToString.Substring(0, sp.ToString.Length - 4)
        End If
    End Function

    Function GetTypeStr(ByVal str As String) As String
        Dim RTN As String = ""
        Select Case str
            Case "0"
                RTN = "標準車廂-全票"
            Case "1"
                RTN = "商務車廂-全票"
            Case "2"
                RTN = "標準車廂-優待票"
            Case "3"
                RTN = "商務車廂-優待票"
            Case "4"
                RTN = "自由座-全票"
            Case "5"
                RTN = "自由座-優待票"
            Case "6"
                RTN = "標準車廂-團體票"
            Case "7"
                RTN = "商務車廂-團體票"
        End Select
        Return RTN.PadRight(8, "　")
    End Function
 
End Class
==<end>==============



==<box>===========
程式9：小工具的Gadget Manifest(gadget.xml)
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:binding="http://www.live.com">
	<channel>
		<title>台灣高鐵乘車資訊全方位指南</title>
		<description>提供台灣高鐵乘車資訊全方位指南，除可查各站點之票價、時間、轉乘、訂票資訊與週遭景點資訊外且結合UrMap地圖可友善設定啟到站與查啟到站時間。</description>
		<language>zh-tw</language>
		<binding:type>MLChen.Spaces.Gadget.TaiwanThsrc</binding:type>
		<item>
			<link>gadget.js</link>
		</item>
		<icons>
			<icon height="32" width="32">pic.jpg</icon>
		</icons>
	</channel>
</rss>
==<end>==============



==<box>===========
程式10：小工具的Gadget JavaScript
    // 註冊小工具的名稱空間 (namespace)
    registerNamespace("MLChen.Spaces.Gadget");

    //// 定義此小工具的建構元 。
    //(名稱必須相同於清單檔(XML)的設定)。
    MLChen.Spaces.Gadget.TaiwanThsrc = function(p_elSource, p_args, p_namespace) {
    // 做任何事之前必須先呼叫 initializeBase 函式。
	MLChen.Spaces.Gadget.TaiwanThsrc.initializeBase(this, arguments);

    // 設定一些私有成員變數 (private member variables)。
	var m_el = p_elSource;
	var m_module = p_args.module;
       
	/****************************************
	**          initialize Method (初始化方法)                  
	****************************************/
	// 當你的物件開始執行時，這個 initialize 函式會永遠立即被呼叫。
	this.initialize = function(p_objScope)                        
	{                                                                        
		// 總是先呼叫 Base 物件的 initialize 函式。    
		MLChen.Spaces.Gadget.TaiwanThsrc.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
		                                                                                                        
		//  小工具背景透明化 。                                                
		if (window.parent != window.self) {                                          
			document.body.style.backgroundColor = "transparent";
		}                                                                                 
		
		var url ="http://www.abc.com.tw/Thsrc.aspx";
		m_el.innerHTML = "<iframe src=\"" + url + "\" frameborder=\"0\" scrolling=\"auto\" height=\"500\" width=\"466\"/>"
		
	};                                                                        
	MLChen.Spaces.Gadget.TaiwanThsrc.registerBaseMethod(this, "initialize");
       
      
	/****************************************       
	**           dispose Method (解除方法)                     
	****************************************/
	this.dispose = function(p_blnUnload) {       
		// 清除所有的成員變數                          
		m_this = null;                          
		m_el = null;                          
		m_module = null;                          
		                                     
		// 最後總是呼叫 base 物件的 dispose 函式 
		MLChen.Spaces.Gadget.TaiwanThsrc.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
	};                                                                              
	    MLChen.Spaces.Gadget.TaiwanThsrc.registerBaseMethod(this, "dispose");
    };
    MLChen.Spaces.Gadget.TaiwanThsrc.registerClass("MLChen.Spaces.Gadget.TaiwanThsrc", "Web.Bindings.Base");
==<end>==============



==<box>===========
參考資料：
* Live.com 與 Windows Live Spaces 網頁小工具 （Gadget） 開發手冊 （上）
* Live.com 與 Windows Live Spaces 網頁小工具 （Gadget） 開發手冊 （中）
* Live.com 與 Windows Live Spaces 網頁小工具 （Gadget） 開發手冊 （下）
* 英文版 Web Gadget SDK 文件集
* UrMap API v1.06 說明文件
* 台灣高鐵官方網站
==<end>==============





第 1 頁，共 9 頁