Eddy@Joomla!

Javascript

02Dec

Sencha Touch / Eddy Chang / 週五, 02 十二月 2011 05:38

Ext.Video的用法和Ext.Audio是類似的，範例中的用法如下：

{
 xtype: 'video',
 url: '../video/space.mp4',
 loop: true,
 posterUrl: '../video/Screenshot.png'
 }

posterUrl是這個影片的預覽圖，當然這個用法是標準的HTML5的video標籤用法，有些討論區的回應，Android2.2以下的機種似乎看不到這個。

另外如果像現在的Google Chrome因為不支援mp4影片（h.264）格式的時候，就可以利用Ext.env.Browser中對瀏覽器的偵測，把上面的那行url寫成：

url: Ext.browser.is.Chrome?'../video/space.webm':'../video/space.mp4',

當然影片space.webm是事先要先從space.mp4轉過來的（註：用的是免費的Miro Video Converter）

Tags: html5 | sencha touch

01Dec

Sencha Touch範例2：Audio

Sencha Touch / Eddy Chang / 週四, 01 十二月 2011 00:29

上一篇大概說明了一下HTML5中關於audio的標籤用法及相關情況，在Sencha Touch中的kitchensink範例中的Audio範例中，可以看到它是怎麼使用Audio。它使用的是Ext.Audio這個專門處理Audio的元件。在官方的API文件上有一個注意事項：

On Android devices, the audio tags controls do not show. You must use the play, pause and toggle methods to control the audio.
在Android設備上，audio標籤controls是不會顯示的。你需要使用play, pause和toggle方法來控制audio.

Android目前2.2及2.3的機種中，得到的結果都是類似的，至少在目前雖然有"支援"但沒"控制列"，所以你還需要自己用控制方法+ui來處理這個聲音檔。（註：相關資訊：http://code.google.com/p/android/issues/detail?id=10546）

Tags: android | html5 | sencha touch

閱讀全文...

26Nov

Sencha Touch範例1：Ajax

Sencha Touch / Eddy Chang / 週六, 26 十一月 2011 00:00

Sencha Touch是給熟悉Extjs的程式開發員使用的，這樣說一點也不為過。Sencha Touch的基礎是Extjs，這個學習門檻相當高的Javascript框架，沒有Extjs的基礎，根本沒辦法寫出什麼，況且，新的MVC架構更是一個龐大而複雜的架構。

ajax是第一個範例，這個範例中可以學到什麼？

最前面想必是所有Touch的應用程式需要的宣告，平板電腦的啟動畫面（splash screen）、手機的啟動畫面、按鈕用的圖示，圖示是不是要有玻璃效果…就先記得有這個東西就可以：

Ext.setup({
 tabletStartupScreen: 'tablet_startup.png',
 phoneStartupScreen: 'phone_startup.png',
 icon: 'icon.png',
 glossOnIcon: false,

閱讀全文... 新增回應

24Nov

jQuery Mobile 1.0正式發行，行動網站市場又是一池春水

(1 位用戶參與評分, 當前平均得到 5.00 顆星星)

JQuery / Eddy Chang / 週四, 24 十一月 2011 23:19

jQuery Mobile的發展時間並非很早（註：差不多只有一年左右），但衝著jQuery在全世界的高使用率和受歡迎的程度，這個由jQuery官方發展的新計劃，果然吸引了很多網頁設計師和程式開發員的注目。它在2011年11月16日正式發佈了1.0版本，並搭配可以線上自訂佈景的ThemeRoller，果然是有想成為Web App界的領導地位的意味。在這個發佈的消息之前，則是它得到由PACKT出版社票選的「Open Source Mobile Toolkits and Libraries（開源行動工具與函式庫）」首獎的新聞。

Tags: appcelerator | jqtouch | phonegap | sencha touch

閱讀全文... 新增回應

11Jan

Javascript Module Pattern

(1 位用戶參與評分, 當前平均得到 5.00 顆星星)

General / Eddy Chang / 週二, 11 一月 2011 19:51

Module Pattern是由Javascript資深大師Douglas Crockford所提出，最早在2007年時YUI的部落格「A JavaScript Module Pattern」上，有一位工程師Eric Miraglia作了詳盡的說明和範例。之後Douglas Crockford在他的書「JavaScript: The Good Parts」中，也有提到這個部份，這個章節標題為「Module」，摘錄其中一段對於Module的定義說明：

We can use functions and closure to make modules. A module is a function or object that presents an interface but that hides its state and implementation. By using functions to produce modules, we can almost completely eliminate our use of global variables, thereby mitigating one of JavaScript's worst features.

Eric Miraglia在部落格上的第一句話也說：

Global variables are evil.

綜合上面所說明的，這個Module Pattern是由函數和閉包所組成，可以隱藏其中的變數和實作方法（一種封裝），當然，這也是一種避免（或減少）Javascript全局變量的設計模式。本篇收集整理了一些有關模組設計模式的資料和範例：

閱讀全文... 新增回應

更多文章...

第 1 頁, 共 3 頁

最先前一個123下一個最後