After Code : 5月 2013

2013年5月28日星期二

[科技新知] How to add "code" segment in Blogger

As a programmer, it is very common to share coding example with others. But by default, there is no suitable layout for coding. Now, you can add one.

1. Go to control panel of Blogger like below. And select "Template"

2. Select "Edit Template"

3. Search for keyword "<\head>", and add the following above it. Finally, Save it.

    
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'>
      
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'>
    </script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'>
    </script> 
    <script language='javascript'>      
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
      SyntaxHighlighter.all();
    </script>

4. When you try to add the coding into the Blogger, you could switch to HTML first. And add the code like below.

<pre class="brush:html"> 

    // add your code here
    // ....

</pre>

Be careful, you could change brush:html to brush:xxx where xxx could be one of following terms in lower-case. {Cpp, CSharp, CSS, Java, JScript, PHP, Python, Ruby, Sql, VB, Xml, Perl}

[Android][Development] Customized adapter in ListView

Recently, I try to write a ListView whose elements is consisted of one ImageView aligned to left and 2 TextView located on the right vertically.

To do this, the first thing is declare the layout. Therefore, I add an xml file under layout named scenelist_item.xml

The content of scenelist_item.xml is like below:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="?android:attr/listPreferredItemHeight"
              android:padding="6dip">
    <ImageView
            android:id="@+id/leftimage"
            android:layout_width="48dip"
            android:layout_height="fill_parent"
            android:layout_marginRight="6dip"/>
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="fill_parent">
        <TextView
                android:id="@+id/toptext"
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="2"
                android:textAppearance="?android:attr/textAppearanceMedium"/>
        <TextView
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:id="@+id/bottomtext"
                android:singleLine="true"
                android:ellipsize="marquee" />
    </LinearLayout>
</LinearLayout>

The second thing I have to do is to have a customized Adapter for my ListView. Which is responsible for creating a customized view for each list item. Below it is:

    public class PlaceAdapter extends ArrayAdapter<HashMap<String, String>> {

        private List<HashMap<String, String>> items;

        public PlaceAdapter(Context context, int textViewResourceId, List<HashMap<String, String>> items) {
            super(context, textViewResourceId, items);
            this.items = items;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            if (v == null) {
                LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                v = vi.inflate(R.layout.scenelist_item, null);
            }

            HashMap<String, String> place = items.get(position);
            if (place != null) {
                ImageView leftImage = (ImageView) v.findViewById(R.id.leftimage);
                TextView topText = (TextView) v.findViewById(R.id.toptext);
                TextView bottomText = (TextView) v.findViewById(R.id.bottomtext);
                if (leftImage != null) {
                    leftImage.setImageBitmap(mPlacesIconList.get(position));
                }
                if (topText != null) {
                    topText.setText(place.get("place_name"));
                }
                if(bottomText != null){
                    bottomText.setText(place.get("vicinity"));
                }
            }
            return v;
        }
    }

As you could see, the focus is on the member function - getView(). This member function is responsible for creating the view for each list item.

After that, of course, I have to set this adapter to ListView.

    
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_scenelist);

        mSceneList = (ListView) findViewById(R.id.scenelist_list);
        mPlacesList = new ArrayList<HashMap<String,String>>();
        mPlacesIconList = new ArrayList<Bitmap>();
        mAdapter = new PlaceAdapter(this, R.layout.scenelist_item, mPlacesList);

        mSceneList.setAdapter(mAdapter);        

 };

Below is the result.

It finally finishes. Based on this example, you could have your own list view. Have a try.

In my App, the icon comes from internet. Thus, I have to download each icon and transform to Bitmap. In the next example, I will go through this part.

2013年5月20日星期一

[Android][開發] 解決"No system images installed for this target"

是否有遇過在透過AVD(Android Virtual Device) Manager建立新的AVD的時候看見CPU/ABI上顯示"No system images installed for this target"，如下圖顯示：

這主要是因為並沒有安裝建立的AVD所需要的system image，以上圖為例的話，就是尚未安裝Android 4.1.2 (API 16)的system image，下圖就可以看見Android 4.1.2 (API 16)中的ARM EABI v7a System Image並沒有安裝(Not installed)。

只需要將其勾選起來，按下右下方的Install package，就可以安裝好了。然後，再次建立AVD，就可以看到是可以CPU/ABI的部份就變成了ARM (armeabi-v7a)，如下圖。

這樣就可以建立好AVD，準備模擬測試囉。

[Android][開發] Android開發環境：Android SDK (including Emulator) + IDE

Android的開發環境大抵上可以分為兩大部分：

Android SDK (Software development kit)：
在SDK當中，提供了API、開發所需要的相關工具，當然也包含Emualtor(模擬器)
IDE (Integrated development kit)：
也就是開發環境中最重要的核心，提供了開發Android AP所需要的編譯、除錯環境

在早期來說，Android SDK中也就一起提供了所需要的IDE - Eclipse，透過ADT plugin，就可以在Eclipse中開發Android AP。不過在2013 Google I/O，Google推出了以IntelliJ為基礎的自家IDE─"Android Studio"，相關的資訊和影片可以參考這。

Android Studio資訊： http://developer.android.com/sdk/installing/studio.html

Android Studio影片： http://www.youtube.com/watch?v=e0fXuyL0xVU

說完了大概的概念分類，我們接下來進一步解釋一下在Android SDK中會看到的兩個重要的功能。

Android SDK manager：

Android virtual device manager：

這裡的virtual device就是一般俗稱的模擬器，而virtual device manager當然就是用來管理模擬器的介面。

要知道，由於Android所提供的開放性，使用眾家的手機製造商都採用其作為開發Smart phone的重要平台，為了做出差異化，這當中當然就提供了許多的硬體選擇。然而一般的App開發者是不太有機會去把大多數的手機都買齊的，這時候就得依靠模擬器提供基本的程式介面驗證環境，以及確認在原生的Android環境下程式都可以順利的被執行。

講完，SDK的腳色，接下來就大概介紹一下Android IDE。
拜Android手機在市場上的份額越來越大的趨勢，開始越來越多人重視Android App的這個市場，此時一個好用的Android的開發介面就變成了許多人的希望，因此，Android IDE從早期的Eclipse到後來的IntelliJ，到後來Google自行推出Android Studio，都是可以選擇的喔。當然，以我來說，還是最推薦Google自行推出的Android Studio囉。

2013年5月13日星期一

[購物][3C] 天星 x920d 使用心得

寫在前頭：這隻是大陸的山寨機，如果您對於這類侵犯智財權的行為感到痛惡，請不要往下看啦，這只是提供給想要相關資訊的人以及對於MTK 6589這顆chip效能有興趣的人一些資訊。

------------------------------我是分隔線--------------------------------

經過了使用將進一個月的時間，我想對於這隻使用MTK 6589 solution的手機，是可以做點實質上的建議，也提供一些潛在的、正在觀望的購買者作為參考。

以外觀來說，x920d雖然沒有做到百分百(1:1)的高仿，不過整體外型相差不遠了。不過，實際握起來，寬度上的差異還是讓這隻高仿機拿在手上並沒有那麼安心。即使以我男生來說，拿在手上相對還是有點握不太住，更別說是單手操作了。

尤其，原本HTC的設計就將返回鍵設計在左下角的部份，這使得右手拿手機時，拇指常常需要橫跨整個螢幕，通常手掌的其他地方都會更早碰到其他的地方而造成誤觸。所以，要以單手操作似乎有點緣木求魚。不過，這是否也是5吋手機的通病，因為我手上並沒有其他5吋的手機，也很難確定這點。

先來說說優點的部份好了。

首先，手機整體的操作體驗上算是非常流暢的。以其配置Core-A7 1.2G四核加上1G RAM，不管是遊戲、Facebook、電話、Browser...等，都不會讓人感受到任何的遲滯。這點算是非常值得讚許的一點。

其次，即使在這樣流暢的操作下，電源控制也作的很到位。除了第一天整個早上都在玩手機，中午電量就降到了3x%以外，每天正常的使用都至少可以維持30幾%的剩餘電量回到家。不過，我算是輕度使用者，畢竟工作場合都配有電腦，不會在用手機，這樣的例子或許不見得可以對比你的狀況，這點倒是要注意一下。

最後真的很讓我驚艷的應該算是其3.75G(HSPDA)的連網速度了。整體連網速度非常的快，可以說是以前我用Nexus S的數倍以上，這使得目前大多數需要網路連線的使用者體驗變的很好，也是目前我最欣賞的一點。

說完了一些優點，也來整理一下缺點的部份。

1. 首先是距離傳感器的不夠敏銳：
每次打電話，都會不小心讓畫面跑到設置當中；這使得在打一些還得輸入分機的電話時，都還得手動按下返回鍵，退回通話的畫面，非常的不方便。

2. WiFi和Bluetooth的不穩定，也是一大缺點：
入手至今，已經出現過幾次藍芽無法啟動的窘境，WiFi也曾經出現過。要知道，以Bluetooth的使用經驗來說，大部分只會使用在車機的連接，通常都是要操作車機的時候才會發現藍芽沒有連接上。有趣的是，這時候手機上的藍芽狀態都是開啟的。此時，進入Setup嘗試重新關掉/打開藍芽，都無法啟動。唯一的解法就只能重新開機。而在開車過程中遇到這樣的鳥事，是非常讓人困擾的。想像一下，有人打電話給你，此時才發現藍芽沒有開啟，政府又規定開車不能手持電話，你只能等待電話掛斷 (不能主動掛斷)，重新開機後再打給對方，這是多麼的不方便。

WiFi訊號的不穩定也是一樣，有時可以是滿格，有時候卻又什麼都收不到。這尤其發生在辦公室多個WiFi AP的狀態。所以，我在辦公室基本上都還是使用3G訊號，好險其傳輸速度還挺快的~

3. 相機的設定無法保存：
原生的相機設定雖然是把飽和度設為中，但是對我的品味來說就是過於飽合，甚至已經到有點假的地步了。所以，個人是比較偏好將飽和度設為低的。然而，這項改動並不會被儲存起來，等到下次使用相機，還是得自行手動設定。個人覺得這應該是基本中的基本，沒做好是有點無言的~

4. 錄影和拍照的焦段不同：
這點雖然跟iOS是一樣的，不過最大的不同點在於iOS你是得先切換到錄影模式，才可以按下快門鍵錄影。所以，在錄影之前，你可以清楚了解現在的焦段以及會被拍攝到的東西。在這裡的設計卻是將拍照快門和錄影快門擺在一起，使用者可以不用切換，按下按鍵就可以馬上直接啟動想要的功能，這在拍照上算是不錯的，不過如果在錄影下就不是這麼一回事了。因為實際使用上，你會面臨一按下錄影才發現怎麼我原本要拍的東西都被截掉了 (PS. 錄影的焦段是比較長的)，然後就得急忙往後退到可以拍攝進想要拍的事物的地方。這跟原生的Android設計也是不同的，這可能是MTK的公板的設計，真的該好好檢討一下了。

5. 電量數字不準 (2013.06.03 update)
因為我是個懶人，所以入手以後，一直都是只使用原本內建的電池。最近卻發現幾次電量從原本的80%以上突然降到15%以下，可是重開機以後又回到60%以上的狀況。最新的狀況才是發生在今天早上，才剛充滿電拔掉充電插座，開車上班的時候卻發現電量只剩下3%，即使重開機也無法恢復，只能到辦公室充電。如果在外面遇到這狀況應該會很慘吧~難怪一開始就送一顆電池備用阿。

總結：
儘管規格上這隻手機有著非常高的性價比，不過整體的體驗上還是有許多蠻大使用上的缺點。但是話說回來，以NT 6000元的價格提供這樣的效能以及功能個人認為還是算很值得的。如果你對於這些零碎的缺點還算是可以忍受，那麼這隻手機就更推薦你入手了。

2013年5月10日星期五

[購物][居家] IKEA的貼心服務 ─ 線上訂購

不知道大家是否有過這經驗：找個假日專程開車到IKEA，準備採買居家家具，沒想到看上的東西全都缺貨；詢問何時會補貨，也都沒有任何資訊。

面對這樣的窘境，我最近才知道IKEA有所謂的線上存貨查詢系統，可以先進入IKEA網站，接著利用關鍵字找到喜歡的商品，這邊用《EXPEDIT層架組》舉例，可以連到該商品頁面；在頁面的右下角就可以看到查詢貨況功能囉。

選擇想要查詢的分店，按下OK，就可以知道該店的存貨狀況。就算要過去買，也才不會白跑一趟阿。

其實，除了查詢存貨狀況外，最想要的是可以直接線上購物阿。不過，很可惜的，直到現在(2013年5月)，IKEA台灣仍然沒有提供該服務。不過，針對消費累積達NT 3000元以上的會員，還是有提供傳真訂購的服務喔。不過IKEA並不是這樣稱呼這個服務，而是稱為『專案銷售服務』。詳情可以參考IKEA的網頁，以敦北店為例 http://www.ikea.com/tw/zh/store/asia_world/ids。

只要你整體消費金額 (不含任何運送以及組裝費用)超過3000，就可以下載訂購單，填寫好相關資訊以及想要購買的商品，傳真到02-8712-6631，或E-mail寄至 ids@ikea.com.tw 。

===============2013/08/30 更新================
感謝Grace Pan的更新，新的規則已經改為滿5000元以上才可以線上訂購了，注意一下囉
===========================================

大概兩天內就會有專人主動跟你聯絡啦。

之後就是匯款，匯款後將匯款證明 (收據或是網路銀行匯款畫面擷取)，傳真到02-8712-6631，或E-mail寄至 ids@ikea.com.tw 就可以囉。

接下來，專人就會主動跟你連絡送貨事宜，就可以安心等待採購商品的到來啦。
希望這個貼心的服務，也讓許多喜愛IKEA的人可以知道。