~.:.': .NET碎碎念:'.':.~

2009年10月3日

輕鬆學會 Chart Control - 替 chart 加上 javascript 事件

之前坎尼介紹過如何用 postbackvalue 來與使用者互動
但每次都要 postback 很麻煩，有些動作其實用 javascript 來做就好
今天就來教如何加入 javascript 事件

I.實戰

首先要在畫面上佈置 Chart (如下圖

接著就是撰寫 javascript function，本次範例是把訊息 alert 出來

最後是今天的主角，Series 裡的 MapAreaAttributes 屬性
這個屬性可以替每個 DataPoint (也就是每一條長條圖) 加上可支援的屬性

如 Url、Target、javascript 事件

坎尼在範例中把每個長條加上 onclick 事件
來呼叫前面所寫的 javascript function

另外再提醒一點，這個屬性也可支援 Chart Keywords
所以坎尼把 X 軸關鍵字 #VALX 傳給 javascript function
接著把DataSource繫結到 Chart 後，就趕緊來看一下成果吧!!!

點了第一個 Column，果然跳出了該店家的訊息
以上，能簡簡單單地把 javascript function 送給 Chart 執行

II. 小結

MapArea 是 Chart 中很好用的屬性~~，小平叔贏牌還要靠它呢!!!~~
而且不只資料點有，其他像 Label、Legend、Title 都有 MapAreaAttributes 屬性
所以想要簡單打造出豐富的互動式圖表已經不是遙遠的夢想

還沒學 MS Chart Control 嗎? 快點來學吧 ^^

III.本次範例下載及參考資料

2009年9月24日

[jQuery] 替 dynDateTime (Date Picker Plugin) 加入民國年屬性

坎尼在小喵大的站上又看到了好物
[jQuery]挑選日期的好物 jQuery Plugin [dynDateTime]中文化特別處理
小喵大佛心的把 jQuery 的日期選擇 Plugin 中文化
但坎尼公司在實務上是比較常遇到要民國年，所以就做了小小的改版啦

I.使用方式

坎尼加入了兩個屬性：isCht、ChtYearLen
isCht為布林值，預設為 false，設為 true 表示回傳值為民國年
ChtYearLen為數值，預設為 2，表示回傳的年份位數

II.使用畫面

選擇日期畫面

選擇之後回填 0980924 (因為坎尼將年的位數設為3

III.小結

目前坎尼只是先將回傳值改為民國年
未來若是有需求再來做介面的民國年客製化吧 ^^
使用上有任何問題歡迎回報
如果使用上不順手，可以自行把範例中客製過的 js 打開修改

範例下載

IV.參考資料

參考來源：【topcat姍舞之間的極度凝聚】 [jQuery]挑選日期的好物 jQuery Plugin [dynDateTime]中文化特別處理

2009年9月21日

口試心得＆題目彙整

前陣子去某大公司的面試，前兩關都是很普通的問題，例如求學經歷、工作經歷等等，正在心情略微放鬆之際，第三關的壓軸考官丟出了一個從沒遇過的問題：「如果你的主管交付給你一項很不合裡的任務，請問你會怎麼辦？」

幸好在遲疑了兩秒以後有勉強擠出一個回答，但這次驚悚的體驗讓我仔細的思考了一陣子，在面試時若要展現敏捷的反應，除非應試者天生就是才思敏捷，不然對於很多人來說，要有好的表現恐怕有相當的難度。一個可行的準備方法就是利用平時的空閒時間，預先模擬面試時可能會遇到的各種問題，並且記錄下來，有空就多思考，每隔一段時間根據新的思考和經驗來更新這些想法，面試時才能有好的表現。

目前彙整的題目在這裡，包括「職場倫理」、「主管相關」、「公司背景」、「工作經驗」、「個人特質」、「求學經歷」、「技術能力」、「.NET技術」、「其他/想像力/創造力」等類別共40題，如果有什麼想法的話可以留言聯絡我和砍尼 :)

以下測試 Google Spreadsheet 產生的內嵌 iframe 長什麼樣子：

2009年9月18日

[Tips] 在方案總管(Solution Explorer)中顯示未加入專案的資料

有鑒於坎尼同事不知道 visual studio 還有很多很好用的功能

以後會不定時推出 Tips 系列，說明一些好用的小技巧

讓 visual studio 不只是用來當文字編輯器 (那還不如用 notepad++)

I.功能按鈕所在

如下圖，當把focus放在專案時，上面會出現此項

圖示

點選之後，會出現淺灰色的資料檔或資料夾

這就是包含於專案實體路徑裡，但又沒加入專案的資料

II.檔案管理

直接在灰白色的圖示上點選右鍵，即可將檔案加入專案中，如下圖

(可以搭配 shift 或 ctrl 選取多個檔案)

當然有加入就會有移除，可以在要移除的檔案圖示上點選右鍵移除

移除有什麼用呢? 一般在發佈時，若沒有把檔案設為「不要複製」到專案資料夾中

檔案在每次進行部署時就會把檔案給複製過去

要是有些比較大且不需更新的圖片、資料庫檔~~、A片種子~~

就可以先從專案中移除，需要時再用手動複製到部署的資料夾中

另外像是 vs2008 sp1 提供的 js intellisense 定義檔功能 (ex. jquery-vsdoc.js)

其實可以把 -vsdoc.js 檔案從專案中給移掉，開發時一樣可以抓到定義的說明

III.小結

本篇是 Tip 第一篇，未來會陸陸續續的提供實用的技巧

當然也歡迎指教和提供意見 ^^

2009年8月31日

開發windows mobile 6.5 widget程式

前陣子坎尼去了幾場 windows mobile 的研討會
老師有提到開發 widget 的技巧
所以今天稍微來談一下 window mobile 6.5 上的 widget 開發

I. 戰前準備

首先要有 windows mobile 6.5 的執行環境，可以到這裡下載 DTK
裡面有含模擬器的映像檔，待會兒會用模擬器來執行程式

接著是開發環境
windows mobile 6.5 的 widget 全為 html 組成
因此只要有能寫 html 的編輯器即可

II. 開發

由於很多人都寫過相關的開發方式
坎尼就直接引用 bauann 大所寫的 Widgets in Windows Mobile 6.5 - 簡介
大家可以直接看這篇，比坎尼寫的詳細多了 :D

剛剛提到 widget 由 html 構成
坎尼用 visual studio 開了個 html 檔，並加入下圖所示的網頁元素

"Show Messages" 按鈕會在 DIV 之中顯示使用者填入的字串
"Moving" 則是移動下方的灰色 div 到亂數位置

接著是此次的 javascript code
從下圖可得知，坎尼加入了 jquery 來開發

移動 div 的部份，坎尼用 jquery 的 animate 和 fadeOut 去展現動態效果

III. 安裝部署

接著是建立 config.xml 檔，讓 widget 安裝檔能被 windows mobile 6.5 辨別

接著把 html、jquery-1.3.2.min.js、Config.xml 還有要作為 logo 的 e04.png
利用壓縮程式壓成 zip 檔案，接著把副檔名改為 .wgt
這樣一來， widget 的安裝檔就完成了，趕快放到模擬器上試試看吧

直接在 windows mobile 6.5 中點選 wgt 檔即可安裝

安裝好會自動開啟程式，來測試一下成果

應該是硬體受限的緣故
原本寫好的 html 在 pc 上會有動態淡出淡入的效果
但到了 windows mobile 上，效果就不見了

IV. 解除安裝

這裡提一下如何解除安裝
請依照下圖步驟：Start -> Settings -> System -> Remove Programs
再選擇要解除安裝的 widget 程式即可

V. 小結

雖然 widget 提供 html 的開發方式
但很多動態的表現不如 pc 上來的順暢
所以最好著重在功能性的開發

由於為 html，動態資料交換就必須利用 Ajax 及 WebService 等技術
但若能用 jquery 從中當作媒介，相信會簡單許多
(也不用像研討會王老師講的，寫AJAX寫到快哭了 XD

本篇粗淺的介紹一下 windows mobile 的 widget
有錯還望高手們來指正 :)

2009年8月27日

輕鬆使用MS Chart Control - 親愛的，我把餅切開啦

之前在簡單設定圖表外觀裡有提過
將圓餅圖裡的 Exploded 屬性設成 true
即會使圓餅分開，令使用者有互動的感覺
本篇還會提到善用特定關鍵字來讓互動事件更多元化

I. 設計圖表

首先，當然是先放個 Chart 到頁面上
坎尼還放了個 Label，等下要顯示點擊訊息
(Chart 的樣式設計就不多談了，請自行發揮)

接著設定 Label 顯示文字
這裡用的是 #PERCENT 關鍵字，顯示 Y 值所佔全部的百分比
後面的 P1 則是精確度的 Format

LegendText 則設成類別 : 所佔百分比

重要的 PostbackValue 則是放入了三個關鍵字
#INDEX：表示此項資料所在的索引位置
#VALX 和 #VALY 分別是 X 軸及 Y軸的值
並用「 , 」把三個值給分開

II. 後端程式碼

資料繫結部份請直接看下圖

接著撰寫 Click 事件
利用 String.Split 方法將組合而成的 PostbackValue 給切開
切開的值依序分別為：Index、X、Y

將 Index 傳入 Chart1.Series[0].Points 中以取得點選的 DataPoint

再將 CustomProperties 的 Exploded 設為 true
如此一來，被點選的資料點即是顯示為分離狀態

再將 X 及 Y 值丟到 Label 上顯示
最後再補個目前時間，大功告成!!!!