xmlの多くの利点にもかかわらず、落ちるreadability円不満である。
業務上xmlをよく触るみるとxml内の情報を簡単に見られるツールが切実たし、それで以前にjavaで作成されたTreeViewの形のXmlViewerも作った。
今回はxlstで作った、思ったよりすっきりしてい気に入る。
TreeViewのフォームより簡単に、包含関係を表現する。
最初、elementとattributeをいちいち指定してxsltを作成してみると1000行を超えて立った。
だから、ほとんど90％完成した時点で、最初から再起動してelementとattributeの名前を指定しない形に変えたところcss、javascriptを含めて120行ほどで終えることができるだけでなく、特定のdtd / schemaのxmlだけでなく、汎用XMLViewerに使用できんになった。
作ってみるとポハムグァンギェマン表示するシンプルなビューは、すべての情報を漏れなく示すビューを表現するためにjavascriptを使用したwebで見つけたコードをベースにした
原理は、非表示にしたり、ボヨジル領域を<div class = "ClassName">にソルジョンハンドィそのclassを持つelementを回りながら処理するルーチンであった。
問題は、Cスタイルのforルプムン
BLOCK;
}
この私が主に使用しているブラウザsafariで回らなかった。
だから、
BLOCK;
}
形に変えて、ブラウザ依存性を削除して、
包含関係を色で表現するためにCSSで
: #6666ff ; } div {background：＃6666ff;}
background : #7777ff ; } div> div {background：＃7777ff;}
div { background : #8888ff ; } div> div> div {background：＃8888ff;}
形にできた。
私javascript / CSSの方はほぼ門外漢だからこれが最適なコードなのかはわからないが、私が最初に意図した機能や目的は、すべて動作して気に入る。
そして今まで
はselectで子elementを指定してこそドゥェヌンジュル思ったが、
ただapply-templates万取り上げてくれたら分かって子elementを分かって歌ってくれる...（今日の初めに了解^ ^ ;)
Simple View
Complex View
xmlns:xsl = 'http://www.w3.org/1999/XSL/Transform' > <xsl:stylesheet version = '2.0' xmlns:xsl ='http://www.w3.org/1999/XSL/Transform'>
> <xsl:template match = "/">
<html>
<head>
<title> XML Viewer </ title>
> <style type = "text/css">
div.element {
float：left;
display：block;
padding：1em;
border：solid 1px black;
margin：1em;
}
/ *
elementの名前とattrをheader-areaで包む理由
attrの横にサブelementがブトヌンゲ見たくなくて...
正解は、overflow：auto;
* /
div.header-area {
overflow：auto;
background：none;
}
div.attr {
float：left;
margin-right：2em;
background：none;
}
i.att_name {color：＃333333}
i.att_value {color：＃666666}
/ *
nested elemementを異なる色で表示する
これが一番良い方法なのかは分からないが...
* /
* {background：none;}
div {background：＃6666ff;}
div> div {background：＃7777ff;}
div> div> div {background：＃8888ff;}
div> div> div> div {background：＃9999ff;}
div> div> div> div> div {background：＃aaaaff;}
div> div> div> div> div> div {background：＃bbbbff;}
div> div> div> div> div> div> div {background：＃ccccff;}
div> div> div> div> div> div> div> div {background：＃ddddff;}
div> div> div> div> div> div> div> div> div {background：＃eeeeff;}
div> div> div> div> div> div> div> div> div> div {background：＃ffffff;}
</ style>
language = "JavaScript" > <script type = "text/javascript" language = "JavaScript">
function toggle（obj）{
if（obj.style.display！= "block"）
obj.style.display = "block";
else
obj.style.display = "none";
}
function toggle_all_attr（）{
var divs = document.getElementsByTagName（ 'div'）;
var tcl = "attr";
for（var i in divs）{
var test = "" + divs [i]。className + "";
if（test.indexOf（tcl）！= -1）{
toggle（divs [i]）;
}
}
}
</ script>
</ head>
<body>
onclick = "toggle_all_attr()" > simple/complex </a > </h2 > <h2> <a href = "#" onclick = "toggle_all_attr()"> simple / complex </ a> </ h2>
<xsl:apply-templates />
</ body>
</ html>
</ xsl：template>
<！ - elementの処理- >
> <xsl:template match = "*">
> <div class = "element">
<！ -本人のattr処理して- >
> <div class = "header-area">
/> </h3 > <h3> <xsl:value-of select = "name(.)" /> </ h3>
/> <xsl:apply-templates select = "@*" />
</ div>
<！ - sub elementの処理... - >
<xsl:apply-templates />
</ div>
</ xsl：template>
<！ - attribute処理- >
> <xsl:template match = "@*">
> <div class = "attr">
> <xsl:value-of select = "name(.)" /> </i > <br /> <i class = "att_name"> <xsl:value-of select = "name(.)" /> </ i> <br />
> <xsl:value-of select = "." /> </i > <i class = "att_value"> <xsl:value-of select = "." /> </ i>
</ div>
</ xsl：template>
</ xsl：stylesheet>
