網頁

2010年7月31日 星期六

誅王勇者─王者的殞落

打了半年的ICC,終於在今天!!推倒25人巫妖王了!!中途歷經許多人員變動,也從早上10點就要喊團的骰團轉變到每次打王都要花很多時間拍賣裝備的金團,過程中還講壞了三個麥克風;感謝這幾個月跟過團的大家,更感謝班底人員!有你們團才開的成。 T.T

2010年7月30日 星期五

網頁排版_美化asp.net元件menu的方法

如果有高超的美術編輯,那麼我們在製作網頁的時候可能會有一個設計稿,當然在設計這些稿的時候通常不會考慮到版面製作的便利,對我這種沒有美術天份又不太專注網頁美化的人來說更是困難到了極點,所以往往利用Asp.Net撰寫網頁時,排版這個工作總是花掉我很多時間。

這次看了要製作的內頁畫面,「哇!真是好看耶!」,但是那個功能選單底下充滿了漸層色,還有一個有點立體的外框框著,先來看看整體架構:

由上圖可以看出來,版頭、內頁應該都不會有太大問題,最主要的問題可能會出現在功能表(Menu)上,如果是對於排版、切圖很有研究的人應該會覺得這也沒什麼了不起,只要切好放到適當的位子,設好滑鼠移過去時要變換的圖片,就可以製作出一個超有質感的Menu,但是我會嗎?當然不會呀!XD

既然我是一個很不會排版的人,而且我比較喜歡可以動態修改的程式,所以我的希望是直接使用Asp.net元件Menu放進Menu那塊區域。所以我要做的事情很簡單,就是用一個可以設底圖的東西把Menu放在那個東西裡面,然後把整個東西放到適當的地方。

雖然講很來很簡單,對於排版苦手的我還是搞了兩個小時,先來看成果:

Menu很順利的放到了有底圖的框架當中,YA!

我的方法是,利用兩個Table包住我要放的Menu,外框的Table負責將整個區塊放在MasterPage的適當位置,並且顯示我需要的底圖,而內框的Table則負責包住Menu,以調整margin-top、margin-left、margin-right和margin-bottom來撐開外框並將Menu移到應該到達的底圖位置。講起來非常抽象,把表格的框線顯示出來就可以很輕易的了解我做的蠢事。XD

最後,兩個Table的程式碼:

<table class="Meunborder_Out" border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
<td style="background-color:White; background-image:url('../Images/ImageTest/menu0.JPG'); background-repeat:no-repeat;">

<table class="Meunborder_In"><tr><td>
<asp:Menu ID="MenuList" runat="server" DataSourceID="SM_DS" StaticDisplayLevels="2"
DynamicHorizontalOffset="10" Font-Names="Verdana" Font-Size="1.0em" ForeColor="#000044"
StaticSubMenuIndent="0px" DynamicVerticalOffset="0">
<StaticSelectedStyle BackColor="#1C5E55" />
<%--主項目被滑過的變色--%>
<StaticHoverStyle BackColor="#666666" ForeColor="White" />
<%--主項目的間距--%>
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<%--子項目被滑過的變色--%>
<DynamicHoverStyle BackColor="#1C5E55" ForeColor="White" />
<%--子項目的底色--%>
<DynamicMenuStyle BackColor="#E3EAEB"/>
<%--子項目的間距--%>
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
</asp:Menu>

</td></tr></table>

</td></tr></table>

對於我這種美編苦手,我覺得效果很不錯耶!XD

網頁排版_置中排版

常常在製作系統首頁的時候,我們會希望整個歡迎頁面可以水平且垂直都置中,這時候可以設定body內的Style來完成。

語法:style ="position:absolute; top:50%; left :50%; margin-left:X偏移量px; margin-top :Y偏移量px;"

整個的重點就是設定位為absolute,將其上起點跟左起點都設為50%,最後給上偏移量,就可以讓你想要置中的網頁置中了。

範例:如果我們有一個歡迎頁面做完以後為326*276。那麼我們就可以利用下面的語法將這一個頁面固定於網頁中間。(X偏移量為-163,Y偏移量為-138,也就是所要置中頁面的總長寬的一半。)

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>版面置中說明</title>
</head>

<body background="Images/BackG/slant_bg.jpg" style ="position:absolute; top:50%; left :50%; margin-left: -163px; margin-top :-138px;">
<form id="form1" runat="server">
<div>
<img alt="" src="Images/ImageTest/wow_Wellcome.jpg" style="width: 326px; height: 276px" />
</div>
</form>
</body>
</html>


註:上圖的女法師為魔獸桌面的小截圖。好帥呀!

Flex_多執行序發生的誤會

以往比較少寫前端介面、後端服務的專案,最近同事遇到一個看似靈異事件的錯誤,今天問老師才知道是一個多執行緒的錯誤。也才想到之前進行WCF服務想用在ASPX頁面上時發生的問題

----------------------------------------------

所以遇到的問題是:執行某一個函式A將其結果丟給一個全域的ArrayCollection,並在之後的程式使用裡面的值;一切聽起來很合理,但是當去執行時,卻一值無法抓取到存進ArrayCollection的數值,趕快以debug模式來看看為什麼沒有值?發現程式跑到函式A內時的確有正確抓到數值並已存入ArrayCollection,但要使用時卻顯示空值。

之後利用Alert分別對於函式內外去對ArrayCollection判斷是否為Null,發現跳出的第一個Alert為not Null,第二個Alert為Null,所以很明顯他抓到了,他又丟掉了?

晚上同事問老師以後,有兩個重點:
1. Flex為多執行緒的程式,所吐出的兩個Alert不見得你所看到的第一個就是你認為程式所執行的第一個Alert,有可能後面執行出來的Alert蓋住前面的,導致你以為程式邏輯是A→B,但其實是B→A;所以若是偵錯時使用Alert有可以誤判邏輯順序,最好使用中斷點或是trace()來處理。(後來使用中斷點也查出其實程式處理程序跟我們的想像相反,原因就是第2點)

2. Flex前端在送出需求後,會繼續執行後面的程式,也就是所謂的非同步;所以才導致誤判程式的執行順序,以為已經抓取到的資料又丟失了,但其實是還沒抓到就先用。

而在Flex當中若要接服務有三種方式:1.Http Service 2.Web Service 3.Remote Object,但這三項服務應該都不太會遇到上述問題,因為都會撰寫一個服務完成後的回應事件。而這次會出錯的原因是:所使用的服務為其他API所執行,忽略要處理服務回應的事件而導致。

-----------------------------------------------

我也好想RIA(打滾)。

2010年7月28日 星期三

星海爭霸二在公測了

好久好久的等待,終於星海爭霸又回來了,試玩一個晚上的結果,只有驚艷再驚豔,不是去細究倒底哪裡做的好哪裡不好,就只能說該BZ出來的東西真的水準之上上作,永遠都有領導者的感覺,魔獸一出線上遊戲望塵莫及,現在星海出來又是一種即時戰略霸主的感覺。

---------------------------------------------------------
有很少數的公司像BZ,對品質的堅持而產出驚艷的產品。

大部分的公司是拼命尋找可以賺錢的途徑,並且跟他們下面的人說:你給我盯好進度,你給我控管成本,要求很多但是卻叫你"達成最低要求就好",品質?就好像是一個玩笑;對案子的評估就是一個預設值為true的布林值,我甚至懷疑他腦袋中沒有判斷式?對於案子一視同仁,沒看到出手的策略、沒看到出手的原因、只有清晰的"業績"二字。

賺錢,絕對是一個重要的目標,開不賺錢的公司沒正常人想幹,但當傳達給部屬的感覺是,短程計畫:賺錢賺錢、中程計畫:賺錢賺錢、遠程計畫:賺錢賺錢,以前我認為"公司願景"這四個字太虛無飄渺,現在我很希望有人跟我說願景是什麼?我們有在朝著一個目標嗎?如果你是有權力的人,做一些真正值得去做的事情,大家一定會尊敬且感激你的,抬頭看看你家的長官值得你尊敬與感激嗎?

業主就像是玩家,我們有做出令業主驚豔的產品嗎?還是?
花錢買一個好的東西:讚押
花錢買一個普通的東西:可以接受
花錢買一個爛的東西:.....
花錢買一個超爛的東西:?
你希望買到爛東西嗎?為什麼要逼別人買爛東西?

想要有好的產品,必須要了解核心並整合上下游,而每一種產業都會有其核心技術,如果要發展這些所謂的核心,必須要有OK的環境、適當的時間、討論的火花、具研究才能的人,看似BZ應該擁有這些項目,或著更多額外可以爆出更多火花的東西,你們公司(部門)有嗎?或是....你們公司(部門)"真的"有要做嗎?

---------------------------------------------------------
不知道為什麼看到星海爭霸做的這麼好,很開心的玩,但其實也很感慨。

很想去跟他們說:你們可以認真做點有用的事情嗎?

2010年7月26日 星期一

SQL_找出最新日期、最舊日期、最大值、最小值

最近執行一個需要比較多查詢功能的案子,看看SQL資料夾裡面也有好多txt檔,也來整理一下這些內容好了。

這是一個常常都會運用到的查詢方式,比如說想要最新的巡察資料、最新的價格、最大的座標範圍、最老的歷史紀錄、最小的道路寬度等等;總之,各個不同的領域會有不同的需求,但通常我們不會只需要那個最大或最小的值,而是需要利用這個值去做為篩選的條件,例如:與目前時間最接近某個商品的報價。

要找出"最新"、"最大"、最舊"或"最小",不外乎就是使用Min與Max函式,比如說要由Data資料表取得最大年份:
select max(DateYear) as MaxYear from Data
要取得號碼是25的最小報價是哪天:
select min(price) as MinMoney from Data where NO=25
諸如此類的方式就可以取得我們想找到的數值。

但是我們不會只要這個值,我們會希望利用最大年份去查詢某一個資料表,所以必須使用子查詢的概念,將所獲得的"最大值"或"最小值"再去進行一次查詢:
Select A欄,B欄,C欄
from Data,(select max(DateYear) as MaxYear from Data) as MaxYearTable
where Data.DateYear = MaxYearTable.MaxYear and 其他篩選條件

由上面可以看的出來,我們所做的是對我們原始的資料表與取得最大值的資料表進行查詢,然後在where條件設定原始資料表的年份要等於子查詢所得的年份;如此就可以很輕鬆的篩選出某一個資料表某欄最大(最小)時的全部資料。

舉個簡單的例子:
1.資料庫原始資料:是一個有五個設施的資料,1、2、3設施巡查了一次,第4個巡查三次,第5個則看了四次,如果我們希望列出最新的巡察結果該怎麼做勒?

2. 首先我們先看看是否可以正確的抓到日期最大值,使用Max函式,看起來有正確的抓到資料。

3. 直接將這一個子查詢丟到where式中,可以發現成功的找到最新一筆資料。但這時候應該會感覺很奇怪,因為我們沒有指定要找哪一個設施,所以在11月5日那天只看了第五個設施,所以只出現一筆資料,那我們要怎麼看其他設施的最新資料呢?

4. 很單純的想,直接在子查詢跟主查詢加入一個SaveShipID=4的查詢條件,來獲得第4個設施的最新資料。當然,這樣可以很直觀的查出某個設施的最新巡查資料,但這跟我們一開始想像的有些落差,絕大部分的應用應該都是要列出"所有"設施的最新資料,而非某一項或某一特定物品的最新資料。

5. 需要列出每一種設施的最新資料,立刻就會想到group by這一個指令,來將不同設施的最新時間都抓出來。

6. 有了最新資料列表,最後就可以利用表格連接的方式取得"各設施最新的巡檢資料"。

7. 貼出最後一個SQL語法,比較方便複製。

select PatrolSaveShip.SaveShipID,[State],PatrolName,PatrolDate,Mark
from PatrolSaveShip,
(select SaveShipID, max(PatrolDate) as maxtime
from PatrolSaveShip group by SaveShipID) as idview
WHERE (PatrolSaveShip.SaveShipID = idview.SaveShipID)
and (PatrolSaveShip.PatrolDate = idview.maxtime)

第1句:要選擇的欄位
第2句:要查詢的原始表格
第3、4句:子查詢創出與原始表格要連接的最新時間表格
第5、6句:串聯表格的查詢子句。

2010年7月23日 星期五

Flex_自訂事件

當我們開始使用自訂元件後,就會發現一個很嚴重的問題:既有的事件沒辦法傳遞自訂元件內的物件,因為我們所撰寫的元件會傳遞出怎樣的物件(ValueObject)只有設計的人知道,所以既有事件當然就無法處理這樣的狀況,所以我們必須要自訂事件。

當然自訂事件就像是自訂元件一樣,不可能從頭寫到尾,我們會尋找一個既有的事件(Event)來繼承,並且加上自己需要傳遞的內容。而當中有一些需要注意的事項:

1. 繼承既有事件後,必須在建構子加上Type屬性,用以記載所傳遞的事件名稱。(該名稱為之後使用事件時的名稱,就類似Click這樣的名稱)
2. 因為是繼承其他事件,所以在建構子內必須要加入super函式,並且要將事件名稱傳遞給他,所以應增加super(type);並且於建構子內增加其他需要額外傳入的參數(通常為自訂的ValueObject)。
3. 覆寫clone函式。clone函式是於事件上浮階段時,將所傳遞的事件複製到下一層級的方法,所以覆寫的原因是:避免在上浮階段我們所額外傳遞的物件會丟失。可以參考下圖,如果沒進行覆寫,按鈕會成功傳遞自訂事件,但經過clone函式複製事件要繼續往上傳時,會發現事件回復為所繼承之事件。

完成自訂事件後,當然就是使用方式,流程有三項:
1. 實體化自訂的事件,並且傳入適當的參數。
2. 利用dispatchEvent將事件傳遞出去。
3. 於Metadata標籤內定義Event標籤,以讓編譯器知道有這一個事情。(若是不做也可以正常執行,但就不能透過"."來查看到自訂事件)。



-------------------------------------------------
這週所上的自訂元件、ValueObject、自訂事件真是太精采了,第七章值得多讀幾次。 XD

Flex_日期格式設定(DateFormatter)

通常預設的日期格式並沒有辦法直接使用,所以Flex提供DateFormatter來進行格式的設定。
1. mxml標簽

2. ActionScript

Flex_Repeater的使用

在程式開發的時候,往往我們會希望製作很多小元件,供程式重複使用,而有些小元件在一開始設計就是因為他會大量出現在程式當中而把他獨立出來開發。往往元件開發完成,我們就會大量的複製在需要擺放的容器內,類似我們在Asp.net裡面擺上5個Label一樣:

而在Flex當中有一個很有趣的標籤"mx:Repeater",他可以幫我們複製在標籤內的元件,而更炫的是複製的準則是依據給定的數據來源,也就是數據5筆就會自行複製5份,並且可以用Binding的方式將數據綁定到元件上,比如說按鈕的文字依照數據來改變。

看看設計頁面,就只會看到Binding的內容:

結果,因為數據有六個,所以複製了6份按鈕,並且依照數據內容顯示。


註:在使用Repeater標籤時,裡面所Binding的數據不能使用this為首,原因為他是虛擬的,使用this並無法找到。

註2:當要使用Binding時,可利用Repeater的ID.currentItem.屬性名稱來進行。(例如:RepeaterID.currentItem.title)

Flex_Error #2048: 執行程序安全性違規

Flex是屬於前端介面的程式,專案執行時不太可能都不跟資料庫扯上關係,所以後端服務的開發其實也是很大的一塊;當然有許多案子,買了一台新機器就整套灌到尾,有OS、有DataBase、有後端的一切服務;但有的時候架構有可能會比較大,前端AP在DMZ區、後端服務在Inside區之類的,或是專案要去接取別的案件所寫的各項服務。總之,很有可能遇到服務發佈的伺服器與Flex程式所在伺服器並不相同,這時候就"應該"會遇到一個問題!

整句錯誤碼是:[RPC Fault faultString="Send failed" faultCode="Client.Error.MessageSend" faultDetail="Channel.Security.Error error Error #2048: 執行程序安全性違規:http://localhost:3000/OlaRemote_setendpoint/flex_bin/OlaRemote_setendpoint.swf 無法從 http://IP/OlaRemote/Gateway.aspx 載入資料。 url: 'http://IP/OlaRemote/Gateway.aspx'"]


如果上網查資料,應該會有很多文章告訴你就是要增加一個crossdomain.xml檔案,然後也有很多文章跟你說:我加了這個檔案但是沒有用。之前測試的時候的確加了crossdomain.xml檔案於IIS的根目錄以後就可以正常呼叫服務,但今天卻遇到了怪事情。

先紀錄加crossdomain.xml的解決方案:
1. 先製作一個名為crossdomain的xml檔案。
2. 內容為
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all"/>
<allow-http-request-headers-from domain="*" headers="*"/>
<allow-access-from domain="*"/>
</cross-domain-policy>

3. 放置到服務發佈伺服器的IIS根目錄(預設為C:\Inetpub\wwwroot)
4. 再執行一次程式,"應該"要可以呼叫了。
當然,基於安全性的考量,在製做跨網域的設定檔時,"理論上"不能採用"*"號來設定,必須要針對希望通過的網域或IP進行設定,就像下面的設定。

<allow-access-from domain="*.example.com" />
<allow-access-from domain="www.friendOfExample.com" />
<allow-access-from domain="192.0.34.166" />

而adobe也有針對這個問題說明要如何設定。

--------------------遇到鬼分隔線---------------------
好!這個網路上充滿解答的問題為什麼要發一篇?遇鬼流程:
1. 於伺服器A測試RemoteObject服務,有放置crossdomain.xml檔案,利用IIS虛擬伺服器可正常呼叫執行。
2. 於伺服器B沒有放置crossdomain.xml檔案,發現無法連線。
3. 趕緊放置設定檔,呼~~~也可以利用IIS虛擬伺服器正常呼叫執行。
4. 中午吃完飯,趴一下。
5. 想說關掉Builder前再看看服務是否還正常,發現A伺服器出現#2048。
6. 趕緊測試B伺服器,結果正常執行。
7. 檢查A伺服器是否有何改變→→→找不出來改變。
8. 重測專案,發現編譯出來的swf檔與html皆可以正常執行,只有利用IIS虛擬伺服器不能執行。
9. 將A伺服器的fluorineFx專案移往C伺服器建立虛擬目錄,擺上跨域檔,可正常執行。
10. 利用設定專案檔的方式連接Remote:OK!
11. 將IIS等服務重開:無用;重新設定虛擬目錄:無用;將A伺服器重開:無用;利用其他人的電腦連接A伺服器:無用;
12. 將Flex專案發佈於C伺服器:出現#2048,將專案發佈於A伺服器:可正常執行。

所以,結論是不知道什麼原因,導致即使加了跨域的設定檔案,於A伺服器都無法跨域執行;而且是吃完飯回來以後才掛掉的~~~~T.T

2010年7月22日 星期四

asp.net_解決GridView匯出Excel的問題

距離上次寫資料匯出的功能已經好久好久,之前在匯出時是直接匯出Table,所以並沒有發生什麼問題,這次要匯出gridview到Excel就遇到了很多問題,逐一把他記載一下:

第一個錯誤:型別 'GridView' 的控制項 'gv' 必須置於有 runat=server 的表單標記之中。

如果去察看程式碼,會發現GridView明明就已經放在有runat=server的標記的標籤中,卻還是出現這樣的問題,網路上有一個通用的解法,但是沒有看到那篇文章特別有提到原因。

MSDN:Page.VerifyRenderingInServerForm為確認在 Run Time 時期呈現了所指定 ASP.NET 伺服器控制項的 HtmlForm 控制項。會回傳或使用用戶端指令碼的伺服器控制項,如果未放在 HtmlForm 伺服器控制項 (
) 標記之內,將無法運作。這些控制項可以呼叫這個方法來呈現清楚的錯誤訊息 (當它們未被封入 HtmlForm 控制項時)。(原始MSDN網頁)

意思就是你沒放在有runat="server"的標籤中啦!但是我放啦!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!你沒放!我放了!總之,他認為你沒放所以錯了!

解法:覆寫VerifyRenderingInServerForm,讓他不要去執行這一項驗證。

Public Overrides Sub VerifyRenderingInServerForm(ByVal control As Control)
'處理'GridView' 的控制項 'GridView' 必須置於有 runat=server 的表單標記之中
End Sub

第二個錯誤:RegisterForEventValidation 只能在 Render(); 期間呼叫。

這項網路上也有許多文章提出一個解法,大部分的人提出要在的標籤中,修改AutoEventWireup="true"並增加EnableEventValidation = "false";另一個人提出只需要增加EnableEventValidation = "false",並不需要將AutoEventWireup改為true。測試之後只需要增加EnableEventValidation = "false"屬性即可,但也有可能AutoEventWireup會解決另一個問題,還是先記錄下來吧!

第三個錯誤:檔名用中文時無法正確顯示。

解決方法就是利用HttpUtility.UrlEncode來進行轉碼動作。

Response.AddHeader("Content-Disposition", String.Format("attachment; filename={0}", System.Web.HttpUtility.UrlEncode(FileName & ".xls", System.Text.Encoding.UTF8)))


第四個錯誤:若是輸出內容有亂碼,則可以將編碼指定為utf-8。

Response.Charset = "utf-8"
Response.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8")


最後將完整程式碼附在最後面:

Dim FileName As String = "人行道資料匯出"
Response.Clear()
Response.Write("")
Dim tw As StringWriter = New System.IO.StringWriter
Response.Write(tw.ToString())
Response.Buffer = True
'Response.AppendHeader("content-disposition", "attachment;filename=" & FileName & ".xls")
'Response.Charset = "utf-8"
Response.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8")
Response.AddHeader("Content-Disposition", String.Format("attachment; filename={0}", System.Web.HttpUtility.UrlEncode(FileName & ".xls", System.Text.Encoding.UTF8)))
Response.ContentType = "application/vnd.ms-excel"
Me.EnableViewState = False
Dim oStringWriter As System.IO.StringWriter = New System.IO.StringWriter()
Dim oHtmlTextWriter As System.Web.UI.HtmlTextWriter = New System.Web.UI.HtmlTextWriter(oStringWriter)
Me.DataPanel.RenderControl(oHtmlTextWriter)'←要匯出的地方
Response.Write(oStringWriter.ToString())
Response.End()

有參考到的文章:
1.topcat姍舞之間的極度凝聚-解決GridView使用RenderControl取得HTML出現的問題
2.章立民研究室-讀者詢問將 GridView 內容匯出成 Excel 檔案問題
3.ASP.NET魔法學院-擴展GridView控制項-支援Excel及Word匯出
4.甘蔗築夢田-ASP.NET 匯出 Excel - 只能在 Render 期間呼叫 錯誤
5.藍色小舖

2010年7月21日 星期三

Flex_客製化元件的注意事項

每每程式學到一個階段,就會開始想如果要做OO功能該怎麼辦?那XX功能又該怎麼辦?不管是什麼語言,所提供的元件一定會在某些專案上不足以完成需求,這時候高手都會跟我們說:那就自訂元件~~~

所以,Flex要怎麼自訂元件?有兩條路可以走1.利用ActionScript 2.利用MXML標籤。很明顯如果使用ActionScript是一條比較困難但可以達成各種功能的路,而使用MXML標籤則會比較簡單,但或許會有些限制。

到底改寫元件可以怎樣?舉一個很常見的例子,在使用asp.net的下拉選單時,會有text與value屬性,分別代表顯示出來的屬性跟被選取時程式讀取的屬性;但在Flex的check並沒有這個分別,只有一個text屬性,那麼我們就可以利用改寫的方式,手動增加一個記載value的屬性,來達到這個目的。

要改寫既有元件有幾個重點:
1. 既然是改寫,在改寫元件裡應使用super()函式於建構子,讓改寫的元件先執行父元件的建構子,已完成一些必要的功能。
2. 同樣的,在override的函式中,也應保有既有的功能,所以利用super.函式名稱(例:super.rollOverHandler(event);),來先執行原始的功能,再於後面補上自己所需要的新功能。
3. 若是需要參考原始元件的程式碼,可以於Flex Builder的Source模式中,以Ctrl+左鍵點選元件名稱,即可連接該元件之原始程式碼。
4. 可利用Ctrl+O查看原始元件之所有方法,以判斷該覆寫的方法函式為何
5. 使用自訂元件應先在Application加入命名空間(例:xmlns:comp="comp.*")才可正確引用自訂元件。

所以,如果要做會發光的按鈕、自動提示的文字輸入框,雖然都可以在程式裡面控制,但若先將其做成自訂元件,將可以更容易的重覆使用,也會讓程式碼更好閱讀。

Flex_混亂的arrayCollection與[Bindable]

今天(第九堂)有提到arrayCollection與[Bindable],翻翻之前寫的筆記感覺非常奇怪,來看看前面的描述:

課堂上曾經問過老師:array與arrayCollection的差異,結論是:如果需要進行資料繫結,那就將資料塞到ArrayCollection吧!如果不需要進行這樣的動作就兩個擇一即可,但是ArrayCollection會使用比較多的記憶體。

後來在敎內嵌圖片的時候,知道了[Bindable]標籤的意義,意義是:MateData標籤,告訴編譯器,之後資料改變要做動態Bind的動作。

看到這應該也會覺得有點混亂,依照[Bindable]標籤的意思,如果我對於Array型態標註[Bindable],那麼他應該要擁有動態Binding的能力才對?又或者ArrayCollection已經有資料繫結能力了,下標籤的意義是什麼?總之,我馬上就搞混了。XD

問了老師,結論是:[Bindable]可以告訴編譯器資料要作Bind的動作,但其資料形態是否可以進行動態的Binding則需要看該型態是否有相對應的方法,而Collection變數型別擁有判別資料繫結的能力;所以若是需要進行動態Binding的動作,就需要利用類似arrayCollection的Collection變數型別,且利用[Bindable]標籤告訴編譯器要做這件事情;所以即便[Bindable]標籤用在無法"動態"Binding的型別上(如array),當然還是無法進行所謂的"動態"。

那另一個問題又產生了,為什麼不下[Bindable]標籤,編譯器也可以正常運作進行Binding的動作,原因是Flex Builder會自行去尋找應該對應繫結的對象,但應該可以發現如果沒下[Bindable]標籤Flex Builder會給你一個警告。

所以最終結論:
1. 要繫結的資料應該下[Bindable]標籤讓編譯器知道該跟誰繫結。
2. 要動態繫結的資料應使用Collection系列。
3. Arrary要繫結就要下[Bindable]標籤,但要動態繫結時,因沒有對應的方法要自行用ActionScript進行。
4. ArrayCollection可以動態繫結,但是還是需要利用[Bindable]標籤告訴編譯器該資料要繫結。

2010年7月19日 星期一

SQL_SQL2008-防止儲存需要資料表重建的變更

之前測試SQL Spatial都是單純"想知道"、"別人需要",現在因為新的案子終於要正式投入SQL Spatial,而正式加入Spatial的SQL版本為2008,那當然就是以SQL2008為測試環境進行開發囉。

首先測試SQL Spatial的部份,先依照要匯入的資料利用指令碼建立資料表結構,第二步手動新增一個geometry欄位來承接空間資料,結果發現「防止儲存需要資料表重建的變更」,看起來在SQL2008內若不是第一次建立表格時就產生好的資料結構,在爾後進行會"改變到資料表結構"的變更,都會被限制住。

來看看整個訊息:不允許儲存變更。您所做的變更要求下列資料表必須先卸除然後再重新建立。您可能對無法重新建立的資料表做了變更,或是啟用了「防止儲存需要資料表重建的變更」選項。

提示看起來有兩招,第一卸載他、第二關掉那個鬼設定。卸載他感覺怪怪的,因為卸載以後不知道要怎麼進行操作,所以把那個鬼設定關起來看看。

位置:上方工具列→工具→選項→設計師→資料表和資料庫設計工具→防止儲存需要資料表重建的變更,把他取消。

可以變更囉!

2010年7月18日 星期日

浴血霜育鎮壓者



感謝:++、JENS、小鳥、辰藍、飛魚、真影、柚子、寶貝、阿龍。

2010年7月16日 星期五

AutoCAD Map 3D匯資料到SQL Spatial請用2010以後版本

之前在使用Oracle Spatial時,都是使用AutoCAD Map 3D 2009來匯資料,也寫了一篇怎麼匯資料到Oracle Spatial的文章,而之前在匯的時候常常會看到一個SQL Server的FDO連線,就以為如果要匯入SQL Spatial就是利用這個FDO,今天真的有需要要匯資料時才發現原來2009並沒有支援SQL Spatial,他只是一個可以連線到SQL Server的FDO。上網查似乎要2010版以後才有支援,或許去下載FDO安裝後就可以匯入也不一定。

所以這篇的重點就是,如果你還在用2009版想要匯入SQL Server Spatial就可以先停下來囉!

Flex_如何去掉ScrollBar

聽老師說Flash4就沒有ScrollBar了,如果需要才自己加上去,但是Flex3還是會幫我們加入,所以想拿掉就要把他關掉,語法是:

horizontalScrollPolicy="off"
verticalScrollPolicy="off"

OVER。

Flex_如何驗證表單輸入(Validator)

在Flex裡面有一個form容器可以很輕易的做出表單,提供了簡單的排版,或是可以幫必填欄位加上星號,而老師的書裡面都有很詳盡的說明了。

但是寫過表單的都知道,使用者一定會亂輸入、使用者一定會都不填就想送出、很容易就因為很鳥的事情有問題。好!所以一定要做驗證,那做驗證有幾個關卡:
1. 使用者輸入做驗證
2. 程式收到輸入後,寫入資料庫前做驗證
3. 寫進資料庫時做驗證
有玩過即時戰略的都知道,大門守好先贏一半!而Flex是前端的程式,也主要做第一個使用者輸入驗證。

要進行驗證需要藉由Validator系列才能完成,Validator這一個基本驗證主要有五個屬性:
1. source="{this.text1}" -------要驗證哪一個物件。
2. property="text"--------------驗證這個物件的哪個屬性。
3. requiredFieldError="沒填!" --驗證錯誤時要出現的警告文字。
4. trigger="{this.btn_login}" --以哪個物件來觸發這一個驗證,預設為取得焦點又失去焦點時。
5. triggerEvent="click"---------觸發的驗證的事件。
所以,就可以獲得一個在btn_login執行click事件時,去檢查text1的text屬性是否有填寫的驗證。

看到上圖,通常都會有一個問題,這個提示字不能變大嗎?因為Flex預設的字體大小為10,所以通常我們都會希望字變的大一點,方法就是透過Css設定:


最後,我們可能不知道內建的驗證到底有哪幾種,就可以利用import mx.Validator來看一下裡面的內容:


不夠用?可以繼承Validator,自定屬於自己的好用驗證。

Flex_Module與Component的差別

今天同事問老師在新增類別檔時,Module與Component的差別在哪裡?

當我們要新增一個檔案時,會看到列表裡面有一些圖示只差一點點,搞不太懂差別在哪裡的檔案,所以本篇主要記載這些檔案的差異。

由第一個字的分類可以看出大致分為MXML與ActionScript兩種,MXML新增後可以發現該檔案是可以拉介面控制項的,而ActionScript則是單純撰寫ActionScript語法。
1. MXML Application:可以獨立執行的MXML檔案,編譯時為一SWF檔案。
2. MXML Component:可讓其他MXML呼叫引用,編譯時會與呼叫的Application合併為一個SWF檔案。
3. MXML Module:可讓其他MXML呼叫引用,但編譯時各別編譯成一個獨立的SWF檔案。
4. ActionScript File:空的ActionScript檔。
5. ActionScript Class:精靈式產生ActionScript Calss檔案。
6. ActionScript Interface:介面製作檔案。

所以,什麼時候該使用Component?什麼時候該使用Module?答案就是沒有答案,當某專案認為他可以忍受一開始的等待,那麼用Component使得全部的程式都一次載入,操作上就可以非常流暢;或是專案希望在一開始就快速的開啟頁面,那麼就可能要使用Module來製做元件。

當然,最後一定是會混著用,總之有改變空間,就看個人設計了。

2010年7月14日 星期三

是電腦的錯還是函式的錯?

今天從一個神祕的地方拿到了一個神祕的函式,聽說可以藉此悟出人生道理,對於我這種需要開釋的人當然不能錯過這個機會,趕快放進電腦執行....

沒想到就在按下鈕的時候,悲劇發生了,電腦高速運轉發出嘎啦嘎啦的聲音,一個很簡單的函式卻遲遲沒有跑出結果,似乎電腦賣力的執行,也沒辦法改變跑不出結果的事實...

不知道是函式沒寫好,還是電腦執行速率不佳,如果這樣不管他,30小時過去後電腦會不會壞掉?


現在好像死當了。

Flex_內嵌圖片(Embed)

一般在系統在顯示圖片時,通常有兩種需求:1.按鈕或選單上面的小圖示、2.使用者需要查詢的圖片資料,通常按鈕或選單上的圖示我們會使用固定的圖示,所以會寫一個路徑在程式碼裡面,而查詢的圖片會使用動態的方式改變要顯示的圖片,這在ASP.NET理面其實沒什麼差別,不過就是動態組成字串或是字串寫在程式碼裡面而已。

而在Flex當中,因為使用者在瀏覽網頁時,會先下載整個SWF檔案,既然下載到了用戶端,整體執行速度當然有一定的水準,但在圖片顯示時若是採用動態方式,則會因為跟伺服器索取圖片資料而有延遲的現象,這時候我們就可以利用內嵌圖片的方式,將所使用的圖片包在SWF檔案中,讓使用者開啟網頁時一併下載回去。當然,這也是要做取捨的,若是需要動態的查詢圖片,或是圖片檔太大,還是不要內嵌會比較好;所以,是否要內嵌就看系統需求來決定。

語法:
[Bindable]:MateData標籤,告訴編譯器,之後資料改變要做動態Bind的動作。(原始內容)
[Bindable]:MateData標籤,告訴編譯器該資料要作Bind的動作。(2010/07/21修正)
[Embed(source="assets/normal.jpg")]:內嵌圖片所要讀取的圖片位置。
private var normalImage:Class;:MateData所描述的Class名稱。

注意:
1. 標籤語法寫在所要描述Class的前面。
2. 上述語法即可將圖片存入Class中使用。

範例:
昨天整理筆記的時候,有寫到Alert的語法,當中有一個iconClass的屬性,就是要讓我們內嵌圖片使用,所以範例就利用Alert來做做看。

結果:

程式碼很簡單,就是利用Embed的標籤將圖面資料存放到Image1的Class當中,在放置到Alert的iconClass的屬性中。

內嵌程式碼:
[Bindable]
[Embed(source="img/i_home.png")]
private var Image1:Class;

Flex_CDATA的意義

在Flex裡面寫ActionScript的時候,會看到在Script標籤內有一個CDATA的區塊,因為是編譯器自行產生可能就不太會去深究到底為什麼要有這一個區塊。之前也都是認為這就是"規定",並沒有特地去查到底是為什麼?

第一週的課程老師就有解釋為什麼要用這個區塊包著ActionScript,就覺得聽過就好,但是昨天的範例就讓我覺得應該把這個原因記載一下。

2010年04月13日範例:
可以很簡單看出來,這單純就是一個顯示文字的文字方塊,只是裡面帶有html語法。

以上範例有兩個值得記載的。
1. 使用開放式標籤:由上例可以看出htmlText為TextArea的屬性,但因為程式碼編排,而改用開放式標籤來呈現。
2. CDATA區塊:該區塊可以想像成一個不受干擾的空間,許多標籤語言所用的如<、>不會在該區塊被執行,所以即便在裡面撰寫html標簽語法也不會被誤認為是Flex的標籤語法,而會如實的將文字呈現出來。又因為TextArea有支援簡單的Html,所以當可以如實傳遞Html內容給TextArea時,就可以在使用者端正確顯示。

2010年7月13日 星期二

Flex_看到S時的反應、物件陣列

老師說:「如果在撰寫Flex的時候看到S就要知道,通常都代表是一個陣列。
例如:this.lab_info.filters = [new GlowFilter(0x5bc5fc)];

在ASP.NET裡面並沒有物件的陣列,但在Flex裡面有!!!
如果程式中有很多按鈕,我們可以將他取名為button+數字,也就是button1、button2、button3,如此就可以在ActionScript上面使用this["button"+i]的表示方法,如果i=1,那麼this["button"+i]就等於 this.button1。

所以之後如果動態新增物件在畫面中,運用這樣的技巧,就可以更容易操作物件了。

Flex_Alert

Alert是一個運用非常頻繁的指令,而在Flex當中共有七個參數,老師花了點時間介紹,也把他記錄下來好了。

alert的用法,例如判斷使用者是否有確定要刪除檔案
Alert.show(text,title,flags,parent,closeHandler,iconClass,defaultflags)
text:內容文字
title:標題文字
flags:要出現的按鈕有哪些(Alert.YES|Alert.NO|Alert.OK)
parent:要依附在哪一個項目上
closeHandler:當Alert視窗被關閉時會執行的涵式
iconClass:要顯示在Alert視窗上的小圖示
defaultflags:預設的點擊按鈕

註:iconClass是要使用一個Class來接小圖示,再將這個Class連接上來,怎麼寫這個Class後面上課才會敎。XD

Flex_事件

又來到了星期二,要上Flex的這一天。如果不趕快把筆記寫一寫就真的累積太多了。XD

在第四堂後半及第五堂花了一些時間說明了"事件"(event)這一個重點項目,之前在自學的時候也感覺事件真的是RIA程式開發的重頭戲,事件處理的好操作起來就只能說是行雲流水,不好就... /.\

事件這個主題大致可以分為1.事件的種類2.事件的傳遞3.事件的觸發三項。

一、事件的種類可以分為系統事件與使用者事件兩種,使用者事件因為是使用者的作為產生,所以並沒有辦法去預測,也就不會去探討事件處理的先後順序,但是系統事件則是必定會遵循一定的事件處理流程。
從程式啟動到使用者可以使用的過程共有四個事件可以使用:
1.preinitialize(程式啟動)
系統設定屬性
2.initialize(屬性設定完成)
系統建構元件
3.creationComplete(元件建構完成)←通常初始化都寫在這邊
系統排版
4.applicationComplete(排版完成)

二、事件傳遞,整個傳遞流程分為三段:擷取階段(Capture)→目標階段(Target)→上浮階段(Bubbling),而再撰寫一般的應用程式通常都不會用到擷取階段,所以呼叫擷取階段必須要下特定的參數,程式才會於該階段執行。整個傳遞流程就如下圖所示:

而事件傳遞又與在程式中常常會遇到的Target與CurrentTarget有很大的關係;Target很好理解,就是被執行的那個物件,如果是按下按鈕,那麼Target不管在何處皆是按鈕本身;CurrentTarget則會隨著事件傳遞(上浮階段)有所變化,以上圖為例,即按鈕按下後CurrentTarget(目前目標),會在事情上浮階段中從Button→Panel→Application。也就是說,我們希望Panel上面的任何物件被按下時,都發生某一個動畫,那麼就可以在Panel的mouseDown事件中寫下,event.currentTarget.要做的事情,這時候的currentTarget當然就是指Panel本身,而其他物件被點選時,就因為上浮階段而達到我們希望的效果。

三、事件觸發也分為兩種,一種是直接使用標籤語言:click="ClickHandler(event)";另一種則是在ActionScript內寫事件監聽:addEventListener。而在事件觸發當中,有一個原本沒有搞清楚的觀念,就是在ClickHandler(event)上,event是一個特殊詞,指的是傳遞相關事件給這個函式,而到底是傳遞什麼樣的事件,就要看是觸發在什麼事件上,例如:滑鼠點擊就可以傳遞滑鼠事件(event:MouseEvent),而每個事件的傳遞其實都是一大包的資訊(event.altKey、event.ctrlKey為滑鼠事件傳遞的組合鍵資訊),至於要知道Event裡面有什麼屬性,可以透過debug模式來確認。

大致上事件就是這三個大重點,似懂非懂了話會越寫越模糊,一定要先搞清楚。over

2010年7月12日 星期一

MapGuide_變更MapGuide Stie密碼教學

沒有想到竟然會有人留言問問題,真是太驚訝了。XD

提到的問題是「如何去修改Studio的帳號密碼呀?」。

其實這個問題應該不存在,因為studio是沒有密碼的,開啟studio所輸入的密碼其實是要連接MapGuide Site的密碼,也就是說我們可以利用studio這個容器,去讀取各MapGuide Stie的內容,並將其進一步的設定圖層、地圖或是Layout等等項目。而我們所撰寫的程式,也是類似studio的感覺,是利用讀取MapGuide Site裡面的內容,進而呈現各項圖資的設定,並進一步進行與使用者互動的動作,所以通常在讀取地圖的那個頁面我們會利用MgUserInformation userInfo = new MgUserInformation("帳號", "密碼");的方式,指定頁面用何帳號來讀取MapGuide Site內的資料。所以不管是什麼應用程式,想要讀取MapGuide所發布出的地圖服務,當然就必須要有適當的權限的帳號來進行,就像下面的示意圖。

好!所以我們要變更的密碼其實是MapGuide Site的密碼:
步驟:
1. 打開MapGuide的管理介面(http://localhost/mapguide版本/mapadmin/login.php),以Administrator的帳號登入。
2. 點選Manage Users→選擇Site Administrator→點選Edit User(或是直接點選Site Administrator超連結)。

3. 於Password與Confirm password輸入密碼。

4. 按下Save鈕。

就可以登出使用新的密碼進行登入了。

何謂空間資料庫?

最近空間資料庫越來越火紅,很多案子都會運用到,比如說Oracle Spaital,SQL Spatial用的人越來越多,這就讓我想到之前執行過的一個案子,而那個案子也提到了空間資料庫。

到底什麼是空間資料庫?是存空間資料的資料庫嗎?聽起來好像是又好像不是?

首先似乎要先看什麼叫做資料庫,網路上有人這樣說:資料庫是相關資料的集合。這句話似乎沒有提到任何軟體,當然,這種龐大的定義一定是非常模糊的,所以我們不太可能看到資料庫就是將資料存在SQL Server裡面的這種鬼定義。所以存在dbf是資料庫嗎?存在txt是資料庫嗎?似乎都含有資料庫的意義,差別在於好不好用而已。

所以回到空間資料庫,想必他的定義應該是:空間資料的集合。既然如此,shp file是空間資料庫嗎?sdf是空間資料庫嗎?用txt存放wkt是空間資料庫嗎?這種不是存放在"資料庫軟體"內的空間資料,似乎也是屬於空間資料庫的一種。

聽起來很合理,但是講這些也沒什麼用,因為很多寫規格的人不會管這麼多,他會寫說:資料要存放於資料庫,圖檔要存於空間資料庫。然後執行案子的時候跟你說:我就跟你說要存在Oracle了呀。(笑)

所以結論就是,問問他要什麼,別管他寫什麼,最後確認給的符合字面,SAVE~~~

題外話,我們都知道考公務員要早點考,這樣年資早點開始累積,最好就是讀書時就考到,出社會直接當公務員,阿~~~真是人生一大樂事呀!這些功課超好,腦袋超群的人們,就開始花很多時間處理公文,花很多時間辨明那些是屬於要推給別科室的事情。而老鳥就將最棘手沒人會的案子給菜鳥,菜鳥就發包給那些也把棘手案子給菜鳥的顧問公司,好有趣。

人行道管理系統

前一陣子花了很多時間寫這個系統,寫了很多之前專案沒有嘗試過的功能,雖然是一個內部系統,但覺得有很多有趣的功能,所以針對功能面做一個介紹好了。

1. 利用AJAX的Tabs,結合工程管理生命週期的概念,讓使用者不會有操作中斷的感覺。

2. 利用Flex開發施工前、後照片比對功能,比起一般網頁頁面更具操作性。

3. 利用Mapguide與Oracle Spatial結合,動態劃定工程案件位置。

4. 以浮動視窗的方式,顯示功能頁面於MapGuide原有框架之上。

5. 利用MapGuide空間篩選動態進行設施數量的統計。

6. 利用MapGuide提供的Api與Oracle Spatial進行圖徵維護。(提供繪圖過程中,各節點重新變更位置,插入點位、刪除點位等動態編修功能)

7. 提供類似ArcView屬性維護方式的維護介面,動態擷取屬性值提供修改。

8. 提供動態評量,即時計算各圖徵相關屬性,並將結果利用臨時層顯示於圖台。


有了Spatial以後,感覺各式各樣的功能都可以做出來了,不像之前都會侷限在資料鎖定或是支援度不足的情況,不知道什麼時候政府單位的案子會開始規定繳交項目裡面有資料庫形式的"空間資料庫"。