Usage of MarkupWriter and Element in Tapestry5

可以在 @BeginRender 或者 @AfterRender 等 Annotation 声明过的方法内注入 MarkupWriter，用其以 XML 形式组织成一个 DOM 对象来渲染 Tapestry 组件，或者用其调整页面模板中的某个Element，修改其内容或者属性。可以通过 MarkupWriter 接口或者是 Element 类提供的方法操作这个 DOM 对象。
做一个Tapestry input组件的简单例子，无需模板文件：

public void afterRender(MarkupWriter writer) {
Element input = writer.element("input", "id", "input1", "name", "inputName", "value", "inputValue");
input.attribute("type", "text");
writer.end();
}

其中要注意如果用writer.element()打开一个元素标签时，要用writer.end()方法关闭此元素标签。
也可以在 Tapestry Page Class 中可以动态修改其模板文件，如下例子修改页面模板中一个div的文字内容和div属性。
page：

import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.dom.Element;

public class Test {

public void afterRender(MarkupWriter writer) {
Element elem = writer.getDocument().getElementById("elemId");
elem.text(" This text added by Element.text method.");
elem.attribute("style", "border: #ddd 1px solid");
}
}

tml：

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<div id="elemId">old inner text.</div>
</html>

在Tapestry5中，假如一个render方法名即符合Tapestry5的命名约定，又对方法做了Annotation声明，当二者不一致时，则此方法在二个render阶段都会被调用。
例如一个方法名叫afterRender，同时在方法中加了@BeginRender的修饰，则此方法在beginRender和afterRender这二个阶段都会被调用。
另外@Inject另外二个服务到页面中，也可以生成MarkupWriter对象，再用此对象操作模板。
@Inject
private ResponseRenderer responseRenderer;

@Inject
private MarkupWriterFactory factory;

如下方式在程序中也可得到MarkupWriter对象。
ContentType contentType = responseRenderer.findContentType(this);
MarkupWriter writer = factory.newMarkupWriter(contentType);

IMG is an inline element

<head>
<style type="text/css">
#div1, #div2 {
border: #333 1px solid;
background-color: #333;
height: 300px;
}
#img1 {
display: block;
}
#img2 {
vertical-align: sub; /* bottom, middle */
}
</style>
</head>
<body>
<div id="div1"><img id="img1" src="/images/puzzle1.jpg"/></div>
如果img对象不设置一下display或者vertical-align等属性，会在div底部多出一点空白，
这个就是因为img是一个inline element。
<div id="div2"><img id="img2" src="/images/puzzle2.jpg"/></div>
</body>

'document.getElementById(...)' 为空或不是对象

<div id="form_div"></div>
<script type="text/javascript">
var urls = 'http://www.google.com/search?q=test';
var fragment = document.createDocumentFragment();
var form = document.createElement('form');
var input = document.createElement('input');
var submit = document.createElement('input');
form.action = urls;
form.setAttribute('method', 'post'); // 这里不能设置为get方法，因为GET方法会将action中原有的参数过滤后加个表单里的参数，如text1=value。
input.setAttribute('value', "value");
input.setAttribute('type', "text");
input.setAttribute('name', "text1");
input.setAttribute('size', "50");
submit.setAttribute('type', "submit");
form.appendChild(input); // node.appendChild(newNode)方法执行后返回的值是newNode。
form.appendChild(document.createElement('br'));
form.appendChild(submit);
fragment.appendChild(form);
try
{
 document.getElementById('form_div').appendChild(fragment);
}
catch (e)
{
 document.write(e.message);
 //document.getElementById("form_div") => null
 //FF: document.getElementById("form_div") has no properties
 //IE: 'document.getElementById(...)' 为空或不是对象 
 //document.write(e.description);
 //IE: 'document.getElementById(...)' 为空或不是对象 
}
</script>

必须将给以上代码写入body标签中才能正确运行。
不然这段代码在浏览器解析时生成的DOM中，这一段javascript被置于head中，而form_div这个Element则会出现在浏览器生成的DOM的body中，而页面js被执行时，因为这个Element在执行语句之后，所以就会找不到此Element，从而报对象为空或不是对象这个错误。

prototype javascript library Element extend example

<div id="d1">replace</div>
<div id="d11" class="c1 c2 c3">x</div>
<div id="d10">xx</div>
<div id="d20">y</div>
<div id="d3">test</div>
<form action="index" method="post" id="f1" accept-charset="utf-8" style="background: #ddd; border: #ccc double 1px;">
<input type="text" name="input1" value="origin is enabled" id="input1">element.disable()<br/>
<input type="text" name="input2" value="origin is disabled" id="input2" disabled="true">element.enable()<br/>
<input type="text" name="input3" value="test activate()" id="input3">element.activate()<br/>
<input type="text" name="input4" value="test clear" id="input4">element.clear()<br/>
<input type="text" name="input5" value="test present(id input5)" id="input5">element.present()<br/>
<input type="text" name="input6" value="test serialize()" id="input6">element.serialize()<br/>
<input type="text" name="input7" value="test focus()" id="input7">element.focus()<br/>
<input type="text" name="input8" value="test select()" id="input8">element.select()<br/>
<input type="submit" value="Continue →"><br/>
</form>
<div id="d4">test Element scrollTo()</div>
<div id="d5">test element scrollTo()</div>
<div id="image">
 <%= image_tag 'rails' %>
</div>
<script type="text/javascript" charset="utf-8">
 function doc(argument) {
  document.write("<p>\n");
  document.write(argument);
  document.write("</p>\n");
 }
 $('input1').disable();
 $('input2').enable();
 //$('input3').activate();
 $('input4').clear();
 doc('$("input5").present() = '  + $('input5').present());
 doc('$("input6").serialize() is: ' + $('input6').serialize());
 //$('input7').focus();
 $('input8').select();
 
 doc('form action is: ' + $('f1').readAttribute('action'));
 doc('style of form: ' + $('f1').readAttribute('style'));
 doc('getStyle background of form: ' + $('f1').getStyle('background'));
 
 var cn = new Element.ClassNames('d11');
 cn.add('c4');
 cn.remove('c2');
 
 Element.update('d10', 'test<strong> Element.update(element, "HTML") </strong>');
 $('d20').update('test<strong> element.update("HTML") </strong>');
 
 Element.replace('d1', '<div id="d2"><span>replaced div</span></div>');
 doc(Element.inspect('d2'));
 doc(Element.ancestors('d2').inspect().escapeHTML());
 doc(Element.descendants('d2').inspect().escapeHTML());
 doc(Element.previousSiblings('d3').inspect().escapeHTML());
 doc(Element.nextSiblings('d3').inspect().escapeHTML());

 Element.setOpacity('image', 0.6);
 doc($('image').getOpacity());

 $H(Element.Methods).each (function (m) {
  doc(m);
 });
 
 doc($H(Element.getDimensions('d4')).inspect().escapeHTML());
 // Element.scrollTo('d4'); 
 $('f1').scrollTo();
 doc("$('d5').empty() is: " + $('d5').empty());

 var timer1 = setTimeout(function () {
  $('d5').replace('<div id="d5">replace timer1</div>');
 }, 5000);
 var timer2 = setTimeout(function () {
  $('d5').replace('<div id="d5">timeout d5</div>');
 }, 15000);
 
 $('f1').request({onComplete: function (xhr) {
  alert(xhr.responseText);
 }});
</script>

prototype javascript library Element event observe example

<a href="http://www.baidu.com" id="a1"> baidu </a>
<script type="text/javascript" charset="utf-8">
/*Event.observe('a1', 'click', function (o) {
 alert(o.eventPhase + o.type);
 //Event.stop(o);
}, false);

Event.observe('a1', 'click', function (o) {
 alert(o.eventPhase);
 Event.stop(o);
}, true);*/

/*Object.extend(Element.prototype, {
 click: function (callback) {
  this.onclick = callback;
 },
 mouseout: function (callback) {
  this.onmouseout = function (evt) {
   alert(evt.eventPhase);
   callback.apply(this, $A(arguments));
  }
 }
});*/

var evts = ("blur,focus,load,resize,scroll,unload,click,dblclick," +
"mousedown,mouseup,mousemove,mouseover,mouseout,change,select," + 
"submit,keydown,keypress,keyup,error").split(",");
evts.each(function (e) {
 Element.prototype[e] = function (handler) {
  this['on' + e] = handler;
 }
});
var a1 = $('a1');
a1.click(function (e) {
 alert(e.type);
 Event.stop(e);
});
a1.click(function (e) {
 alert(e.eventPhase);
 Event.stop(e);
}); // will override before a1.click handler
a1.mouseout(function (e) {
 alert(e.type);
});
</script>

event observe o.eventPhase #=> 2
Event.stop will prevent event performed, browser will not go to baidu.com