在JSP裏混用JSF元件與HTML/JavaScript，輸出到Client時會被分離之迷解答
開發(fā)JSF頁面及元件這半年來，常遇到一個問題，
在JSF的頁面裏，混著寫html/javascript文字及元件tag時,
輸出結(jié)果在最後output到client端時有時會被分離成兩組輸出,
而不是以我們在JSP看到的順序輸出。
例如一：
<ui:Panel id="panel">
<div>
<script>alert("A")</script>
<ui:Button id="button"/>
</div>
</ui:Panel>
期望在client端應該是,
<div id="form1:panel>
<div>
<script>alert("A")</script>
<input type="button" id="form1:button"/>
</div>
</div>
但事實上會變成
<div>
<script>alert("A")</script>
</div>
<div id="form1:panel>
<input type="button" id="form1:button"/>
</div>
這個列子在初步一看一定覺得不合理,
而且在實際的開發(fā)上，一定會產(chǎn)生困優(yōu)。
但這件事經(jīng)過最終看完source後,又覺得無可厚非
會發(fā)生這件事情的主要元因是JSF的架構(gòu)性的問題...
當你使用的元件是一個Container時(例如Panel這類的元件)
他可能會期望自己來排列兒子的順序(例如grid layout)
而不是依tag寫的"單純"順序去輸出結(jié)果。
這時候，這顆元件會(應該)去改寫getRenderChildren()，並retrun true，表示他要自己來render兒子.
(以gridPanel來看，就必需在各個兒子間用tr/td來作排版)
即表示，這時候利用的JSP裏tag的順序來out是不合用的，
因為tag跟tag中間可能要有其parent的客制化輸出
從JSF規(guī)格的source(UIComponentTag)來看
當一個元件不用自己render兒子元件時，
他的encodeStart會在doStartTag被呼叫
他的encodeEnd會在doEndTag被呼叫
他其兒子就理所當然的依JSP裏tag執(zhí)行的順序被呼叫到,(而不呼叫該元件的encodeChildren)
而穿插在tag中的純文字輸出就理所當然依順序被輸出
例如JSP的JAVA Code：
panel_tag.doStartTag()
out.write("<div>")
out.wirte("<script>alert(\"A\")</script>");
button_tag.doStartTag();
button_tag.doEndTag();
out.write("</div>");
panel_tag.doEndTag();
可是當一顆元件需要自己render兒子元件時
元件會設(shè)定了一個suppressed falg,(還有其他狀況的設(shè)suppressed,列如這個元件是在facet裏)
則它的encodeStart,encodeChildren及encodeEnd就會只在doEndTag時被呼叫(UIComponentTag的實作)
從這個元件之後.
它的所有下層元件將被壓制，不再在doStartTag,及doEndTag裏來輸出，
而這顆元件有將其下層元件呼叫輸出的義務(直到遇到下層中另外一顆也需自己輸出兒子的元件)。
從JSP的JAVA CODE來看.
panel_tag.doStartTag() ==> no output
out.write("<div>")
out.wirte("<script>alert(\"A\")</script>");
button_tag.doStartTag(); ==> no output
button_tag.doEndTag(); ==> no output
out.write("</div>");
panel_tag.doEndTag(); ==> out panel & button
很明顯的，將導致輸出被分離的結(jié)果。
結(jié)論是，當一個頁面用了類似Panel這種要自己layout children的Componet後，
在裏面寫的HTML或javascript，必需不包含位置及序頁的特性
也就是說JavaScript寫成在.js裏，HTML....應該是沒救了...不要寫HTML~~~
Or,請愛用Tiles Panel元件~~~~~將script及html寫在tiles對應的layout.jsp裏
posted on 2007-07-12 16:53
冰封的愛 閱讀(866)
評論(0) 編輯 收藏 所屬分類:
J2EE