2010年10月29日 星期五

MapGuide_如何以外框架操作MapGuide框架

好!第二個問題的後半段,「要如何以外部來操作MapGuide框架?」,因為Flexible Layout我並不常用,不太清楚他的架構,所以以下就針對Basic Layout來說明。

如果去翻MapGuide的相關文件,應該都會找到一張MapGuide的框架圖,所以我們可以知道Basic Layout是由一堆frame組成的,所以當我們將功能寫在Task frame的時候,可以利用parent.parent.Refresh();來執行Mapframe的重新整理地圖函式。也就是說,當我們對於框架夠清楚時,就可以將MapGuide包在我們的框架之下,而當要操作MapGuide的時候就依循我們自身定義的框架先找到MapGuide外框,接下來就是MapGuide內部框架的操作。

也就是說,雖然Flexible Layout的框架有著比較多絢麗的功能,比起Basic Layout優上許多,但是依照上段的說法,我們可以將Basic Layout所附的Task pane,layer pane、properties,甚至toolbar都關閉,全部以外框架的方式自行客制化,其實也是可以做到的。

至於框架的抓取,可以參考「MapGuide_於firefox框架(iframe)抓取問題(getElementById)」。

MapGuide_如何以程式碼開關圖層

第二個問題是:「能不能透過外部給MapGuide傳值,來控制MapGuide的圖層開關?」,我想這個問題分為兩個部份,一個是如何利用程式碼來開關圖層,另一個問題是如何從外部下指令操作MapGuide框架。

為了讓自己找文章也方便,所以分開寫兩篇,首先是怎麼樣以程式碼開關圖層,方法很簡單,直接利用MapGuide於Layer所提供的方法SetVisible(bool)就可以做到。
關閉圖層:
Map.GetLayers().GetItem("city").SetVisible(false);

開啟圖層:
Map.GetLayers().GetItem("city").SetVisible(true);

但如果你只是依照上面的方式執行,會發現並不會產生效果,原因是你必須要儲存地圖,也就是執行Map.Save();

Map.GetLayers().GetItem("city").SetVisible(false);
Map.Save();

所以利用程式碼開關圖層要執行三件事情:
1. 設定是否顯示(Map.GetLayers().GetItem("city").SetVisible(false);)
2. 儲存地圖(Map.Save();)
3. 重整地圖(mapFrame.Refresh();)

MapGuide_為什麼一直被要求輸入帳號及密碼?(如何呼叫MapGuide到自己的頁面)

正當下午想要請假回家玩玩久沒開的SC2,結果竟然收到有人問問題!(我要哭了,竟然有人看我的blog)。

好,信的問題主要有兩個,第一個就是本篇「為什麼在調用MapGuide框架時,會一直出現要輸入帳號密碼的介面?」

這個問題主要原因是,MapGuide框架在被呼叫的時候,並沒有正確的獲得可檢視該Layout的權限,大致上可以分為:
1. 沒有給帳號密碼。
2. 給的帳號密碼錯誤。
3. 登入的帳號沒有權限。

以下以asp.net空頁面來說明:
1. 獲取SessionId

看以上程式碼應該可以看出來,我們以帳號密碼當參數new一個MgUserInformation(MapGuide預設管理者帳號為Administrator、密碼為admin),並且用這個User打開站點,並且以該站點建立一個SessionId;我們都知道MapGuide是以Session來獲取資訊的。所以我們可以想成這一組產生的SessionId就是一個擁有該帳號權力的鑰匙。也就是之後要進行地圖的操作或是瀏覽都要運用這組SessionId。
2. 呼叫框架
MapGuide目前所提供的框架有兩種,一個是Basic Layout(基本佈局),另一個為Flexible Layout(靈活佈局),不管你是使用那一種,在呼叫的時候都必須要給他兩個參數,一個就是你要使用那一個Layout,另一個就是你是誰?

因為你在第一部份已經獲得了一個帶有帳號密碼的SessionId,所以到了真的要呼叫MapGuide框架時,就只需要給SessionId即可。

最後貼上所有程式碼跟結果圖,用同一組密碼(也就是同一組SessionId,開啟一個同時呼叫Basic Layout跟Flexible Layout的頁面。

2010年10月28日 星期四

收到蘋果........紙

今天去秀系統,一個機緣填了一份問卷,拿到了這個!YA~~~~

蘋果便條紙!

MapGuide_於firefox框架(iframe)抓取問題(getElementById)

如果你也是使用basic layout開發MapGuide的系統,那麼你就會遇到很多框架間抓取的問題,因為整個layout就是使用一大堆框架構成的,這一篇沒有要說明MapGuide框架的架構,而是當你使用basic layout又希望可以做介面上的調整時,就很有機會會使用到iframe,如果又好巧不巧"某人"希望你可以滿足全部的瀏覽器,這時候"理論上"你會遇到一個問題!就是在firefox使用時關於MapGuide Session的功能可能都會有問題,而你可能會認為IE跟Chrome都可以跑,只有firefox不能跑,所以應該是firefox的問題(因為我就是這樣跟自己講的);某天騎車回家的時候突然有想到這個"好像""一定"要解決的問題。

總之,去看錯誤訊息會發現,根本的原因其實是該頁面沒有取得Seesion Id,那為什麼ie跟Chrome可以正常執行?原因是firefox在框架之前互相抓取的時候,必須要使用getElementById的指令才可以取得我們以為他應該取得的項目(真抽象XD)

舉例來說,我想浮動視窗,所以利用兩個iframe,一個叫做F1裡面擺了MapGuide的框架,另一個叫做F2擺了製作的各項功能頁面,現在F2的功能頁面中,有項目點選後要連動F1的MapGuide,那該怎麼做?

IE裡面可以直接parent.F1.ViewerFrame.mapFrame.Refresh()之類的語法就可以:
1. 從F2回到上一層
2. 在該層找到F1這個iframe
3. 找到MapGuide的frame名稱(ViewerFrame)
4. 進到MapGuide的mapFrame裡面
5. 執行Refresh()的語法

但是在firefox卻不可行?不動就是不動...
而原因也就是剛剛所提,於firefox的框架在抓取時有些許不同,所以其實他根本沒有正確的進到MapGuide框架中執行重新整理的函式。
所以,怎麼抓?
parent.document.getElementById('F1').contentWindow.ViewerFrame.mapFrame.Refresh()

其實也就是在從F2跳到上一層後,必須利用getElementById的語法去指定要取得的Id(也就是F1這個iframe)。

那改成上面的方式之後,ie跟chrome可以動嗎?當然可以!YA......

2010年10月27日 星期三

JQuery_側邊選單(Side Menu)

最近回到某一個龐大的案子,是使用MapGuide圖台,以前在做系統的時候倒也沒有特別想要在介面上做什麼變化,一直都使用使用Basic Layout來進行開發,雖然版面比較普通,但倒也沒什麼不好用的地方,也就很自然的把時間都花在功能連動上面,前陣子上了Flex的課程,又自己玩了一下Flex接MapGuide的服務,現在回來又要用這個版來做就覺得心裡不太開心;而之前上教育訓練的時候,想問的另一個問題就是,「你是用什麼東西包裝MapGuide的?」,他的回答是jQuery;又因為在前一個案子有使用一個浮動視窗來包裝MapGuide的功能,所以對於不同框架的操作也比較清楚一點;最後,現正執行的案子也有一個需要比較大圖面的需求,所以不管是心情、技術及需求都需要使用一個稍具RIA概念的浮動方式來展現這次的功能頁面,而教育訓練的講師也給了一個答案,就是使用jQuery。

總之,目前的需求是,我想要一個有RIA感覺且可收合不佔版面的功能展現方式,然後要使用jQuery來進行製作。就在這個想法開始萌芽的時候,恰巧看到同事piggy的電腦螢幕滑出了一個看來不錯的側邊選單,原來他也剛好在進行這個測試,只能說人不旺的時候還是有可能發生好事情!

趕快要了原始碼,進行測試。(來源blog範例)

這是一個如果在搜尋"側邊選單"都會找到的"有名"分享,棒的是他既是側邊隱藏式選單,又擁有一些動畫的效果,而且整個程式碼也不是非常難修改,可以很容易的客制化成自己的,就在我欣喜之虞,利用chrome跟firefox測試,卻發現chrome瀏覽會有收合不全的情況產生,當下真是晴天霹靂勒;與google的短暫會談沒有找到解法,而他又是使用JavaScript來開發,與我原本想用jQuery的決定有些違背,所以決定要再去問問google有沒有使用jQuery開發的側邊選單。

當然,如果你找側邊選單,除了上面這篇外,一定會找到我也常看常搜尋到的黑暗執行緒blog內的一篇文章(CODE-以jQuery實作側邊滑入選單),這個範例對於jQuery幾乎不太懂的我,實在是幫助太大了!觀察黑大的程式碼他主要是將選單隱藏到整個畫面的左邊,想像起來就是使功能選單移出瀏覽器範圍的感覺;先測測firefox跟chrome可不可以使用?太好了!都正常執行!jQuery果然是正紅的技術,沒有問題!心理正想著只要把隱藏的位子從左邊改到右邊就可以開始進行客製化了。

結果一移動!發現一個我一直沒辦法解決的問題!也就是當側邊選單在右邊的時候,會讓瀏覽器有X方向的捲軸,導致不管隱藏多遠,使用者只要拉一下捲軸就可以看到你想要隱藏的部份;後來的持續修改過程已經有點忘記了,但在最後確認的前一版還是會有在點下側邊bar的的時候X方向卷軸會突然出現一下,又消失的狀況。

總之,經過前面這些過程,最後做了一個目前使用的版本,基本上的效果還算滿意,出現捲軸的問題也解決了,也可以在IE6、IE8、chrome、firefox上使用正常。
收合:

展開:

最後解決X軸的方法就是,整個側邊選單的框架在設計時,將要隱藏起來的部份包在一個Table之內,當要滑動側邊拉把時,就一併把這個Table進行隱藏,但是這個Table要往哪裡隱藏?就是隱藏在整個側邊選單的DIV之內。所以整個框架就像下面這張圖:

1. 利用一個DIV將整個側邊選單包住,並設定position: absolute。
2. 紅色DIV內放一個兩欄一列的Table。(為了方便定位工具箱圖片)
3. 藍色Table左邊td放置拉把圖片,右邊td放置要顯示的功能內容。
4. 因為我希望整個系統只有一個側邊選單,這樣就需要在功能項目中至少呈現兩個階層,所以在藍Table右邊td又放入一個定位用的兩列一欄綠Table
5. 綠Table上面以DIV放置第一層選單。
6. 綠Table下面以iframe來讀取其他功能頁面近來。
7. 所以紫色DIV項目主要是去變動iframe的讀取頁面。

最後配上參考黑大的jQuery。

1. 橘色部份利用jQuery抓取需要製作動畫的紅DIV、綠Table跟拉把
2. 因為我設定拉把寬為24px,所以當紅DIV為24時代表選單收起來了,就執行拉把圖改變、紅DIV變大跟綠Table位置移回"正值"的動畫。
3. 如果寬不是24,就代表側邊選單已經被點開了,所以執行紅DIV變回24、綠Table改成"負值及改變拉把圖三個動畫。

最後,貼上程式碼方便有需要的複製:

$(function() {

$("#sideBarTab").click(function() {
var $sb = $("#SideBar_Ola"), $tb_i = $("#FunctionTable_In"), $sbImg = $("#sideBarTabImage");

if ($sb.width() == 24) {
$sbImg.attr("src", "../../Images/flyMenu/Tool_R.gif");
$sb.animate({ width: 330 }, 500);
$tb_i.animate({ marginRight: 0 }, 500);
}
else {
$sbImg.attr("src", "../../Images/flyMenu/Tool_L.gif");
$tb_i.animate({ marginRight: -500 }, 500);
$sb.animate({ width: 24 }, 500);
}
});

jQuery真的是一個很強大的JavaScript函式庫,以往想都不敢想的側邊選單就這樣美好的呈現了。XD

2010年10月26日 星期二

網頁排版_編排Table或td先設定邊框css的好處

最近為了做可以符合眾家瀏覽器的頁面,已經連續1個半星期跟css搏鬥,雖然有很多想寫的,但是...實在是太想回家了,但是又覺得這樣下去會越積越多(遙想宜蘭遊還沒寫完),所以說什麼也要寫他個一兩篇。

如果希望網頁排版整齊,我們一定會使用Table這個標籤來定位,很有可能一些簡單的網頁,但因為希望有比較不死板的編排,就會使用許多Table來進行排版動作,就像是這篇利用兩個Table來將Menu放置到適當的位置。

但是很多時候我們會覺得很苦惱,不管是寬度、高度怎麼設定,Table裡面的物件就是不到自己覺得他應該去的地方,一下自己的td撐開了,一下旁邊的td撐開了,看著白白的一片上面幾個控制項在那邊擠來擠去,也不知道該調整哪一個部份;這篇不是要說有什麼神丹妙藥可以馬上排出最佳位置,而是一個我覺得不錯的方法(好吧!今年才會的)。

說來很無聊,就是在進行排版時先將要調整的Table或是td設定其邊框的css。

border-style:solid;
border-color: #878778;
border-width: 2px;

當你只有一個Table的時候當然沒什麼作用,但是多個表格或是td間互相擠壓的時候,就可以很清楚的看出究竟是哪一個格子發生問題,或是判斷出哪一個區塊的css可能設定後沒有產生作用。

2010年10月25日 星期一

jQuery_網址

一直看到很多文章說jQuery是好物,只有在很久以前測試了一下,就沒有繼續碰了,最近需要在Asp.net上面做一些動態的顯示,又想到了jQuery,這幾天查了很多網路資料,都忘記紀錄了,先把有印象的站記一下。(希望會一直增加XD)

jQuery官網:http://jquery.com/
jQuery UI官網:http://jqueryui.com/
男丁格爾Bolg:http://abgne.tw/
黑暗執行緒Bolg:http://blog.darkthread.net/
MSDN邊學邊作系列:http://msdn.microsoft.com/zh-tw/asp.net/dd310332.aspx#jQuery

MapGuide_隱藏圖例(Legend)及屬性表(Property)

9月底的時候有某個機會去參加了一個我覺得很不錯的MapGuide代理商辦的教育訓練,途中講師有簡單的秀了一下"某個系統",看了以後讓我很想問兩個問題,一個是小問題,也就是這篇。

已經知道怎麼隱藏右邊的Task了,那怎麼隱藏圖例(Legend)及屬性表(Property)?

當下是有抄下一些關鍵字,想說回來測一下就OK了?結果沒想到問題很大XD,後來在網路上有找到一個看似很像可以達成目標的Code確一直有問題,最後才發現又是框架沒算好。

直接來看Code

if(ViewerFrame.mapFrame.document.getElementById("InfoBand").style.width =='0px')
{
ViewerFrame.mapFrame.minInfoWidth=20;
ViewerFrame.mapFrame.ResizeTo(200);
ViewerFrame.mapFrame.InitialMapView();
}
else
{
ViewerFrame.mapFrame.minInfoWidth=0;
ViewerFrame.mapFrame.ResizeTo(0);
ViewerFrame.mapFrame.document.getElementById("LayerCaption").style.width = 0;
ViewerFrame.mapFrame.document.getElementById("LegendCtrl").style.width = 0;
ViewerFrame.mapFrame.document.getElementById("PropertyCaption").style.width = 0;
ViewerFrame.mapFrame.document.getElementById("PropertyCtrl").style.width = 0;
ViewerFrame.mapFrame.InitialMapView();
}

好!如果你剛好要解決這個問題,或是你也想要把這個隱藏的功能加到你的MapGuide系統上,注意以下:
上面的Code應該很容易看懂,就不特別解說了,重點是誰是ViewerFrame?

現在,你可以先去看你導入MapGuide框架的那一頁名稱,或是你直接在這篇搜尋"ViewerFrame",所以上面的程式碼就要依照你放置功能的位置來改變框架的階層。

如果你跟我一樣是先放在ToolBar上面測試了話,ViewerFrame就是parent.frames[0]。
也就是

if(parent.frames[0].mapFrame.document.getElementById("InfoBand").style.width =='0px')
{
parent.frames[0].mapFrame.minInfoWidth=20;
parent.frames[0].mapFrame.ResizeTo(200);
parent.frames[0].mapFrame.InitialMapView();
}
else
{
parent.frames[0].mapFrame.minInfoWidth=0;
parent.frames[0].mapFrame.ResizeTo(0);
parent.frames[0].mapFrame.document.getElementById("LayerCaption").style.width = 0;
parent.frames[0].mapFrame.document.getElementById("LegendCtrl").style.width = 0;
parent.frames[0].mapFrame.document.getElementById("PropertyCaption").style.width = 0;
parent.frames[0].mapFrame.document.getElementById("PropertyCtrl").style.width = 0;
parent.frames[0].mapFrame.InitialMapView();
}

asp.net_Menu在IE8與Chrome的顯示問題

最近有一個案子規定做出來的系統要可以在ie、firefox及chrome上面跑,最初看到這條契約項目時就覺得到時候應該會有很多問題;上上星期終於解決一個棘手的問題,想說就來好好面對這些討厭的瀏覽器,沒想到不測試還好,一測發現上次很開心直接用asp.net的Menu物件對位置用好的選單在IE8跟Chrome根本就不會動......

問了同事,問了Google有以下結論:總之,微軟推出的Menu物件,其實整個寫法不符合規範,所以跑在現在推出號稱符合規範的瀏覽器上就會出現錯誤(所以微軟出的Menu並不能在自家瀏覽器IE8上面正常顯示(攤手))。

對於IE8的解決方案,大致分為三種(問了同事以後,又找到這篇整理文):
1. 強制IE8使用IE7的解析方式,使MENU正常。
2. 控制CSS的z-index屬性來使子選單強制顯示於上層。
3. 使用一個叫做CSS Friendly的元件,來使得Menu符合規範。

雖然看似第3個方法最一勞永逸,但因為我對於CSS實在是沒什麼研究,所以在測試第1個方法有點問題以後,最後我是採用同事告訴我的第二種方法,也就是去改變z-index屬性。

怎麼做勒?
1. 觀察你自己的Menu,可以找到一個DynamicMenuStyle項目。
2. 給上述項目一個CssClass名稱(比如說叫做DynamicMenu_S)。
3. 再CSS的設定檔增加
.DynamicMenu_S
{
z-index: 1000;
}
4. 重新整理網頁看看效果吧!

解決了IE8的問題,正想說會不會一並解決其他瀏覽器?很好,並沒有。

--------------------------------------------------------
下一個遇到的問題是Menu物件在Google的瀏覽器,也就是Chrome上面會有問題,很幸運的找到這篇

整個方法很簡單,但是我想如果沒有找到相關文章,應該永遠都不會知道該怎麼解決,步驟是:
1. 於VS專案內增加App_Browsers的資料夾(與App_Code同是Asp.net預留的特定資料夾)
2. 於該資料夾內新增一"Chrome.browser"的browser檔案(第一次新增這個@.@)
3. 刪除這檔案原有的內容。
4. 貼上以下程式碼。

<browsers>
<browser refID="safari1plus">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
</controlAdapters>
</browser>
</browsers>
5. 重新整理網頁看看效果。
----------------------------------------------------

接下來我就進行Firefox的測試,我不知道是火狐原本就不會有問題?還是做了上述兩件事情一併解決了應該要出現的問題?

總之,Menu又復活囉!可以在IE6、IE8、FireFox跟Chrome上面正常執行。

----------------------------------------------------
2012/12/24補充:

以上方式會在framework4.0產生錯誤:The browser or gateway element with ID 'safari1plus' cannot be found.
應修正為:
<browsers> <browser refID="mozilla"> <controlAdapters> <adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" /> </controlAdapters> </browser> </browsers>

2010年10月15日 星期五

SQL_刪除資料表的相同資料

系統在設計資料庫時,有時候會出現一種流水帳的設計,所謂流水帳的設計就是我們把全部更改的內容都不斷新增進資料表內,在需要查詢的時候才使用SQL語法來篩選需要的內容,當然透過篩選就可以做出很多不一樣的變化,可能單純只是想知道最大最小值、最新最舊值,或是某個時間區間內的數值變化等等。

而這樣的流水帳資料表會有兩種需求,第一個想法就是我才不理他,就讓他一直記,一直記,一直一直一直記下去;另一種就是資料表將因為某些原因,去刪除某屬性相同的資料。舉例來說:

上面這張資料表以ID為主鍵,分別記載各區域不同時間的數值,也就是A區域在10月13日為20,到了10月15日為30。有時我們會有一個需求:「我希望以AreaName這個欄位為基礎只留下一份各區域的記載資料」。

那麼,要怎麼達成呢?需求是要留下每一個最新版本的資料,單純的想法就是我們要刪除那些舊的,而舊的資料可能有很多筆,我們或許無法一一列出這些舊有資料,所以應當先篩出MAX(ID)的資料,再反向取得其他舊資料,最後刪掉他們!

所以組SQL語法的順序應該是:
1. 建立依照AreaName欄位選取最大ID的列表的子查詢。(請參考舊文章)

2. 利用上述子查詢以反向選取的方式取得"AreaName有重複的舊資料"(利用NOT IN)。

3. 刪掉第二步驟所列出的子查詢項目。

執行結果:

當然,這種流水帳的資料表可能不會只留下最新資料,我們也許會去刪除5年以前的舊資料,那麼可能會問"如果刪除5年以前的舊資料就直接下刪除2005年以前資料的SQL語法就好了呀?",原因是如果你有1000個區域,而這五年以來只有50個區域更新過,那如果直接刪除2005以前的資料,將會造成有另外50筆的唯一資料一併刪除,造成......不知道會怎麼樣的事情發生。XD

所以我們再增加兩筆A區域的資料,一個為2007年,一個為2004年的資料,來進行上述的刪除動作:

也就是多增加一個時間的篩選,讓他篩出既是舊的而且又在2005年1月1日以前的資料,然後刪掉。


最後還是方便複製,貼上語法:
delete dbo.Table1 where ID in
(Select ID from dbo.Table1 where ID Not IN
(Select MAX(ID) as ID from dbo.Table1 group by AreaName)
AND dbo.Table1.Date <='2005/1/1')

第1句:刪除ID有被第2、3句子查詢所查出的資料。
第2句:列出不被第3句子查詢所查出的項目。
第3句:列出以AreaName群組的最大ID值。
第4句:額外的判斷語句。

2010年10月14日 星期四

asp.net_下拉式選單同時擁有自訂項目與資料庫內的項目

"下拉式選單"是一個在視窗系統很常會使用的元件,當選取項目都是固定且數量很少時,我們可能會貪圖方便,直接寫死在程式碼當中:

但是當項目會隨著其他功能或是時間變更時,我們就會往一些可以動態產生項目的方式修改,最常使用的方式當然就是存在資料庫當中;那你當然可以選擇直接拉一個SqlDataSource到頁面上,或是將這些查詢寫在程式碼當中去呼叫,再塞入下拉式選單中。

好,很簡單的就可以從資料庫撈出相對應的資料放到下拉式選單中。

我們會使用下拉式選單的功能大概有三種:
1. 要篩選特定已知的查詢項目(例如行政區)
2. 要新增資料時,讓使用者可以免除打字或打錯字的困擾
3. 編輯資料(理由同新增)

但是想像一下會發現如果單純只把資料庫的項目放進去,可能會造成一些不便:
1. 篩選時,無法直接藉由下拉式選單了解使用者不想篩選該欄位(因為一定會選到一項)。
2. 無法對該欄位先填空值。
3. 若原資料為空值,編輯畫面會誤以為使用者選擇第一項。
所以,我們馬上就會希望把類似"請選擇性別"、"請選擇區域"這樣的項目放在第一項;結果可以發現,當我們已經使用SqlDataSource進行資料繫結後,他似乎沒辦法顯示我們所放上去的ListItem項目。

直觀的想,我們有兩個做法:
1. 在資料庫裡面增加一筆資料,叫他做....沒選之類的。←感覺就是一個很爛的作法。
2. 利用程式的方式解決,先利用Items.Add加入我們想加入的"自訂項目",再將資料選出去,跑一個迴圈放進去。

其實DropDownList這個元件已經替我們想好了,他有一個屬性AppendDataBoundItems,VS說明寫:將資料繫結項目附加至靜態宣告的清單項目,也就是說只要設定該屬性為True,他就會在繫結的時候保存自訂項目。


下拉式選單有時候看起來非常方便,但其實"很多時候"我自己都覺得很難用,以查詢功能來說有些使用者希望幾乎全部的項目都是下拉式選單,結果資料庫內的項目多達100項,最後不知道是從那100項裡面找出要篩的項目比較快?還是直接做關鍵字搜尋比較快?

2010年10月6日 星期三

201008宜蘭行_day1(晚上)_淡江蘭陽校區夜景(礁溪)

以前在宜蘭想到夜遊通常都會去海邊(永正或蘇澳)等日出,要看夜景通常就想到橘子,這次想說要上網看一下怎麼樣訂橘子,才發現原來宜蘭多了一個看夜景的地方,那就是!鐺鐺!淡江蘭陽校區!

首先我們來看看他在哪裡?

淡江蘭陽校區就在圖上佛光大學的上方,一大片綠色區塊(高爾夫球場)的左邊,可能是因為校區比較新,所以查GoogleMap其實看不太出來要怎麼走,那我們該怎麼走呢?
第一個方法:當你覺得你的地點好像在附近了,你不知道該轉哪一條路上山!趕快去問人「請問佛光大學怎麼走?」
第二個方法:如果你覺得你一定要自己找到路,方法就是注意"白鵝"。為什麼這樣說呢?
當時找不到路,天又很暗完全不敢亂轉,看到一個加油站決定跑去問一下那邊的員工。
我:「請問一下佛光大學、淡江大學怎麼走?」
員:「佛光大學,嗯....我想一下。」
我:「我現在超過了嗎?我是要繼續走還是回頭?」
員:「嗯!繼續走....啊!回頭!」
我:「回頭喔,那要哪裡轉呀?」
員:「啊!我知道了...」
我:(這加油站有別的店員嗎?左右張望)
員:「你迴轉,然後看到右手邊的白鵝就轉彎」
我:「看到白鵝....」
員:「對!很大隻!一看到就轉彎」
我走回去對著嘉嘉說:他說,迴轉,然後注意路上的鵝,一看到白鵝就轉彎.....

所以我就遵照他的說法,迴轉!注意右手邊"白鵝",所以我看到了他....

白鵝村:台九線與柴圍路交叉口轉彎,路邊有一隻大鵝,或是你可以注意九龍山玉清宮的位置,基本上在轉進這邊之前不太需要去注意有沒有佛光大學或是淡江大學的路標,因為....我沒看到。

順利轉進以後,一直直走會到一個三岔路,接下來右轉,然後注意左邊會有佛光大學的路牌,轉進後就可以一值看著路標上山了,到岔路口就注意是淡江?佛光?還是高爾夫球場?如果只有一個就代表繼續往前,還沒到真正的岔路。

到了淡大校園後,有個可以自由停車的停車場,算是相當的方便。而這邊的夜景當然就不像象山夜景有許多高樓大廈,有各式各樣的燈光,畢竟是在看蘭陽平原的夜景,所以是屬於比較扁平的,也沒有都市那麼多不同的燈光變化,但是整體看起來就是讓人心情輕鬆,有脫離城市繁雜的感覺。讚!
以下為CANNON S95手持拍攝1:

CANNON S95手持拍攝2:

CANNON S95置於護欄上曝光5秒:

CANNON S95置於護欄上曝光15秒:

最後,當然要證明有來!叮咚叮咚!

我個人是還蠻推薦這個景點的,不管是一大群人或是兩小無猜都相當適合喔。XDDDD

201008宜蘭行_東奔西跑吃美食

如果到宜蘭玩,有一個很重要的事情就是「吃」,吃吃吃吃吃吃吃...

吃的東西當然就是回想遠古的記憶加上網路上參考囉!
各項位置請參考行程規劃篇

一(DAY1午餐)─林場肉羹:跟一般的肉羹不同就在於他沒有加沙茶,算是清淡型的肉羹,自己是沒有很愛肉羹,根據嘉嘉的說法:相當好吃!!(店內有兩區座位,一區在店內,一區在店旁邊的騎樓下面,如果要在現場吃的推薦在騎樓那區吃,因為店內沒有冷氣空調,夏天相當炎熱。)

二(DAY1點心)─三星蔥油餅:在最有名卜肉店前面,使用當地最夯的三星蔥,一開始我還半信半疑的想說不就是個蔥油餅,咬下去我只能.....露出超滿意表情。 XDDD(旁邊的阿媽看到我整個笑開了...)

三(DAY1點心)─奕順軒:宜蘭最有名的麵包店,遙想當年每次慶生的蛋糕都是這一家,記憶中草莓蛋糕非常的好吃,試吃草莓奶凍捲!果然,跟記憶一模一樣,酸酸甜甜整個棒。

四(DAY1晚餐)─正常鮮肉小湯包:來到小湯包的時候已經大概7點多,很快樂的停好車,走過去就看到「賣完了非常抱歉」的牌子,當下只有一個覺得..早知道奶棟捲少吃幾塊試吃。

小姐:你們要幾籠?
嘉嘉:一籠Q.Q
小姐:媽,一籠還可以嗎?
老闆:(看看餡料的容器),應該還可以。
小姐:那給你5號。

真是第一次這麼想跟號碼牌拍照,XD。湯包就是屬於薄皮的小籠包,吃的時候要用湯匙接好,原本就好吃加上最後一籠更是覺得讚呀!

五(DAY1晚餐)─廟口紅槽魷魚:用炸的魷魚,還有配上大量的泡菜,整個魷魚的份量大概可以4個人吃,非常適合當作下酒菜,愛吃魷魚的嘉嘉一整個眼睛就亮起來了。去買的那天是紅槽魷魚最後一天在廟口賣了,現在已經搬到原址往礁溪方向約100公尺(檸檬愛玉的斜對面)。

六(DAY1飲品)─檸檬愛玉:整家店只有賣兩種飲品,第一個就是檸檬愛玉,另一個就是....我忘記了XD。去點的時候不需要跟老闆講說要不要加冰塊,可能是因為被問的很多次了,老闆直接在攤子上寫著「本店不加冰塊」,是一個很清爽的飲料。在隔壁的瓜仔雞麵現在也變的相當有名,又加上紅糟魷魚也搬到這攤子的斜對面,所以整個區塊變的相當的熱鬧。

七(DAY1冰品)─黑店的冰:在宜蘭吃冰大概會去三個地方,第一個就是黑店─屬於味道相當濃郁的綿綿冰,第二個就是小水牛─也屬於濃郁綿綿冰種類,第三個就是在宜蘭大學附近的"台大校園"建案的粉圓冰─屬於已經搭配好的挫冰。

八(DAY1宵夜)─宜蘭市個人推薦的羊肉湯:如果你到宜蘭就是想去吃羅東夜市的羊肉湯,那麼你如果有經過宜蘭市可以去這家羊肉湯吃吃看(我自己比較愛這家)。
說起來很奇妙,當初在宜蘭唸書的時候,常常宵夜都跑來這家吃,羊肉湯配上肉燥飯,所以這次覺得來宜蘭玩一定要回味一下,結果一去當初擺攤的地方,已經變成別的店面了。
我:什麼!竟然變別的店了,我覺得這家比羅東夜市的好吃耶。
嘉:反正明天要吃羅東的呀!
我:這家比較好吃....
我:這家比較好吃....
我:這家比較好吃....
看到沒開以後,天空就開始下起大雨,連天空都幫我的胃哭泣了.....不見了也沒有辦法,只好就回民宿了,就在往羅東方向約30秒,突然看到下面的招牌。
我:這邊有一家耶,要吃吃看嗎?
嘉:看你呀,只是明天不是要去羅東吃了
我:買一下好了,該不會攤子變店吧
走近,看到老闆娘,嗯...不認識...點了一個羊肉湯,然後看到一個很熟悉的鐵蒸籠,看到前面站了一個人用很熟悉的動作在包其他客人的湯,!!!!!!!!
我:你們以前是在前面開攤子嗎?
老闆娘:對呀!很久很久以前了,你怎麼知道?
我:我之前超常來買的。 T.T

講這麼多,你該怎麼樣找這家勒?
1. 到宜蘭市神農路與健康路交叉口
2. 往蘭陽女中方面前進
3. 注意你的左手邊,在你到嵐峰路前就會看到了!

九(DAY2午餐)─香廚:之前在宜蘭讀書的時候沒有很常吃香廚,所以就一邊看地圖一邊找路,騎到附近還沒看到店名就知道到了,整個臭(香)。主要賣兩樣主食,一個是相當酥脆的臭豆腐,另一個是也不加沙茶的米粉羹。臭豆腐表皮很酥脆,咬下去內含相當多孔洞,所以會有微微噴汁的感覺。寫到這裡我有點餓了...

十(DAY2下午茶)─永豐海鮮:宜蘭吃海鮮有兩個地方,第一個就是烏石港,另一個當然就是蘇澳,而在蘇澳吃海鮮最有名的有兩家,第一個就是富美海鮮、另一個就是永豐海鮮。之前有吃過富美了,所以這次就選擇永豐海鮮。
因為自己對於海鮮並沒有特別的鍾愛,倒是嘉嘉對於海鮮這一餐有著非常高度的期待。吃完後,我只能說:「海鮮不要亂吃,要吃就到港口吃,到港口吃不要亂進店,要花錢就吃有口碑的。」,實在是太好吃了。在點菜的時候,我問「請問蝦子可以怎麼做」店員:用炒的,「那透抽怎麼做」店員:用燙的,我心理想(怎麼沒有很好吃的感覺),但是如果我下次又去,店員:要做哪種?我應該會說:燙就好。
真的是我的老天爺呀,新鮮的海鮮真是太恐怖了 XDDDDDD
所以,以一個不常吃海鮮的人,基隆海鮮我推薦海龍珠,蘇澳海鮮推薦永豐。


十一(DAY2晚餐)─羅東夜市:來宜蘭玩當然還是要來羅東夜市擠一下,也當然一定要買一些大家推薦的東西,羊肉湯、蔥多餅、龍鳳腿、包心粉圓都是一定要來一下的。

十二(DAY2晚餐)─PTT強力推薦嘉彭炭烤:我們到的時候已經太晚了(聽說下午就開始營業),很多想吃的東西都已經賣完(下面畫藍色的不是強力推薦,是賣完了。T.T),但是好險還有買到牡蠣。:Q
太晚到有一個原因是,我整個大迷路了,在PTT是看到從羅東往圓山方向,過了葫蘆堵大橋以後,第一個路口右轉!結果就因為這句話我們在田裡繞了大概1個多小時。XD
所以,正確的去法是:從羅東往圓山方向,下了葫蘆堵大橋後,立刻往橋下迴轉,然後看到堤防後左轉,接下來大概騎1-2分鐘就可以看到很多很多人的烤肉店囉!

羅東夜市+嘉澎烤肉的戰利品。

十三(DAY3午餐)─鵝肉宗:在網路上想找一些當地人也會去吃的小吃店,就查到有人推薦這一家,吃完的感想是"就是一家樸實好吃的鵝肉店",份量跟價錢相比還算划算,也是一個非常適合喝酒聊天的小店。

十四(DAY3午餐)─廣興做粿:學長曾經在花蓮的一家碗粿攤前問我:「這家碗粿真的有這麼好吃嗎?」我回:「超好吃的呀!」學長:「7-11的甲7碗好吃嗎?」我:「好吃呀!」,學長:「你只是愛吃碗粿吧....= =」,由上就知道我非常的愛吃碗粿,所以對於最後一天的中餐可以說是非常的期待...結果........


現在的宜蘭不知道是北宜高速公路開通的關係?還是觀光發展起來的關係,每個地方都一值在排隊,以前騎過去可能不用下車跟老闆喊一下的店,都變的要停好車走到離店面或攤面一段距離的地方開始排隊,總體來說,來宜蘭一定要吃,按照大家的足跡走,我想你也可以吃的超開心。

網頁排版_主版頁面(MasterPage )上的圖抓不到(路徑錯誤)

現在使用ASP.NET寫網頁的人通常都會使用主版頁面MasterPage來使頁面有著統一的設定,但是當我們把精心設計好的主版頁面要套上系統時,時常都會發生一個問題:圖片沒辦法正常顯示;而我們在瀏覽器上檢視原始碼會發現,主版頁面上設定好的圖片路徑不會改變,但被套用該主版頁面的網頁並不一定處於同一個資料目錄之下,這會造成只要套用到不同路徑之下時,圖片就沒辦法正常顯示。

舉例來說,主版頁面放在根目錄,而影像檔(aa.jpg)都在根目錄下的Images內,所以主版頁面所下的CSS路徑就會是background-image:url(Images/aa.jpg),但如果這個主版頁面套用到根目錄上GISSYS的目錄內的網頁上,那麼瀏覽器還是會去解析background-image:url(Images/aa.jpg)這句,而非background-image:url(../Images/aa.jpg);故造成路徑錯誤的情況產生。

當然,我們可以很拼的把全部的資料夾階級都設成一樣,或是做很多個主版頁面共不同階層的使用,但我想正常人應該都不會走這兩條奇怪的路;所以,我們到底要怎麼樣才可以在使用主版頁面讀圖一值保持正確的路徑呢?

說起來很無聊,其實就是使用CSS檔,在使用VS2008寫ASP.NET時,有時候調整一個字型或是顏色時,軟體就會自動幫我們增加一個Style1的CSS,如果不去整理會發現馬上你的aspx檔內就會有類似Style58之類的東西,所以我們應該做的就是把這些內容拉出去另一個檔案,專門存放這些設定,當然也包括前面所提到的圖片檔路徑。

那把路徑存出去會有什麼效果?要最要的是,當你的網頁去參考這個CSS檔案時,他的路徑將會以CSS檔放置位置為基礎去抓取圖的位置,也就是說當你CSS檔存放位置固定後,任何網頁抓圖,路徑都不會改變;所以套用到主版頁面上當然也就不會跟著套用網頁的不同而產生圖片路徑錯誤的問題。

2010年11月23日補充:
1. 建立一個XX.CSS的檔案。
2. 將要使用的圖片位置記錄於上述檔案(語法:background-image:url(../Images/Title.JPG);)
3. 在主版頁面使用該cssclass
4. 就像是下圖