Showing posts with label XML. Show all posts
Showing posts with label XML. Show all posts

Sunday, November 16, 2008

textarea 标签关闭方式不正确造成的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>textarea 标签关闭方式差异</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table>
<tr>
<td>Description 1: 使用正常的textarea关闭标签(&lt;/textarea&gt;)</td>
<td>
<textarea class="textfield" style="width: 350px;" rows="6" name="description1"></textarea>
</td>
</tr>
<tr>
<td>Description 2: xml方式关闭textarea标签时,safari/firefox/opera都会出现渲染问题,textarea后面的全部内容都会被视作textarea的内容。IE未测试。</td>
<td>
<textarea class="textfield" style="width: 350px;" rows="6" name="description2"/>
</td>
</tr>
<tr>
<td>Description 3: </td>
<td>
<textarea class="textfield" style="width: 350px;" rows="6" name="description3"></textarea>
</td>
</tr>
</table>
</body>
</html>

Saturday, October 25, 2008

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);

Saturday, October 11, 2008

XML operation using javascript E4X from Rhino javascript shell

Firstly, download Rhino and install it. Here is a tutorial.
Then, run below command line:

$> java org.mozilla.javascript.tools.shell.Main
Rhino 1.7 release 1 2008 03 06
js> var user = <user id="1"><name type="firstname">Yu</name><name type="lastname">test</name><country>zh_CN</country></user>;
js> user
<user id="1">
<name type="firstname">Yu</name>
<name type="lastname">test</name>
<country>zh_CN</country>
</user>
js> typeof a
undefined
js> typeof user
xml
js> user.name
<name type="firstname">Yu</name>
<name type="lastname">test</name>
js> user.country
zh_CN
js> user.id

js> user.@id
1
js> user.@id = 100
100
js> user
<user id="100">
<name type="firstname">Yu</name>
<name type="lastname">test</name>
<country>zh_CN</country>
</user>
js> user.name[0]
Yu
js> user.name += <name type="nickname">_test</name>;
<name type="firstname">Yu</name>
<name type="lastname">test</name>
<name type="nickname">_test</name>
js> user
<user id="100">
<name type="firstname">Yu</name>
<name type="lastname">test</name>
<name type="nickname">_test</name>
<country>zh_CN</country>
</user>
js> user.name[1]
test
js> user.name[1].@type
lastname
js> for each(var n in user.name) print("The " + n.@type + " name is " + n);
The firstname name is Yu
The lastname name is test
The nickname name is _test
js> for each(var n in user..name) print("The " + n.@type + " name is " + n);
The firstname name is Yu
The lastname name is test
The nickname name is _test
js> quit();

The user..name selector just like the "//" operator in XPath.
$> cat echo.js
for (i in arguments) {
print(arguments[i])
}

$> java org.mozilla.javascript.tools.shell.Main echo.js test yu from google
test
yu
from
google

Reference:
http://developer.mozilla.org/en/Rhino_Shell

Test javascript e4x in firefox3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test javascript e4x</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>

也可以将script的type直接写成"text/javascript"<br/>
<script type="text/javascript;e4x=1">

var person = <description>
<name>_test</name>
<sex>male</sex>
<age>30</age>
</description>;

document.write("The person' name is '" + person.name + "'");

</script>

</body>
</html>

Friday, April 13, 2007

Is XML the Future of UI Development or is it JavaScript?

A common trend in the new crop of desktop UI frameworks is that they are XML based with some sort of support for JavaScript. We take a brief look at AJAX, WPF/XAML, Flex/MXML, and Firefox’s Gran Paradiso.

The first up is AJAX, the poster child of the Web 2.0 craze. Being essentially a new technique to leverage existing HTML and JavaScript technologies, there is little reason not to use HTML. While not currently suitable for desktop application development, it did set the stage for what was to come.

Microsoft is betting heavily on a new XML based language called Extensible Application Markup Language (XAML). For traditional Windows developers, this is leveraged through Windows Presentation Foundation (WPF). WPF looks a lot like ASP.NET in that one language, XAML, is used for presentation while another, C# or VB, is used for event handling in a code-behind file.

Aside from the technological differences, XAML radically changes the development cycle for user interface design. User interface specialists and graphic artists can use XAML editors such as Expression Blend or ZAM 3D to create the user interfaces, then turn the files over to developers using Visual Studio. No longer will developers work from non-interactive screenshots put together in Visio or Photoshop, at least in theory. Judging by the rather mixed success of the ASP.NET, the effectiveness of this is questionable, but at least the potential is there.

The XAML story doesn’t stop there. Microsoft is also promising cross platform support is promised with Windows Presentation Foundation/Everywhere (WPF/E). This product is going to start with JavaScript as its procedural, event-handling language, with a later version supporting the Common Language Runtime (CLR). This is seen as a direct competitor to other browser-hosted frameworks such as Flash/Flex.

One thing to note about the XAML technologies is that the designers don’t really exist yet in a finished form. Expression Blend is currently a release candidate, and Visual Studio won’t have anything more than a CTP until VS Orcas hits beta later this year.

Next up is MXML. This is the XML-based presentation language used by Adobe Flex. This, combined with the JavaScript derivative ActionScript, was originally released by Macromedia in 2004. Over the years tool support has improved, but it remained shackled to the browser and the Flash player. Adobe Labs seeks to change that with the Apollo project. The goal of the Apollo project is to create a cross-platform runtime that will free Flex from the browser and allow it to run as a stand-alone desktop application. Essentially stealing Java’s original playbook, they are bringing the fight right into Microsoft’s living room. And with their superior UI capabilities, they just might pull it off.

Finally there is the new offering from Firefox, Gran Paradiso. Unlike Microsoft, who created a new language to get onto the web, or Abode, which created a new runtime to get off of it, the Firefox team is sticking with what they have. Gran Paradiso uses the same underlying technology that AJAX uses, HTML and JavaScript, and it still lives in the browser. This difference is that it plans to offer DOM storage, offline execution, and a synchronization model that will allow web applications to run in a partially or fully disconnected mode.

This reliance on a specific browser is what may ultimately sink Gran Paradiso. Unlike the cross-platform runtimes used by WPF/E and Apollo, which hopefully the users won’t have to think about, Firefox is a highly visible frame that takes away screen space from the application itself. And if the user prefers Internet Explorer, Safari, or Opera, they may be agitated about having to use Firefox.

The common theme throughout all of the new frameworks is a combination of XML and some form of JavaScript. Is JavaScript the next big langauge, or is this just a short term anomaly?