您在這裡

橫向發展的Open Source學習路徑

hanamizuki's 的頭像
hanamizuki 在 2008-11-11 (二) 22:05 發表

心得文又來囉!
原文在這邊:http://hanamitsuki.com/cms/horizontal-path-to-oss/
-------------------

話說回來,我到底是在忙什麼?又是被什麼打斷呢?看了一堆簡體中文,感覺頭腦都頓頓的(無不敬之意)。還是來回想一下吧!

開頭是javascript

一開始我是在我的RSS閱讀器看到javascript的效果介紹文章,然後我就連到他的網站,翻看javascript相關文章。因為除了php的Open Source CMS之外,javascript framework似乎也正進行著一疊疊的亂戰呢!

而且,我最喜歡的「核心+外掛」這模式看起來也在javascript framework的世界上演,所以我一直很想努力鑽研這部分。所以就先去翻文章了。

註:核心+外掛的例子:Firefox、Wordpress、Nuendo、Drupal、Joomla都是這樣獲取我芳心,甚至Photoshop的Blush也是

所以開頭是javascript。

JQuery

然後我發現framework裡面,好像JQuery很有名,但是Joomla是用一個叫做mootools的,而Joomla又有許多漂亮效果,所以我就一直找呀找,發現JQuery的外掛不能用在mootools底下(廢話),才發現這兩個東西原來不能並存!真有趣(哪裡有趣)!

所以目前我的看法是mootools的漸變動態效果比較漂亮,JQuery可能比較輕量吧!總之JQuery應該是比較有名。

然後Joomla內建的是mootools,Drupal內建的是JQuery,真的各有各的風格。

NiceJForms

然後我發現一個需要JQuery的表單美化工具,我對JQuery還非常不懂,所以不知這算不算是JQuery的外掛。總之,這個表單美化工具叫做NiceJForms,他的效果可以到達這樣的地步。

會不會太美了一點。(會有這種讚嘆,還真宅!)

所以從javascript的探索,我找到了NiceJForms。

Drupal Form API

然後我想起來前兩個星期開始學Drupal的Form API,我怎麼用CSS美化,表單都還是普普通通。雖然簡單方便就好,但我突然一股腦很想把javascript應用的技能學起來,所以不管目前Drupal的白老鼠網站的bug多到爆炸,我還是逕自測試起NiceJForm套到Drupal表單的方式。

所以從NiceJForms,我又跑到了Drupal Form API身上。

應該很簡單,按表操課就對了,NiceJForms的說明很簡單易懂,只要插入這些那些這些就好。所以,我打開特別用Drupal為某表單定製的template之後,打入

drupal_add_js(path_to_subtheme() .'/js/nicejforms.js');
drupal_add_css(path_to_subtheme() .'/css/niceforms-green.css');

這是Drupal內建的API,非常非常方便好用。想在這邊插入css,想在那邊插入javascript,都只需要一行字。

不過接下來,第三步驟是要在Form標籤加上class。聽起來很簡單,但是,Drupal的模板可怕的就是都要用Drupal的寫法,不用他的寫法,就等著死吧!所以直接硬是加個form標籤再加上class,是下下之策,既然都到別人家了,就乖乖用他的方法吧!

然後我寫了這兩種方式
$form['#attributes']['class'] = 'niceform';
$form['#attributes'] = array('class' => 'niceform');

都完全沒屁用,連print_r輸出的內容,都看不到#attributes有多個class,然後我憤怒之下,跑到template.php,找到定義這個表單模板的function

<?php
function phptemplate_buytogether_node_form($form) {
  global $user;
  $vars = array('user' => $user, 'form' => $form);  
  return _phptemplate_callback('buytogether_form', $vars);
}
?>

我先試著在return前面加上$form['#attributes']['class'] = 'niceform';,結果行不通,然後我又試著在$vars前面加看看,結果,print_r的#attributes就出現class這個東西了。

問題是,render之後的form仍舊沒有class,這到底是怎麼回事?

所以我就跑來部落格呼喊了。最後我鑽牛角尖的地方變成是Drupal的form到底怎麼插入class,回想到我的初衷,只不過是想用用看NiceJForms嘛!

然後有個心得,就是本文標題,我發現我的學習路徑,都是橫向的,我沒辦法畫出來,但我真的覺得我像毛毛蟲一樣,沒有先把一樣東西學會,就跑去學下一樣東西,一開始我都覺得這樣不太好,但我後來想想,既然只有這種方式能夠讓我有一頭熱的熱情繼續鑽研下去,那就這樣吧!

最後,我想問的是,Open Source為何大家都簡稱OSS?為何有兩個S呢?

剛剛回了另外一篇
到這邊才看到是這種需求
建議是做一個小模組 (不知道你對模組開發的熟悉度如何...)
裡面寫一個 form_alter 就可以改到所有表單

1.建立一個 nicejforms 的資料夾

2.把 nicejforms.js 和 niceforms-green.css 放到 nicejforms 資料夾內

3.在 nicejforms 資料夾內建立 nicejforms.info 檔案,輸入下面的內容

; $Id$
name = "NiceJForms"
description = "表單美化工具 NiceJForms"
version = "5.x-0.1"

4.在 nicejforms 資料夾內建立 nicejforms.module檔案,輸入下面的程式碼

<?php
function nicejforms_form_alter($form_id, &$form){
drupal_add_js(drupal_get_path('module', 'nicejforms') .'/nicejforms.js');
drupal_add_css(rupal_get_path('module', 'nicejforms') .'/niceforms-green.css');
$form['#attributes']['class'] .= ' niceform';
//這邊是用字串相加的方式 因為 attributes 底下的屬性並不會自動累加 也不會處理陣列資料
//當遇到其他的表單也設定 $form['#attributes']['class'] = 'xxx'; 的時候會出現設定被覆蓋 結果只剩下一個 class的情形
}
?>

然後丟到 sites/all/modules 底下
去模組設定裡啟用該模組就行了

OSS
Open Source System
Open Source Software

共存方法:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
下回攪不懂, 可以向JS方面出發, 我相信打開niceform將 .niceform 改為 #id (#node-form) 就可以, 應該很簡單. (我沒測試)
我猜想它預設.class是因為你可能有很多FORM在同一頁, 而.class可以重複使用, 但#id只能用一次

JQuery 比較易學會
MooTools, 很OO, 最新看了一文章, 聽說文檔也不齊全

對待學習, 就像談情說愛一樣就對了,
遇上問題, 就拿出來談談
有好結果, 就跟大家一起分享