在測試 Ext JS 的 API 功能時,jsFiddle 是個很好的測試平台,可以不必將測試程式硬塞到專案裡面,省下漫長等待載入的時間,而且還可以順便將程式碼保存下來留作日後參考之用。
分享的這個 jsFiddle 網址是使用 jsFiddle + Ext JS 4.2.0 的測試範例,歡迎 Fork 回去修改使用!
Ext JS 4.2.0 測試範例
http://jsfiddle.net/lyhcode/phxqP/1/
2013年7月31日
Ext JS + Grails RESTful Web Services 實作問題之 PUT 表單資料
在 Grails 實作 RESTful Web Services 的服務時,CRUD 分別用以下 action 定義:
(CRUD Name) = (HTTP Method Name) = (Grails Action Name)
一般來說,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()
});
延伸閱讀
(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()
});
延伸閱讀
- http://stackoverflow.com/questions/7195872/request-params-and-put-method
- https://github.com/krasserm/grails-jaxrs/wiki/Getting-Started
- http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Panel
- http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Basic-cfg-jsonSubmit
- 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、頁 + / -
延伸閱讀:
目前新款 MOD(機上盒型號為 MOD303、MOD304)搭配的遙控器,可以利用自動學習功能,記憶電視遙控器的訊號,如此一來只要 MOD 遙控器就能開關電視,不必每次收視 MOD 都要準備兩支遙控器!
MOD303 搭配的遙控器型號是 MRC30(右圖),簡單分享一下設定步驟!
步驟一、將電視遙控器與MOD遙控器的紅外線發射器相對擺放。(頭對頭)
步驟二、按住紅色按鈕(R)不放三秒以上,等電源綠色燈號亮起。(此時已進入學習模式)
步驟三、按一下 MOD 遙控器上方的電視開關(TV)按鈕,再按一下電視遙控器的電源按鈕(指示燈閃三次表示已學習)
步驟四、等30秒或按一下紅色按鈕,結束遙控學習模式(已完成)
完成之後,就可以拿 MOD 遙控器測試是否能正常開關電視機!
MOD遙控器可供學習設定的按鈕有:TV電源、音量 + / -、靜音、AV、頁 + / -
延伸閱讀:
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」;既然要下載,當然就是要下載解析度最高的版本呀!
*貼心提醒:下載影片請自行注意影片的版權問題哦!
訂閱:
文章 (Atom)