2006年8月9日
1.index.html
<iframe id="mainIframe" scrolling="no" frameborder="0" width="100%" src="a.html"></iframe>
<a href="#" onclick="page('a.html')">a頁面</a><a href="#" onclick="page('b.html')">b頁面</a>
2 a.html //內(nèi)嵌頁面
<script language="javascript">
changeHight();
</script>
3. b.html //內(nèi)嵌頁面
<script language="javascript">
changeHight();
</script>
4. page.js
function changeHight(){
var iFrm = parent.document.getElementById("mainIframe");
var subWeb = iFrm.contentDocument;
if(subWeb){
if (subWeb.body.scrollHeight>480)
iFrm.height = subWeb.body.scrollHeight+20;
else
iFrm.height=500;
}
if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight!="0"){
parent.document.getElementById("mainIframe").style.height=window.document.body.scrollHeight;
}
if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight=="0"){
parent.document.getElementById("mainIframe").style.height=500;
}
}
function page(page){
document.getElementById("mainIframe").src=page;
}
造成IE,FireFox,Opera中Iframe顯示差異原因在于
1.iframe在FireFox中取法為parent.document.getElementById("mainIframe").contentDocument,而在ie,opera中為parent.document.getElementById("mainIframe").document
2.當(dāng)頁面無滾動時，window.document.body.scrollHeight在IE中能取到，fireFox和Opera中取不到。
摘要: 1.myapp/index.html
<html>
<head>
文件操作
<iframe id="iframefile" scrolling="no" frameborder="0" width="100%" src="/myapp/fileUpload.jsp"></iframe>
&l...
閱讀全文
一些頻繁使用的javascript頁面控制，做個總結(jié)。
下面是部分代碼。
<html>
<head>
<script language="javascript">
function a(){
window.document.getElementsByName("dx")[0].checked=true;
}
function b(){
window.document.getElementsByName("dx")[0].checked=false;
}
function c(){
window.document.getElementsByName("fx")[0].checked=true;
}
function d(){
window.document.getElementsByName("fx")[0].checked=false;
}
function e(){
for(i=0;i<window.document.getElementsByName("fx").length;i++){
if(!window.document.getElementsByName("fx")[i].checked){
window.document.getElementsByName("fx")[i].checked=true;
}
}
}
function f(){
for(i=0;i<window.document.getElementsByName("fx").length;i++){
if(window.document.getElementsByName("fx")[i].checked){
window.document.getElementsByName("fx")[i].checked=false;
}
}
}
function g(){
window.document.getElementById("lbka")[1].selected=true;
}
function h(){
alert("選擇號為:"+window.document.getElementById("lbka").selectedIndex + " 值為:" +window.document.getElementById("lbka")[window.document.getElementById("lbka").selectedIndex].value+" 文本值為:" + window.document.getElementById("lbka")[window.document.getElementById("lbka").selectedIndex].text);
}
function m(){
sel = false;
var val="";
for(i=0;i<window.document.getElementsByName("dx").length;i++){
if(window.document.getElementsByName("dx")[i].checked){
val = window.document.getElementsByName("dx")[i].value;
sel=true;
break;
}
}
if(sel){
alert("單選值為:"+val);
}else{
alert("請選擇文件");
return false;
}
}
function j(){
var sel = false;
var val="";
for(i=0;i<window.document.getElementsByName("fx").length;i++){
if(window.document.getElementsByName("fx")[i].checked){
if(val==""){
val=window.document.getElementsByName("fx")[i].value;
}else{
val = val + "," +window.document.getElementsByName("fx")[i].value;
}
}
}
if(val==""){
alert("請選擇文件");
return false;
}else{
alert("復(fù)選值為:"+val);
}
}
</script>
</head>
<body>
<table id="table1" width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>文件</td>
<td>列表框</td>
<td>單選</td>
<td>復(fù)選</td>
</tr>
<tr>
<td>文件A</td>
<td><select name="lbka"><option value="lbka1">文件A1</option><option value="lbka2">文件A2</option></select></td>
<td><input type="radio" name="dx" value="dxa"></td>
<td><input type="checkbox" name="fx" value="fxa"></td>
</tr>
<tr>
<td>文件B</td>
<td><select name="lbkb"><option value="lbkb1">文件B1</option><option value="lbkb2">文件B2</option></select></td>
<td><input type="radio" name="dx" value="dxb"></td>
<td><input type="checkbox" name="fx" value="fxb"></td>
</tr>
<tr>
<td colspan="4">
<a href="#" onclick="a();">單選A選中</a>
<a href="#" onclick="b();">單選A不選中</a>
<a href="#" onclick="c();">復(fù)選A選中</a>
<a href="#" onclick="d();">復(fù)選A不選中</a>
<a href="#" onclick="e();">復(fù)選全選</a>
<a href="#" onclick="f();">復(fù)選全不選</a>
<a href="#" onclick="g();">選中列表框文件A2</a>
<a href="#" onclick="h();">取得選中列表框A的值,文本</a>
<a href="#" onclick="m();">判斷單選選擇</a>
<a href="#" onclick="j();">判斷復(fù)選選擇</a>
</td>
</tr>
</table>
</body>
</html>
主要通過javascript實現(xiàn)，理解IE的DOM結(jié)構(gòu)，并調(diào)用元素的固定方法，可以實現(xiàn)表單元素的動態(tài)增刪。
下面是部分代碼。
<html>
<head>
<script language="javascript">
function add(){
//取得表格
var table = document.getElementById("table1");
//取得行數(shù);
var num = table.rows.length;
//增加一行
var newrow1 = table.insertRow(num-1);
var cell1 = newrow1.insertCell();
var cell2 = newrow1.insertCell();
var cell3 = newrow1.insertCell();
var cell4 = newrow1.insertCell();
//增加行元素
var inputcell2 = document.createElement("<input size='32' name=''>");
cell2.appendChild(inputcell2);
var inputcell4_1 = document.createElement("<input size='32' name=''>");
var inputcell4_2 = document.createElement("<input type='button' value='刪除元素'onClick='del(this);'/>");
cell4.appendChild(inputcell4_1);
cell4.appendChild(inputcell4_2);
//刷新標(biāo)簽顯示
frash();
}
function del(obj){
//取得按鈕所在行
var i = obj.parentNode.parentNode.rowIndex;
var tab = document.getElementById("table1");
//刪除按鈕所在行
tab.deleteRow(i-1);
frash();
}
function frash(){
var table = document.getElementById("table1");
var num = table.rows.length;
//計算動態(tài)元素個數(shù)
var n = num-2;
for(i=1;i<=n;i++){
//設(shè)置標(biāo)簽值
table.rows[i].cells[0].innerText="元素"+i+"屬性A";
//設(shè)置屬性值
table.rows[i].cells[1].childNodes[0].setAttribute("name","ysa"+i);
table.rows[i].cells[2].innerText="元素"+i+"屬性B";
table.rows[i].cells[3].childNodes[0].setAttribute("name","ysb"+i);
}
}
</script>
</head>
<body>
<table id="table1" width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>標(biāo)簽1</td>
<td><input name="a"></td>
<td>標(biāo)簽2</td>
<td><input name="b"></td>
</tr>
<tr>
<td colspan="4" align="center"><a href="#" onclick="add();">增加元素</a></td>
</tr>
</table>
</body>
</html>
頁面打印通常直接調(diào)用IE中打印命令，并通過class控制打印范圍。當(dāng)頁面文件內(nèi)容過多，無法完整打印時，可以通過javascript控制縮放實現(xiàn)完整打印。
下面是部分代碼。
<
html>
<head>
<title>***上海市眼病防治中心病人結(jié)帳費用報表***</title>
<meta http-equiv="Content-Type" content="text/
html; charset=gb2312">
<!--media=print 這個屬性可以在打印時有效-->
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
<style>
body,td,th
{
font-size: 12px;
}
.tdp
{
border-bottom: 1 solid #000000;
border-left: 1 solid #000000;
border-right: 0 solid #ffffff;
border-top: 0 solid #ffffff;
}
.tabp
{
border-color: #000000;
border-collapse:collapse;
}
.NOPRINT {
font-family: "宋體";
font-size: 12px;
}
</style>
<script language="javascript">
var i=0;
function zoomL(){
i++;
document.getElementById("f").style.zoom=1+i/3;
}
function zoomS(){
i--;
document.getElementById("f").style.zoom=1+i/3;
}
</script>
</head>
<body >
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0 V
IEWASTEXT> </OBJECT>
<input type=button value=打印 onclick="document.all.WebBrowser.ExecWB(6,1)" class="NOPRINT">
<input type=button value=直接打印 onclick="document.all.WebBrowser.ExecWB(6,6)" class="NOPRINT">
<input type=button value=頁面設(shè)置 onclick="document.all.WebBrowser.ExecWB(8,1)" class="NOPRINT">
<input type=button value=打印預(yù)覽 onclick="document.all.WebBrowser.ExecWB(7,1)" class="NOPRINT">
<input type=button value=放大 onclick="zoomL();" class="NOPRINT">
<input type=button value=縮小 onclick="zoomS();" class="NOPRINT">
<br/>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td colspan="5"><font size="3">上海市眼病防治中心病人結(jié)帳費用報表（A） </font></td>
</tr>
<tr>
<td>匯總?cè)舜?5</td>
<td>費用合計 15853.12</td>
<td>統(tǒng)計日期 </td>
<td>制表人 023</td>
<td>制表日期：2004-05-13</td>
</tr>
</table>
<table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp" id="f">
<tr>
<td >姓名</td>
<td >住院號</td>
<td >科室</td>
<td >結(jié)帳日期</td>
<td >出院日期</td>
<td >費用合計</td>
<td >醫(yī)保交易費用</td>
<td >分類給付費用</td>
<td >非醫(yī)保交易費</td>
</tr>
<tr>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
</table>
<hr align="center" width="90%" size="1" n
oshade class="NOPRINT" >
<!--分頁-->
<div class="PageNext"></div>
<table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp">
<tr>
<td >第2頁</td>
</tr>
<tr>
<td >看到分頁了吧</td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" >這樣的報表
對一般的要求就夠了。</td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<table width="780%" border="1" class="Noprint">
<tr>
<td>能不能打印</td>
</tr>
</table>
</body>
</
html>
思路是把表單類型設(shè)置為enctype="multipart/form-data"，其他表單中文本數(shù)據(jù)通過javascript處理，附加在action后面，后臺通過request.getParameter()取得。上傳文件調(diào)用commons-fileupload.jar中方法。
下面是部分代碼。
<form name="ajform" action="/da.do" method="post" enctype="multipart/form-data">
<tr><td><input name="a" value=""></td></tr>
<tr><td><input name="b" type="file"></td></tr>
<tr><td><a href="#" onclick="checksubmit();">提交</a></td></tr>
</form>
<script language="javascript">
function checksubmit(){
var value = "/da.do?formAction=save";
value = value+"&a="+ window.document.getElementById("a").value;
window.document.ajform.action=value;
window.document.ajform.submit();
}
</script>
String a = request.getParameter("a");
try {
//文件上傳目錄“/file/wj”
String filepath= request.getSession().getServletContext().getRealPath("/")+"file"+File.separator+"wj";
//文件上傳臨時目錄“/file/temp”
String tempPath = request.getSession().getServletContext().getRealPath("/")+"file"+File.separator+"temp";
File dir = new File(filepath);
//建立目錄
if(!dir.exists()){
dir.mkdirs();
}
File dir1 = new File(tempPath);
if(!dir1.exists()){
dir1.mkdirs();
}
DiskFileUpload fu = new DiskFileUpload();
//設(shè)置最大文件尺寸，這里是10MB
fu.setSizeMax(10485760);
//設(shè)置緩沖區(qū)大小，這里是4kb
fu.setSizeThreshold(4096);
//設(shè)置臨時目錄：
fu.setRepositoryPath(tempPath);
List fileItems = fu.parseRequest(request);
Iterator iter = fileItems.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
String fileName = item.getName();
//判斷是否為文件
if(fileName!=null){
//取文件名
String name = fileName.substring(fileName.lastIndexOf(File.separator)+1);
if(fileName!=null&& !fileName.equals("")) {
File file = new File(filepath+File.separator+name);
//上傳文件
item.write(file);
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
<html>
<head>
</head>
<body>
<embed height=240 name=aa style="BORDER-BOTTOM:#2a8a21 3px solid;BORDER-LEFT:#2a8a21 3px ?solid;BORDER-RIGHT:#2a8a21 3px solid;BORDER-TOP:#2a8a21 3px solid"
?type=audio/x-pn-realaudio-plugin width=320 loop="no" console="clip1" reset="false"
?controls="ImageWindow" src="a1.rmvb">
</embed><br>
<embed height=30 type=audio/x-pn-realaudio-plugin width=320? console="clip1"? reset="false" autostart="false" controls="controlpanel">
</embed><br>
<embed height=30 type=audio/x-pn-realaudio-plugin width=320? console="clip1"? reset="false" autostart="false" controls="statusbar">
</embed><br>
<Script Language=JavaScript>
function OpenFile(txt){
?document.aa.src=txt.value;
}
</Script>
</body>
</html>
1。EJB打包
<?xml version="1.0"?>
<project name="jartest" default="jar" basedir=".">
<property name="build.dir" value="${basedir}/build" />
<property name="build.classes.dir" value="${build.dir}/classes" />
<target name="jar" description="打包成Jar">
<jar jarfile="${basedir}/ejbfile.jar">
<fileset dir="${build.classes.dir}">
<include name="**/*.class" />
</fileset>
<metainf dir="${basedir}/META-INF ">
<include name="**" />
</metainf>
</jar>
</target>
</project>
2。web應(yīng)用打包
<?xml version="1.0"?>
<project name="wartest" default="war" basedir=".">
<target name="war" description="創(chuàng)建WEB發(fā)布包">
<war warfile="${basedir}/EJBTest.war" webxml="${basedir}/WEB-INF/web.xml">
<fileset dir="${basedir}">
<include name="**"/>
<exclude name="build.xml" />
<exclude name="/WEB-INF/web.xml" />
</fileset>
</war>
</target>
</project>
1.web.xml中配置Spring的servlet和servlet-mapping
???<servlet>
??????? <servlet-name>example</servlet-name>
??????? <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
????????<init-param>?
????????????<param-name>contextConfigLocation</param-name>?
????????????<param-value>/WEB-INF/application-servlet.xml</param-value>?
????????</init-param>?
????????<load-on-startup>1</load-on-startup>
??? </servlet>
??? <servlet-mapping>
??????? <servlet-name>example</servlet-name>
??????? <url-pattern>*.do</url-pattern>
??? </servlet-mapping>
2.配置spring配置文件application-servlet.xml
???<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
?????<property name="prefix">
?????????<value>/page/</value>
?????</property>
?????<property name="suffix">
?????????<value>.jsp</value>
?????</property>
???</bean>
???<bean id="urlMapping"?class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
????????<property name="mappings">
????????????<props>
????????????????<prop key="/login.do">loginAction</prop>
????????????</props>
????????</property>
???</bean>
???<bean id="loginAction" class="loginAction">
????????<property name="commandClass">
????????????<value>?LoginActionVo??</value>
????????</property>
????????<property name="formView">
????????????<value>login</value>
????????</property>
????????<property name="sessionForm">
????????????<value>true</value>
????????</property>
????????<property name="serviceLocator">
????????????<ref bean="servicelocator" />
????????</property>
?</bean>
3.新建類繼承SimpleFormController﹐並複寫protected Object formBackingObject(HttpServletRequest request)?和?protected ModelAndView onSubmit(HttpServletRequest request,?HttpServletResponse response,
?Object cmd, BindException ex)。常用結(jié)構(gòu)為
???protected Object formBackingObject(HttpServletRequest request){
??????LoginActionVo??loginActionVo?? = new LoginActionVo?();
??????request.setAttribute("?loginActionVo",?loginActionVo);
??????return loginActionVo;
???}
???protected ModelAndView onSubmit(HttpServletRequest request,?HttpServletResponse response,
???????Object cmd, BindException ex){
??????LoginActionVo??loginActionVo =(LoginActionVo)cmd;
??????Map map = new HashMap();
?????map.put("?loginActionVo",?loginActionVo);
?????request.getSession().setAttribute(this.getFormSessionAttributeName(),?loginActionVo);
?????return new ModelAndView("login",map);
? }
4.將jsp頁面參數(shù)和VO進行綁定。綁定的方法為頁面元素name和VO對象對應(yīng)﹐當(dāng)進行深層次的綁定時﹐要注意﹐在變量的get方法中進行初始化。在servlet2.4容器中可以不用c:out標(biāo)籤
輸入框綁定﹕<input name="user.name"? value = "<c:out value="${loginActionVo.user.name}"/>" type="text" disabled="disabled"? size="14" maxlength="14" /></td>
VO為﹕
?public class loginActionVo{
????private User user;
????public?User getUser(User user){
??????if( user == null){
?????????user = new User();
??????}
??????return user;
???}
?}
???
以SimpleFormController為例
1。spring 接收一個請求後首先會判斷"get"還是"post"方法
2。1 "get"方法時
?????????2。1。1 首先創(chuàng)建一個command對象﹐通過調(diào)用AbstractFormController的formBackingObject方法得到﹐通常是一個pojo﹐根據(jù)name用來和提交的數(shù)據(jù)綁定。
????????? 2。1。2 然後會創(chuàng)建一個BindException對象﹐裡面包括command對象﹐和其他一些屬性。
???????????2。1。3 判斷sessionForm 屬性﹐默認為false。如果為true﹐就會把command對象對象保存在session裡???? 面。session中key為類名+".FORM." + command對象名?？梢酝ㄟ^request.getSession().getAttribute(this.getFormSessionAttributeName(request));得到command對象。
??????
???2。1。4 調(diào)用AbstractFormController的referenceData方法。這個方法默認為空﹐可以復(fù)寫來初始化頁面參數(shù)。
2。1。5 返回ModelAndView對象﹐返回formview頁面。
2 。2 “post”方法時
???2。2。1 首先得到command對象,如果SessionForm = false﹐調(diào)用formBackingObjectde創(chuàng)建
?????????????????????如果SessionForm = true,從request.getSession中得到原command對象﹐然後將command對象從
?????????????????????Session中刪除。
? 2。2。2? 然後會創(chuàng)建一個ServletRequestDataBinder對象﹐裡面包括command對象﹐和其他一些屬性。
???????????????????這個過程將調(diào)用initBinder()﹔可以複寫這個方法初始化數(shù)據(jù)。
?2。2。3 調(diào)用processFormSubmission(HttpServletRequest request, HttpServletResponse response, Object command,? BindException errors)。有錯誤時返回formview頁面﹐否則進入successview頁面。這個過程將調(diào)用onSubmit(Object command)﹐必須複寫這個方法放入業(yè)務(wù)邏輯。
?
???
1./WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
?xmlns="?xmlns:xsi="?xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
?<!--
<!DOCTYPE web-app
??? PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
??? "<web-app>
-->
?
?<!--
?<context-param>
??? ?<param-name>contextConfigLocation</param-name>
??? ?<param-value>/WEB-INF/application-servlet.xml</param-value>
? ?</context-param>
?<listener>
???? <listener-class>
?????? org.springframework.web.context.ContextLoaderListener
???? </listener-class>
? ?</listener>
? ?-->
?<servlet>
??????? <servlet-name>hello</servlet-name>
??????? <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>??
??<init-param>
????????? <param-name>contextConfigLocation</param-name>
????????? <param-value>/WEB-INF/application-servlet.xml</param-value>
???? ?</init-param>
??<load-on-startup>1</load-on-startup>
??? </servlet>
?
??? <servlet-mapping>
??????? <servlet-name>hello</servlet-name>
??????? <url-pattern>*.do</url-pattern>
??? </servlet-mapping>
?
<!--
?<taglib>
???? ?<taglib-uri>/spring</taglib-uri>
???? ?<taglib-location>/WEB-INF/spring.tld</taglib-location>
?</taglib>
-->?
</web-app>
2./WEB-INF/application-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING/DTD BEAN/EN" "<beans>
??? <bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
??????? <property name="mappings">
??????????? <props>
??????????????? <prop key="/login.do">loginAction</prop>
??????????? </props>
??????? </property>
??? </bean>
???
??? <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
??????? <property name="viewClass">
??????????? <value>org.springframework.web.servlet.view.JstlView</value>
??????? </property>
??????? <property name="prefix">
??????????? <value>/</value>
??????? </property>
??????? <property name="suffix">
??????????? <value>.jsp</value>
??????? </property>
??? </bean>
???
??? <bean id="loginAction" class="onlyfun.caterpillar.LoginAction">
??????? <property name="commandName">
??????? ?<value>command</value>
??</property>
??<property name="commandClass">
??????????? <value>onlyfun.caterpillar.LoginForm</value>
??????? </property>
??????? <property name="successView">
??????????? <value>success</value>
??????? </property>
??????? <property name="formView">
??????????? <value>form</value>
??????? </property>
???????<property name="user">??????????
????????????<ref local="user" />
??????? </property>
??? </bean>?
???
???<bean id="user" class="onlyfun.caterpillar.User">
?????<property name="username">
??????? ?<value>111</value>
?????</property>
?????<property name="password">
??????? ?<value>111</value>
?????</property>
????</bean>
</beans>
3./form.jsp
<%@taglib prefix="spring" uri=">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head><title>Login</title></head>
<body>
?<spring:bind path="command.*">
??????? <font color="red"><b>${status.errorMessage}</b></font><br>
??? </spring:bind>
?? ? ??請輸入使用者名稱與密碼：<p>?? ?
??? <form name="loginform" action="login.do" method="post">
???? <spring:bind path="command.username">??
???????? ?名稱 <input type="text" name="${status.expression}" value="${status.value}"/>
???????? ?<font color="red">${status.errorMessage}</font><br>
???? </spring:bind>
???? <spring:bind path="command.password">?
???????? ?密碼 <input type="password" name="${status.expression}" value="${status.value}"/>
???????? ?<font color="red">${status.errorMessage}</font><br>
???? </spring:bind>
??????? <input type="submit" value="確定"/>
??? </form>
? ??? 注意：輸入錯誤會再回到這個頁面中。 ?
</body>
</html>
4./index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
? </head>
? <body>??
??? begin......
??? <%
???? response.sendRedirect("login.do");
??? %>
? </body>
</html>
5./success.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri=">
<html>
<head><title>Login Success</title></head>
<body>
??? <H1><c:out value="用戶名﹕${user}"/></H1>
</body>
</html>
6./WEB-INF/classes/onlyfun/caterpillar/LoginAction.class
package onlyfun.caterpillar;
import org.springframework.validation.BindException;
import org.springframework.web.servlet.mvc.SimpleFormController;
import org.springframework.web.servlet.*;
public class LoginAction extends SimpleFormController {?
????private User user;
??? protected ModelAndView onSubmit(Object command,BindException errors) throws Exception {
?????? LoginForm form = (LoginForm) command;?
???????String username = user.getUsername();
?????? String password = user.getPassword();
?????? if(username.equals(form.getUsername()) &&
??? ???? password.equals(form.getPassword())) {
????????? return new ModelAndView(this.getSuccessView(),"user", form.getUsername());
?????? }
?????? else {
??? ??? errors.reject("loginfail", "使用者名稱或密碼錯誤");
??? ??? if(!(username.equals(form.getUsername()))){
??? ???? errors.rejectValue("username", "error", null, "使用者名稱錯誤");
??? ??? }
??? ???if(!(password.equals(form.getPassword()))){
??? ???? errors.rejectValue("password", "error", null, "密碼錯誤");
??? ??? }?? ???
?????????? return new ModelAndView(this.getFormView(),errors.getModel());
?????? }
??? }
????public User getUser() {
?????return user;
????}
????public void setUser(User user) {
?????this.user = user;
????}
}
7./WEB-INF/classes/onlyfun/caterpillar/LoginForm.class
package onlyfun.caterpillar;
public class LoginForm {
??? private String username;
??? private String password;
???
??? public void setUsername(String username) {
?????? this.username = username;
??? }
???
??? public void setPassword(String password) {
?????? this.password = password;
??? }
???
??? public String getUsername() {
?????? return username;
??? }
???
??? public String getPassword() {
?????? return password;
??? }
}
8./WEB-INF/tags/spring.tld
9./WEB-INF/tags/c.tld
10./WEB-INF/classes/onlyfun/caterpillar/User.class
package onlyfun.caterpillar;
public class User {
?private String username;
?private String password;
?public String getPassword() {
??return password;
?}
?public void setPassword(String password) {
??this.password = password;
?}
?public String getUsername() {
??return username;
?}
?public void setUsername(String username) {
??this.username = username;
?}
}
?HttpServletRequest,HttpServletResponse:這兩個屬性的作用范圍最小。
????時間上：只是本身請求和應(yīng)答完成就失效，當(dāng)然轉(zhuǎn)發(fā)是把當(dāng)前的request對象取出來傳給另一
??????????個資源，其實本身的request對象還是只生存到本次請求結(jié)束，response也同樣。
????空間上：只能發(fā)送請求的客戶端有效。
????HttpSession:一次連結(jié)到客戶端關(guān)閉，時間作用范圍比上面兩個大，空間任用范圍相同。
????ServletConfig:從一個servlet被實例化后，對任何客戶端在任何時候訪問有效，但僅對本servlet
????有效，一個servlet的ServletConfig對象不能被另一個servlet訪問。
????ServletContext:對任何servlet，任何人在任何時間都有效，這才是真正全局的對象。
????那么，ServletConfig參數(shù)和ServletContext參數(shù)到底應(yīng)該如何使用，如何取得？
????一般來說，對整個應(yīng)用的配置，為了不使用“硬編碼”，應(yīng)該配置為ServletContext參數(shù)，比如字
????符集設(shè)定。
????<web-app>
????????.................
????????<init-param>
????????????<param-name>charset</param-name>?
????????????<param-value>GB2312</param-value>?
????????</init-param>
????????.................
????</web-app>
????注意以上格式只是2。0以后的標(biāo)準(zhǔn)格式，舊容器（引擎）采用服務(wù)商自己的格式配置。注意它的
????父元素應(yīng)該是<web-app>也就是說它是對一個應(yīng)用作用的。
????而如果只有一個特定的servlet要設(shè)定的參數(shù)，其它servlet不能共享，應(yīng)該配置為ServletConfig
????參數(shù)，如一個讀取附件的servlet要用到絕對目錄，而別的servlet不會用到：
????<servlet>
????????????<servlet-name>GetAtt</servlet-name>
????????<servlet-class>mail.GetAttServlet</servlet-class>
????????<init-param>
????????????<param-name>absPath</param-name>?
????????????<param-value>/usr/mail/ax/axman/Maildir/</param-value>?
????????</init-param>
????</servlet>
????不用說，因為在<servlet>標(biāo)簽中已經(jīng)指定了name和class,也就是說只有mail.GetAttServlet這個
????servlet中才能取到path,而別的Servlet是不能取到的。
????那么如何訪問這兩個對象的參數(shù)呢？
????訪問ServletConfig參數(shù)：
????????首先要取得ServletConfig對象，然后調(diào)用它的getInitParameter();方法。要訪問
????ServletConfig對象，jsp中直接使用config內(nèi)置對象，但因為你的JSP編譯后的servlet一般不會被
????加到web.xml中的，所以一般不會通過jsp來取對本JSP編譯后的servlet的配置參數(shù)，那么在servlet
????中要得到ServletConfig對象有兩種方法：
????在inii()方法中取到：通過init的重載方法傳遞
????.....
????public?class?Test?extends?HttpServlet?
????{
????????ServletConfig?config;
????????public?void?init(ServletConfig?config)?throws?ServletException?{
????????????this.config?=?config;
????????}
????????..................
????}
????然后在下面的方法中就可以訪問config對象。但要注意，為了確保能從構(gòu)造方法中到到當(dāng)前servlet的
????config對象，應(yīng)該調(diào)用父類的構(gòu)造方法：
????.....
????public?class?Test?extends?HttpServlet?
????{
????????ServletConfig?config;
????????public?void?init(ServletConfig?config)?throws?ServletException?{
????????????super.init(config);
????????????this.config?=?config;
????????}
????????..................
????}
????通過getServletConfig()方法直接到時，這樣做的好處是不必調(diào)手工傳遞屬性，想在任何時候都可
????以得到。
????還有第三種方法，要自己實現(xiàn)一些接口，這里作為一般討論就不介紹了。
????要訪問ServletContext對象，只要從現(xiàn)有的ServletConfig對象getServletContext（）就可以了，然后
????調(diào)用它的getInitParameter()方法就可以獲取它的參數(shù)。
????按說：ServletContext對象的作用域比ServletConfig作用域大，為什么要從ServletConfig中到得
????ServletContext對象呢？我個人認為：容器保存了很多個ServletContext對象，請求時容器到底取哪一個
????給你呢？那就取其中包含ServletConfig信息的那個給你，就是說取ServletConfig對象的父級對象。就好
????象HttpSession要從requset中取得一樣，就是取那個包含當(dāng)前requese對象的session對象給你，這只是我
????的個人想法，還沒有來得及看具體實現(xiàn)。反正就這么用吧。
JSF和Spring集成的資料比較少,原理是獲得彼此的上下文引用,以此進一步獲得各自管理的bean,這是可能的,因為兩者是web應(yīng)用框架都遵循servlet規(guī)范,為二者整合提供了可能和基礎(chǔ).
?
在Spring中ApplicationContext是相當(dāng)重要的類,對于web應(yīng)用,它還包裝了javax.servlet.ServletContext,為web應(yīng)用提供了所有可以利用的數(shù)據(jù),包括可管理bean,Faces中通過FacesContext類可以獲得所有可以利用的資源,同樣包括JSF的可管理支持bean,它們都圍繞著ServletContext提供了自己的門面,通過各自的門面在Servlet容器的世界里彼此相通.
本文介紹兩種方式,實現(xiàn)二者集成:
1.???????? 通過寫自己的類來完成二者的連通,實際上只是獲得彼此世界里存活的bean,對于JSF中事件處理可能需要更進一步的構(gòu)思和編碼,為了這點,第二個方法介紹了一種框架.
2.???????? 使用框架完成二者集成.
?
一 ?自己動手,下面的代碼以示例為主,其它涉及的類和接口略去.
這個工具類提供在JSF世界里查找Spring管理的bean.也實現(xiàn)在Spring中查找JSF組件的方法.
package com.skysoft.rbac.dao;
?
import org.springframework.context.ApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;
import javax.faces.el.ValueBinding;
import javax.faces.FactoryFinder;
import javax.faces.application.Application;
import javax.faces.application.ApplicationFactory;
?
public final class SpringFacesUtil {
? public SpringFacesUtil() {
? }
? /**
?? * 從Spring中查找bean.
?? * @param beanname String
?? * @return Object
?? */
? public static Object findBean(String beanname) {
??? ServletContext context = (ServletContext) FacesContext.getCurrentInstance().
??????? getExternalContext().getContext();
??? ApplicationContext appctx = WebApplicationContextUtils.
??????? getRequiredWebApplicationContext(context);
??? return appctx.getBean(beanname);
? }
? /**
?? * 從JSF中查找bean.
?? * @param beanname String
?? * @return Object
?? */
? public static Object lookupBean(String beanname) {
??? Object obj = getValueBinding(getJsfEl(beanname)).getValue(FacesContext.
??????? getCurrentInstance());
??? return obj;
? }
?
? private static ValueBinding getValueBinding(String el) {
??? return getApplication().createValueBinding(el);
? }
?
? private static Application getApplication() {
??? ApplicationFactory appFactory = (ApplicationFactory) FactoryFinder.
??????? getFactory(FactoryFinder.APPLICATION_FACTORY);
??? //FactoryFinder.FACES_CONTEXT_FACTORY
??? //FactoryFinder.RENDER_KIT_FACTORY
??? return appFactory.getApplication();
? }
?
? private static String getJsfEl(String value) {
??? return "#{" + value + "}";
? }
}
下面定義一個由JSF管理的bean:
package com.skysoft.rbac.dao;
?
import javax.servlet.ServletContext;
?
import org.springframework.context.ApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
import org.skysoft.struts.jsf.util.FacesUtils;
?
public class ServiceLocatorBean
??? implements ServiceLocator {
? private static final String DAO_SERVICE_BEAN_NAME = "userDAO";
? //這個dao就是由Spring提供的管理bean,這個dao可以使用Hibernate實現(xiàn).
? private UserDAO dao;
?
? public ServiceLocatorBean() {
??? this.dao = (UserDAO)SpringFacesUtil.findBean(DAO_SERVICE_BEAN_NAME);
? }
?
? public UserDAO getDao() {
??? return dao;
? }
}
下面是一個使用ServiceLocatorBean的類.
public class UserDAOImp
??? extends HibernateDaoSupport implements UserDAO {
? private UserDAO dao;
? private List list;
?
? public UserDAOImp() {}
?
? public List getList() {
??? if (list == null) {
????? list = dao.getList();
??? }
??? return list;
? }
?
? public UserDAO getDao() {
??? return dao;
? }
?
? public void setDao(UserDAO dao) {
??? this.dao = dao;
? }
}
?
在faces-config.xml中的配置:
?????? <managed-bean>
????????????? <managed-bean-name>serviceLocatorBean</managed-bean-name>
????????????? <managed-bean-class>com.skysoft.rbac.dao.ServiceLocatorBean</managed-bean-class>
????????????? <managed-bean-scope>session</managed-bean-scope>
?????? </managed-bean>
?????? <managed-bean>
????????????? <managed-bean-name>User</managed-bean-name>
????????????? <managed-bean-class>com.skysoft.rbac.User</managed-bean-class>
????????????? <managed-bean-scope>request</managed-bean-scope>
????????????? <managed-property>
???????????????????? <property-name>serviceLocator</property-name>
???????????????????? <property-class>com.skysoft.rbac.dao.ServiceLocatorBean</property-class>
???????????????????? <value>#{serviceLocatorBean}</value>
????????????? </managed-property>
?????? </managed-bean>
在applicationContext.xml中的配置:
?????? <bean id="userDAO" class="com.skysoft.rbac.dao.UserDAOImp">
????????????? <property name="sessionFactory">
???????????????????? <ref local="sessionFactory" />
????????????? </property>
?????? </bean>
二 使用框架
1 介紹
這個框架是Spring相關(guān)項目,提供一個包de.mindmatters.faces.spring,這個包包含JSF和Spring框架綜合集成的粘合代碼,這些代碼以獨立于一個實現(xiàn)的方式完成,這樣它能和任何JSF實現(xiàn)一起使用.
本包的提供的代碼主要目的是盡可能透明的集成兩個框架,主要特征:
l???????? JSF/JSP開發(fā)者應(yīng)該能訪問Spring管理的Beans,就好象它們是由JSF管理的.
l???????? JSF可管理beans應(yīng)能集成入Spring.
l???????? RequestHandledEvent事件也應(yīng)該能被發(fā)布到Spring.
2? JSF配置集成
本包構(gòu)造了一個基于faces配置文件(e.g. /WEB-INF/faces-config.xml)的WebApplicationContext類, 讓它成為遵循"spring-beans" DTD配置文件(e.g. defined in /WEB-INF/applicationContext.xml)來配置的ApplicationContext的孩子,這樣依從"faces-config" DTD的WebApplicationContext就是全特征的,即自動擁有如下功能:
l???????? JSF可管理beans實現(xiàn)了Spring的*Aware interfaces:
ApplicationContextAware
BeanFactoryAware
BeanNameAware
ResourceLoaderAware
ServletContextAware
l???????? JSF可管理beans實現(xiàn)Spring的lifecycle interfaces:
InitializingBean
DisposableBean
l???????? 實現(xiàn)Spring的FactoryBean interface
l???????? 實現(xiàn)Spring的ApplicationListener interface
l???????? 發(fā)布ApplicationEvent事件.
l???????? 從資源中讀取消息.
等等,更多可看Spring.
3 訪問方式
1) 從JSF中程序化的訪問Spring管理的beans.
因為在FacesWebApplicationContext和ApplicationContext之間有層次關(guān)系,所以你的JSF可管理支持beans能容易的實現(xiàn)ApplicationContextAware接口,并能通過getBean方法訪問它而不管它是否定義在FacesWebApplicationContext中還是定義在父ApplicationContext類對象中.
2) 通過JSF EL從JSF中訪問Spring管理的beans.
能夠使用JSF EL訪問beans無論你引用的bean由JSF管理還是由Spring管理.兩個bean上下文在存取時間合并.
a) 直接訪問:
如果一個帶有請求名字的bean只存在于Spring上下文內(nèi)的話,這個bean被使用,bean的singleton屬性設(shè)置被完全保持.
b) 區(qū)域化訪問(scoped access):
如果你要從JSF定義bean的作用域的能力上得益還想讓那個bean由Spring管理,那么就要在兩個上下文中定義,只是對于JSF上下文中的定義的類類型要使用de.mindmatters.faces.spring.SpringBeanFactory類,你還應(yīng)該設(shè)置那個bean的singleton屬性到false,因這能覆蓋你的作用域設(shè)置.在你使用JSF EL訪問bean時,你總能獲得一個遵從你在JSF上下文中定義的作用域設(shè)置的由Spring管理的bean的實例.
?
三 用法
通常,就象設(shè)置任何其它JSF web應(yīng)用一樣設(shè)置你的web應(yīng)用,下面的樣例配置展示怎樣使能上面提到的特征。
在web.xml
配置中必須加入下列配置條目,
同時注意把該庫的jsf-spring.jar
放在適當(dāng)?shù)奈恢?
<web-app>
??? .........
??? <!--
??????? 過濾器用于向Spring發(fā)布RequestHandledEvent,它應(yīng)該影射到和FacesServlet url相同的模式.
??? -->???
??? <filter>
??????? <filter-name>RequestHandled</filter-name>
??????? <filter-class>de.mindmatters.faces.spring.support.RequestHandledFilter</filter-class>
??? </filter>
??????
??? <filter-mapping>
??????? <filter-name>RequestHandled</filter-name>
??????? <url-pattern>*.faces</url-pattern>
??? </filter-mapping>
?
??? <!--
??? 這個偵聽器用于裝入Spring beans的父應(yīng)用上下文.
??? -->
??? <listener>
??????? <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
??? </listener>
??? .........
</web-app>
下面的一些說明,都可以通過下載這個Spring相關(guān)項目得到,列在這里只為演示上面的說明的功能.
WEB-INF/faces-config.xml
<!-- 一個純JSF管理的bean -->
<managed-bean>
??? <managed-bean-name>jsfBean</managed-bean-name>
??? <managed-bean-class>example.NameBean</managed-bean-class>
??? <managed-bean-scope>session</managed-bean-scope>
??? <managed-property>
??????? <property-name>name</property-name>
??? </managed-property>
</managed-bean>
<!--一個SpringBeanScope用來定義Spring可管理bean的作用域.-->
?????? <managed-bean>
????????????? <managed-bean-name>scopedAccessSpringBean</managed-bean-name>
?????? <managed-bean-class>de.mindmatters.faces.spring.SpringBeanScope</managed-bean-class>
????????????? <managed-bean-scope>session</managed-bean-scope>
?????? </managed-bean>
<!-- 這是一個純JSF可管理bean,它持有一個到Spring可管理bean的一個引用. -->
<managed-bean>
??? <managed-bean-name>referencingBean</managed-bean-name>
??? <managed-bean-class>example.ReferencingBean</managed-bean-class>
??? <managed-bean-scope>session</managed-bean-scope>
??? <managed-property>
??????? <property-name>referencedBean</property-name>
??????? <value>#{managedPropertyAccessSpringBean}</value>
??? </managed-property>
</managed-bean>
WEB-INF/applicationContext.xml (partial)
<!-- 一個純Spring的可管理bean -->
<bean id="directAccessSpringBean" class="example.NameBean"/>
<!-- 一個向JSF作用域提供的可管理bean.? -->
<bean id="scopedAccessSpringBean" class="example.NameBean" singleton="false"/>
<!-- 一個純Spring的可管理bean,它由一個JSF可管理bean引用.(當(dāng)然了,它也能被直接訪問啦.) -->
<bean id="managedPropertyAccessSpringBean" class="example.NameBean" singleton="false"/>
參考:
1./home.xsl
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="
??? <xsl:output method="html" omit-xml-declaration="yes" />
??? <xsl:template match="/">
??????? <html>
??????????? <head><title>Hello!</title></head>
??????????? <body>
??????????????? <h1>My First Words</h1>
??????????????? <xsl:for-each select="wordList/word">
??????????????????? <xsl:value-of select="."/><br />
??????????????? </xsl:for-each>
??????????? </body>
??????? </html>
??? </xsl:template>
</xsl:stylesheet>
2./index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>???
? </head>
? <body>
? ?<center><input type="button" value="xslt" onclick="location.href='home.htm'"></center>
? </body>
</html>
3./WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
?xmlns="
?xmlns:xsi="
?xsi:schemaLocation="
http://java.sun.com/xml/ns/j2ee?
?<servlet>
??????? <servlet-name>hello</servlet-name>
??????? <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
??<init-param>
???????? <param-name>contextConfigLocation</param-name>
???????? <param-value>/WEB-INF/application-servlet.xml</param-value>
??? ?</init-param>?
??? </servlet> ?
??? <servlet-mapping>
??????? <servlet-name>hello</servlet-name>
??????? <url-pattern>*.htm</url-pattern>
??? </servlet-mapping> ??
</web-app>
4./WEB-INF/application-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING/DTD BEAN/EN" "
<beans>
??? <bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
??????? <property name="mappings">
??????????? <props>
??????????????? <prop key="/home.htm">homeAction</prop>
??????????? </props>
??????? </property>
??? </bean>??
??? <bean id="bundleViewResolver" class="org.springframework.web.servlet.view.ResourceBundleViewResolver">
??????? <property name="basename">
??????????? <value>views</value>
??????? </property>
??? </bean>??
??? <bean id="homeAction" class="xslt.HomePageController"/>
</beans>
5./WEB-INF/classes/views_zh_TW.properties
home.class=xslt.HomePage
home.stylesheetLocation=/home.xsl
home.root=wordList
6./WEB-INF/classes/xslt/HomePage.class
package xslt;
import java.util.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.jdom.Element;
import org.jdom.output.DOMOutputter;
import org.springframework.web.servlet.view.xslt.AbstractXsltView;
import org.w3c.dom.Node;
public class HomePage extends AbstractXsltView {
? protected Node createDomNode(
????????? Map model, String rootName, HttpServletRequest req, HttpServletResponse res
????? ) throws Exception {? ??
????????? org.jdom.Document doc = new org.jdom.Document();
????????? Element root = new Element(rootName);
????????? doc.setRootElement(root);
????????? List words = (List) model.get("wordList");
????????? for (Iterator it = words.iterator(); it.hasNext();) {
????????????? String nextWord = (String) it.next();
????????????? Element e = new Element("word");
????????????? e.setText(nextWord);
????????????? root.addContent(e);
????????? }
????????? // convert JDOM doc to a W3C Node and return
????????? return new DOMOutputter().output( doc );
????? }
}
7./WEB-INF/classes/xslt/HomePageController.class
package xslt;
import java.util.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.AbstractController;
public class HomePageController extends AbstractController{
?protected ModelAndView handleRequestInternal(HttpServletRequest req, HttpServletResponse resp) throws Exception {
??Map map = new HashMap();
???? List wordList = new ArrayList();????????
???? wordList.add("hello");
???? wordList.add("world");???????
???? map.put("wordList", wordList);??????
???? return new ModelAndView("home", map);
?}
}
1.????????
Abstract
在
Java
的世界裡，要操控
XML
，最簡單的方法莫過於使用
JDOM
。在這裡我簡單的介紹如何用
JDOM
從無到有的建立一分
XML
、當(dāng)有一份
XML file
時，如何將這個
XML file
讀進程式裡及如何利用
JDOM
將
XML
透過
XSLT
轉(zhuǎn)成
HTML
。
JDOM
是由
Brett Mclaughlin
和
Jason Hunter
編寫，在
http://www.jdom.org
可免費下載。
?
2.????????
建立、新增、刪除、輸出
範(fàn)例
1
展示如何建立、新增、刪除及輸出一份
XML
，每份
XML
在
JDOM
裡是由一個
Document
類別代表，所以一開始我們要先
new
一個
Document
，在建構(gòu)
Document
時應(yīng)指明根節(jié)點，如果沒有指明，在建構(gòu)應(yīng)由
setRootElement
設(shè)定。基本上
XML
都可以化成一個樹狀結(jié)構(gòu)，所以，在產(chǎn)生根節(jié)點之後，就由根節(jié)點開始增加子節(jié)點，新增的方式是呼叫
Element.addContent
將新的節(jié)點加入。刪除如果知道是某節(jié)點以下的子節(jié)點，則可呼叫
Element.getChildren
取得所有子節(jié)點，再找出要刪除的點節(jié)予以刪除。
當(dāng)建立好
XML
之後，通常我們會希望將它輸出到檔案，
JDOM
提供了
XMLOutputter
類別供我們輸出之用，輸出前要先設(shè)定編碼方式，不然，會以
UTF-8
為預(yù)設(shè)值，
setNewlines
則是指明輸出時是否要幫我們斷行，方便閱讀，如果沒有加這行指令，預(yù)設(shè)是不會斷行，那麼所有資料將在同一行上。
=====
範(fàn)例
1 =====
import org.jdom.*;
import org.jdom.output.*;
import java.io.*;
import java.util.List;
?
public class myCreate {
? public myCreate() {
??? String[] strChapter = { "XML
簡論
", "
編寫
XML", "
剖析
XML", "
約制
XML", "
驗正
XML", "
轉(zhuǎn)換
XML" };
?
??? Element elmtRoot = new Element("Article");
??? Document docJDOM = new Document(elmtRoot);
??? //
新增
??? for(int i=0; i<6; i++) {
????? Element elmtChapter = new Element("Chapter");
????? elmtChapter.addContent(strChapter[i]);
????? elmtChapter.setAttribute("sort", new Integer(i).toString());
????
?elmtRoot.addContent(elmtChapter);
??? }
??? //
刪除
??? List lstChapter = elmtRoot.getChildren("Chapter");
??? lstChapter.remove(4);
??? //
輸出
??? OutputXML(docJDOM, "e:/myJDOM.xml");
? }
?
? private void OutputXML(Document docXML, String strFilename) {
??? XMLOutputter fmt = new XMLOutputter();
??? try {
????? fmt.setEncoding("big5");
????? fmt.setNewlines(true);
????? FileWriter fwXML = new FileWriter(strFilename);
????? fmt.output(docXML, fwXML);
????? fwXML.close();
??? }
??? catch (IOException e) {
????
?e.printStackTrace();
??? }
? }
?
? public static void main(String[] args) {
??? myCreate myCreate1 = new myCreate();
? }
}
?
3.????????
讀進一份
XML file
目前
XML
最常被拿來應(yīng)用的領(lǐng)域之一大概就是當(dāng)作設(shè)定檔，因此，如何從檔案中讀入一份已存在的
XML
更為重要。
JDOM
是利用
SAX
或
DOM
來剖析
XML
，用
SAX
會比
DOM
，所以一般都是用
SAX
，如果對
SAX
不熟悉，在
http://www.saxproject.org/
相關(guān)文件資料。
範(fàn)例
2
就是用
SAX
建立
Document
，在建立
SAXBuilder
時傳入的參數(shù)指出是否用
DTD
驗正
XML
的合法性，
true
表示要，
false
表示不要。當(dāng)呼叫
build
之後
JDOM
就已經(jīng)幫我們用
SAX
建立好一棵
XML Tree
，如此我們就可以很方便由
Tree
中找到我們要的節(jié)點。
?
=====
範(fàn)例
2 =====
import org.jdom.*;
import org.jdom.input.*;
import org.jdom.output.*;
import java.io.*;
import java.util.List;
?
public class myRead {
? public myRead() {
??? Document docJDOM;
?
??? //
利用
SAX
建立
Document
??? SAXBuilder bSAX = new SAXBuilder(false);
??? try {
????? docJDOM = bSAX.build(new File("e:/myJDOM.xml"));
??? }
??? catch (JDOMException e) {
????? e.printStackTrace();
????? return;
??? }
??? //
在根節(jié)點中加入一個新的子節(jié)點
??? Element elmtRoot = docJDOM.getRootElement();
??? Element elmtChapter = new Element("Chapter");
??? elmtChapter.setText("
驗正
XML");
??? elmtChapter.setAttribute("sort", "4");
??? elmtRoot.addContent(elmtChapter);
??? //
印出所有根節(jié)點的子節(jié)點
??? List lstChildren = elmtRoot.getChildren("Chapter");
??? for(int i=0; i<lstChildren.size(); i++) {
????? Element elmtChild = (Element) lstChildren.get(i);
????? System.out.println("Child " + i);
????? System.out.println("? Text:" + elmtChild.getText());
????? System.out.println("? Attribute:" + elmtChild.getAttributeValue("sort"));
??? }
??? //
輸出到檔案
??? OutputXML(docJDOM, "e:/myJDOM2.xml");
? }
?
? private void OutputXML(Document docXML, String strFilename) {
??? XMLOutputter fmt = new XMLOutputter();
??? try {
????? fmt.setEncoding("big5");
????? fmt.setNewlines(true);
????? FileWriter fwXML = new FileWriter(strFilename);
????? fmt.output(docXML, fwXML);
????? fwXML.close();
??? }
??? catch (IOException e) {
????? e.printStackTrace();
??? }
? }
?
? public static void main(String[] args) {
??? myRead myRead1 = new myRead();
? }
}
?
4.????????
轉(zhuǎn)換
XML
到
HTML
要將
XML
轉(zhuǎn)成
HTML
當(dāng)然要先寫好
XSL
，但是即使寫好
XSL
，
JDOM
也並不提供
XML
轉(zhuǎn)換，幸好在
JDOM
安裝好之後，就會有
Apache
的
Xalan
，它可以幫我們做這樣的轉(zhuǎn)換。
要使用
Apache
的
Xalan
，首先確定
xalan.jar
在
classpath
裡。
Xalan
的第一個用法是在命令列執(zhí)行，指令如下…
C:\> java org.apache.xalan.xslt.Process –IN XML
文件
–XSL XSL
樣版
–OUT
輸出檔名
命令列的用法在一般的運用裡是很方便，但是我們有興趣的是在程式裡怎麼用。範(fàn)例
4
提供了一個簡單的
sample
。
=====
範(fàn)例
4 =====
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerConfigurationException;
import javax.xml.transform.stream.*;
?
public class myGenHTML {
?
? public myGenHTML(String strXML, String strXSL, String strHTML) {
??? try {
????? GenHTML(strXML, strXSL, strHTML);
??? }
??? catch (TransformerConfigurationException e) {
????? e.printStackTrace();
??? }
??? catch (TransformerException e) {
????? e.printStackTrace();
??? }
? }
?
? private void GenHTML(String strXMLFile, String strXSLFile, String strHTMLFile) throws TransformerConfigurationException, TransformerException
? {
??? TransformerFactory myFactory = TransformerFactory.newInstance();
??? Transformer myTransformer = myFactory.newTransformer(new StreamSource(strXSLFile));
??? myTransformer.transform(new StreamSource(strXMLFile), new StreamResult(strHTMLFile));
? }
?
? public static void main(String[] args) {
??? myGenHTML myGenHTML1 = new myGenHTML(args[0], args[1], args[2]);
? }
}
1./WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
?xmlns="?xmlns:xsi="?xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
??
?<servlet>
??????? <servlet-name>hello</servlet-name>
??????? <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
??<init-param>
???????? <param-name>contextConfigLocation</param-name>
???????? <param-value>/WEB-INF/application-servlet.xml</param-value>
??? ?</init-param>?
??? </servlet>
?
??? <servlet-mapping>
??????? <servlet-name>hello</servlet-name>
??????? <url-pattern>*.do</url-pattern>
??? </servlet-mapping>
?
?<welcome-file-list>
??? ?<welcome-file>form.jsp</welcome-file>
? ?</welcome-file-list>
</web-app>
2./WEB-INF/application-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING/DTD BEAN/EN" "<beans>
??? <bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
??????? <property name="mappings">
??????????? <props>
??????????????? <prop key="/login.do">loginAction</prop>
??????????? </props>
??????? </property>
??? </bean>
???
??? <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
??????? <property name="viewClass">
??????????? <value>org.springframework.web.servlet.view.InternalResourceView</value>
??????? </property>
??????? <property name="prefix">
??????????? <value>/</value>
??????? </property>
??????? <property name="suffix">
??????????? <value>.jsp</value>
??????? </property>
??? </bean>
???
??? <bean id="loginAction" class="onlyfun.caterpillar.LoginAction">
??????? <property name="commandClass">
??????????? <value>onlyfun.caterpillar.LoginForm</value>
??????? </property>
??????? <property name="successView">
??????????? <value>success</value>
??????? </property>
??????? <property name="formView">
??????????? <value>form</value>
??????? </property>
??? </bean>
</beans>
3./WEB-INF/classes/onlyfun/caterpillar/LoginAction.class
package onlyfun.caterpillar;
import org.springframework.web.servlet.mvc.SimpleFormController;
import org.springframework.web.servlet.*;
public class LoginAction extends SimpleFormController {
??? protected ModelAndView onSubmit(Object command) throws Exception {
?????? LoginForm form = (LoginForm) command;
???????
?????? if("111".equals(form.getUsername()) &&
???????????? "111".equals(form.getPassword())) {
????????? return new ModelAndView(this.getSuccessView(),"user", form.getUsername());
?????? }
?????? else {
?????????? return new ModelAndView(this.getFormView());
?????? }
??? }
}
4./WEB-INF/classes/onlyfun/caterpillar/LoginForm.class
package onlyfun.caterpillar;
public class LoginForm {
??? private String username;
??? private String password;
???
??? public void setUsername(String username) {
?????? this.username = username;
??? }
???
??? public void setPassword(String password) {
?????? this.password = password;
??? }
???
??? public String getUsername() {
?????? return username;
??? }
???
??? public String getPassword() {
?????? return password;
??? }
}
5./form.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head><title>Login</title></head>
<body>
??? 請輸入使用者名稱與密碼：<p>
??? <form name="loginform" action="login.do" method="post">
??????? 名稱 <input type="text" name="username"/><br>
??????? 密碼 <input type="password" name="password"/><br>
??????? <input type="submit" value="確定"/>
??? </form>
??? 注意：輸入錯誤會再回到這個頁面中。
</body>
</html>
6./success.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head><title>Login Success</title></head>
<body>
??? <H1> Hello, ${user}!!</H1>
??? This is your secret gift.
</body>
</html>
1. /hellouser.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head><title>HelloPage</title></head>
<body>
???? <H1> ${helloWord}</H2>
</body>
</html>
2./index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
? </head>
? <body>
??? <%
??? ?response.sendRedirect("hellouser.do");
??? %>
? </body>
</html>
3./WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
?xmlns="?xmlns:xsi="?xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
??
?<servlet>
??????? <servlet-name>hello</servlet-name>
??????? <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
??<init-param>
???????? <param-name>contextConfigLocation</param-name>
???????? <param-value>/WEB-INF/application-servlet.xml</param-value>
??? ?</init-param>?
??? </servlet>
?
??? <servlet-mapping>
??????? <servlet-name>hello</servlet-name>
??????? <url-pattern>*.do</url-pattern>
??? </servlet-mapping>
??
</web-app>
4./WEB-INF/application-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING/DTD BEAN/EN" "<beans>
??? <bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
??????? <property name="mappings">
??????????? <props>
??????????????? <prop key="/hellouser.do">helloUserAction</prop>
??????????? </props>
??????? </property>
??? </bean>
???
??? <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
??????? <property name="viewClass">
??????????? <value>org.springframework.web.servlet.view.InternalResourceView</value>
??????? </property>
??? </bean>
???
??? <bean id="helloUserAction" class="onlyfun.caterpillar.HelloUserAction">
??????? <property name="helloWord">
??????????? <value>Hello!</value>
??????? </property>
??????? <property name="viewPage">
??????????? <value>/hellouser.jsp</value>
??????? </property>
??? </bean>
</beans>
5./WEB-INF/classes/onlyfun/caterpillar/HelloUserAction.class
package onlyfun.caterpillar;
import java.io.IOException;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
import org.springframework.web.servlet.mvc.Controller;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.bind.RequestUtils;
public class HelloUserAction implements Controller {
?? private String helloWord;
??? private String viewPage;
???
?? public ModelAndView handleRequest(HttpServletRequest req, HttpServletResponse res)
??????? throws ServletException, IOException {
???? //String user = RequestUtils.getRequiredStringParameter(req, "user");
????? Map model = new HashMap();
????? model.put("helloWord", getHelloWord());
???? // model.put("user", user);
???
?????? return new ModelAndView(getViewPage(), model);
??? }
???
??? public void setViewPage(String viewPage) {
?????? this.viewPage = viewPage;
??? }
???
??? public String getViewPage() {
?????? return viewPage;
??? }
??? public void setHelloWord(String helloWord) {
?????? this.helloWord = helloWord;
??? }
???
??? public String getHelloWord() {
?????? return helloWord;
??? }
}
1.EventRouter.js
/**
?* @author user
?*/
var jsEvent = new Array();
jsEvent.EventRouter = function(el,eventType){
?this.lsnrs = new Array();
?this.el = el;
?el.eventRouter = this;
?el[eventType] = jsEvent.EventRouter.callback;
};
jsEvent.EventRouter.prototype.addListener = function(lsnr){
?this.lsnrs.append(lsnr,true);?
} ;
jsEvent.EventRouter.prototype.notify = function(e){
?var lsnrs = this.lsnrs;
?for(var i=0;i<lsnrs.length;i++){
??var lsnr = lsnrs[i];
??lsnr.call(this,e);
?}
};
jsEvent.EventRouter.callback=function(event){
?var e = event || window.event;
?var router = this.eventRouter;
?router.notify(e);
};
Array.prototype.append = function(obj,nodup){
?if(nodup){?
??this[this.length]=obj;
?}
};
2.mousemat.css
.mousemat{
?background-color:#ffe0d0;
?border:solid maroon 0px;
?position:absolute;
?margin:0px;
?width:500px;
?height:500px;
?top:50px;
?left:50px;?
}
.thumbnail{
?background-color:#ffe0d0;
?border:solid maroon 0px;
?position:absolute;
?margin:0px;
?width:100px;
?height:100px;
?top:50px;
?left:600px;?
}
.cursor{
?background-color:blue;
?position:relative;
?height:5px;
?width:5px;
}
3.mousemat.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
?<head>
??<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
??<title>Untitled Document</title>
??<link rel='stylesheet' type = 'text/css' href = 'mousemat.css'>
??<script type ='text/javascript' src = 'EventRouter.js'></script>
??<script type='text/javascript'>
???var cursor = null;
???window.onload = function(){
????var mat = document.getElementById('mousemat');
????cursor = document.getElementById('cursor');
????var mouseRouter = new jsEvent.EventRouter(mat,"onmousemove");
????//var mouseRouter = new jsEvent.EventRouter(mat,"onclick");
????mouseRouter.addListener(writeStatus);
????mouseRouter.addListener(drawThumbnail);
???};
???function writeStatus(e){
????window.status = e.clientX + "," + e.clientY;
???}
???function drawThumbnail(e){
????cursor.style.left = ((e.clientX/5)-2) + "px";
????cursor.style.top = ((e.clientY/5)-2) + "px";
???}
??</script>
?</head>
?<body>
??<div class='mousemat' id='mousemat'></div>
??<div class='thumbnail' id='thumbnail'>
???<div class = 'cursor' id = 'cursor'></div>
??</div>
?</body>
</html>
1.mousemat.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
<html>
?<head>
??<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
??<title>Untitled Document</title>
??<link rel='stylesheet' type = 'text/css' href = 'mousemat.css'>
??<script type='text/javascript'>
???var cursor = null;
???window.onload = function(){
????var mat = document.getElementById('mousemat');
????mat.onmousemove = mouseObserver;
????cursor = document.getElementById('cursor');
???}
???function mouseObserver(event){
????var e = event || window.event;
????writeStatus(e);
????drawThumbnail(e);
???}
???function writeStatus(e){
????window.status = e.clientX + "," + e.clientY;
???}
???function drawThumbnail(e){
????cursor.style.left = ((e.clientX/5)-2) + "px";
????cursor.style.top = ((e.clientY/5)-2) + "px";
???}
??</script>
?</head>
?<body>
??<div class='mousemat' id='mousemat'></div>
??<div class='thumbnail' id='thumbnail'>
???<div class = 'cursor' id = 'cursor'></div>
??</div>
?</body>
</html>
2.mousemat.css
mousemat{
?background-color:#ffe0d0;
?border:solid maroon 0px;
?position:absolute;
?margin:0px;
?width:500px;
?height:500px;
?top:50px;
?left:50px;?
}
.thumbnail{
?background-color:#ffe0d0;
?border:solid maroon 0px;
?position:absolute;
?margin:0px;
?width:100px;
?height:100px;
?top:50px;
?left:600px;?
}
.cursor{
?background-color:blue;
?position:relative;
?height:5px;
?width:5px;
}
1.MyHtml.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
?<script type='text/javascript'>
??var req = null;
??var console = null;
??var READY_STATE_UNINITIALIZED = 0;
??var READY_STATE_LOADING = 1;
??var READY_STATE_LOADED = 2;
??var READY_STATE_INTERACTIVE = 3;
??var READY_STATE_COMPLETE = 4;
??
??function sendRequest(url,params,HttpMethod){
???if(!HttpMethod){
????HttpMethod = "GET";
???}
???req = initXMLHTTPRequest();
???if(req){
????req.onreadystatechange = onReadyState;
????req.open(HttpMethod,url,true);
????req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
????req.send(params);
????
???}
??}
??
??function initXMLHTTPRequest(){
???var xRequest = null;
???if(window.XMLHttpRequest){
????xRequest = new XMLHttpRequest();
???}else if(window.ActiveXObject){
????xRequest = new ActiveXObject("Microsoft.XMLHTTP");
???}
???return xRequest;
??}
??
??function onReadyState(){
???var ready = req.readyState;
???var data = null;
???if(ready==READY_STATE_COMPLETE){
????data = req.responseText;
???}else{
????data = "loading...[" + ready +"]";
???}
???toConsole(data);
??}
??
??function toConsole(data){
???if(console!=null){
????var newline = document.createElement("div");
????console.appendChild(newline);
????var txt = document.createTextNode(data);
????console.appendChild(txt);
???}
??}
??
??window.onload = function(){
???console = document.getElementById('console');
???sendRequest("data.txt");
??}
?</script>
? </head>
? ?
? <body>
? ?<DIV id ='console'></DIV>
? </body>
</html>
2.data.txt
?i'm ok!!!!!!!!
1.new_file.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
?<head>
??<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
??<title>Untitled Document</title>
??<SCRIPT type='text/javascript' src='new_file.js'></SCRIPT>
??<SCRIPT type='text/javascript'>
???window.onload = load;
??</SCRIPT>
?</head>
?<body>
??<CENTER><INPUT type='button' id='b1'></INPUT></CENTER>?
?</body>
</html>
2.new_file.js
var value = '500';
function load(){
?var domEl = document.getElementById('b1');?
?JsButton(value,domEl);
}
function JsButton(value,domEl){
?this.domEl = domEl;
?this.value = value;
?this.domEl.buttonObj = this;
?//this.domEl.onclick = function(){
??//alert(this.value);
?//}
?this.domEl.onclick = JsButton.prototype.clickHandler;
}?
JsButton.prototype.clickHandler = function(){
?//alert(this.value); 在回調(diào)函數(shù)中調(diào)用this屬性時﹐
?//得到的是對應(yīng)的DOM元素裡面的數(shù)值﹐此處為空。
?var buttonObj = this.buttonObj;
?var value =(buttonObj && buttonObj.value)? buttonObj.value:"unknown value";
?alert(value);
}
1.musical_dyn_keys.css
.musicalKeys{
?background-color:#ffe0d0;
?border:solid maroon 2px;
?position:absolute;
?overflow:auto;
?margin:4px;
}
.toplong{
?width:536px;
?height:68px;
?top:24px;
?left:24px;
}
.sidebar{
?width:100px;
?height:400px;
?top:24px;
?left:570px;
}
.musicalButton{
?border:solid navy 1px;
?width:60px;
?height:60px;
?position:relative;
?margin:2px;
?float:left;
}
.do{background-color:red;}
.re{background-color:orange;}
.mi{background-color:yellow;}
.fa{background-color:green;}
.so{background-color:blue;}
.la{background-color:indigo;}
.ti{background-color:violet;}
div.console{
?font-family:arial,helvetica;
?font-size:16px;
?color:navy;
?background-color:white;
?border:solid navy 2px;
?width:536px;
?height:320px;
?top:106px;
?left:24px;
?margin:4px;
?position:absolute;
?overflow:auto;
}
2.musical_dyn_keys.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
?<head>
??<title>Two Keyboards</title>
??<LINK rel='stylesheet' type='text/css' href='musical_dyn_keys.css'/>
??<SCRIPT type='text/javascript' src='musical_dyn_keys.js'></SCRIPT>
??<SCRIPT type='text/javascript'>
???window.onload=assignKeys
??</SCRIPT>
?</head>
?<body>
??<DIV id='keyboard-top' class='toplong musicalKeys'></DIV>
??<DIV id='keyboard-side' class='sidebar musicalKeys'></DIV>
??<DIV id='console' class='console'></DIV>
?</body>
</html>
3.musical_dyn_keys.js
var notes = new Array("do","re","mi","fa","so","la","ti","do");
function assignKeys(){
?var candidates = document.getElementsByTagName("DIV");
?if(candidates){
??for(var i=0;i<candidates.length;i++){
???var candidate = candidates[i];
???if(candidate.className.indexOf('musicalKeys')>=0){
????makeKeyboard(candidate);
???}
??}
?}
}
function makeKeyboard(el){
?for(var i=0;i<notes.length;i++){
??var key=document.createElement("DIV");
??key.className = notes[i] + " musicalButton";
??alert(key.className);
??key.note = notes[i];
??key.onclick = playNote;
??el.appendChild(key);
?}?
}
function playNote(event){
?var note = this.note;
?var console = document.getElementById('console');
?if(note && console){
??console.innerHTML +=note + ".";
?}
}
1.murical.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>??
??? <link rel='stylesheet' type='text/css' href='musical.css'>
??? <script type='text/javascript' src="musical.js"></script>
??? <script type='text/javascript'>
?? window.onload = assignKeys
??? </script>??
? </head>
?
? <body>
? ?<DIV>
? ??<DIV id='keyboard' class='musicalKeys'>
???<DIV class='do musicalButton'></DIV>
???<DIV class='re musicalButton'></DIV>
???<DIV class='mi musicalButton'></DIV>
???<DIV class='fa musicalButton'></DIV>
???<DIV class='so musicalButton'></DIV>
???<DIV class='la musicalButton'></DIV>
???<DIV class='ti musicalButton'></DIV>
???<DIV class='do musicalButton'></DIV>
??</DIV>
??<DIV id='console' class='console'></DIV>
? ?</DIV>
? </body>
</html>
2.musical.css
.body{
?background-color:white;?
}
.musicalKeys{
?background-color:#ffe0d0;
?boarder:solid maroon 2px;
?width:536px;
?height:68px;
?top:24px;
?left:24px;
?margin:4px;
?position:absolute;
?overflow:auto;
}
.musicalButton{
?border:solid navy 1px;
?width:60px;
?height:60px;
?position:relative;
?margin:2px;
?float:left;
}
.do{background-color:red;}
.re{background-color:orange;}
.mi{background-color:yellow;}
.fa{background-color:green;}
.so{background-color:blue;}
.la{background-color:indigo;}
.ti{background-color:violet;}
div.console{
?font-family:arial,helvetica;
?font-size:16px;
?color:navy;
?background-color:white;
?border:solid navy 2px;
?width:536px;
?height:320px;
?top:106px;
?left:24px;
?margin:4px;
?position:absolute;
?overflow:auto;
}
3.musical.js
function assignKeys(){
?var keyboard=document.getElementById("keyboard");
?var keys = keyboard.getElementsByTagName("DIV");
?if(keys){
??for(var i=0;i<keys.length;i++){
???var key=keys[i];
???var classes=(key.className).split(" ");
???if(classes && classes.length>=2 && classes[1]=="musicalButton"){
????var note=classes[0];
????key.note=note;
????//key.onmouseover=playNote;
????key.onclick = playNote;
???}
??}
?}
}
function playNote(event){
?var note = this.note;
?var console = document.getElementById("console");
?if(note && console){
??console.innerHTML += note + ".";
?}
}
MyHtml.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
? <script type="text/javascript" src="prototype.js"></script>
? <script type="text/javascript" src="rico.js"></script>
? <script type='text/javascript'>
???? function accordion(){
?? var outer = $('myAccordion');
?? outer.style.width = '320px';??
??new Rico.Accordion(
???outer,
???{panelHeight:400,
??? expandedBg:'#909090',
??? collapsedBg:'#404040'
???}
??);
? }
??? window.onload = accordion?
? </script>
? </head>
? <body>
?? <div id='myAccordion'>
?? ?<div>
?? ??<div>first title</div>
?? ??<div>first!!!!!</div>
?? ?</div>
?? ?<div>
?? ??<div>second title</div>
?? ??<div>second!!!!!</div>
?? ?</div>
?? </div>??
? </body>
</html>