私のアンケートに反応する

Question

私はxPagesをしばらくプログラムしましたが、これはBootstrapを使用してxPageを反応させるのは初めてのことです。

私は、Domino 9.0.1およびExtLibリリース9.0.1（20160428）でブートストラップ4を使用しています。私のxPageには3つのテーブルを持つアプリケーションレイアウトを含むカスタムコントロールがあり、そのうちの1つに4つのカラムがあります（これは応答する必要があります）。

私のxPageは反応しません。理由はわかりません。 1.アプリケーションレイアウトの設定がのレスポンシブブートストラップ設定で、私のアプリケーションテーマがの場合ブートストラップ4はそれほど私ではありません。すべてのサイトでドキュメントやその他の質問を見てきました。必要？
2.私はstyleClass = "テーブル応答"を各テーブルを囲むdivに入れてみました。メディアクエリも使用する必要がありますか？もしそうなら、なぜブートストラップ構成は「応答性」と呼ばれますか？ここで

は私のXSPのプロパティにあるものである：

xsp.ajax.renderwholetree=false 
xsp.client.script.radioCheckbox.ie.onchange.trigger=early-onclick 
xsp.persistence.mode=fileex 
xsp.resources.aggregate=true 
xsp.theme=Bootstrap4 
xsp.error.page.default=true 
xsp.library.depends=com.ibm.xsp.extlib.library,com.ibm.xsp.extlibx.library 
org.openntf.domino.xsp=godmode,marcel,khan,bubbleExceptions 
xsp.min.version=9.0.1 
xsp.compress.mode=gzip-nolength 
xsp.html.page.encoding=utf-8 
xsp.html.doctype=html 
xsp.html.meta.contenttype=true 

そして、ここでは私のカスタムコントロールに何の一部（マイナス4でカラムテーブル内のラベルとフィールド）である：

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view 
    xmlns:xp="http://www.ibm.com/xsp/core" 
    xmlns:xe="http://www.ibm.com/xsp/coreex" 
    > 
    <xp:this.data> 
     <xp:dominoDocument 
      var="document1" 
      formName="ApplicationForm"> 
     </xp:dominoDocument> 
    </xp:this.data> 
     <div class="table-responsive"> 
    <xp:table 
     border="3" 
     cellspacing="0" 
     cellpadding="0"> 
     <xp:tr> 
      <xp:td> 
       <xe:applicationLayout id="applicationLayout1"> 
        <xe:this.configuration> 
         <xe:bootstrapResponsiveConfiguration 
          banner="false" 
          legal="false"> 
         </xe:bootstrapResponsiveConfiguration> 
        </xe:this.configuration> 
        <xp:this.facets> 
         <xp:div 
          xp:key="MastHeader" 
          align="center" 
          styleClass="table-responsive"> 
          <xp:table 
           border="0" 
           cellspacing="0" 
           cellpadding="0" 
           styleClass="table-responsive"> 
           <xp:tr> 
            <xp:td> 

BLA BLA BLA

<xp:div 
    align="center" 
    styleClass="table-responsive"> 
    <xp:table 
    border="0" 
    cellspacing="0" 
    cellpadding="0"> 
     <xp:tr> 
     <xp:td> 
      <xp:div xp:key="Questionnaire"> 
      <div class="table-responsive"> 
       <xp:callback 
        facetName="facet_1" 
        id="callback1"> 
       </xp:callback> 
        <xp:table 
         border="0" 
         cellspacing="0" 
         cellpadding="0" 
         styleClass="table"> 
        <xp:tr> 
         <xp:td style="width:10%">        
         </xp:td> 
         <xp:td style="width:40.0%">   
         </xp:td> 
         <xp:td style="width:10%"> 
         </xp:td> 
         <xp:td>     
         </xp:td> 
         </xp:tr> 
        </xp:table> 
       </div> 
      </xp:div> 
     </xp:panel> 
    </xe:applicationLayout> 
     </xp:td> 
     </xp:tr> 
    </xp:table> 
    </div> 
</xp:view> 

いずれの説明も大歓迎です。

Answer 1

Aquilaが述べたように、テーブルのスタイルも変更する必要があります。

私は常に行のdivも追加しますが、それが重要かどうかはわかりません。 applicationlayout自体は応答しますが、行、列（またはBS 4が使用するもの）などのすべてのcssとhtmlを指定する必要があります。

私は通常appLayoutを使用しません。ナビゲーションバーはうまく機能します。適切なhtmlとcssを学び、適切なブートストラップページに必要なものがページに出力されていることを確認してください。

Answer 2

ExtLib 17がブートストラップ4用に設計されているかどうかわかりません。9.0.1 FP8（ExtLib 17に相当）は、Bootstrap 3.3.7のみを提供します。ブートストラップはスタイリングだけではなく、HTMLレイアウトでもあるため、異なるHTMLを出力するために、異なるレンダラーが必要な場合があるため、CSSを適用しても正しく動作しない場合があります。

Answer 3

ブートストラップスタイリングなどを使用する既存のテーブルをすべて変更するのではなく、テーマに何かを設定できます。たとえば、私はすべてのテーブルに行のホバー/背景色の変更を使用させるために以下を使用します。

<control> 
    <name>DataTable.ViewPanel</name> 
    <property> 
     <name>dataTableStyleClass</name> 
     <value>table table-hover</value> 
    </property> 
</control>