부트 스트랩으로 행 반복하기

Question

bootstrap custom content component으로 잘 플레이되도록 사이트를 포맷하려고합니다. 문제는 XML이 구문 분석되고 있으며 내 div 태그를 닫지 않았다는 사실을 좋아하지 않는다는 것입니다. 이것은 내 그룹에 3의 배수가 있다고 가정합니다.

코드 (내 전체 코드로 업데이트) :

<ui:repeat var="crs" value="#{groups.getGroupRows(true)}" varStatus="status"> 

        <c:if test="${(status.index mod 3) == 0}"> 
         <div class="row"> 
        </c:if> 

        <div class="col-sm-6 col-md-4"> 
         <div class="thumbnail"> 
          <ui:repeat value="#{crs.getObject('imageFiles').files}" var="image"> 
           <h:link outcome="viewClassesInGroup" id="group_name" styleClass="thumbnail"> 
            <f:param name="group_id" id="group_id" value="#{crs.getInteger('group_id')}"/> 
            <img src="#{image.imageAbsoluteUrl('large')}" data-src="holder.js/300x200" /> 
           </h:link> 
          </ui:repeat> 
          <div class="caption"> 
           <h3><h:link outcome="viewClassesInGroup" id="group_name" value="#{crs.string}"> 
             <f:param name="group_id" id="group_id" value="#{crs.getInteger('group_id')}"/> 
            </h:link></h3> 
           <p><h:outputText id="group_description" value="#{crs.string}"/></p> 
           <p><a href="#" class="btn btn-primary" role="button">View Group</a></p> 
          </div> 
         </div> 
        </div> 

        <c:if test="${(status.index mod 3) == 0}"> 
         </div> 
        </c:if> 

       </ui:repeat> 

오류 :의

SEVERE: Servlet.service() for servlet [Faces Servlet] in context with path [] threw exception [Error Parsing /index.xhtml: Error Traced[line: 31] The element type "div" must be terminated by the matching end-tag "</div>".] with root cause 
javax.faces.view.facelets.FaceletException: Error Parsing /index.xhtml: Error Traced[line: 31] The element type "div" must be terminated by the matching end-tag "</div>". 
    at com.sun.faces.facelets.compiler.SAXCompiler.doCompile(SAXCompiler.java:450) 
    at com.sun.faces.facelets.compiler.SAXCompiler.doMetadataCompile(SAXCompiler.java:433) 
    at com.sun.faces.facelets.compiler.Compiler.metadataCompile(Compiler.java:130) 
    at com.sun.faces.facelets.impl.DefaultFaceletFactory.createMetadataFacelet(DefaultFaceletFactory.java:495) 
    at com.sun.faces.facelets.impl.DefaultFaceletFactory.access$200(DefaultFaceletFactory.java:106) 
    at com.sun.faces.facelets.impl.DefaultFaceletFactory$2.newInstance(DefaultFaceletFactory.java:205) 
    at com.sun.faces.facelets.impl.DefaultFaceletFactory$2.newInstance(DefaultFaceletFactory.java:203) 
    at com.sun.faces.facelets.impl.DefaultFaceletCache$2.newInstance(DefaultFaceletCache.java:97) 
    at com.sun.faces.facelets.impl.DefaultFaceletCache$2.newInstance(DefaultFaceletCache.java:92) 
    at com.sun.faces.util.ExpiringConcurrentCache$1.call(ExpiringConcurrentCache.java:99) 
    at java.util.concurrent.FutureTask.run(FutureTask.java:262) 
    at com.sun.faces.util.ExpiringConcurrentCache.get(ExpiringConcurrentCache.java:114) 
    at com.sun.faces.facelets.impl.DefaultFaceletCache.getViewMetadataFacelet(DefaultFaceletCache.java:146) 
    at com.sun.faces.facelets.impl.DefaultFaceletCache.getViewMetadataFacelet(DefaultFaceletCache.java:63) 
    at com.sun.faces.facelets.impl.DefaultFaceletFactory.getMetadataFacelet(DefaultFaceletFactory.java:316) 
    at com.sun.faces.facelets.impl.DefaultFaceletFactory.getMetadataFacelet(DefaultFaceletFactory.java:246) 
    at com.sun.faces.application.view.ViewMetadataImpl.createMetadataView(ViewMetadataImpl.java:113) 
    at com.sun.faces.lifecycle.RestoreViewPhase.execute(RestoreViewPhase.java:241) 
    at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101) 
    at com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:121) 
    at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:198) 
    at javax.faces.webapp.FacesServlet.service(FacesServlet.java:646) 
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:303) 
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208) 
    at org.primefaces.webapp.filter.FileUploadFilter.doFilter(FileUploadFilter.java:70) 
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241) 
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208) 
    at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52) 
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241) 
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208) 
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:220) 
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:122) 
    at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:501) 
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:170) 
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:98) 
    at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:950) 
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:116) 
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:408) 
    at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1040) 
    at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:607) 
    at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:313) 
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145) 
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615) 
    at java.lang.Thread.run(Thread.java:744) 

내가 식과 일치하는 시도

업데이트뿐만 아니라 스위칭 장소 테스트. 그것은 여전히 ​​javax.faces.view.facelets.FaceletException을 던지고 있습니다 : Error Parsing /index.xhtml

Answer 1

I가 전환 용액 루프 이중 사용 4 열 대신 3

<c:forEach var="i" begin="1" end="#{(groups.getGroupRows(true).size()/4) +(1-((groups.getGroupRows(true).size()/4) %1))%1}"> 
        <div class="row"> 
         <c:forEach var="x" begin="${((i - 1) * 4)}" end="${(((i - 1) * 4) + 3)}"> 
          <c:if test="${(groups.getGroupRows(true).size() - 1) ge x}"> 
           <div class="col-sm-4 col-md-3"> 
            <div class="thumbnail"> 
             <ui:repeat value="#{groups.getGroupRows(true).get(x).getObject('imageFiles').files}" var="image"> 
              <h:link outcome="viewClassesInGroup" id="group_name"> 
               <f:param name="group_id" value="#{groups.getGroupRows(true).get(x).getInteger('group_id')}"/> 
               <img src="#{image.imageAbsoluteUrl('large')}"/> 
              </h:link> 
             </ui:repeat> 
             <div class="caption"> 
              <h3><h:link outcome="viewClassesInGroup" value="#{groups.getGroupRows(true).get(x).getString('group_name')}"> 
                <f:param name="group_id" value="#{groups.getGroupRows(true).get(x).getInteger('group_id')}"/> 
               </h:link></h3> 
              <p><h:outputText value="#{groups.getGroupRows(true).get(x).getString('group_description')}"/></p> 
              <p><h:link outcome="viewClassesInGroup" styleClass="btn btn-primary" p:role="button" value="View Group"> 
                <f:param name="group_id" value="#{groups.getGroupRows(true).get(x).getInteger('group_id')}"/> 
               </h:link> 
              </p> 
             </div> 
            </div> 
           </div> 
          </c:if> 
         </c:forEach> 
        </div> 
       </c:forEach> 

는 I 원하는만큼 우아한 아니지만. 그것은 여전히 ​​문제를 해결합니다. 내가 JSF에서 부트 스트랩 여러 행에 대한 솔루션을 검색 한

내가 여기에 새로운 오전

Answer 2

첫 번째와 두 번째는 결코 같은 인덱스에서 일치하지 않을 것이기 때문에 실제로는 다음과 같은 이유로 인해 나타날 것입니다. 제 (status.index에 + 1)

그래서 당신은

</div> 
    <div class="col-sm-6 col-md-4"> 
     ... 
    </div> 
<div> 
</div> 
    <div class="col-sm-6 col-md-4"> 
     ... 
    </div> 
</div> 

또는 당신이 얻고있는 오류를 설명 할 것 같은 어떤 것을 끝낼 것입니다.

는

Answer 3

. 여기서 솔루션을 살펴볼 때 약간의 오버로드가 발생했기 때문에이 부분을 살펴 보지 않았습니다. 왜 내가 내 솔루션을 생각해 냈지. 나는 그것이 더 분명하기를 바란다.

MySolution :

<div class="container"> 
    <ui:repeat step="3" value="#{bean.list}" varStatus="outerLoopIndex"> 
     <div class="row"> 
      <ui:repeat offset="#{outerLoopIndex.index}" size="#{(outerLoopIndex.index + 3) gt bean.list.size() ? bean.list.size() : outerLoopIndex.index + 3}" 
      var="item" value="#{bean.list}" varStatus="innerLoopIndex"> 
      <div class="col-4"> 
      <label class="btn btn-secondary active"> 
       #{innerLoopIndex.index} #{item.foo} 
      </label> 
      </div> 
      </ui:repeat> 
     </div> 
    </ui:repeat> 
</div> <!-- container --> 

당신이 행으로 열 수를 변경하려면

이 단계는 외부 반복 요소에 조정해야합니다의 내부 반복 요소의 크기와, 물론, COL div 요소의 클래스

변경 COLUMNSPERROW :

<ui:repeat step="COLUMNSPERROW" var="permission" value="#{bean.list}" varStatus="outerLoopIndex"> 
     <div class="row"> 
      <ui:repeat offset="#{outerLoopIndex.index}" size="#{(outerLoopIndex.index + COLUMNSPERROW) gt bean.list.size() ? bean.list.size() : outerLoopIndex.index + COLUMNSPERROW}" 
      var="item" value="#{bean.list}" varStatus="innerLoopIndex"> 
      <div class="col"> 

그것은 내 첫 번째 게시물입니다. 개선 제안 사항이 있습니다.