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 上顯示
最後再補個目前時間,大功告成!!!!

III. 成果


可以看到,圓餅圖上標籤顯示為百分比
而圖例標籤上則是名稱加百分比

點選之後,該資料點呈分離狀
Label上的訊息為資料名稱及滿意度的件數

IV. 小結

利用關鍵字可省去不少麻煩
還有很多個關鍵字沒介紹,有興趣的人可以自行研究一下

本次的範例下載

2009年8月18日

由文字取得指定長度的 byte 陣列

坎尼最近在研究.NET中資料加解密的方法
可是網路文章和MSDN翻著翻著,發現似乎少了什麼...
原來是要傳入的 byte[] array 參數不是寫死的就是沒寫 (可隨機產生
所以坎尼寫了個小方法,可以把使用者自訂的文字轉為 byte 陣列

I. 取得陣列方法

方法會要求傳入三個參數:要轉換的文字、長度不足要補上的byte、陣列長度
接著會呼叫 UTF8Encoding 的 class,將文字先轉換為 byte 陣列

由於會指定陣列長度,由自己輸入的字串轉出來大多是不符合需求
所以用個 for 迴圈取出指定長度的資料即可 (程式碼見下圖)

II. 使用方式

再來就是上網找加解密的方法啦
坎尼參照 聖哥 的 這篇「如何加密字串」寫了個 TripleDES 加解密的函數

使用加密方法
需先取得長度為 16 的 Key 及 IV 的陣列 (可為不同內容)
然後呼叫加密的方法即可

使用解密方法
只要反其道而行即可,但注意 KEY 及 IV 需為同樣的陣列

III. 成果展示

輸入要使用的 KEY 及 IV,接著輸入要加密的內容
點下「加密」按鈕即會加密

點下「解密」即可將加密過內容解出來
若是金鑰不同就會發生例外,向量不同則是文字可能會有亂碼

打完收功

IV. 小結

金鑰是加密演算法中十分重要的一環
但每次都用同一組或是要重新建一組實在是很麻煩
所以提供這個範例給大家參考
當然有更好的方法也歡迎大家分享出來給其他有需要的人 :D

V. 參考資料

2009年8月12日

基礎數學觀念-3: 與「零」有關的基本性質

接下來要整理的是「零」的性質,還有一些我們認為是理所當然的數學運算性質的推導,例如為什麼 0 乘以任何數結果都是 0 ?為何 3*(-2) = –6 等等。
要討論這些問題,必須要了解以下基礎知識:
簡單的說,我們從小接觸的「數線」是歐幾里德空間(Euclidean Space,簡稱歐式空間),而歐式空間也是一種向量空間,其中每一個元素(也就是實數)就是向量空間中的一個向量(vector)。在向量空間中有以下重要的公設(等於是定義,是一組既定的規則,不需要證明):
  • 向量加法(實數加法)具有單位元素(0):也就是說,任何數加上0等於任何數本身
  • 向量加法(實數加法)具有反元素(加法反元素):例如:3 的加法反元素是 -3(在前面加上一個負號),使得 3+(-3) = 0(加法單位元素)
事實上「減法」這個運算是利用加法來定義的,因為如此定義可以重複利用以上兩個基本公設,不需要另外為了減法再定義新的公設,由此可見數學的簡潔性,絕不重複發明相同的輪子!

(另一個例子是,在電腦的二進位世界中,負數也是透過正數來定義的,只要在正數最前面的bit上動個手腳就可以表達負數)

利用以上兩個公設可推導出以下結果:
  • 任何實數乘以0都等於0 (e.g., 3*0=0 )
    任何數乘以0
  • 正實數乘以負實數結果是負實數 (e.g., 3*(-2) = –6)
    正負實數相乘
  • 若 ab=ac, 且 a!=0, 則 b=c
    ab_ac_0 
(第一個推導如果把0換成零向量,就是某年的研究所考題)

透過以上推導的過程,可以體會到如何以基礎理論,來逐步建構出更上層的理論,整個數學體系就是像這樣一步一步慢慢建立起來的。

以上的性質被證明出來以後,一個明顯的好處是可以加快計算速度,雖然從小的填鴨式教育讓我們認為這是理所當然的性質,但其實也是需要證明的!

備註:以上資料是我從向量空間(vector space)的講義裡面整理出來的,不太確定「一維歐式空間」跟「數系」有沒有差異,如果有錯誤的話煩請指正,謝謝 ^_^

補充資料:
同系列文章連結:
  1. 數學歸納法的證明與應用
  2. 集合論的性質:整數與偶數個數相同

2009年8月8日

基礎數學觀念-2: 整數和偶數的元素個數相同

繼上次整理過的數學歸納法的證明及應用之後,接下來要看跟集合論(Set Theory)這個基礎數學中的重要基礎有關的一些有趣性質。

集合論中元素個數相等


如何證明兩個集合X、Y元素個數相等?最直覺的想法是:把集合X和集合Y的元素個數算出來,若兩個集合元素個數相等,就得證。但總是會遇到天不從人願的時候,若剛好兩個集合X、Y為無限集(元素個數無限),就無法計算出集合X、Y的元素個數了。

因此數學家想出一個方法:利用消去法來證明。也就是將集合X中消去一個元素,就同時將集合Y中也消去一個元素。重複執行此動作,若可以將X與Y中的所有元素都消去的話,便可證明這兩個集合元素個數相等。([Wikipedia] Cardinality: 1. Comparing sets

Comparing The Cardinality of Sets 

這個將兩個集合中對應元素消去的動作,以函數的觀點來看稱為:一對一且映成函數。因此要證明兩個無限集的元素個數相等,就可轉換為設法在兩個無限集之間找到一個一對一且映成函數,只要能夠定義出這個函數,便可證明兩個無限集的元素個數相等。(像這樣將問題轉換為利用其他已知理論、工具來解決的能力,真的需要好好培養...)

以下的證明看完以後會有種「世界變了」的感覺:
(以下集合均為無限集)
  • 證明整數偶數具有相同的元素個數
      Z and Ze
    明明整數就包含單數和偶數,結果整數的個數居然還是跟偶數一樣多?那單數跑到哪裡去了?

  • 證明整數自然數具有相同的元素個數
    Z and N
    根據相同的推導方式得到的這個結論也很神奇,明明整數就包含負數和自然數,但是整數的個數還是跟自然數一樣多?那負數又跑到哪裡去了呢?

  • 證明正奇數(odd number)是可數集合(正奇數與自然數具有相同的元素個數)
    N and positive odd numbers
    最後這個結論也很有意思,自然數除了正奇數以外,當然包括了正偶數(even number),但最後又證明出自然數的個數和正奇數相同,那麼正偶數又跑去哪裡了呢?
雖然目前我還不清楚上述性質到底有什麼應用,但從探討的過程中對嚴謹度還有邏輯推理能力的建立是滿有幫助的(結論也挺有趣的)。數學是從一組公設中推導出一些定理,再由這些定理發展出相關的應用,而不是憑感覺的。

從以上性質的推導可以感受到數學的嚴謹性,一切都根據已知的定理、定義來推導,不摻雜一絲不理性的因素(e.g. 感覺、猜想),而這些人格特質對於程式的開發、除錯也是很重要的,如果不去仔細思考背後的原因,而老是將發生錯誤的原因歸咎到沒有放乖乖之類的迷信,那是很難進步的。

下一篇預計整理的是「零」的性質,還有一些我們認為是理所當然的數學運算性質的推導!

2009年8月7日

讓人不知所措的 OpenFileDialog.InitialDirectory in PPC 開發

在 .NET Compact Framework 環境下,很多方法都受到限制
本篇要講的 OpenFileDialog.InitialDirectory 正是一例

Ⅰ. OpenFileDialog.InitialDirectory in PPC

在 Windows Form 裡使用 OpenDialogFile 要指定初始目錄
多半會用 Environment.GetFolderPath 方法來取得特定資料夾
再配上相對路徑達到初始化目錄的效果 (如下圖

但 InitialDirectory 這個屬性到了 PPC 開發上,就整個被閹割了
OpenFileDialog 只能指定 My Document SD 卡 底下的第一層目錄
是的,就只能指定第一層,否則系統會自動跑回預設根目錄

所以 InitialDirectory 屬性的設定如下圖


圖中的 MyNewFolderUnderMyDocument
即是指 \\My Documents\\MyNewFolderUnderMyDocument
\\Storage Card\\MyNewFolderUnderMyDocument

而且很神奇的 (應該說是愚笨?)
兩邊都有此目錄,OpenFileDialog 便會列出兩個目錄下的所有檔案
(因為不曉得要指定的是哪個資料夾,所以全列出?)

Ⅱ.解決方法

坎尼問了谷歌大神,他說這個問題也是困擾了很多人
可能的解決方式有
  • 繼承 FileDialog 再寫個 OpenFileDialog Class
  • 自己寫個 Form 取代原本的 Class (山寨版)
坎尼是選擇後者,利用了 System.IO 去抓取 Directory 及 File 資訊
但目前只做出雛型,效能上還令人不甚滿意 (下面是部分執行畫面

自己做的檔案開啟 Form


比較一下原本的 OpenFileDialog.ShowDialog
UI上有稍做調整


下拉選單直接將列出目錄路徑


所有資料夾皆會列出

Ⅲ.小結

自行開發的 OpenFileDialogForm 也實作了下列三個屬性
(坎尼平常也只會用到這三個屬性,其他屬性要等真正需要時再去實作)
  1. InitialDirectory
  2. Filter
  3. SelectedPath
接下來的任務就是調整效能啦,在 PPC 上的開發首重就是執行效率
除非是很值得讓使用者等待的資訊,不然一般人大多不會等下去
這是開發 PPC 及 Windows Mobile 系統時要時時注意的一件事

2009年8月4日

輕鬆使用MS Chart Control - 使用多個 Y 值

坎尼在一開始學習 Chart Control 怎麼用的時候,就一直有這個疑問

怎麼指定 Y 值的屬性名稱是 YValueMembers ?
看起來似乎是可以傳入複數欄位? 但實際上填入複數又會出錯
今天就是探討一下如何指定多個欄位給 Y 欄位

其實方法很簡單,設定 YValuesPerPoint 屬性即可,以下是範例

UI設定

先在WebForm上加入 Chart Control
設定一下要顯示的樣式

設定 ToolTip 顯示內容,這邊會用到 3 個 Y 值來當作提示顯示
Y值的關鍵字為:#VAL 或是 #VALY
若要使用複數Y值,則是在 #VALY 後加上 INDEX,ex. #VALY2

設定完的 Html Source

撰寫繫結 Source Code

將 Series1.YValuesPerPoint 設定為3
然後把欄位名稱以 , 分隔指定給 YValueMembers

執行成果


小結

多項Y值是很好用的一項屬性
可惜只能給予數值型態的欄位
若是給文字型態,該欄位的值會全都變成 0,這點是需要注意的地方

Google Spreadsheet 裡用規則運算式

最近因為工作關係,遇到要用 Google Form 及 Google Sheet 所以研究了 Google Sheet 裡的一些 function 怎麼用 首先,分享一下如何在 Google Sheet 裡用規則運算 :D