2009年5月22日 星期五

Android & Eclipse 開發環境 - 第一次安裝筆記


Image From : http://www.android.com/media/


2011-05-28 在 Windows 7 x64 安裝教學，有興趣再參考這篇： [Windows] 安裝 64 位元環境的 Eclipse , JDK 和 Android SDK @ Windows 7 64-Bit


最近很火熱的就是 Android 開發平台，去年底找替代役時，面試官閒聊，據說清大某系早已就把它拿來當作嵌入式系統課程的作業對象！想著想著，差不多是個時機該碰碰這些東西了。不然很久沒有碰新東西了。這一兩年的生活幾乎是 C 與 PHP 罷了！


首要參考網站



以上算是目前我所接觸的範圍，套句越前龍馬的話：「まだまだだね!」(發音:Ma Da Ma Da Da Ne)


關於怎麼開始，真的可以完全跟上述那個中文網站介紹！在此只是把過程紀錄下來，說真的我連下載 Java SDK 都忘的差不多了！



  1. 設置環境

    • Windows XP with SP3



  2. 下載相關開發軟體

    • JDK

      • Java 開發環境，前天我下載的版本是 JDK 6 Update 13 (jdk-6u13-windows-i586-p.exe)



    • Android SDK

      • Android 1.5 SDK, Release 1 (android-sdk-windows-1.5_r1.zip)



    • Eclipse

      • 這是寫程式免費 IDE 編輯器，但我完全沒用過 orz

      • 我選擇的是 Eclipse IDE for Java Developers (eclipse-java-ganymede-SR2-win32.zip)





  3. 初步軟體設置

    • 安裝 JDK

      • 點一點就搞定，安裝完後請設定環境變數，以方便 cmd mode 下使用。



    • 安裝 Andorid SDK

      • 解壓縮就行！假設解壓縮在 C:\ ，搭配預設目錄名即為 C:\android-sdk-windows-1.5_r1



    • 安裝 Eclipse

      • 解壓縮就行！假設解壓縮在 C:\ ，搭配預設目錄名即為 C:\eclipse



    • 設定環境變數

      • [我的電腦] 按右鍵切換 -> [內容] -> [進階] -> [環境變數] -> 使用者變數 新增/編輯 PATH 變數 -> C:\bin;C:\Program Files\Java\jre6\bin;C:\android-sdk-windows-1.5_r1\tools;





  4. 使用 Eclipse 與其環境設置

    • 點選 C:\eclipse\eclipse.exe 開啟該軟體

    • 第一個碰到的視窗是詢問 Workspace ，若沒特別想設定的，預設即可。若覺得以後被問很麻煩，可以再勾選下面的選項 Use this as the default and do not ask again

    • 下載 Android Development Tools plugin (ADT)


      • [Help] -> [Software Updates] -> [Available Software] -> [Add Site] -> Location 填寫 http://dl-ssl.google.com/android/eclipse/site.xml

      • 我碰到一個錯誤訊息 No repository found at https://dl-ssl.google.com/android/eclipse/ ，仔細一看有一處是 http://dl-ssl.google.com/android/eclipse/site.xml ，就使用這個吧（暫時忽略這個錯誤XD），勾選此項並 Install ！經過一陣子後，Eclipse 會要求重新啟動此軟體。(安裝了 Android DDMS & Android Development Tools )

      • 在 深入淺出 Android 網站中也有提到，如果上述安裝有問題，例如網路不方便等，可以先去下載好 ADT 囉。



    • 設定 Android SDK 位置，讓 Eclipse 能夠找到它

      • [Window] -> [Preferences] -> 點選左邊 Android 項目 -> 使用 Browse 選擇與設定 SDK Location ，設定完選 Apply 跟 OK 吧






以上就是設置的詳細過程。


緊接著，就是第一個 Project 啦！



  1. 開啟 Eclipse ，準備使用 ADT 內附的範例專案

    • [File] -> [New] -> [Andorid Project] -> [Create project from existing source] -> Location : C:\android-sdk-windows-1.5_r1\platforms\android-1.5\samples\ApiDemos ，之後選完後即可按 Finish 囉，預設的資訊都會帶進來，可免去填寫

    • 如果蹦出"No compatible targets were found. Do you wish to add new Android Virtural Device?" 那就選 Yes 新增一下。看你的應用程式選擇 target，例如 Android 1.5 ，選好後再填寫一下 Name ，之後就能按 Create AVD 來建立了。



  2. 執行 [Run]->[Run] ，選擇 Andorid Application，就會跑出模擬器了，別懷疑，要等一陣子，以 AMD2 4000+ + 3GB DDR2-667 機器，粗估要 3 分鐘以上吧？最後的畫面就是這樣，可以去用滑鼠點看看，我試著瀏覽網頁，比我想像中慢很多。


Android Emulator


好久沒碰 Java 了，不曉得一個月夠不夠讓我試著開發一些小軟體？過去有用過 C# 在 VS2005 上開發手機軟體，也曾用過 J2EE 寫過，但說穿了都是非常簡單的作業罷了，唯一相同的感受：模擬器很慢！有點接近嵌入式軟體開發的感覺。


張貼者： 於 1 則留言:
標籤：

2009年5月20日 星期三

免費線上廣播播放軟體 - Hinedo

下載網址：http://of.openfoundry.org/projects/814/download
相關介紹：http://azo-freeware.blogspot.com/2007/06/hinedo-hinet-radio-10.html
相關 blog：http://pcman.sayya.org/blog_read.php?id=pcman&article=85


好像是國二開始，有聽廣播的習慣，隨後到了大學也常下載一些免費軟體，但好景不常，這類軟體常常都是透過網路去抓取音樂播放的位置，由於是主動去抓資料，因此當別人的網站格式改變時就會失效。


這款軟體是由 PCMan 的作者所創作的，這幾年恰好學習網路網站方面的技能，前陣子也想寫這廣播軟體，結果一忙又忘了！慶幸的有人還是維持住這類軟體！真是棒啊！希望自己未來也能多多創作免費軟體！


這款軟體有支持 Windows 跟 Linux 版，非常便利。


張貼者： 於 沒有留言:
標籤：

2009年5月18日 星期一

Slimbox Atom 330 效能測試

微星 Slimbox Atom 330



  • OS

    • FreeBSD 7.1-RELEASE-p3 FreeBSD 7.1-RELEASE-p3



  • MainBoard


  • CPU

    • Intel(R) Atom(TM) CPU  330   @ 1.60GHz (1606.39-MHz 686-class CPU)



  • RAM

    • DDR2-533

    • real memory  = 2138832896 (2039 MB)

    • avail memory = 2083344384 (1986 MB)




測試結果



  1. # cd /usr/ports/benchmarks/ubench ; make ; ./ubench-0.32/ubench

    • Ubench CPU:   147523
      Ubench MEM:    83654
      --------------------
      Ubench AVG:   115588



  2. # cd /usr/ports/benchmarks/ubench ; make ; cd /ubench-0.32/ ; make clean ; cc -O2 -fno-strict-aliasing -pipe -march=nocona -lm -o ubench signals.c cpubench.c membench.c ubench.c ; ./ubench


    • Ubench CPU:   166066
      Ubench MEM:   128344
      --------------------
      Ubench AVG:   147205




其他機器測試



  • Randy's PC: Core2 Duo CPU E8400 @ 3.00GHz , 4096MB DDR2-800

    • Ubench CPU:   775068
      Ubench MEM:   470081
      --------------------
      Ubench AVG:   622574



  • Randy's PC: Intel Celeron 2.4GHz , 512MB RAM DDR 400

    • Ubench CPU:    89634
      Ubench MEM:    90947
      --------------------
      Ubench AVG:    90290



  • Randy's PC: 2.4GHz HT , 1024 MB DDR333

    • Ubench CPU:    89832
      Ubench MEM:    38156
      --------------------
      Ubench AVG:    63994



  • Randy's PC: Intel Xeon 1.86G , 2048 MB DDR2-800

    • Ubench CPU:   379039
      Ubench MEM:   254778
      --------------------
      Ubench AVG:   316908



  • VMware, FreeBSD 7.0 , AMD2 4000+ , 512MB DDR2-800 (尚未安裝 VM tool)


    • Ubench CPU:   459543
      Ubench MEM:    45634
      --------------------
      Ubench AVG:   252588




The Intel Atom is an in-order single-core processor with hyper-threading, for low power mobile PCs and low-price desktop PCs.


因此，理論上會存在不少 stall 拖累效能嗎？但 Slimbox 一台約六千至八千不等，已經很足夠取代四年前便宜的主機了。除了沒有獨立顯示卡跟光碟機外，整體上很適合當工作站。


2009/07/14 ，前陣子學弟弄主機，麻煩他幫忙照一下，順便補上照片，依序是PSU與十元硬幣的對照、主機板和硬碟裝設的位置，其中PSU的部分，我在回應中講 50W 而已，今天把照片看了一下，上頭還有標示最大 120W 囉。


Slimbox Slimbox Slimbox


張貼者： 於 3 則留言:
標籤：

2009年5月15日 星期五

[Windows] 安裝 Apache with HTTPS (SSL) 、建立憑證 @ Windows XP

過去曾在 FreeBSD 4.10 的環境上安裝過 HTTPS 環境，細數起來已經是四、五年前的事了。最近一兩年，總在 Windows XP 的環境下，安裝 Apache HTTP Server 和 PHP 環境，用來開發簡單的網頁程式，但一直忘了，自己根本連 HTTPS 都還沒安裝過。前幾天，彷彿操起老本業，開始系統整合的工作，才想起該設定 HTTPS 的部分了，想著想著，一直以為用了 AppServ 就免痛，事實證明，我真的把 HTTPS 忘的一乾二淨了，無論是 AppServ 還是 Appache HTTP Server 皆要自行產生憑證，憑證就是用來提供加密連線的重要資訊，詳情可以多參考 RSA 演算法 啦。


最近開發時已經不用 AppServ ，反璞歸真般地，我開始只安裝需要的環境，即只安裝 Apache HTTP Server(including OpenSSL) + PHP 罷了。這次實作的環境是 Apache 2.2.11 + PHP 5.2.9-2 ，皆在 Windows XP with SP3 ，此篇跟 PHP 沒關係。


當晚處理完憑證試裝的結果，碰到第一個問題是 SSLPassPhraseDialog ！搞到最後我才又想起 Skype 這賊賊軟體！它總是愛佔 Port ，第一次它就佔了 80 Port ，害我 HTTPD 跑不起來，這次很快地又想到它啦，但實在太久沒設定 HTTPS，所以不敢確定哪邊有錯，最後，由於很晚了，則是選擇隔天再到實驗室的電腦安裝。該台電腦沒有安裝 Skype ，才真正確定沒什麼大問題，但卻碰到第二個問題：sec_error_bad_signature！原先就知道自己產生的憑證沒有公信力，因此好心的瀏覽器都會提醒，詢問後再允許通過，如 Firefox 新增例外網站等，但這個訊息連新增例外都不行！所幸地，沒多久就在網路上找到答案，至少可以將錯誤訊息修成 sec_error_ca_cert_invalid ，這次就能新增成例外網站啦！


實作過程：



  1. 建立憑證

    • openssl genrsa -des3 -out server.key 2048

      openssl req -new -key server.key -out server.csr

      openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt

      openssl rsa -in server.key -out server.key

    • 以 Windows XP 為例，預設的 Apache HTTP Server 2.2.11 安裝目錄是 "C:\Program Files\Apache Software Foundation\Apache2.2"，以該目錄為基準，簡寫為 "~\Apache2.2"

      • 所謂的 openssl 是在 "~\Apache2.2\bin\openssl.exe"

      • 上述部份指令執行時會說找不到 config 檔案，config 檔是在 "~\Apache2.2\conf\openssl.cnf" ，請多加參數 -config "~\Apache2.2\conf\openssl.cnf"

      • 我習慣切換到 "~\Apache2.2" 去執行上述指令，如 cmd mode 下執行 bin\openssl genrsa -des3 -out server.key 4096 ，碰到要增加 config 則用 -config conf\openssl.cnf 囉



    • 建立 server.key 時記得輸入一下密碼，該密碼後面還會詢問到。

    • 簡單的詢問範例，"()"內不用打，是簡單的敘述註解
      Country Name (2 letter code) [AU]:TW
      State or Province Name (full name) [Some-State]:Taiwan
      Locality Name (eg, city) []:YunLin Country (城市)
      Organization Name (eg, company) [Internet Widgits Pty Ltd]:CYY(組織，例如公司)
      Organizational Unit Name (eg, section) []:CYY (單位，例如公司部門等)
      Common Name (eg, YOUR name) []:localhost (主機的全名)
      Email Address []:cyy@localhost (信箱)

      Please enter the following 'extra' attributes
      to be sent with your certificate request
      A challenge password []:(可按Enter即可)
      An optional company name []:(可按Enter即可)



  2. 設定 Apache httpd.conf

    • 將上述產生的 server.key 跟 server.crt ，就直接擺到 "~\Apache2.2\conf" 即可（預設的憑證用的檔名跟位置）

    • 設定 httpd.conf

      • 打開 LoadModule ssl_module modules/mod_ssl.so 註解

      • 打開 Include conf/extra/httpd-ssl.conf

      • 基本上重新啟動 Apache 即可搞定囉！






最後，有任何問題請多看看 ~\Apache2.2\logs\error.log 或 ~\Apache2.2\logs\access.log ，這幫助很大的！


 


張貼者： 於 3 則留言:
標籤：

2009年5月12日 星期二

[PHP] memory usage with fread (limit or leak ?)

花了些時間，想寫一隻 PHP 的 tool 來處理資料轉換的問題，沒想到卻碰到超過 PHP.ini 中的記憶體限制，我用的版本是 PHP 5.2.9-2。接著又花了時間找尋，發現大部分討論的是物件方面的記憶體管控，至於 garbage collection 等的，似乎在 5.3.0 以後的版本才有類似的處理機制。


沒有指標的 PHP ，說真的還寫得很不順手，唯一目前知道的是可以用 unset 釋放記憶體空間！但很多情況並不如預期的，舉例來說，對於 fread 的函數，應該不難得知它是會自行維護 buffer 的，但就是因為這一點，導致使用的記憶體空間增倍：


<?php
$size = 52428800;    // 50MB
$fp = fopen( 'test.dat' , 'rb' );
echo "Init State: ".memory_get_usage() . "\n";

$data = fread( $fp , $size ); // $data 跟 fread 內的 buffer 各吃 50MB 的空間
echo "fread: ".memory_get_usage() . "\n";

unset( $data ) ;
echo "unset variable: ".memory_get_usage() . "\n";

fclose( $fp );
echo "fclose: " .memory_get_usage() . "\n";

?>


上述如註解，除非把 fclose( $fp ) ，以上的程式光運行就吃掉 100MB 的空間了！執行結果：


Init State:108400
fread: 104966184
unset variable: 52537368
fclose: 108560


第一次讓我不想用 PHP 來做事啊。但這似乎不是 memory leak 的問題？我多希望 $data 可以是指標啊。


張貼者： 於 沒有留言:
標籤：

2009年5月8日 星期五

以PHP-cURL模擬瀏覽器行為

相關文章



  1. [PHP] 客製化部落格同步發文實作筆記 - 模擬瀏覽器行為

  2. 免搬家，部落格同步發文之設計












這週 meeting 時，我報了這。早在一年前的投影片中，已有提過一兩頁來敘述它。這學期多了幾位新成員，老板也稍微提及關於報告的內容方向，希望能夠以帶給大家新資訊或是相關的學習，所以，早在半個月前就順手弄了這個，並且在昨天報完請示一下，便將投影片擺放在網路上。報個這的理由很簡單，第一點是趣味，第二點則是未來可能有其他人會維護或開發相關的應用服務，而我自己的所學很淺薄，回想起來好像只剩這個東西可以跟大家分享吧！過去幾次的報告，我比較愛報 paper ，為的是訓練自己看 paper ，而我又特愛找有數學式子的，報起來對大家的收穫很少。


回歸主題，上面的投影片講述的是如此用 cURL 來模擬瀏覽器的連線，假設可以模擬瀏覽器的行為，那麼就可以寫一些個人化方便的小程式，以此完成一些正當的例行性行為，如發表文章到多個部落格等應用，因此，未來可能會趨向每個人都有一位專門的機器人秘書，幫你關注事件、服務等等，如此一來，就會有寫這類程式的需求。


上述投影片中，比較重要的例子是對於要向一個網頁作出送出表單動作的例子( FORM & POST )，除此之外，應該就沒特別的部分，整體流程就像監控網路封包流向，連到各個網頁進行 cookie 資料的收集，最後送出表單，再收集完成登入的資訊，接著，就可以進行相關的應用，如取得資料等。


最後，這些應用程式主要用在個人端、正當不違法的便利化為主，並不適合跑在 Server 端(容易被對方Server阻擋)。此外，這 Flash 投影片是使用 iSpring 這個免費軟體製作的，若輸出時出現中文字型亂掉的情況，記得換一下字型就行囉！


張貼者： 於 沒有留言:
標籤：

2009年5月6日 星期三

窗外月

只要時間跨過了凌晨一點，抬頭一望就能看到一彎月兒，這是五月初才開始發現的。有時發個呆望著，總在想，到底在追求什麼，有時目標彷彿再跨一步就到了，但往往在那一步尚未踏穩時，又陷入迷惘？









聽聽老歌，一首 LUNA SEA - I for You ，彷彿將我帶回日劇”神啊，請給我多一點時間”。然而，我卻想不起來那齣日劇的劇情。因為，我從來都沒仔細看過，只知道裡頭有當年最紅的深田恭子和金城武。有時人生不也這樣，追逐著好像知道的目標，結果到頭來有幸得到後，卻發現自己根本沒享受過？只是當別人談論起時，彷彿又有莫名的感同深受？話說回來，看著這演唱會，才覺得主唱還真會唱，看他的表演真的很苦。


論文的進度我一直都很 ok ，並不是說已達到想要目標，過去付出的想拿來寫論文都沒什麼問題，只是，有一種一寫論文就莫名的罪惡感，好像要把還沒完善的程式丟給別人善後？回想起來，碩班好像又沒得到我真正想取得的東西？或許那東西本來就不存在吧！


儘管如此，這就是生活吧？還是播放著數首經典的日劇主題曲，每一首還是很容易敲動我心，那些劇情我都已忘得差不多了，但一聽到還是有種活力精神感，這該不會就像喝酒？好像醉，又似清醒乎？


或許這一切的心境，來自於生活些微的變動吧？心情？工作？生活？或許又是週期性的心情吧。


張貼者： 於 沒有留言:
標籤：

2009年5月2日 星期六

[Excel] 取得指定分頁的欄位資料( get a cell value )

很久沒用 Excel 了，我習慣在一個 Excel 檔開多個分頁(sheet)，過去曾寫過簡單的 VB 程式去分析資料，這次我只是單純地想在分頁 B 取得分頁 A 的資料，逛了很久都只看到 VB 的用法，最後自己亂用才發現原來非常簡單。


環境敘述：Excel 檔案，內有 A,B,C 三個分頁(sheet)，其中 A,B,C 各是他們的 sheet 名字，預設大概都是 sheet1, sheet2,sheet3,etc


解決方式：假設我想在 C 分頁的 C1 欄顯示 A 分頁 A1 欄位的數值，就只要在 C 分頁的 C1 欄位上，按一下，再切換到 A 分頁再點 A1 就搞定了！


公式化：在某欄位的數值設定為 "=分頁名字!欄位" ，例如："=A!A1" ，即可取得 A 分頁裡的 A1 數值。


在 VB 上大概是用 Sheet 跟 Cell 這兩個函數囉


張貼者： 於 沒有留言:
標籤：

2009年5月1日 星期五

從 PHP + HTML 架構，擴展至 PHP + JSON + JQuery + JS Event + HTML 之筆記

兩個禮拜前，開始第二次的 Jquery 使用，第一次是去年，但我記不太得何時了！只記得我用 Jquery 只是為了使用 Ajax 的呼叫罷了。第一次連後端傳來的資料都用 JavaScript(JS) 去處理，接著又使用 document.createElement 將想要呈現的 HTML code，動態地慢慢慢慢地建了出來，成果只有一個字 -- 慢。


大概是之前 Patrick 學長開發 Ajax 的經驗，老板對於 Ajax 的開發稍稍地不允許，並不是不能用 Ajax ，而是不建議在開發服務的過程中，加入 Ajax 的實作。理由很簡單，光 Javascript 的開發就夠讓人折騰了，所幸的現在有 Firebug :: Firefox Add-ons 跟許多被廣泛使用的 JS framework ，如 Jquery ！在兩個星期前，老板終於對我解除對 Ajax 開發封印，在這兩個禮拜中，除了處理老家電腦外，其實開發的速度不錯，很快，並且可以把原先 PHP + HTML 的呈現方式，一口氣抽開，感覺類似變成簡潔的 Model-view-controller ！


簡單地說，PHP 用來處理資料，JS 用來呈現 User Interface(UI) ，這當中的資料傳遞則使用 JSON 格式，省去 UI 層額外處理資料的動作，接著搭配 Jquery 功夫，輕鬆地完成任務。


上頭所提到的 PHP + HTML 的意思，就是傳統上用 PHP 來取資料建出 HTML 網頁呈現的過程，基本上是非常夠用的架構，只是若要在使用者介面上加上更多便利的操作，這時就會加入 Javascript 的應用。在 PHP + HTML 的開發過程中，若不使用 JS 的話，當想要提供多變化的應用時，就會開始出現很多越來越冗長的程式碼，例如為了某個效果就必須為此產生新的網頁結果，儘管那只是為了一個小小的片斷程式碼。大概是幾乎沒用 JS 實作，自己在開發 WebMail 上，十足吃了許多苦頭，明明功能都做出來，但因為功能太多搞得使用介面不好看，程式碼雜到讓人無法專心處理 UI 設計？然而這種厭惡感不斷地蔓延下去，不曉得這是不是浪費一年的藉口？anyway，下面就記錄一下這陣子用 php <-> json <-> jquery <-> html 的心得吧！當個筆記囉。


以下[舊式處理]是指我自己以前的寫法，[輕鬆用法]是現在的寫法。



  1. PHP 與 JS 溝通

    • 舊式處理：以前未使用 JSON 格式時，我曾寫過一些 PHP 跟 JS 溝通的方式，那時不外乎讓 PHP 產生 JS code 在網頁上執行，例如 <script> var hello = '<?php $world;?>'; </script> 。當大型資料要傳遞時，就顯得非常麻煩，甚至把資料格式抽取的部分擺在 JS 處理。

    • 輕鬆用法：當使用 Ajax 後，可以讓 PHP 把待輸出給 JS 的資料使用 JSON 格式封裝輸出，除了降低 PHP 的程式碼外，在 JS 這端接收後也省去處理資料了！類似在 PHP 是 array 了，那封裝過後丟給 JS 時也可以輕鬆地用 array 方式操作！



  2. 流程掌控

    • 舊式處理：原先在 PHP 產生 HTML 時，大概是使用某個參數來控制，例如 state=init 代表一開始，這樣的缺點是每當 state 改變時，就是要重新產生一個 HTML 資料，當 state 變化很大且有多個變數時，將導致 PHP 與 HTML 程式碼非常冗長且重覆。

    • 輕鬆用法：使用 JS 時，可以很輕易地用某個 global 變數紀錄 state ，並搭配 Ajax 來存取資料，這樣的特色可以讓 Server 專心在 PHP 處理資料的變動，然後用 JS 來處理使用者端的畫面呈現，在程式碼上可以減少非常多，幾乎不必 PHP 跟 HTML 夾雜再一起了，在寫 JS 時，便知道此刻正專心處理 UI 部分，寫 PHP 時就知道正在處理資料部分。



  3. 加速 JS 建 UI

    • 舊式處理：以前把所有 HTML 的程式碼的部分，例如一整個 table 等，完全用 JS 的 document.createElement('table') 來建立與搭造，這部分雖然比用 JS 切資料來得快了，但也會佔了不少 CPU 資源。使用 document.createElement 的主因之一是為了要設定事件，我記得以前若直接用 obj.innerHTML = '<span>...</span>'; 等方式，印象中將使得 innerHTML 裡頭的部分無法使用事件？！

    • 輕鬆用法：掌握 Ajax 的精神，把主體的 HTML code 用 PHP 產生，並且在一開始就設定好事件，接著當資料進來時，用 JS 去處理，把真的需要更換的部分更新就好，可以大量降低使用 document.createElement 的機會，因此就能提升速度囉！



  4. 善用 CSS 的 class

    • 舊式處理：以前真的只是把它當作顏色版面的使用，雖然知道先後使用的覆蓋問題，但也僅此如此。

    • 輕鬆用法：<span class="init_state next_state"></span>，這個用法，可以讓 span 擁有兩個 class ，並且讓 next_state 去覆蓋掉 init_state 的設定，如變換背景顏色等。假設要做一個選單，想要區分誰被選到，誰沒有被選到，此時就可以利用這個技巧，讓沒有被選到的維持 <span class="init_state"></span>，被選到的則會變成 <span class="init_state selected"></span>，這部分操作會透過 $('#item').addClass('selected') 或 $('#item').removeClass('selected')。一來可以在 selected 上做顏色的變化，二來搭配 jquery 的 $('#target_children').hasClass('selected') 也能區分出有沒被選到，甚至可以一下就用 $('#target').children( '.selected' ) 取得那些被選到的，或是用 $('.init_state:has(.selected)') 或 $('.init_state:not(.selected)')  等應用。這是一個十分方便的事！大大降低程式碼！



  5. 按鈕的事件設定

    • 舊式處理：傳統上使用<button onclick="doing('type');"></button>設定，當有一堆類似的 button 時，這種寫法會很冗長。

    • 輕鬆用法：搭配 CSS 的 class 和 jquery 的特色，可以讓一堆有類似事件動作的按鈕作成這樣 <button class="btn" value="type1">type1</button> ，接著一開始用 jquery 來初始化 $( '.btn' ).click( my_action ); ，最後function my_action(){ var type = $(this).val(); switch( type ){ .... } } 就行了！從頭到尾只需要去維護 my_action 的設定，而 button 新增也很快速，真是太方便了！附帶一提的，目前我是用 juqery-1.3.2 ，發現 Firefox 3 跟 IE7 的 $( '按鈕' ).val() 取到的資料不同：<button value="Firefox3取到這裡">IE7只能取到這裡</button>，使用上需留意囉！有時還得搭配 $(this).text() 處理喔！




上述是這近兩週的使用心得，扣除整理電腦的部分，或許只能稱得上一週吧？對我而言都是挺新鮮的！我甚至都不敢相信，竟然這樣就做掉以前純用 PHP + HTML 做的事了，至於效率上頭，目前感覺還 ok 囉。由於是在做 WebMail ，我會參考 Gmail 的狀況，我覺得差不多啦，感覺 Gmail 好像也是把 UI 的事丟給 JS ，在換頁時可以感受到 CPU 的吃重，相對上 Server 會輕鬆許多吧。


有機會一定要試試 jquery 啦！若有更多 UI 上的需求，也可以試試 The Yahoo! User Interface Library (YUI) ！目前 jquery 對我已經非常夠用了！


張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)