2011年11月8日 星期二

用了JavaScript framework就不會有跨瀏覽器的問題?!

即使我們有了『甘道夫』講了很多JavaScript的東西,yahoo UI團隊和許多JavaScript高手也寫了很多JavaScript的書來讓我們正確的認識這個有趣的語言。但是很多人都認為只要用了JavaScript Framework如jQuery, YUI, MooTools...就可以解決跨瀏覽器和要花時間瞭解JavaScript避免寫出有問題或效能不佳的程式碼。真的是如此嗎?
且不論JavaScript只有global, function scope變數這個議題。在工作當中可以發現,很多人都認為JavaScript的變數是不需要宣告的。但其實不是如此,只是當function scope找不到變數的時候,JavaScript engine會找到global scope,在瀏覽器執行環境global context通常就是window物件。反之,如果在function裡的變數沒有宣告的話,也會跑到global context去。(題外話,object resovle也帶來先把重復使用的object先cache到function scope裡的寫法,比如說native array的一些function object在JavaScript framework可以看到都會做cache)回到主題,大家都知道不同瀏覽器Browser Object Model (BOM)有一些許的差別,所以很多人都鄉愿的認為讓寫framework的搞定就好。但是即使用framework,寫程式的人如果不瞭解JavaScript也一樣會發生,跑起來IE不行,其他都行的類似事情。
來看個活生生的例子,因為SEO很多設計人員都會加上meta element,很容易看到類似下面的東西
<meta name="title" content="this is title@meta element" />
然後,用jQuery(其實這個例子用任何一個JavaScript framework這樣寫都會出事)寫一個簡單的程式如下
$( function() {
   $( '#titleContent' ).text( '>>' + title );
} );
有沒有注意到,沒有宣告title,會發生啥事?JavaScript error?在chrome, firefox會看到JavaScript Error,但是IE呢?

看到了吧,因為我沒有IE,所以是用公司配的PC上的IE9測試。如果扯到variable hoisting就更複雜(已經寫過就不想再寫以前的筆記)。這個例子是trace實際程式碼簡化呈現問題點的寫法,其實真實的程式碼是沒宣告title,然後就針對title設定值和做其他處理,因此在chrome/firefox變成操作window裡的title attribute,不會看到JavaScript Error;但是在IE卻變成嘗試對HTMLMetaElement作改變,所以產生錯誤導致後續的JavaScript程式碼都無法正確執行。

2009年7月20日 星期一

複習Groovy (3) - Sql

針對自己的小作業複習Groovy,所以把Groovy Sql看看。因為小作業需要ResultSet Metadata,所以第一步搞定資料庫連線之後,第二步就開始搞看看ResultSet Metadata,最後就寫一個簡單的程式用comboBox帶出所有的Basic AssetType然後用table帶出該AssetType的ResultSet Metadata。一切隨性,下了班玩自己喜歡的東西好玩就好。


My HomePage Link

2009年7月14日 星期二

複習Groovy (2) - SwingBuilder - table -- cellRender & closureColumn

Preface

寫FTCS XMLPost tool和看書進度緩慢,這個算是寫FTCS XMLPost tool想用的東西。主要的想法是有一塊用JTable來呈現
該Basic Asset Type table的Metadata,然後我可以用勾選的方式,最後產生XMLPost執行的ini設定檔。^^純粹是初步想法
希望會堅持下去用SwingBuilder做完,而不會做到一半覺得改用Wicket做比較快(雖然對我而言是事實)。

Environment

  • Groovy 1.6.3

  • Sun JDK 1.6.0_10

最初版本和想法

最初是Groovy in Action裡面有關table的範例,作者使用了propertyColumn展示這個componet的做法和功能。以我這個Swing門
外漢想的到,距離心理想要做的東西,針對table還要玩出下列兩項

  1. closureColumn

  2. cellRenderer, cellEditor

測試用的殼

Listing. GroovyTest.java


package script;

import java.io.FileNotFoundException;
import java.io.InputStreamReader;

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;

public class GroovyTest {
public static void main(String[] args) throws ScriptException, FileNotFoundException {
if(args.length != 1) {
System.err.println("Missing Required Parameter");
System.exit(-1);
} // if

ScriptEngineManager manager = new ScriptEngineManager();

ScriptEngine engine = manager.getEngineByName("groovy");

engine.eval(new InputStreamReader(ClassLoader.getSystemResourceAsStream(args[0])));
} // main()
} // GroovyTest class

closureColumn property

就只是根據書上的範例多的data加一個欄位,用closureColumn來呈現,特別用selected順便在下一個可以用checkbox來
呈現和設定這欄的資料。

Listing. tabDemo0.groovy

package script

/**
* @author Terry
*
*/
import groovy.swing.SwingBuilder
import java.awt.BorderLayout
import javax.swing.JCheckBox
import javax.swing.DefaultCellEditor
import javax.swing.WindowConstants as WC

def data = [
[nick:'MrG', full:'Guillaume Laforge', selected: false],
[nick:'jez', full:'Jeremy Rayner', selected: false],
[nick:'fraz', full:'Franck Rasolo', selected: false],
[nick:'sormuras', full:'Christian Stein', selected: false],
[nick:'blackdrag', full:'Jochen Theodorou', selected: false]
]

swing = new SwingBuilder()

generateAction = swing.action( name: 'Execute', closure: {
for (Map row : data) {
println row
}
})

frame = swing.frame(title: 'SwingBuilder - table 踹踹係',
defaultCloseOperation: WC.EXIT_ON_CLOSE) {
panel(layout: new BorderLayout()) {
scrollPane(constraints: BorderLayout.CENTER) {
table() {
tableModel(list: data) {
propertyColumn(header: 'Nickname', propertyName: 'nick')
propertyColumn(header: 'Full Name', propertyName: 'full')
closureColumn(header: 'Import ?',
read: { row -> return row.selected },
write: { row, newValue ->
row.selected = newValue })
}
}
}
hbox(constraints: BorderLayout.SOUTH) {
button( 'Execute' ) {
action(generateAction)
}
}
}
}
frame.pack()
frame.show()

Figure. 程式執行結果



cellRenderer, cellEditor property

對Groovy還沒有到那種感覺的程度,所以就只能按照對Swing的了解用Java的方法搞。所以寫了
一個TableCellRenderer。所以先看到的是CheckCellRenderer.groovy之後在tabDemo.groovy裡面
cellRenderer property就設定這個自訂TableCellRenderer,至於CellEdtor則使用DetaulCellEditor
餵給他JCheckBox的物件就可以了。


Listing. CheckCellRenderer.groovy

package script

import java.awt.Component
import javax.swing.JTable
import javax.swing.JCheckBox
import javax.swing.border.EmptyBorder
import javax.swing.table.TableCellRenderer

class CheckCellRenderer extends JCheckBox implements TableCellRenderer {

CheckCellRenderer() {
super()
setOpaque(true)
setBorderPainted(true)
setBorder(new EmptyBorder(1, 1, 1, 1))
setHorizontalAlignment(JCheckBox.CENTER)
}

public Component getTableCellRendererComponent(JTable table,
Object value,
boolean isSelected,
boolean hasFocus,
int row,
int column) {
setSelected(value)
setForeground(table.getForeground())
setBackground(table.getBackground())
return this
}
}

Listing. tabDemo.groovy

package script

/**
* @author Terry
*
*/
import groovy.swing.SwingBuilder
import java.awt.BorderLayout
import javax.swing.JCheckBox
import javax.swing.DefaultCellEditor
import javax.swing.WindowConstants as WC

def data = [
[nick:'MrG', full:'Guillaume Laforge', selected: false],
[nick:'jez', full:'Jeremy Rayner', selected: true],
[nick:'fraz', full:'Franck Rasolo', selected: false],
[nick:'sormuras', full:'Christian Stein', selected: false],
[nick:'blackdrag', full:'Jochen Theodorou', selected: false]
]

swing = new SwingBuilder()

generateAction = swing.action( name: 'Execute', closure: {
for (Map row : data) {
println row
}
})

frame = swing.frame(title: 'SwingBuilder - table 踹踹係',
defaultCloseOperation: WC.EXIT_ON_CLOSE) {
panel(layout: new BorderLayout()) {
scrollPane(constraints: BorderLayout.CENTER) {
table(cellSelectionEnabled: false) {
tableModel(list: data) {
propertyColumn(header: 'Nickname', propertyName: 'nick')
propertyColumn(header: 'Full Name', propertyName: 'full')
closureColumn(header: 'Import ?',
cellRenderer: new CheckCellRenderer(),
cellEditor: new DefaultCellEditor(checkBox(horizontalAlignment: JCheckBox.CENTER)),
read: { row -> return row.selected },
write: { row, newValue ->
row.selected = newValue } )
}
}
}
hbox(constraints: BorderLayout.SOUTH) {
button( 'Execute' ) {
action(generateAction)
}
}
}
}
frame.pack()
frame.show()

Figure. 程式執行結果



Reference

  • Groovy Web Site

  • Groovy in Action, First Edition

  • Swing, Second Edition


Terence Chao, 2009/07/14

2009年7月7日 星期二

複習Groovy的第一章

最近被Manning的Groovy in Action 2Ed預購所吸引...60% off的吸引力太大,就敗了Groovy in Action第二版。因此也把書櫃裡的Groovy in Action第一版拿出來複習一下。自己學東西都是不注重用不用的到,只在乎自己爽不爽,因此學的很發散也忘的很快。哈,記憶體有限很快就purge掉。
因為google要關閉page creator本來打算把用部落格作筆記的做法關掉,一方面也很討厭自己在筆記本唉唉叫的做法,又不是有病幹麻管別人那麼多閒事。為了備份方便,後來改用html搞,沒啥美工天份反正自己看不礙眼就好。網站先放在so-net個人網頁。

2009年6月23日 星期二

Wicket – Write out Binary WebResource

製作ResourceLink的時候,原本都是用WebResourceCSV檔或文字資料。剛好遇到要透過POIHSSFSpreadSheet出來,參考ByteArrayResource,如果只是單純使用ByteArrayResource也可以,因為我打算維持自己之前webresources的做法把自己寫的IExportableDataProvider傳進來再製作出要export的內容。這邊只是POC確定可以跑的版本,不包含任何該公司的資訊。



PDF Document here

Wicket – Implement SyntaxHighlightingBlock

昨天白天不知為啥心情不佳,一整個懶。昨天出門前想到Syntax Highlighting的東西,下班之後就開始玩玩看。單純做好玩所以做來看看,沒想過實際使用的修正。之前雖然就覺得貿然使用Wicket對其他同事和Wicket而言,或許不是很好,畢竟對很多一堆小朋友而言,只有Struts才是王道。即使根本不了解Wicket更甚者連Struts都不是很清楚。哈 不過話說回來我對Wicket也不是了解很多。

SyntaxHightlightingBlock v0.2

因為推銷同事使用之後,在ajax rerender SyntaxHighlightingBlock會無法正確的顯示資料,一方面因為趕時間,所以弄了一個醜醜的解法。


PDF document here
Code @ google code url: http://code.google.com/p/syntaxhighlightingblock/

2009年6月22日 星期一

Wicket – ExternalInlineFrame and CollapsalbeLabel

從上禮拜開始心情又開始有些許波動,大概是自己腦袋知識太少,所以自悲而產生的自我防禦機制。其實自己所知太少,一直以來也沒興趣加入哪個framework好這種意識形態之爭的戰爭。自己對Wicket Source code也沒有了解的很透徹,但畢竟在有時間限制,又只有自己一個搞定所有東西的前提下,選擇framework的時候,還是要選擇自己比較熟悉的framework來做。畢竟對我這種入門等級的騙子而言,那麼多MVC frameworks是不同的人在HTTPOO之間用自己的方法和自己想解決問題的方向來搭起的橋樑。從來都不知道也認為自己沒那個能力知道那個比較好;哪個比較不好(或許改天有時間把兩個frameworksource code都了解透徹之後,可以比較一下)。對我而言,只有用過Struts 1和看過一點點JSF, Struts 2,在眾多橋樑之間,Wicket的想法是一個很有創意想法,他跳脫了Taglib...有時間的前提下,會列為可以多花點時間深入了解的好玩東西

wicket的世界,要製作Component是相當簡單的一件事,在這邊就因為某些狀況而做了兩個簡單的component。一個是連結到Wicket之外的iframecomponent,另一個是有可縮合功能的Label



PDF Document here