ブートストラップがUiコンポジションタグで動作しないJSF

私はNavbarをすべてのページに含めたいと思っていますが、navbarのコードをbootstrapより内側に書き込むと問題が発生します。このタグがなければ、すべてうまく動作しています。ブートストラップがUiコンポジションタグで動作しないJSF

の作業コード

<?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en"> 
<h:head> 


    <title>JSF 2.x Page</title> 
    <meta http-equiv="keywords" content="enter,your,keywords,here" /> 
    <meta http-equiv="description" 
     content="A short description of this page." /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

    <h:outputStylesheet library="css" name="black.css" /> 
    <h:outputStylesheet library="css" name="bootstrap.css" /> 

    <h:outputScript library="js" name="bootstrap.js" /> 
    <h:outputScript library="js" name="bootstrap.min.js" /> 

</h:head> 
<h:body> 

     <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">My Task</a> 
      </div> 

      <button class="btn btn-success navbar-btn">Projects</button> 
      <button class="btn btn-success navbar-btn">Objects</button> 
      <button class="btn btn-success navbar-btn">Properties</button> 
      <button class="btn btn-success navbar-btn">Property Types</button> 

     </div> 
     </nav> 

</h:body> 
</html>

しかしui:compositionで、ブートストラップは

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en"> 
<h:head> 
    <title>JSF 2.x Page</title> 
    <meta http-equiv="keywords" content="enter,your,keywords,here" /> 
    <meta http-equiv="description" 
     content="A short description of this page." /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

    <h:outputStylesheet library="css" name="black.css" /> 
    <h:outputStylesheet library="css" name="bootstrap.css" /> 

    <h:outputScript library="js" name="bootstrap.js" /> 
    <h:outputScript library="js" name="bootstrap.min.js" /> 

</h:head> 
<h:body> 
<ui:composition> 
     <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">My Task</a> 
      </div> 

      <button class="btn btn-success navbar-btn">Projects</button> 
      <button class="btn btn-success navbar-btn">Objects</button> 
      <button class="btn btn-success navbar-btn">Properties</button> 
      <button class="btn btn-success navbar-btn">Property Types</button> 

     </div> 
     </nav> 
</ui:composition> 

</h:body> 
</html>

出典

2016-12-01 Muhammad Yawar

外部からの授業は無視されていますか？テンプレートを使用してそこにブートストラップを入れてみませんか？ここを参照してください：http://stackoverflow.com/questions/6525050/understand-the-purpose-of-jsf-uicomposition – Tim

すべてがコンポジションタグの内側または外側で無視されます –

本当に質問ではありませんでした - タグは無視されます。したがって、boostrapとあなたの構成の両方を含むテンプレートを使用する私の提案 – Tim

UIを動作していない：合成タグは、その「テンプレート」を経由して、テンプレートを参照するために使用される属性のように：

<ui:composition template="template.xhtml">

テンプレートはjuあなたは<ui:define>タグを使ってテンプレートを使ってファイルから参照できるname属性を持つ1つまたは複数の<ui:insert> タグを含む通常のfacesファイルを作成します。たとえばあなたのテンプレートが含まれている場合：

<ui:insert name="top">

が好きなあなたは<ui:composition>タグ内に別のファイルからそれを参照することができるより：結果のHTMLのみ<ui:define>テンプレートから作成したものになります

<ui:define name="top">

あなたの<ui:insert>タグで生成されたhtmlの部分に置き換えられます... テンプレートなしでは、適切なHTMLは作成されません。

出典

2016-12-01 12:10:36

ブートストラップがUiコンポジションタグで動作しないJSF

答えて

関連する問題