USHER CHEN

關於什麼是PhoneGap，小弟覺得網路資源很多可以參考，所以在這邊引用維基百科的介紹。 http://zh.wikipedia.org/wiki/Adobe_PhoneGap 那大致上之所以有PhoneGap是因為，目前手機開發App時得選邊站，Android系統的App得用Android SDK，以JAVA技術為底，而iOS系統的App以Objective-C開發。那可不可以有一個統一的方式呢？這樣我就不用費盡心力學兩種技術，一個程式寫兩遍，兩邊可能還不太一樣。於是有人想出來，讓兩邊的開發架構內透過瀏覽器讀取網頁 ( HTML5 + CSS3 + javascript ) 的方式來當App的畫面，以達到通用。 OK~ 注意到了，我上面說的是"兩邊的開發架構內"，所以PhoneGap只是原本開發專案內的一個新增的函式庫，可以這麼想，所以核心還是在原本開發專案。那麼網頁沒有辦法存取Local file呀，也沒有辦法使用手機的照相機呀，所以PhoneGap建立了這個橋樑，讓你可以使用PhoneGap提供的API，或者自己寫的API，以這樣的方式： javascript ←→ (SDK + PhoneGap) ←→ Mobile Device 來達到。 因此，一但你要使用的東西網頁無法完成，PhoneGap也沒有提供，那麼你就得自己寫API，以Native Code來做完。 總結，PhoneGap不是一個全新的開發體系，而是建構在各開發架構內的函式庫，引用網頁技術來完成一些事情，以減少你跨平台時需要重寫的部分。 那麼接下來我在Windows平台下，使用Eclipse、Android SDK、PhoneGap 2.9.0來從頭做一次給各位看。 首先，如果你沒有以上這些東西，可以到下面這些網址抓。 Android ADT ( Eclipse + Android SDK + Mobile 模擬器 )： http://developer.android.com/sdk/index.html PhoneGap 2.9.0： http://phonegap.com/install/ ( 這邊省略開發環境的設定，如有需要請自行Google學習 ) 首先第一步是使用 Ecl...

前陣子因為工作上的需要，參考一些網路資源，做了一個自己的 jQuery Pagination 元件。 這個元件的優點在於： 1. 可以在初始化時不給資料總數。 2. 可以動態變更每頁資料筆數。 3. 可以直接跳到指定的頁數。 4. 會顯示瀏覽資訊。 這是範例圖： 下載路徑 (內含範例)： https://drive.google.com/file/d/0B0kC-urN3g_jYmRBejBzX1hlS3M/edit?usp=sharing

在數位影像處理裡，當我們要選取某個範圍時，首先要定義怎麼樣的情況下這些點算是同一個範圍，接下來才能做範圍的搜尋。所以我們看到上圖的最左邊，這邊定義了九宮格內的那八個鄰居，如果跟中間我們正在參考的點數值一樣的話，那麼那一個鄰居就是跟中間的點屬於同一個範圍。 於是基於這個定義，看到上圖中間，我們將綠色的點分布分成了三個獨立的群，三個物件。 搜尋的動作是一種擴散的行為，當我們碰到一個點是我們要的，接著從這個點，基於定義，往他週遭的點搜尋，一點接一點擴散出去。所以我在搜尋的實作上，第一想到的是遞迴，因為遞迴是一種相同方式持續延伸的概念，但我利用此方式時遇到了一個問題 ，遞迴大概在延伸到28xx層的時候就會overflow，而28xx層是很容易達到的，只在一個 800 x 600 的影像裡隨便一個佔了4列 Pixel 的東西就達成了。所以遞迴的方式勢必是不能採用，那麼該怎麼延伸呢？ 遞迴是一個接連的概念，只要找到下一個就會往下一層鑽，最後在一層一層回來，然而想到"擴散"，比較像是水波漣漪般的散播出去，如下圖： 於是我就想到，如果要做到擴散的行為，我就是要把當下搜尋的結果記起來，接著再依序去看那些結果，因此Queue的概念由此產生。 把搜尋的結果放到Queue，接著從Queue拿點出來再搜尋，再將新找的點加進Queue裡排隊等著被搜尋(擴散)，直到Queue裡的點都被拿光為止，就表示這個區域已經擴散完了。 以下是此方法的範例程式，開始搜尋後會表現出搜尋過程！  :) 寬(X)： 高(Y)： ... 點擊下列方塊產生區域分布 ... Reset 開始搜尋 Current Target： Area Search Queue：

最近工作上所開發的網頁系統，打算把切換介面風格的功能做上去，於是研究了一下如何動態改變CSS並且套用，發現還挺簡單的~ 只需要置換網頁所Link的CSS file即可 ，以下弄個實際範例，透過jQuery來操作： 首先我們建立一個簡單的網頁 <html> <head> <title>Sample</title> <link rel="stylesheet" type="text/css" href="style_1.css" class="pagestyle" id="style_1" /> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> </script> </head> <body> <div class="outborder" id="div_1"> <div class="inline">Sample text</div> </div> </body> </html> 這個網頁所使用的CSS file為 style_1.css ，其內容如下： /*  *  Style 1  */ body { text-align:center; } .outborder { padding:5px;  background:red ; } .inline { padding:5px;  color:black; font-size:40px; font-weight:bold;  background:yellow ; } 接下來我們建立第二種風格，檔案為 style_2.css...

相信很多人都有手機相關APP的使用經驗，這些APP的介面，大多最上方會有一個Header，Header裡面可能放了一些主題名稱、功能按鈕等等。接著，我們按了某個按鈕之後，最常看到就是會跑出一個功能選單，這個功能選單是蓋在內容上方的，如圖： 我昨天花了點時間，使用HTML及CSS，把這東西實做出來了，基本上的技巧就是延續之前介紹footer的做法，透過css設定 position:fixed; 以固定Header及Menu的位置，然後內容Content上方保留一些空間， padding Header的高度。 本來以為這樣就很棒了，Perfect！但今天測試的時候發現一個問題！由於我的Title是依照顯示內容會動態改變，當這個Title文字過長而換行的時候，糟糕了，那個位置固定的話就會錯亂，如下： 看到了嗎？Menu選單顯示時應該下移一點配合Header的高度，而且Content第一行也被Header蓋住了！所以怎麼解決這問題呢？我今天想來想去，目前想到的做法是，當Header高度有改變的時候，我就跟著調整Menu跟Content的位置設定。而這個方法要完成，需要解決兩件事情，第一件事情是我要知道Header的實際高度，而第二件事情是，高度改變的時候要觸發處理事件。 先從第一件事情來，在jQuery裡有個方法叫 outerHeight() ，它會回傳我們所選取物件目前的實際高度。我們取得實際高度之後，接著去設定Menu及Content，如下： function HeaderResize() { // Header高度變動時,動態調整Page及Menu顯示的位置 var headerHeight = $('#header_title') .outerHeight (); $('#PopupMenu').css('top', headerHeight); $('#content').css('padding', headerHeight + ' 0 0 0'); } 接著第二件事情就是，我們要在高度改變的時候觸發這個處理function。高度改變有兩種狀況，第一種狀況是我們在瀏覽的時候改變了視窗大小而導致Title...

當物件導向的程式寫久了之後，會發現class的包裝方式真的是一種很棒的東西，把一些相關的東西包在一起，包括變數，包括程式(function、方法)，內部共享資源，對外則提供安全(簡單)的存取通道。 而我最近在寫 javascript，js沒有class這種東西，起初有點灰心，但後來網路上爬了一陣子發現，由於js架構的關係，可以弄出class like的程式架構，於是我就把它學起來了！以下弄一個範例分享給各位。 這一個範例，概念上是弄一個叫myRing的物件，它是一個RING資料容器，大小是10，存滿10筆資料之後，又重頭開始存。存資料進去的function為addData。而依照新舊順序將容器裡所有資料取出的function為getData，另外dataLength為此容器目前的資料筆數。總共三個對外的資源，而內部控制及存取資料的變數有三個，curIndex, upLimit, myData，為private，外部不能直接存取。 完整的程式碼如下：(js_class_like.html) <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>javascript class like</title> <style type="text/css"> #log { font-size:24px; color:blue; font-family:Tahoma; } </style> <script type="text/javascript"> var RoutineInt; var ring = new myRing(); RoutineInt = self.setInterval('MyAction()', 1000); function MyAction() { ring.addData(Math.floor(Math.random() * 100)); document.ge...

兩個月前因為工作的關係，開始在網路上找如何實做 WebSocket。 這是關於 WebSocket 的介紹： ◎  http://www.websocket.org/ ◎  http://zh.wikipedia.org/wiki/WebSocket 如果懶得看，讓我們從這張比較圖來了解最快！ 簡單說以前網頁大多數的狀況是，使用者端要求新的資料，提供資料的伺服才吐新的資料給你，這樣如果要做到即時更新，變得使用者端要不斷地詢問 Server 有沒有新的資料，而這樣一去一回，浪費時間也浪費資源，也沒想像中的即時。因此 HTML5 多了這條路 WebSocket，WebSocket 概念是一開始使用者端跟 Server "握個手"之後，在沒說要斷線的情況下，任何一方就可以在任何時間主動扔資料給對方，如此是也，不用一去一回，也省去了一些重新建立連線的動作，又快又方便。 以上簡介，那接下來我在網路上搜尋的過程中，發現 Client 端建立 WebSocket 的範例很多，但是 Server 端處理 WebSocket 的範例卻很少，即使找到了，還不能直接 Run ，所以小的才 po 這篇文章，提供一個可以直接運作的版本 (程式有不少部分是網路上找來的，加以改善)。 以 Server 傳時間給 Client 端顯示為範例。 首先是 Client 端，一般來說 Client 端為網頁，透過 javascript 建立連線，建立連線之後可以定義  onopen (連線成功)、onmessage (收到訊息)、onclose (結束連線)、onerror (錯誤時) 四個事件各要對應什麼 function 處理。如下 ： File ： client.html +  jquery-1.10.1.min.js <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>WebSocket</title> <script type="text/javascript...