OneUIのテスト(4)
テスト(3)で失敗した、レッドテーマの表示にトライしたいと思います。
◆そもそも、IBMさんのサンプルページで、「デフォルト」および「レッド」がどのような表示か再確認しました。
IBM Lotus User Interface Developer Documentation の Example Pagesの 「3 columns, summary view」
このページの右上にテーマ(theme)があり、色を変更できます。
そして 左上のOpen example in new window をクリックすると、サンプルページを新しいウインドウで参照することが出来ます。
・サンプルページのバックグラウンドカラー確認結果
グラデーションがかかった青が、デフォルトと思っていましたが、違ってました。 サンプルページでは、デフォルトテーマはモノトーンの「水色」でした。 レッドテーマは、画像を使った「茶色」でした。
◆では、サンプルページで使われているCSSとID、クラス名を確認してみます。
CSSファイル名はほぼ同じでした
・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
ID、クラス名ですが、ID名は使われておらず、クラス名だけでした。
クラス名は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" に変更する方法は... 1)ページのプロパティ内「すべてのプロパティ」の「スタイル -styleClass」の値に「lotusui」を指定する。 デフォルト値に追加して「lotusui」の値が class に設定さる。 <body class="loutsui xspView tundra"> 2)ページのプロパティ内「すべてのプロパティ」の「スタイル -styleClass」の値に「lotusui」を指定する。 そして、「スタイル - styleClass」欄右の「外部プロパティエディタを起動する」ボタンをクリックし、 表示されたダイアログより「実行時に適用したデフォルトのスタイルを無効化」をチェックする。 デフォルトの値が除外され、下記の値となる。 <body class="loutsui">