いいね!数

2

閲覧数
305

XPagesでボタンコントロールを配置した際、ラベルのフォントサイズを変更しました。

最初はプロパティでフォントサイズを指定したのですが、その後その内容をスタイルシートにエクスポートして、スタイルクラスを割り当てました。

すると、Webブラウザでプレビューした際に、ボタンのサイズが異なって表示されました。

気になったので、テスト用のDBにボタンを3つ配置して比較してみました。

 

一番左:スタイル設定なし(デフォルトの状態)

真ん中:ボタンコントロールのプロパティでフォントサイズを直接指定

一番右:スタイルシートを作成して、そのクラスをボタンコントロールに割り当てた

下図が結果です。

よく見ると、フォントのサイズそのものは同じ16ptなのですが、色が違っているのと、ボタンのサイズ(高さ)が異なっています。

 

これはこういうものなのでしょうか?

※ボタンの上下に余裕がある方が好きなので、今はフォントサイズを直接指定する(真ん中のやり方)ようにしています。

 色が変わってしまうので、そこは黒色を明示的に指定して回避してます。

 

ソースはこちら。

-------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
        <xp:styleSheet href="/ssButtonTest.css"></xp:styleSheet>
    </xp:this.resources>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:button value="ボタン(スタイル設定なし)" id="button1"></xp:button>
    <xp:button value="ボタン(スタイル設定:16pt)" id="button2" style="font-size:16pt">
    </xp:button>
    <xp:button value="ボタン(スタイルクラス使用:16pt)" id="button3"
        styleClass="btnFont">
    </xp:button>
</xp:view>
 

で、ssButton.cssの内容はこちら。

.btnFont {
    font-size:16pt
}

サーバー情報: | クライアント情報: | 
カテゴリ:アプリ開発 - XPages | タグ:
  | 質問日時:2014/08/08 14:30:18

回答・コメント

いいね!数

1

XPage の標準のボタンコントロールにはデフォルトで xspButtonCommand というスタイルクラスがつくようになっています。
このスタイルクラスの中で実は padding が指定されています。

3番目のスタイルクラスを使用した場合は、このスタイルクラスに「追加」するのではなく、「上書き」をします。
つまり、もともとついていた xspButtonCommand というスタイルクラスが、指定された btnFont というスタイルクラスに置き換わってしまうので、xspButtonCommand に指定された padding などの属性がなくなってしまい、上下の余白が少なくなってしまったというわけです。

2番目のスタイルを使用した場合のようにデフォルトの xspButtonCommand にスタイルを追加したような動きにするためには、以下のようにスタイルクラスに "xspButtonCommand btnFont" と両方指定すると、両方のスタイルクラスで指定したスタイルが適用されるようになります。

    <xp:button value="ボタン(スタイルクラス使用:16pt)" id="button3"
        styleClass="xspButtonCommand btnFont">
    </xp:button>

※ XPage のテーマの css よりも btnFont スタイルクラスを定義した ssButton.css ファイルが後に読まれている必要があります。読み込み順に依存しないようにするには、ssButton.css での定義を .xspButtonCommand.btnFont のように指定する必要があります。

 

ちなみに、ボタンなど XPage の標準のコントロールについているデフォルトのスタイルクラスは、『Mastering XPages』 という書籍にまとめられているようです。

http://books.google.co.jp/books?id=6DNjAwAAQBAJ&pg=PA1083&lpg=PA1083&dq=xspButtonCommand&source=bl&ots=iZhtYKhBPZ&sig=yd4oqwFYv0mqV-cmyKzAgDDM4NQ&hl=ja&sa=X&ei=I4zkU6SKCc668gX2rICoDQ&ved=0CEUQ6AEwBQ#v=onepage&q=xspButtonCommand&f=false

ボタンでも、タイプが「Submit」や「Cancel」になっている場合は、デフォルトのスタイルクラスがそれぞれ xspButtonSubmit, xspButtonCancel になりますのでご注意ください。

回答日時:2014/08/08 23:30:20

いいね!数

0

onoatさん、丁寧な解説ありがとうございます。

ご教授されたようにしたところ、うまくできました。

 

 

「Mastering XPages」は持っているのですが、翻訳しながらなので、ほとんど読めてません。

頑張って読むようにします・・・

回答日時:2014/08/11 8:57:05