OneUIのテスト（４）
テスト（３）で失敗した、レッドテーマの表示にトライしたいと思います。
◆そもそも、IBMさんのサンプルページで、「デフォルト」および「レッド」がどのような表示か再確認しました。
IBM Lotus User Interface Developer Documentation の Example Pagesの 「3 columns, summary view」
このページの右上にテーマ（theme）があり、色を変更できます。
そして 左上のOpen example in new window をクリックすると、サンプルページを新しいウインドウで参照することが出来ます。
・サンプルページのバックグラウンドカラー確認結果
グラデーションがかかった青が、デフォルトと思っていましたが、違ってました。 サンプルページでは、デフォルトテーマはモノトーンの「水色」でした。 レッドテーマは、画像を使った「茶色」でした。
? 
◆では、サンプルページで使われているＣＳＳとＩＤ、クラス名を確認してみます。
ＣＳＳファイル名はほぼ同じでした
・defaultTheme
../../css/base/core.css ../../css/defaultTheme/defaultTheme.css ../../css/base/framework/prototype.css ../../css/defaultTheme/framework/prototypeTheme.css
・redTheme
../../css/base/core.css ../../css/redTheme/redTheme.css ../../css/base/framework/prototype.css ../../css/defaultTheme/framework/prototypeTheme.css
ＩＤ、クラス名ですが、ＩＤ名は使われておらず、クラス名だけでした。
クラス名はlotusxxxxの形式が使われています。
バックグラウンドカラーの指定は、どうやらbodyタグに指定されたlotusuiクラスで行われているようです。
・defaultTheme
<body class="lotusui lotusSpritesOn"> background:#cee1fc <div class="lotusFrame"> <div class="lotusBanner" role="banner"> <div class="lotusTitleBar"> <div class="lotusMain"> <div class="lotusFooter"> <table class="lotusLegal" role="presentation" cellSpacing="0">
・redTheme
<body class="lotusui lotusSpritesOn"> background:url(themeImages/pageBackground.png) #eae1c8 <div class="lotusFrame"> <div class="lotusBanner" role="banner"> <div class="lotusTitleBar"> <div class="lotusMain"> <div class="lotusFooter"> <table class="lotusLegal" role="presentation" cellSpacing="0">
◆サンプルページのまとめ
サンプルページのような、バックグラウンドカラーを表示させるためには、bodyタグにlotusuiクラスを指定してやればよい。
◆では、XPageでテストしてみます
新規にラベルとボタンだけのXPageを作成しました。
ソースは以下の通りです
<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> ?テストです。<xp:br></xp:br><xp:br></xp:br> ?<xp:button id="button1" value="テストボタン"></xp:button> ?<xp:br></xp:br> ?</xp:view>
うーん、bodyタグが無い。
なんで、XMLなの？
XMLをどこかでHTMLに変換してるのか?
◆いったんテーマ指定なしで、ブラウザで表示しHTMLを確認してみました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title></title>
<script type="text/javascript" src="/domjs/dojo-1.3.2/dojo/dojo.js" djConfig="locale: 'ja'"></script>
<script type="text/javascript" src="/domjs/dojo-1.3.2/ibm/xsp/widget/layout/xspClientDojo.js"></script>
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xsp.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspLTR.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspIE78.css">
</head>
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/testdb/test1.nsf/test.xsp" class="xspForm" enctype="multipart/form-data">
テストです。<br>
<br>
<button id="view:_id1:button1" class="xspButtonCommand" type="button" name="view:_id1:button1">テストボタン</button><br>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!cmodgdycox!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1">
<script type="text/javascript">
function clearFormHiddenParams_view__id1(curFormName) {
var curForm = document.forms[curFormName];
}</script>
</form>
</body>
</html>
bodyタグになにやら、xspViewというクラスが指定されてます。
どうしたらこのクラスをlotusuiに変更出来るのだろう？
テーマを指定すると変わるのかな？
◆デフォルトテーマを設定してHTMLを確認してみました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title></title>
<script type="text/javascript" src="/domjs/dojo-1.3.2/dojo/dojo.js" djConfig="locale: 'ja'"></script>
<script type="text/javascript" src="/domjs/dojo-1.3.2/ibm/xsp/widget/layout/xspClientDojo.js"></script>
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/core.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/coreLTR.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/defaultTheme.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/defaultThemeLTR.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xsp.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xspLTR.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/oneui/xspIE78.css">
<link rel="stylesheet" type="text/css" href="/oneuiv2/base/core.css">
<link rel="stylesheet" type="text/css" href="/oneuiv2/defaulTheme/defaulTheme.css">
</head>
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/testdb/test1.nsf/test.xsp" class="lotusForm" enctype="multipart/form-data">
テストです。<br>
<br>
<button id="view:_id1:button1" class="lotusFormButton" type="button" name="view:_id1:button1">テストボタン</button><br>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!cmodnojckd!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1">
<script type="text/javascript">
function clearFormHiddenParams_view__id1(curFormName) {
var curForm = document.forms[curFormName];
}</script>
</form>
</body>
</html>
またもやbodyタグにxspViewクラスが指定されています。
デザイナーのどこかに、bodyタグにxspViewクラスを指定する設定が有るのだろうけど、
どこかわからない。
◆IBMさんに変更方法を確認してみた。
Xpagesにてクラスが勝手に指定されてしまうので、直接指定する方法は無いか？ で、．．．
XPages では<Body>タグの値がデフォルトでは下記のような値となる <body class="xspView tundra"> 上記の class= の値を "lotusui" に変更する方法は．．． １）ページのプロパティ内「すべてのプロパティ」の「スタイル -styleClass」の値に「lotusui」を指定する。 デフォルト値に追加して「lotusui」の値が class に設定さる。 <body class="loutsui xspView tundra"> ２）ページのプロパティ内「すべてのプロパティ」の「スタイル -styleClass」の値に「lotusui」を指定する。 そして、「スタイル - styleClass」欄右の「外部プロパティエディタを起動する」ボタンをクリックし、 表示されたダイアログより「実行時に適用したデフォルトのスタイルを無効化」をチェックする。 デフォルトの値が除外され、下記の値となる。 <body class="loutsui">
