腦容量延伸計畫: 2011

2011年12月29日星期四

CSS List Item Auto Increment Counter

* suck IE 6、7、8 not support。
http://blog.hinablue.me/entry/use-css-counter-to-make-your-own-toc/

2011年12月27日星期二

Using sed On MacOSX

範例：把所有rc1的css全部換成正式版css
sed -i "" 's/jquery.mobile-1.0rc1.min.css/jquery.mobile-1.0.min.css/g' *.html

在Mac上要在-i後面加上兩個空的雙引號「""」，讓他不會另外寫到別的檔案。

題外話：
以前不曉得善用 sed，每次改都要改半天，現在會用以後就讓我好 sad啊。
為何我以前要這麼蠢一個一個慢慢改浪費生命…

Android Bundle Default Sqlite Database

http://code.google.com/p/almanac/source/browse/trunk/Almanac/src/it/almanac/AlmanacSQLiteDatabaseAdapter.java?r=56

1. 產生好自己的Sqlite Database，我是已經有了，所以用adb shell把模擬器的資料庫，位置： /data/data/MY_PKG_NAME/databases/DB_NAME。Copy出來。
2. 放到assets。
3. 讀取assets的DB，用程式複製到程式內。

補充：因為assets的檔案有1M大小的限制，有一說DB超過1MB，可以把附檔名改成.jpg。參考

2011年12月26日星期一

Create Ubuntu 10.10 On Amazon EC2

教學
http://oss.tw/elgg/pages/view/13584/-amazon-ec2-ubuntu-1010

如果有長期Server需求，不建議照教學內的第四步的版本選，建議使用 Official Ubuntu Cloud Guest Amazon Machine Images (AMIs) 且有 Long Term Support(LTS) 的版本，LTS約兩年出一版，每個版本至少 support 五年。
官方AMI，目前最新的是LTS版本是 10.04

要選用哪個請先決定Region，看要開在美東、美西、日本、etc...
再看要64 bit還32 bit，再看要存ebs還是instance

2011年12月25日星期日

Free Windows Phone Books

Silverlight for Windows Phone Toolkit In Depth
http://windowsphonegeek.com/WPToolkitBook

Additional Eclipse plugins for Android

http://schumi0901.blogspot.com/2011/12/android-sources-pluginaosp-source.html

ADT Addons
http://code.google.com/p/adt-addons/

2011年12月22日星期四

Android Generate Reflection Bitmap Image

Load Large Json On Android

Gson
https://sites.google.com/site/gson/Home

Tutorial：
http://www.javacodegeeks.com/2011/01/android-json-parsing-gson-tutorial.html

在 Android 上如果要讀一個非常大的Json：5000筆、10000筆之類的。
直接讀成 String 一定會讓記憶體爆掉的。
這時候就要用Gson啦～
Tutorial是讀一個Obj，下面範例是讀一個Array。

Sample Data Foamat：

[{"num":"110013"},{"num":"110014"},{"num":"110015"}]

Class：

import com.google.gson.annotations.SerializedName;

public class Store {
@SerializedName("num")
public String num;
}

Sample Code：

InputStream is = YOUR_DATA

Gson gson = new Gson();
Reader reader = new InputStreamReader(is);
Type collectionType = new TypeToken<List<Store>>(){}.getType();
List<Store> stores = gson.fromJson(reader, collectionType);
for(Store store : stores) {
Log.d("GSON", "update:" + store.num);
}

2011年12月18日星期日

Developing a Windows Phone Application from Start to Finish

http://msdn.microsoft.com/en-us/library/gg680270(v=pandp.11).aspx

HTML Build Tools：Compass、Sass、Live Reload

Compass
http://compass-style.org/

Live Reload
http://livereload.com/

SASS
http://sass-lang.com/

一月份再看 Orz...

2011年12月16日星期五

Unit Test

FoneMonkey
Both for iOS and Android
http://www.gorillalogic.com/fonemonkey

UI Automation
http://justbm.blogspot.com/2011/12/my-ios-ui-automation-testing.html

PSPDF KIT

http://pspdfkit.com/

2011年12月14日星期三

AnimationDrawable Out Of Memory

先聲明，這是逃避問題，不是正規解。

情況：
最近在用AnimationDrawable時，發生程式第一次進來正常。
但是按back離開過後，再進來就會發生Out Of Memory Exception。
因此將此Activity放到另外的Process跑，躲避問題。

作法：
在Androidmanifast.xml內將此Activity放到另外的Process跑。
...
android:name="YourActivity"
android:process=":NewProcess" />
...

Web Mobile Friendly Test

http://www.howtogomo.com/en/

2011年11月30日星期三

Android Bitmap Tile Repeat

http://stackoverflow.com/questions/1311042/android-tile-bitmap

2011年11月24日星期四

jQueryMobile Send Request In iOS

在jQM Alpha中，將ajax disabled會以UIWebViewNavigationTypeOther送出。
在jQM RC1以後，會以UIWebViewNavigationTypeLinkClicked送出。

location.href = '' 會以UIWebViewNavigationTypeOther送出。

2011年11月22日星期二

50 Useful and Free Web UI, Mobile UI and Wireframe Kits

http://www.onextrapixel.com/2011/11/16/50-useful-and-free-web-ui-mobile-ui-and-wireframe-kits/

jQueryMobile Reset Form

2011年11月20日星期日

GAE Rollback

http://studio.zeuik.com/?p=787

iOS Physical Engine

Box2D
http://www.box2d.org/documentation.html

Chipmunk
http://code.google.com/p/chipmunk-physics/

2011年11月17日星期四

iOS HIG 中文

http://www.usabilitymax.com/wp-content/uploads/downloads/2011/11/iPhone-HIG.pdf

jQueryMobile 1.0 Released

jQueryMobile 正式版1.0推出啦～
昨天還在看說一個星期內會推出正式版，結果昨天不知道幾點就推出了XD
http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/

jQueryMobile Reset Select Control

要在jQM內重設下拉選單，只要呼叫refresh即可。
$('#select').selectmenu('refresh');

參考：
http://jquerymobile.com/test/docs/forms/selects/methods.html

2011年11月16日星期三

jQueryMobile RC3

RC3出了，關鍵改變第一項：Performance, performance, performance！

題外話：Demo的版本網址卻是rc4！？
http://jquerymobile.com/blog/2011/11/13/jquery-mobile-rc3-released/

2011年11月15日星期二

iPad Magazine

Adobe Solution：
http://www.myadobe.com.tw/2011/ctenews/1101/Adobe_Edu_News_Letter_2011_01.pdf

2011年10月31日星期一

Android Carousel View

http://code.google.com/p/android-ui-utils/

2011年10月30日星期日

Control Google +1 Button Share Content

參考：https://developers.google.com/+/plugins/+1button/#plus-snippet

要控制Google +1按鈕的內容，這邊有三種方法，官方比較建議的是第一種方法。
作法就不贅述了。
先說結論：
Google 抓的順序也是照官方的順序1 > 2 > 3
圖片的部分則是有一定的大小以上才可。
目前不確定是要多大的圖片，找不太到官方說法。
可能是100x100以上或是150x150以上吧？

2011年10月26日星期三

Youtube Data Bug

Youtube影片中的Tag其實就相當於keyword，如果使用到中文，則會被連在一起。
這部份應該是Youtube斷字的問題。
只能說這真是個意想不到的雷啊。

如：
飛行魚 air swimmer
在Youtube Data API中拉出來的Tag會變成
["飛行魚air", "swimmer"]

飛行魚小丑魚大白鯊
會變成
["飛行魚小丑魚大白鯊"]

Google App Engine Using Session

http://blog.stannard.net.au/2011/01/09/how-to-use-sessions-on-google-app-engine-with-python-and-gae-sessions/

2011年10月18日星期二

Android 4.0 Hightlights

http://developer.android.com/sdk/android-4.0-highlights.html

看起來改了好多東西啊。囧>
都還沒玩過3.x，4.0就出了...

Google Plus Render +1 Button Programmatically

一般用法太簡單就不提了。

Google 建議將 script 在 body最後讀進來。
<body>
...
<div id="gplus"></div>
...
<script src="https://apis.google.com/js/plusone.js" type="text/javascript">
{lang: 'zh-TW'}
</script>
</body>

只要在某個地方觸發這段，就可以動態產生+1按鈕。
gapi.plusone.render('gplus', {'href': YOUR_LINK, 'size': 'small', 'count': false});
API參考：https://developers.google.com/+/plugins/+1button/#jsapi
+1按鈕參數參考：https://developers.google.com/+/plugins/+1button/#plusonetag-parameters

被+1的網頁會抓取得資料？
參考：https://developers.google.com/+/plugins/+1button/#plus-snippet

2011年10月12日星期三

Youtube Data API Tags and Keywords

Difference between tags and keywords
Tags其實跟Keyword差不多了。

Youtube Data API的參數「q」，可以針對keywords做搜尋。
但是不支援中文的tag
官方文件

2011年10月6日星期四

Google App Engine Parse Zulu Date

在Google App Engine的環境是python 2.5.2
所以datetime.strptime不支援「%f」

因此簡單使用此方式截掉毫秒。
datetime.strptime(string[:string.index('.')], '%Y-%m-%dT%H:%M:%S')

Google App Engine Upload Missing

- url: /images/(.*)
static_files: static/images/\1
upload: static/images/(.*)

在app.yaml中設定的upload沒設定對則Google App Engine不會上傳你得資料夾。

Zend Cross SubDomain Cookie

參考：http://stackoverflow.com/questions/1084114/cross-domain-cookies

在application.ini
resources.session.cookie_domain = ".mydomain.com"

前要加個「.」才是所有subdomain。

2011年10月3日星期一

jQueryMobile RC 1.0 Released

http://jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released/

真是可喜可賀？
大致上來說：

支援MeeGo
修改Collapse的外觀，看起來一體化
iOS5 Transition和Fixed ToolBar有支援，但目前預設關掉。
其他...(自己看)

HTC Security Leak!?

http://www.androidpolice.com/2011/10/01/massive-security-vulnerability-in-htc-android-devices-evo-3d-4g-thunderbolt-others-exposes-phone-numbers-gps-sms-emails-addresses-much-more/

2011年9月22日星期四

Analytics User Operation

http://www.google.com/analytics/

http://www.flurry.com/

2011年9月19日星期一

iOS Boilerplate

http://iosboilerplate.com/

2011年9月16日星期五

Google Moderator API

http://code.google.com/intl/zh-TW/apis/moderator/v1/using_rest.html#query-params

2011年9月15日星期四

When can I use CSS3 Transitions

http://caniuse.com/css-transitions

jQueryMobile Beta3 Released

Beta 3 Released
http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/

很忙，沒空看(死)

Google Plus API

Developer Site
https://developers.google.com/+/

Google Plus API － Read-Only for now... 囧>
https://developers.google.com/+/api/

The Google Plus Official Blog
http://googleplusplatform.blogspot.com/

因為有SDK，因此不建議自己辛辛苦苦的去做。
強烈建議使用SDK，可以省掉很多事情。
python SDK資料拉回來以後還是要自己想辦法整理。
其他版本不知道情況如何？

現在可以拉到文章的回復內容了。 updated Oct. 24 2011

申請帳號

申請一個API Key。網址：https://code.google.com/apis/console#access
登入後建立一個Project
在右邊的All Service中找到Google+ API，是Off的，按下把它打開
接受同意條款。
這時會變成On
此時就可以拿「API key」來做Simple API Access了。
如果需要Authorized API Access，請到左邊的API Access建立一個OAuth ID。(待續...)

AnythingSlider

http://css-tricks.com/examples/AnythingSlider

2011年9月8日星期四

Adobe CS5 For Mac

請低調...
http://www.macbookone.com/2010/05/adobe-cs5-for-mac.html

2011年9月7日星期三

ImageMagick

這東西真是好棒啊～～～有空來好好玩玩。
http://www.imagemagick.org/Usage/

白色背景的 jpg 去背變透明的 png
convert a.jpg -fuzz 30% -transparent "rgb(255,255,255)" b.png

2011年8月29日星期一

Fixed Position In Mobile Safari

iOS 不支援下面這些：

CSS
- position: static
- position: fixed
Iframe

2011年8月26日星期五

ASIHTTPRequest

http://allseeing-i.com/ASIHTTPRequest/

處理網路部分的問題

續傳
快取
etc...

2011年8月25日星期四

Net::HTTP Cheat Sheet

http://www.rubyinside.com/nethttp-cheat-sheet-2940.html

2011年8月24日星期三

Solr Result Grouping

文件及參考：http://wiki.apache.org/solr/FieldCollapsing
需注意：從Solr 3.3、4.0以後才支援。目前release最新版本是3.3。

有空再慢慢看(死)

2011年8月23日星期二

Using IP Address To Find Country

Using GeoLite Country，參考http://www.maxmind.com/app/csv

下載GeoLite Country
建立Table
CREATE TABLE `geo_country` (
`start_ip` char(15) NOT NULL COMMENT '起始IP',
  `end_ip` char(15) NOT NULL COMMENT '結束IP',
  `start` bigint(20) NOT NULL COMMENT '起始值',
  `end` bigint(20) NOT NULL COMMENT '結束值',
  `country` char(2) NOT NULL COMMENT '國家簡碼',
  `name` char(50) NOT NULL COMMENT '國家名稱'
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='國家ip'
將檔名命名成和Table一樣可以在import時自動幫你對應到Table，這邊是geo_country
Import CSV到Mysql
mysqlimport
--fields-terminated-by=","
--fields-optionally-enclosed-by="\""
--lines-terminated-by="\n"
--host=<YOUR_HOST>
--user=<YOUR_USER>
--password=<YOUR_PASSWORD>
<YOUR_DATABASE>
-L /PATH/geo_country.csv
測試168.95.1.1 計算方式 (168 x 16777216) + (95 x 65536) + (1 x 256) + (1 x 1)
SELECT * FROM `geo_country` WHERE 2824798465 BETWEEN `start` AND `end`;

若要安裝在Debian上可參考：http://www.php.net/manual/en/geoip.setup.php#93000
輕鬆省事的啦。

另外如果你要求要更精確、夠有錢，也可以不用GeoLite，改用GeoIP。

2011年8月16日星期二

Tomcat Set URIEncoding

為了讓Tomcat在取得URI的中文參數不會變亂碼，必須做以下處理。

編輯conf/server.xml
<Server port="8005" shutdown="SHUTDOWN">
......
<Service name="Catalina">
......

<Connector port="8080" protocol="HTTP/1.1" URIEncoding="UTF-8"
connectionTimeout="20000"
redirectPort="8443" />
......

</Service>
</Server>

官方參考：
http://wiki.apache.org/solr/SolrTomcat#URI_Charset_Config

Arduino Target

http://arduino.tw/

有空...來試著做出這玩意好了。(遠目)
http://www.mandmtoys.com/air-swimmers/clown-fish?zenid=221aff50f3ff0e04fd4f82095f3a125b

Trigger Android Vibrate

http://android.konreu.com/developer-how-to/vibration-examples-for-android-phone-development/

2011年8月11日星期四

jQueryMobile Note

Version: Beta2

在http://taiwansportplace.appspot.com/mobile/search這個頁面中有 bind pagecreate event 在這個頁面中，在此時透過 Ajax 到 API 拉取資料回來，透過 id 塞到一個 ListView。
因為是透過 id 去指定的，所以當網址變成http://taiwansportplace.appspot.com/mobile/search#/mobile/search時，依然有把資料透過 Ajax拉回來。
只是因為這時候會有兩個一樣 page element 在這個 html 中，雖然頁面看起來是空白的，但是其實是有資料塞到第一個 page，只是顯示的是第二個長得一樣的但是沒有資料的 page。

或許會有人想說那就兩個都塞就好了，但是今天在我的另外一個頁面放的是個Google Map。
同時有兩個地圖存在頁面上，我想應該不是好事情，很傷效能。

目前不確定這個是不是我根本違反了jQM的設計精神。
總之在某些連結上透過 data-ajax="false"，讓頁面不是用Ajax讀進來。
網址也就不會變成第二個的狀況了。

2011年8月9日星期二

HTML5 Get User Location

廢話不多說，看Code。
var successCallback = function(position) {
        //前略，map這邊是使用Google Map v3
        //地圖移過去使用者的位置
       map.setZoom(10);
        map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    },
    errorCallback = function() {
        switch(error.code) {
            case error.TIMEOUT:
                alert ('Timeout');
                break;
          case error.POSITION_UNAVAILABLE:
                alert ('Position unavailable');
                break;
            case error.PERMISSION_DENIED:
                alert ('Permission denied');
                break;
            case error.UNKNOWN_ERROR:
                alert ('Unknown error');
                break;
        }
    },
    getLocation = function() {
//檢查有無支援 HTML5 的geolocation
        if (navigator.geolocation) {
//會跳出確認是否要讓網頁使用你的位置
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
        }
    };
getLocation(); //開始取得位置

用法範例：
navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options );
var watchId = navigator.geolocation.watchPosition( successCallback, errorCallback, options );
navigator.geolocation.clearWatch( watchId );

實作範例：
http://taiwansportplace.appspot.com/mobile/weather

W3C 官方參考：
http://dev.w3.org/geo/api/spec-source.html
http://dev.w3.org/geo/api/spec-source.html#position-options

2011年8月5日星期五

Bundle Installer

http://gembundler.com/

2011年8月4日星期四

jQueryMobile Beta2 Released

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

摘要：

支援Nokia系列的60支
在 Beta1 中出現的「useFastClick」被拿掉了，因為沒辦法在所有平台上面不出錯。
而且不拿掉會觸發兩次。Orz...
網址列有時候還是會出現，因為處理連結比較重要。
會出現是因為踩到 Safari 的 bug XD
歷程：https://github.com/jquery/jquery-mobile/wiki/iOS-location-bar-hiding-research
Page 的結構不一定要有 data-role="page" 了，範例：http://jsbin.com/ejevis/edit
CheckBox、Radio改變選到的狀態，不會整個反白了。
Beta 1：http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-all.html
Beta 2：http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/forms-all.html
有 DOM cache 可以加速有 cache 頁面的讀取速度。
增加了「create」event，如果動態的加入一些元件到頁面上，則去 trigger 頁面的 create 事件，就會幫你把這個頁面底下的每個元件都呼叫 create 並且畫好它。
例如：加了一個 ListView到頁面上時，應該呼叫 create。如果只是 ListView 加一個 Row 則呼叫 refresh。
增加「data-prefetch」在連結上，jQM會幫你做lazy-loading把頁面取回。
把「autoInitializePage」設為false，可以在 Page 建立前，先做些事情。
loadingMessage 可以隨時更改了。
如：$.mobile.loadingMessage = "My custom message!";
如何觸發 swipe 事件的設定可以更改了。
scrollSupressionThreshold、durationThreshold、horizontalDistanceThreshold、verticalDistanceThreshold
header、footer 的 theme 不會從 page 繼承下來了，不知道是 Bug 還是？
API 文件有每個元件的設定可以看了，不用自己去挖。

2011年8月3日星期三

iScroll4

http://cubiq.org/dropbox/iscroll4/examples/simple/

Zend Server CE Can't Connect To Local MySQL Server

在Mac上使用Zend Server CE時
要用 command 連 Mysql 時出現
Can't connect to local MySQL server through socket '/tmp/mysql.sock'

解決辦法：
sudo ln -s /usr/local/zend/mysql/tmp/mysql.sock /tmp/mysql.sock

2011年8月2日星期二

How to Add Those @2x iOS4 Resources to SVN

http://developers.enormego.com/view/add_2x_ios4_resources_svn

用：svn add Default@2x.png@

2011年8月1日星期一

Apache使用Cronolog

參考：http://www.ylmf.net/linux/tips/2010111710026.html

安裝Cronolog：

wget http://cronolog.org/download/cronolog-1.6.2.tar.gz
gzip -d cronolog-1.6.2.tar.gz
tar xf cronolog-1.6.2.tar
cd cronolog-1.6.2
ls
./configure
make
make install
which cronolog

which cronolog會看到被安裝在 /usr/local/sbin/cronolog。
CustomLog "| /usr/local/sbin/cronolog /[PATH_TO_YOUR_LOG]/access-%Y%m%d.log" combined
<VirtualHost *:80>
ServerName ......
DocumentRoot ......
<Directory /Users/cateyes/work/sites/>
......
</Directory>
CustomLog "| /usr/local/sbin/cronolog /[PATH_TO_YOUR_LOG]/access-%Y%m%d.log" combined
</VirtualHost>

2011年7月28日星期四

Z Shell

安裝zsh
https://github.com/robbyrussell/oh-my-zsh

推薦使用
wget --no-check-certificate https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

2011年7月27日星期三

Ruby Tutorial

Ruby 安裝
http://pragmaticstudio.com/blog/2010/9/23/install-rails-ruby-mac

Ruby創始人寫的中譯本
http://guides.ruby.tw/ruby/index.html

Ruby In 20 Mins
http://www.ruby-lang.org/zh_TW/documentation/quickstart/

jQuery Drag And Drop Between 2 List

http://thechriswalker.net/select-drag/

SVN Editor Setting

SVN Editor未設定時，會出現下面訊息。

svn: Commit failed (details follow):
svn: Could not use external editor to fetch log message; consider setting the $SVN_EDITOR environment variable or using the --message (-m) or --file (-F) options
svn: None of the environment variables SVN_EDITOR, VISUAL or EDITOR is set, and no 'editor-cmd' run-time configuration option was found

解決方法：
在 Shell 的 Config 中設定編輯器。

zsh：編輯 ~/.zshrc
bash：編輯 ~/.bash_profile

加上 export SVN_EDITOR="/usr/bin/vim"

2011年7月26日星期二

Google Weather API

國家列表：
http://www.google.com/ig/countries?output=xml&hl=zh-tw

城市列表範例：
http://www.google.com/ig/cities?output=xml&hl=zh-tw&country=tw

天氣資訊抓取範例：
http://www.google.com/ig/api?hl=zh-tw&weather=%E5%8F%B0%E5%8C%97

http://www.google.com/ig/api?hl=zh-tw&weather=,,,25091075,121559834

jQuery Plugin

Twilight：
http://love-media.net/twilight-show-en

2011年7月24日星期日

Media Query Examples

http://webdesignerwall.com/tutorials/css3-media-queries

http://mediaqueri.es/

2011年7月20日星期三

jQueryMobile & DateBox Cheat Sheet

此篇版本以Beta 1為準，一定愛配 API。

jQueryMobile Demo and API
http://jquerymobile.com/demos/1.0b1/

1.
mobileinit務必要在jQM讀進來之前去設定jQM的config。
<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//設定jQueryMobile必須在Load之前設定
$(document).bind("mobileinit", function(){
    //設定為$.mobile.xxxx = "OOOOO"
   config設定參考
});
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.0b1.min.js"></script>

2.
正式版不再用：在HTML依據Orientation加上Class的方法做。
建議改用Media Queries。官方說法

3.
data-transition：指定連結的 transition 動畫。動畫種類
data-rel：指定關係為Dialog，會以對話框形式跳出來，並且有可關掉視窗的按鈕。
class="ui-btn-right"：指定這顆按鈕在Header右邊。
相關init config：defaultPageTransition、defaultDialogTransition、loadingMessage、pageLoadErrorMessage。
        <div data-role="header" data-position="inline" data-theme="f">
            <h1>我是Header喔！</h1>
            <a href="#login" class="ui-btn-right" data-rel="dialog" data-transition="pop">登入</a>
        </div>

4.
data-add-back-btn：jQM Beta開始預設不會有back按鈕了，要在data-role="page"上加上data-add-back-btn="true"
data-back-btn-text：back按鈕的文字
以上兩點都可以在 mobileinit 時統一設定。
相關init config：addBackBtn、backBtnText、backBtnTheme。
<div data-role="page" id="login" data-theme="g" data-add-back-btn="true" data-back-btn-text="取消">
......
</div>

5.
在Select上比照按鈕，都可以指定按鈕有的東西
可用optgroup做群組選單。
data-native-menu：true 使用手機內建樣式， false使用jQM樣式，都可玩玩看。
data-icon：選單圖片
data-theme：選單樣式
相關init config：ajaxEnabled。
<form action="#">
<select name="count" id="count" data-native-menu="false" data-icon="search" data-theme="c">
<optgroup label="上午">
      <option value="8">上午八點</option>
            <option value="9" disabled="disabled">上午九點</option>
</optgroup>
<optgroup label="下午">

      <option value="14">下午兩點</option>
            <option value="15">下午三點</option>
</optgroup>

    </select>
</form>

6.
data-fliter：可替選單加上搜尋介面。
data-filter-placeholder：搜尋框的PlaceHolder
data-filter-theme：就theme嘛
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search User..." data-filter-theme="c">
   ......
</li>

同場加映DateBox
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
jQueryMobile DateBox Demo and API
http://dev.jtsage.com/jQM-DateBox/

1.
<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//設定jQueryMobile必須在Load之前設定
$(document).bind("mobileinit", function(){
    //DateBox官方強烈建議將date降級成使用text
   $.mobile.page.prototype.options.degradeInputs.date = 'text';
});
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="/js/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript">
//要調整DateBox的東西要在datebox.js讀進來以後。
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'dateFormat': 'dd日mm月YYYY年',
    'headerFormat': 'dd.mm.YYYY'
});
</script>

2.
date-option說明不詳列，類似jQueryUI DatePicker。
mode：picker種類
dateFormat：input中的格式
noButtonFocusMode：不要設為true，開啟一次以後會關不掉，預設是flase。
fieldsOrder：要有哪些可選
theme：input的樣式
pickPageInputTheme：picker中的數字區塊樣式
pickPageTheme：picker的背景及確定按鈕

2011年7月18日星期一

中文網址Server設定

http://blog.urdada.net/2005/09/08/24/

2011年7月15日星期五

Google App Engine Installation

GAE SDK Version: 1.5.1，最低需求為Python 2.5

Python目前Production版本是2.7和3.2
Windows XP就需要裝2.7才會動，如果裝3.2會沒辦法執行。
會出現錯誤訊息：
NameError: global name 'execfile' is not defined
必須裝2.x才能執行，因此就以最新版的2.7裝了即可執行。

但是在Mac OS X 10.5 Leopard 已經安裝了 Python 2.5。
所以不用另外安裝。

在Windows裝好Python和GAE SDK以後，可能會跟你說找不到Python
這時就把GAE Luncher打開，按Edit -> Preference指定Python路徑到
C:\Python27\pythonx.exe
重開GAE Luncher即可。

jQueryMobile Gallery

主要請看：
http://www.jqmgallery.com/

其中較優秀範例：
Sea-Doo：http://m.sea-doo.com/
介面不錯，清爽簡潔

Stanford：http://m.stanford.edu/
史丹佛大學，經常更新，介面普通。

優眾：http://m.ihaveu.com
請用手機看，不然會被導到desktop。
介面較炫，但看起來不是全部都是jqm。

American Century：https://www.americancentury.com/mobile/
介面普普，金融相關，投資類型

Boorbool：http://m.boorbool.com
有接一些event，但看起來已經不像是jqm了。

山寨版AngryBird：http://www.atlassian.com/en/angrynerds/nerds.html

MyShoppingList：http://www.myshoppinglist.mobi/
介面不錯，很可愛

Take Me Fishing：http://www.takemefishing.org/mobile/
介面很可愛

Trekaroo：http://www.trekaroo.com/mobile/nearby
介面還ok

jQueryMobile Beta1

jQueryMobile Beta1 出來了
根據官方說法：7月會出beta 2，8月會正式版。可喜可賀！

http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/#upgrade
用了Media Query 所以 iPad 和 iPhone看會不同。

不過在切換ViewPort為LandScape時，在iPhone上會有些問題，會超過一的畫面可以顯示的大小，要自己縮小。可能跟他為了讓使用者可以縮放，修改Meta的寫法有關。
http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/#viewport
但是目前在Android HTC Desire上測試則沒有問題。

主要改變如下：

支援黑莓機和Opera Mini。
在 iOS 和 Android 中會自動隱藏URL Bar了，不過我測試過後：
iOS： iPhone可以，但是底下的Bar還是在、iPad不會(也許螢幕夠大)
Android：Desire可以，但是按 Desire 的 back 鈕有時候還是會跑出來。

作法如下：iOS捲0px、Android捲1px
http://stackoverflow.com/questions/6011223/how-to-completely-hide-the-navigation-bar-in-iphone-html-5
將頁面切換的部份切開，可以自己做頁面切換的特效了。
左上角的Back按鈕預設是沒有的，因為多數手機和瀏覽器都能控制上一頁。
要打開有兩種方法：
－在data-role="page"的div上加上data-add-back-btn="true"
－mobileinit時，設定config為$.mobile.page.prototype.options.addBackBtn = true;
在 Form 裡面，會讓 Label 在 Landscape 和 Portrait 時的呈現不同。
但是Window Phone7的Form元件，label 不像其他系統會 float 到左邊。(又是IE...)

正式版將不再使用現在的方式，請改用CSS3 Media Queries。
沒有 ajaxFormsEnabled 和 ajaxLinksEnabled 改為 ajaxEnabled

2011年7月14日星期四

Broswer Marketing

http://marketshare.hitslink.com/browser-market-share.aspx?spider=1&qprid=2

2011年7月13日星期三

用Solr產生頁面 - XSL vs. VTL

當我們今天從Solr拿到一堆 doc，要產生頁面時有幾種作法：

用PHP或是Java去呈現－也就是目前的作法。

優點：

大家已經熟悉。
有許多Lib可以使用。

缺點：

很大一包，除了Solr還必須有Framework。

不過就像標題，今天的重點在VTL和XSL

所以當今天我們不想要這麼大一包時，就有下面兩種可能作法。

用XSL (EXtensible Stylesheet Language)

概念上就是指定哪種XML的Pattern去用某種Template。
可以將一份XML文件，套上XSL，呈現成你想要的樣子，通常是HTML。
由於Solr產生的格式預設就是XML，所以只要套上去就可以。

優點：

上手難度較低。
現有主流瀏覽器都支援，IE6以上 (最新到9)、FireFox3(最新到5)、Chrome、Opera9(最新到11)、Safari 3(最新到5)
只要有瀏覽器就可以測試，只要將XML內指定他的XSL。
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="YOUR.xsl"?>
不用了解Solr內的設定。

缺點：

需要自己組Query。
擁有的函式較少。
指定哪個區塊要用哪個模版較不直覺，需用到正規表示法。
做複雜的邏輯處理時，不能自己寫Fucntion來重複呼叫，會寫的很辛苦、又醜又長。
不能使用Map(Dictionary)、Array型態的變數。
Debug不易

用VTL (Velocity Template Language)

概念上就是類似MVC的Framework架構中View的部分。
會有個Layout，然後會有要顯示的資料給你，裡面可以決定哪個地方要放哪個View Block。
只是每個View又同時是一個容器，裡面又可以再去指定裡面哪些地方要放哪個View Block。

有人說很類似php的 Smarty，但是沒用過，無從比較。

優點：

概念上類似Zend，使用起來較為直覺。
寫法簡潔，熟悉後開發速度較快。
可以自己寫函式來重複呼叫以及可使用Map、Array型態的變數，做複雜邏輯判斷較為方便。
Solr的Velocity內已經寫好的一些組Query用的函式，可以直接拿來用。
似乎可以引用一些外部的函式？

缺點：

上手難度較高，有很多VTL規則需要熟悉。
需要了解Solr內的設定，而且頁面都會放在solr/conf/velocity/下，目前被寫死在Solr內 Orz...
需要有Solr才方便測試。
Debug不易

Solr Developer's Blog

http://my.opera.com/jinglepot/blog/

2011年7月10日星期日

HTML5 Canvas Demos

http://slodive.com/web-development/html5-canvas-demos-and-applications/

http://www.thewildernessdowntown.com/

2011年7月8日星期五

HTML5 Canvas Lib

Processing
http://processingjs.org/

2011年7月7日星期四

Solr Working With Multi Core

以Solr的example內為例。

啟動multi core：

在example下：java -Dsolr.solr.home=multicore -jar start.jar

倒資料到multi core：

在example/exampledocs下，到資料到core1：java -Durl=http://localhost:8983/solr/core1/update -jar post.jar

相關設定：solr.xml
<solr persistent="false">
<cores adminPath="/admin/cores" defaultCoreName="core0">
<core name="core0" instanceDir="core0" />
<core name="core1" instanceDir="core1" />
</cores>
</solr>

defaultCoreName：有設在defaultCoreName的，沒指定coreName都會指向他。
管理設定：http://localhost:8983/solr /admin/cores
可以進行Create、Reload、Rename...等等動作
在v3.2 Alias似乎並不支援！？v3.3尚未測試

參考：http://wiki.apache.org/solr/CoreAdmin

2011年7月6日星期三

Solr - Ignore HTML When Search

以中文情況，schema.xml如下，由cjk的type改，英文請由text改：
    <fieldType name="html" class="solr.TextField" autoGeneratePhraseQueries="true">
      <analyzer type="index">
        <charFilter class="solr.HTMLStripCharFilterFactory"/>
        <tokenizer class="solr.CJKTokenizerFactory"/>
        <filter class="solr.StopFilterFactory"
                ignoreCase="true"
                words="stopwords.txt"
                enablePositionIncrements="true"
                />
        <filter class="solr.WordDelimiterFilterFactory" generateWordParts="1" generateNumberParts="1" catenateWords="1" catenateNumbers="1" catenateAll="0" splitOnCaseChange="1"/>
        <filter class="solr.LowerCaseFilterFactory"/>
        <filter class="solr.KeywordMarkerFilterFactory" protected="protwords.txt"/>
        <filter class="solr.PorterStemFilterFactory"/>
      </analyzer>
      <analyzer type="query">
        <tokenizer class="solr.CJKTokenizerFactory"/>
        <filter class="solr.SynonymFilterFactory" synonyms="synonyms.txt" ignoreCase="true" expand="true"/>
        <filter class="solr.StopFilterFactory"
                ignoreCase="true"
                words="stopwords.txt"
                enablePositionIncrements="true"
                />
        <filter class="solr.WordDelimiterFilterFactory" generateWordParts="1" generateNumberParts="1" catenateWords="0" catenateNumbers="0" catenateAll="0" splitOnCaseChange="1"/>
        <filter class="solr.LowerCaseFilterFactory"/>
        <filter class="solr.KeywordMarkerFilterFactory" protected="protwords.txt"/>
        <filter class="solr.PorterStemFilterFactory"/>
      </analyzer>
    </fieldType>

如果把欄位裡面放成像是json格式則無效。如要放多個內容，需將欄位內容用一些方式隔開。
這樣做的好處是搜尋的時候，不會搜尋到html註解內的東西和html tag內上的東西，tag的內容是可以被搜尋到的，且拉出來的資料一樣是原本完整的html。
Solr官方參考網頁

Solr Use UUID

schema.xml修改：
- <fieldtype class="solr.UUIDField" indexed="true" name="uuid"></fieldtype>
- <field name="id" type="uuid" indexed="true" stored="true" default="NEW"/>
solrconfig.xml修改：
註解掉
<searchComponent name="elevator" class="solr.QueryElevationComponent" >
    <str name="queryFieldType">string</str>
    <str name="config-file">elevate.xml</str>
</searchComponent>
<requestHandler name="/elevate" class="solr.SearchHandler" startup="lazy">
    <lst name="defaults">
      <str name="echoParams">explicit</str>
    </lst>
    <arr name="last-components">
      <str>elevator</str>
    </arr>
</requestHandler>

可參考：http://blog.xuite.net/misgarlic/weblogic/44589022

2011年7月3日星期日

Desiging With RDBMS And Solr

http://www.lucidimagination.com/devzone/technical-articles/solr-and-rdbms-basics-designing-your-application-best-both

http://wiki.apache.org/solr/WhyUseSolr

2011年6月28日星期二

Convert Flash swf To HTML5

http://swiffy.googlelabs.com/

Android Decode Large Image From Remote URL

http://stackoverflow.com/questions/4996470/load-large-image-from-server-on-android

由於直接Decode InputStream，BitmapFactory會用預設的16384 byte作為buffer去decode。因此圖片太大和無法decode都會直接return null。
要用BufferedInputStream讀到ByteArrayBuffer內轉成byte[]，再將byte[]去decode才行。

2011年6月23日星期四

Open iPhone Simulator

open /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/

2011年6月20日星期一

PHP Json Encode Without Unicode

$payload = array(
    'owner' => '我是主人',
    'pets' => array(
        'cat' => '喵',
        'dog' => '汪',
    )
);

echo json_encode($payload), "\n";
// {"owner":"\u6211\u662f\u4e3b\u4eba","pets":{"cat":"\u55b5","dog":"\u6c6a"}}

$rawurlencodeall = create_function('&$val', 'if(is_string($val)) { $val = rawurlencode($val); }');
array_walk_recursive($payload, $rawurlencodeall);
$sJSONPayload = rawurldecode(json_encode($payload));

echo $sJSONPayload;
// {"owner":"我是主人","pets":{"cat":"喵","dog":"汪"}}

Solr Json fieldType Extension

https://issues.apache.org/jira/browse/SOLR-1690

2011年6月16日星期四

Android Google Map Direction

http://csie-tw.blogspot.com/2009/06/android-driving-direction-route-path.html

2011年6月14日星期二

NSManageObject 如何用NSManageObjectID取得

http://xcatsan.blogspot.com/2010/06/coredata-object-idobject-id_04.html

Recursively delete .svn directories

找出此資料夾下所有.svn資料夾
find . -type d -name .svn

rm -rf `find . -type d -name .svn`
刪除所有 .svn 資料夾

2011年6月13日星期一

Difference Between Android And iOS UI conventions

Android 和 iOS 間的行為差異
http://www.androiduipatterns.com/2011/06/differences-between-android-and-ios-ui.html

Android 和 IOS 間的 UI 位置差異
http://www.androiduipatterns.com/2011/04/5-tips-for-converting-ios-ui-to-android.html

2011年6月3日星期五

How To Restart A CSS3 Animation

http://css-tricks.com/restart-css-animation/
簡單來說就是：

寫一個class，裡面放動畫。
撥完後要重新啟動就toggle那個class

2011年5月26日星期四

Cocos2D Javascript

http://www.cocos2d-javascript.org/

瑪莉歐Demo：
http://www.cocos2d-javascript.org/demo?demo=mario

2011年5月25日星期三

HTML5 Tool

http://itunes.apple.com/us/app/hype/id436931759?mt=12

2011年5月24日星期二

Solr Schema

<fields>：定義有哪些filed
<field>：定義該有的field，如果要用動態欄位可用<dynamicField>

name：必備，這個filed的名稱
type：必備，這個field的種類( boolean | string | int | float | long | double | date | point | ...)
indexed：選用，是否要用來作index
stored：選用，是否要儲存。通常在copyField指定的目標會設為false。
multiValued：選用，是否會有多個內容，如：（好折凳）產品功能可能會有好多個

<dynamicField>：定義模糊的field，如*_i、ignored_*，其他同field
如：age_i 就會對應到 *_i。

<copyField>：把某個 field 複製到某個 field 搜尋，通常會用在 copy 到 defaultSearchField。

<defaultSearchField>：定義預設的搜尋field

Solr Tips

什麼是Solr？
請參考http://mclee.foolme.net/2007/07/solr-enterprise-search.html

Solr用法
http://my.opera.com/jinglepot/blog/solr-schema-xml

注意！
改過 schema 後，要把

solr 重新啟動
資料重新post進solr

SVN Export Only Changed File

參考網址：http://www.electrictoolbox.com/subversion-export-changed-files-cli-v2/

將網頁中的 script 存下來命名為svnexport (隨你高興)
可依照個人喜好放到/usr/local/bin下或哪邊方便使用
用法為PATH_TO_svnexport REPOS_PATH TARGET_PATH REVERSION_FROM，例如
svnexport http://code.mycompany.tw/repos/myproject ./ 9527
則會把從 reversion 9257開始，有更新的檔案整個目錄結構拉下來

2011年5月22日星期日

Android Using Existing Database

http://www.remyvd.com/node/39

2011年5月18日星期三

2011年5月11日星期三

Android Cocos2D Tutorial-1

參考網址：http://code.google.com/p/cocos2d-android-1/

建立專案後的動作：

將cocos2d-android.jar放進專案設上Build Path
將以下這張圖片放到asset資料夾內。

2011年5月10日星期二

iOS Load Local Javascript

https://devforums.apple.com/message/32282#32282

如果要在iOS中讀取local的javascript檔案，需將javascript丟到project內。
再到Project設定中-> Build Phases中

選擇第三個 Compile Sources按「-」把該js刪掉
選擇第二個 Copy Bundle Resources 按「+」將該js加進來

Android 安裝App異常

有時候會出現Unknow Error 18
http://www.androidpolice.com/2011/04/19/fixing-the-couldnt-install-on-usb-storage-or-sd-card-problem-on-android/

http://www.android-hk.com/news/installing-sd-card-apps/

HTML on Touch Device



var supportTouch = "ontouchend" in document,

touchStartEvent = supportTouch ? "touchstart" : "mousedown",

touchMoveEvent  = supportTouch ? "touchmove"  : "mousemove",

touchStopEvent  = supportTouch ? "touchend"   : "mouseup";



//以上為偵測裝置是否有支援touch，有則用touch沒有則用mouse。



$touchpad.bind(touchStartEvent, function(e) {

//Your Code Here

});

$touchpad.bind(touchMoveEvent, function(e) {

//Your Code Here

});

$touchpad.bind(touchStopEvent, function(e) {

//Your Code Here

});

Touch In This Area!

2011年5月5日星期四

HTML CoverFlow

CSS-Based
CoverFlow - Use Mouse Scroll
http://radnan.public.iastate.edu/coverflow/

CoverFlow - Use Slider With jQuery
http://paulbakaus.com/lab/js/coverflow/
Reference
http://addyosmani.com/blog/jqueryuicoverflow/

Flash-Based
Runway
http://www.simile-widgets.org/runway/

2011年4月28日星期四

Android Debug certificate expired

砍掉debug.keystore
Mac OS: ~/.android/debug.keystore
Windows XP: C:\Documents and Settings\{USER_NAME}\.android\debug.keystore

2011年4月25日星期一

CSS Support Reference

查看各種CSS版本的規格，另外包括FireFox和Webkit的支援
http://css-infos.net/

2011年4月20日星期三

Android Camera Bugs

最近寫了幾個要用到鏡頭的程式，發現問題真是他喵的多！

最近歸納出幾個結論：

相機鏡頭所在的Activity，務必將Request Orientation設為landscape。
有需要看起來是直的View，可用LayoutAnimation將View看起來轉為直的，只有看起來，因此在設計整個View的時候要特別想過。但是如果要將View作為直的就同時必須捨棄內建的元件(AlertDialog、Toast…等等)，因為他們還是會顯示成landscape的樣子，所以就必須要自己刻。

Android APK For Download

將Content-Type設為application/vnd.android.package-archive

在Android手機上即可直接下載並且安裝

How To Stop Thread

boolean mFlag = true;

Thread thread = new Thread(new Runnable() {
   @Override
   public void run() {
       while(mFlag) {
           ...
           //Working
           ...
       }
   }
});
thread.start();

Than set mFlag to false somewhere.
如果在Android中，Thread沒辦法停掉，則會造成一個Memory Leak

2011年4月19日星期二

Android Change Heap Size

http://anemospring.blogspot.com/2011/01/howto-android-dalvik-maximum-heap.html

Android Avoding Memory Problem

參考網址：http://ttlnews.blogspot.com/2010/01/attacking-memory-problems-on-android.html

要避免在Android上噴出Out Of Memory(OOM)，大致上有幾點要注意：

有使用Listener的話，要拿掉。文中是寫在onDestroy時拿掉(大概是在onCreate掛上的)，不過我通常在onResume掛上，所以onPause就拿掉了。總之就是把握一個原則：把你掛的Listener在相對應的Life Cycle拿掉。
使用Drawable必須注意，當被加到View上時，會幫你設上一個Callback，請注意必須自己去清掉。不然會造成一個Leak在那邊，你的可用的記憶體就會越來越少，最後就Jizz了。
使用圖片時，經常需要Decode成Bitmap，如果是一張稍微大過手機最小解析度(240x320參考)，那就應該考慮用先用BitmapFactory.Options將inJustDecodeBounds設為true來先Decode一次偵測圖片大小，再設定inSampleSize 縮到適合大小，再去真的Decode整張圖片n。事實上手機的解析度很有限，你把一張大圖直接塞進去也是要縮小，浪費記憶體去存大圖又容易狂噴OOM Exception
使用ListView Adapter，將getView傳進的convertView重複利用，既能減少記憶體的用量，也不會每次new一個新的View減慢速度。
將大的物件在onDestroy時設為null，或許可以加快GC選到的機會，但是如果還有其他Thread在跑，則很容易出現NullPointerException，請小心使用。
使用不屬於需要長時間存在的Thread必須能夠在Activity停掉時跟著停掉，不然會造成整個Activity無法被GC回收。

訂閱：文章 (Atom)

2011年12月29日 星期四

2011年12月27日 星期二

2011年12月26日 星期一

2011年12月25日 星期日

2011年12月22日 星期四

Sample Data Foamat：

Class：

Sample Code：

2011年12月18日 星期日

2011年12月16日 星期五

2011年12月14日 星期三

2011年11月30日 星期三

2011年11月24日 星期四

2011年11月22日 星期二

2011年11月20日 星期日

2011年11月17日 星期四

2011年11月16日 星期三

2011年11月15日 星期二

2011年10月31日 星期一

2011年10月30日 星期日

2011年10月26日 星期三

2011年10月18日 星期二

2011年10月12日 星期三

2011年10月6日 星期四

2011年10月3日 星期一

2011年9月22日 星期四

2011年9月19日 星期一

2011年9月16日 星期五

2011年9月15日 星期四

申請帳號

2011年9月8日 星期四

2011年9月7日 星期三

2011年8月29日 星期一

2011年8月26日 星期五

2011年8月25日 星期四

2011年8月24日 星期三

2011年8月23日 星期二

2011年8月16日 星期二

2011年8月11日 星期四

2011年8月9日 星期二

2011年8月5日 星期五

2011年8月4日 星期四

2011年8月3日 星期三

2011年8月2日 星期二

2011年8月1日 星期一

2011年7月28日 星期四

2011年7月27日 星期三

2011年7月26日 星期二

2011年7月24日 星期日

2011年7月20日 星期三

2011年7月18日 星期一

2011年7月15日 星期五

2011年7月14日 星期四

2011年7月13日 星期三

2011年7月10日 星期日

2011年7月8日 星期五

2011年7月7日 星期四

2011年7月6日 星期三

2011年7月3日 星期日

2011年6月28日 星期二

2011年6月23日 星期四

2011年6月20日 星期一