2013年7月31日

Ext JS 4.2.0 jsFiddle 測試專用程式碼範例

在測試 Ext JS 的 API 功能時,jsFiddle 是個很好的測試平台,可以不必將測試程式硬塞到專案裡面,省下漫長等待載入的時間,而且還可以順便將程式碼保存下來留作日後參考之用。

分享的這個 jsFiddle 網址是使用 jsFiddle + Ext JS 4.2.0 的測試範例,歡迎 Fork 回去修改使用!

Ext JS 4.2.0 測試範例
http://jsfiddle.net/lyhcode/phxqP/1/

Ext JS + Grails RESTful Web Services 實作問題之 PUT 表單資料

在 Grails 實作 RESTful Web Services 的服務時,CRUD 分別用以下 action 定義:

(CRUD Name) = (HTTP Method Name) = (Grails Action Name)
  • CREATE = POST = save
  • READ = GET = show
  • UPDATE = PUT = update
  • DELETE = DELETE = delete

一般來說,GET 或 POST 的網址參數(GET params)與表單參數(BODY params),都可以在 Grails 用 params 物件取得參數值,例如:

name = params.name
password = params.password

但是遇到 PUT 方法 + 表單資料送出時,可能導致無法直接使用 params 取得表單資料。例如:

PUT http://localhost:8080/test1/rest/testPut

在一般使用 GET 或 POST 方法存取遠端資源時,HTTP Request 的 Content-Type 是 application/x-www-form-urlencoded 型態,所以附加的表單資料是 Form Data 方式處理。


但是在使用 PUT 方法的情況下,就必須改變 HTTP Request 的內容型態(Content-Type)。

利用 PUT 送出資料一般有兩種作法:XML 或 JSON。所以對應的 Content-Type 也必須先正確設定,然後附帶正確格式的資料。

例如使用 JSON 格式時,HTTP Request 的 Header 內容就會變更成以下:


可以看到兩個主要的差異:(1) Content-Type 變成 application/json 以及 (2) Form Data 變成 Request Payload。

這種作法是在 PUT 方法下,將表單資料先轉成 JSON 或 XML 格式,然後再以附帶資料方式送出給伺服器。

因為一般瀏覽器要測試 PUT 方法並不容易,可利用 Groovy 的 HttpBuilder 快速撰寫一個小型的測試代碼,專用於 PUT method 的測試:

在伺服器端接收資料時,也必須針對內容加以解析(搭配 JSON 或 XML Parser)。

以 Grails 為例,可以使用 request.JSON 或 request.XML 來取得解析後的資料。先在 grails-app/config/UrlMappings.groovy 加入 parseRequest: true 的設定。

"/$controller/$action?/$id?"(parseRequest: true) { ... }

在瞭解 PUT 方法必須搭配 JSON 或 XML 傳遞資料後,就可以調整 Ext JS 的表單設計。

先以一段 Ext JS 的小程式,搭配 Ext.Ajax.request 方法,測試 Ext JS 對 PUT 方法的支援機制:

Ext.Ajax.request({
    method: 'PUT',
    url: 'http://localhost:8080/test1/rest/testPut',
    success: function() {
        alert("ok");
    },
    failure: function() {
        alert("no");
    },
    params: { a: 1, b: 2, c: 3 }
});

上面的程式碼中,使用 params 來傳送表單資料,這在 GET 與 POST 方法是管用的,但是遇到 PUT 就無法正確將資料傳遞給後端程式。

將 params 改用 jsonData 之後,就可以正確運作:

Ext.Ajax.request({
    method: 'PUT',
    url: 'http://localhost:8080/test1/rest/testPut',
    success: function() {
        alert("ok");
    },
    failure: function() {
        alert("shit");
    },
    jsonData: { a: 1, b: 2, c: 3 }
});

使用 jsonData 來傳遞表單資料,會使 Ext JS 正確送出 PUT 需要搭配的 Content-Type: application/json 的 HTTP Header,並使用 Request Payload 的方式附加資料。如此一來 Server 端程式就能收到 JSON 格式資料。

但是在 Ext JS 表單中,預設是以 params 來傳遞資料,即使將 method 設定成 PUT 也是一樣。

在 Ext.form.Panel 具有一個隱藏版的參數:

jsonSubmit: true

開啟這個設定,就能促使表單在 submit() 函數呼叫時,改以 jsonData 取代 params 正確送出表單資料。

以下是一個經過驗證可行的 Ext JS 範例代碼,可以測試其中 jsonSubmit: true 設定的作用。

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    jsonSubmit: true,
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'http://localhost:8080/test1/rest/testPut',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'a',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'b',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    method: 'PUT',
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});


延伸閱讀
  1. http://stackoverflow.com/questions/7195872/request-params-and-put-method
  2. https://github.com/krasserm/grails-jaxrs/wiki/Getting-Started
  3. http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Panel
  4. http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Basic-cfg-jsonSubmit
  5. http://grails.org/doc/latest/guide/webServices.html

Ext JS 教學內容由思創軟體提供,共同作者 @lyhcode 與 @smlsun 目前在校園及企業從事 JavaScript(含 Node.js, Ext JS)與 Java(含 Groovy, Grails, Gradle) 教育訓練及顧問工作。

2013年7月30日

MOD遙控器電視開關設定 MOD303 / MRC30

HD節目當道,所以不管家裡裝 MOD 或第四台,搭配機上盒已經成為趨勢;但這也意謂著...遙控器愈來愈多!

目前新款 MOD(機上盒型號為 MOD303、MOD304)搭配的遙控器,可以利用自動學習功能,記憶電視遙控器的訊號,如此一來只要 MOD 遙控器就能開關電視,不必每次收視 MOD 都要準備兩支遙控器!

MOD303 搭配的遙控器型號是 MRC30(右圖),簡單分享一下設定步驟!

步驟一、將電視遙控器與MOD遙控器的紅外線發射器相對擺放。(頭對頭)

步驟二、按住紅色按鈕(R)不放三秒以上,等電源綠色燈號亮起。(此時已進入學習模式)


步驟三、按一下 MOD 遙控器上方的電視開關(TV)按鈕,再按一下電視遙控器的電源按鈕(指示燈閃三次表示已學習)

步驟四、等30秒或按一下紅色按鈕,結束遙控學習模式(已完成)


完成之後,就可以拿 MOD 遙控器測試是否能正常開關電視機!

MOD遙控器可供學習設定的按鈕有:TV電源、音量 + / -、靜音、AV、頁 + / -

延伸閱讀:

  1. MOD機上盒/遙控器使用指南

2013年7月25日

Mac OS X / Windows 通用影片離線備份工具 Wondershare Free YouTube Downloader


觀看 YouTube 的影片不夠流暢,除了使用最近網路流傳的秘技,直接離線下載然後再播放也是不錯的辦法!

雖然某些 Firefox 和 Chrome 瀏覽器的外掛就能做到影片備份功能,不過最近發現一款在 Mac OS X 上相當管用,同時也能相容於 Windows 系統的影片備份工具,而且還是免費的喔!


Wondershare Free YouTube Downloader
http://www.wondershare.com/pro/free-youtube-downloader.html

這套 YouTube Downloader 的介面很簡單,在 Mac OS X 上的外觀很精簡清爽。兩個分類 Downloading 和 Downloaded 分別保存「正在下載」與「已下載」的影片內容。


唯一需要學會的操作,就是先把 YouTube 影片的網址(如下)複製,然後再按一下上方的「Paste URL」按鈕。

YouTube 影片網址範例:
http://www.youtube.com/watch?v=_Ue26GpV9Do

然後就會開始進行下載。

在預設的設定值下,預設會優先抓取最高 720p 畫質的影像;這邊可以在設定頁面的 General 找到「Desired video quality」,將設定值改為「1080p」;既然要下載,當然就是要下載解析度最高的版本呀!

如果在安裝 Downloader 的過程,有選擇一併安裝瀏覽器外掛,用瀏覽器打開 YouTube 影片播放畫面時,在播放器右上角就會有一個「Download」按鈕;這是一個讓操作更簡便的捷徑,點一下就會自動將網址貼到 Downloader 進行下載。



*貼心提醒:下載影片請自行注意影片的版權問題哦!

lyhcode by lyhcode
歡迎轉載,請務必註明出處!