リストの利用いろいろ

CSS

リストって使い方次第で見た目がだいぶ変わるんですね、と。

htmlソース。とてもシンプルに。
/index.html

<body>
<div id="hoge" >
<h5>CSSテスト用ページ</h5>
<ul>
<li><a href="/kensyuCSS/index.html" id="current">ホーム</a></li>
<li><a href="">えいご</a></li>
<li><a href="">こくご</a></li>
<li><a href="">すうがく</a></li>
<li><a href="">せいぶつ</a></li>
<li><a href="">にほんし</a></li>
<li><a href="">せかいし</a></li>
</ul>
</div>
</body>

で、ロールオーバー効果をCSSのみで実現するのは↓

#hoge h5{
    display: none;
}
#hoge {
    font-size: 0.7em;
    font-weight: bold;
    width: 12em;
    border-right: 1px solid #666;
    padding: 0 0 0 0;
    margin-bottom: 1em;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#hoge ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#hoge ul li {
    margin: 0;
    border-top: 1px solid #003;
}
/* 本ではa:linkだが、Firefoxでは無効になるためaにして回避 */
#hoge ul li a {
    display: block;
    padding: 2px 2px 2px 0.5em;
    border-left: 10px solid #369;
    border-right: 1px solid #69c;
    border-bottom: 1px solid #369;
    background-color: #003366;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
}
html>body #navsite ul li a{
    width: auto;
}
#hoge ul li a:hover {
    border-left: 10px solid #036;
    border-right: 1px solid #69c;
    border-bottom: 1px solid #369;
    background-color: #69f;
    color: #fff;
}

↓こんな感じになる。

SS撮ったらポインタ消えたけど、「せいぶつ」にポインタのっけてます。

同じリストをタブっぽくするのも出来る。

#hoge h5 {
	display: none;
}
#hoge ul {
	padding: 3px 0;
	margin-left: 0;
	border-bottom: 1px solid #669;
	font: bold 12px Verdana, sans-seri;
}
#hoge ul li {
    list-style:  none;
    margin: 0;
    display: inline;
}
#hoge ul li a {
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 1px solid #669;
	border-bottom: none;
	background: #ccf;
	text-decoration: none;
}
#hoge ul li a:link {
	color: #339;
}
#hoge ul li a:visited{
	color: #666;
}
#hoge ul li a:link:hover, #tub ul li a:visited:hover {
	color: #000;
	background: #AAE;
	border-color: #336;
}
#hoge ul li a#current {
	background: white;
	border-bottom: 1px solid white;
}

こちらは↓こーなる。

両方ともCSSだけで実現できちゃうもんとは思ってなかった…。
元ネタは

CSSクックブック ―Webデザインのための活用テクニック集

CSSクックブック ―Webデザインのための活用テクニック集

他にも試してみよぅ。

HatenaNotationConverter(勝手に命名)

JSF 正規表現

JAVAで正規表現を使う方法はjava.util.regexをimportするか
org.apache.oro.text.perlをimportする２種類あるらしー。
今回はperlの正規表現にも慣れておこうと後者で実装。
入力してある文章を表示させるときに噛ませたいだけなので
getAsObject()は放置(こっちは入力時のConverter)して
getAsString()のみいぢくることに。
まずはスーパープレ記法にちゃれんじ。
一番悩んだのが正規表現でmatchした文字列の中のさらに特定の字を指定すること。
とりあえずはこんな風にしてみた。

public String getAsString(FacesContext context, UIComponent component,
			Object value) throws ConverterException {
		String entryBody = (String) value;
		Perl5Util reg = new Perl5Util();
		while (reg.match("/>\\|\\|([^\\|]*)\\|\\|</s", entryBody)) {
			MatchResult mr = reg.getMatch();
			String pre = reg.preMatch();
			String post = reg.postMatch();
			String superPre = mr.group(0);
			superPre = reg.substitute("s/</&lt;/g", superPre);
			superPre = reg.substitute("s/\"/&quot;/g", superPre);
			superPre = reg.substitute("s/>/&gt;/g", superPre);
			superPre = reg.substitute("s/&gt;\\|\\|/<pre class='superPre'>/g", superPre);
			superPre = reg.substitute("s/\\|\\|&lt;/<\\/pre>/g", superPre);
			entryBody = pre + superPre + post;
		}
}

>||〜||<の中の「<」と「>」を指定したかったわけですが、コレ一文づつじゃ無理なのかなあ。
次の課題はリスト記法だ…。

focus()

JavaScript

ログイン画面に来たときに、
最初からカーソルがテキストボックスにあるようにしたいなーと思い。
師匠に相談したらJavaScriptだねってことで手を染めてみることに。
しかし
onLoad="document.formName.fieldName.focus()"
とゆーのが簡単にいかないのがJSF…。
なぜならテキストボックスのid属性、name属性が固定じゃないから。
そこで
document.forms[0].elements[0].focus();
とするがなぜかエラーになる。
一番上に配置してるのにおかしー。
ここでFireFox様の「ページの情報を表示」とゆー機能がとっても便利だと気づく。

これを見ると自分で書いた覚えのないhiddenが配置されていることに。
document.forms[0].elements[3].focus();
で無事カーソル初期位置設定できましたー。
このhiddenはどこから来た子なんだろう？

dataScrollerの複数使用

JSF

メインになるテーブルの上下にスクローラがあるってのは
よく見るものなので試してみました。
ひとつのページで配置する分には

<t:dataScroller for="entry" />
<t:dataTable id="entry" />
<t:dataScroller for="entry" />

超簡略化してみました。
で問題なく挙動するんですよ。
しかーしこれにページ遷移を絡めると、
上のスクローラだけ動きがオカシイ。
直前に表示していたtableのrowCountが引き継がれてしまうよーで。
遷移の時に明示的にrowCountをいじってやってもJSF側のどこかで保持してるらしい？
binding設定すると上だけ消えるとかも、よくわかりません…。
で、結局。

<t:dataTable id="entry" />
<t:dataScroller for="entry" />
<t:dataScroller for="entry" />

として、片方のスクローラをCSSで無理やり上にもってく！
とゆーあんまりな方法になりましたとさ。
あんまりいい方法じゃないとは自分でも思うんですがー。