jQWebExt 0.2.1 版發表.

0.2.1 版本發表:
這個版本加強了 jQWebExt 在 MVC 上的應用彈性, 增加了 jqwebext_config.js 的功能.
也就是支援動態載入設定檔(jqwebext_config.js), 並依設定檔及頁面 id , 再動態載入 3rd party javascript.
並為您註皿 global function 到 window scope , 並於 DOM Ready 時, 執行 ready 設定的 function .

所以, 在大部份的情況下, 你的網頁 HTML 只會有二行 src , 以及最最最少量的 javascript.

<script src="jquery.pack.js" type="text/javascript"></script>
<script src="jqwebext.js" type="text/javascript"></script>

你們家的網頁設計會大大感激您地~~~~。

##CONTINUE##

Configs:
若您的環境特別, 或您要統一管理 javascript 目錄, 或套用不同的設定檔, 您可以設定
jQWebExtConfig 這個變數在您引用

<script src="jqwebext.js" type="text/javascript"></script>

之前, 而 jQWebExtConfig 設定如下:

<script>
var jQWebExtConfig = {config: 'jqwebext_config.js', path: '', pageId: ''};
</script>

config: 您想要動態載入的設定檔名, default is jqwebext_config.js
path: 您的 javacript 的路徑, 可使用相對或 http:// 的絕對路徑.
pageId: jQWebExt 會自動抓出 pageId. 當然您也可以利這個變數設定它.

jqwebext_config.js:
jqwebext_config.js 的設定格式及範例如下:

// jQWebExt Config
jQWebExt.options.Config = {

/*
 * Default config will process at any page id.
 */
'default': {
  /*
   * Require third party's javascript, separate with comma
   */
  'requires': 'plugins/jquery.dimensions.pack.js',

  /*
   * Register global functions
   */
  'functions': {
      test: function() {
          alert('cool! test function in jqwebext_config.js');
      }
  },

  /*
   * Auto Run on DOM Ready.
   * Like jQuery(document).ready( function ...)
   */
  'ready': function () {
    alert('dom ready function in jqwebext_config.js DEFAULT Block');
  }

},

/*
 * pageId or Body id='helloworld'
 */
'helloworld': {
   'ready': function () {
      alert('dom ready function in jqwebext_config.js helloworld Block');
   }
},

/*
 * pageId or Body id='tooltip'
 */
'tooltip': {
  'requires': 'jqwebext.tooltip.js',
  'ready': function () {
      alert('dom ready function in jqwebext_config.js!! \n is Tooltip page?? cool!!!');
   }
}

};
// callback jQWebExt to process Config.
jQWebExt.Config();

Hello World Sample

Hello World sample code is here. [DEMO]

Tooltip Extension Sample

ZebraTableExtension sample code is here. [DEMO]

Featured Download:
http://jqwebext.googlecode.com/files/jqwebext-0.2.1.zip

Open Source:
http://code.google.com/p/jqwebext/

Discussion Group:
jQWebExt Discussion Group

Technorati Tags: javascript, jquery, jqwebext, mvc, framework

jQWebExt - jQuery Simple MVC and plugins Components framework

jQWebExt 是一個以 jQuery 為基礎的簡單 MVC pattern 及 plugins 元件架構的一個網頁開發框架。
它讓您能有效的分離 HTML 及 Javascript 程式，讓 HTML 設計者能接觸到最少的 Javascript 程式，並能有效的應用 Javascript 所開發出來的 plugins 元件於 HTML 之中。
也讓 jQuery plugins 能更容易的被使用。
##CONTINUE##

源起:
在 2007/01 發表了 BloggerExt - jQuery Way 系列後，在眾多的回應及信件中，阿土伯發現了一件非常有趣的現象。
即始不懂 HTML / CSS / Javascript 的好朋友們，也都很勇敢且很有興趣的在設定及嘗試修改著他們的 Blogger，而他們其實已經在和 Javascript 打交道了。
這讓阿土伯有了導入這個觀念到專案團隊上的想法，Server-Side 雖用 RoR ，能把程式和網頁邏輯分離，然而最後這個 View 也就是 (X)HTML/CSS/Javascript 怎麼讓它亦能有效的分離出來，畢竟不是團隊中的網頁設計都會 Javascript 程式寫作。
整個專業流程常常是: 程式人員寫 Model/Controller =＞ 設計人員依資料及動作設計網頁 =＞交回程式套變數或 Javascript .
如果能讓網頁設計人員只需要設定 options 即可把大部份的 Javascript 運作起來，就如同使用 BloggerExt 一樣，相信能降低網頁設計人員的門檻。
所以在專案上實驗了一個月，發現網頁設計人員的接受度很高，且已能自行完成很多，如常見的 ZebraTable / TabControll / TreeMenu 等，都能自己設定掛上去而不用再和技術人員協調。
所以阿土伯將程式碼整理整理，放出來和大家分享，程式不大，主要在於觀念的應用。


jQWebExt Function:

• register: 用來將 Javascript Function 或 Extension 註冊進 jQWebExt 中，它會在 DOM ready 時呼叫您註冊的 Function , 並把設定 Options 傳給您。
• require: 用來動態載入 third-party 的 javascript .js 檔案，由寫作 Extension 的您來呼叫，網頁設計人員不用去瞭解什麼 javascript 互相關聯要引用載入。
  

jQuery plugins to Components:
Javascript Programmer 可以先把 jQuery 的 plugins 寫一個簡單的 extension function ，在 function 處理 plugins 的應用及設定細節，並開放出 Options 供網頁設計人員應用，然後註冊進 jQWebExt 中。
這樣網頁設計人員並不需要瞭解 jQuery plugins 怎麼被 create 及 initial , 只要設定好 Options 就能動了，完全不需要寫任何 Javascript 程式碼。


Zebra Table Extension Sample

ZebraTableExtension sample code is here. [DEMO]

jQuery Tabs Plugin Sample

jQueryTabsExtension sample code is here. [DEMO]

Open Source:
和阿土伯的其它程式一樣，它是完全 open source 的，您可以下載回去修改或應用在任何專案上。
jQWebExt 目前依然是 Hosting 在 Google Code 之中，您能任意取得最新的 Source Code，所有的說明及範例已寫在 Google Code 的 Wiki 中，更歡迎您加入 member 一同開發。

http://jqwebext.googlecode.com/svn/


Discussion Group:
阿土伯亦開了一個討論群組，您有任何建議或想法，歡迎來一起討論。
jQWebExt Discussion Group



Technorati Tags: javascript, jquery, jqwebext, mvc, framework