スタイルの問題：Ui：トグル可能なパネルを持つSelectManyCheckBoxを使用した繰り返し

Question

私が持っていたいのは、ユーザーが自分のソフトウェアの権利を設定する簡単な方法です。

私はオブジェクトのツリーセットを持っています。各オブジェクトは、ビュー内に1つのトグル可能なパネルを作成する必要があります。私は私の見解でこれを試してみた

public class PermissionCheckBox { 

    //the title of the toggleable panel 
    private String title; 

    //the rights read write delete 
    private TreeMap<String, String> rights = new TreeMap<String, String>(); 

    //the documents which the rights belong to 
    private TreeMap<String, String> documents = new TreeMap<String, String>(); 

    public String getTitle() { 
     return title; 
    } 

    public void setTitle(String title) { 
     this.title = title; 
    } 

    public TreeMap<String, String> getRights() { 
     return rights; 
    } 

    public void setRights(TreeMap<String, String> rights) { 
     this.rights = rights; 
    } 

    public TreeMap<String, String> getDocuments() { 
     return documents; 
    } 

    public void setDocuments(TreeMap<String, String> documents) { 
     this.documents = documents; 
    } 

} 

：

<ui:repeat var="group" value="#{GroupBean.permissionCheckBoxes}"> 

    <p:panel header="#{messages[group.title]}" toggleable="true" 
     collapsed="true" style="margin-bottom: 40px;"> 

     <div class="Card"> 

      <div class="CardBody"> 

       <ui:repeat var="right" value="#{group.rights.entrySet().toArray()}"> 

        <p:outputLabel value="#{messages[right.key]}" style="float:right"/> 

       </ui:repeat> 

       <ui:repeat var="document" 
       value="#{group.documents.entrySet().toArray()}"> 

        <p:selectManyCheckbox style="float:right;" 
        value="#{GroupBean.selectedPermissions}" layout="responsive" 
        columns="#{group.rights.size()}"> 

         <f:selectItems value="#{group.rights.entrySet().toArray()}" 
         var="right" itemLabel="" 
         itemValue="#{right.value} + ';' + #{document.value}" /> 

        </p:selectManyCheckbox> 

        <p:outputLabel style="float:left;" 
        value="#{messages[document.key]}" /> 

       </ui:repeat> 

      </div> 

     </div> 

    </p:panel> 

</ui:repeat> 

必ずしもすべてのグリッドが各行の3つのチェックボックスを持っていますが、いくつかは、わずか1または2

私のオブジェクトクラスを持つことになりますあなたが見ることができるように、私はすべてを正しい位置に移動するために浮動小数点を使用しました。それはあまり反応しないので、私はそのようなデザインを得るためのより良い方法を探しています。 私はceckboxesとselectedItemsのラベルを2つの異なるグリッドに配置しようとしましたが、私のチェックボックスは消えてしまいました。

また、2つの列を持つグリッド内にトグル可能なパネルを配置したいと考えています。

At the moment it looks like this

Answer 1

私は今panelGridsを使用するための解決策を見つけました。仕事の残りは今私たちのCSSの男のために簡単でなければなりません:)

<ui:repeat var="group" value="#{GroupBean.permissionCheckBoxes}"> 
     <p:panel header="#{messages[group.title]}" toggleable="true" 
      collapsed="true" style="margin-bottom: 40px;"> 
      <div class="Card"> 
       <div class="CardBody"> 
        <ui:repeat var="right" 
         value="#{group.rights.entrySet().toArray()}"> 
         <p:outputLabel value="#{messages[right.key]}" 
          style="float:right" /> 
        </ui:repeat> 
        <ui:repeat var="document" 
         value="#{group.documents.entrySet().toArray()}"> 
         <p:panelGrid columns="2" styleClass="ui-panelgrid-blank" 
          layout="grid"> 
          <p:panelGrid columns="1" styleClass="ui-panelgrid-blank" 
           layout="grid"> 
           <p:outputLabel value="#{messages[document.key]}" /> 
          </p:panelGrid> 
          <p:panelGrid columns="1" styleClass="ui-panelgrid-blank" 
           layout="grid"> 
           <ui:repeat var="right" 
            value="#{group.rights.entrySet().toArray()}"> 
            <p:selectBooleanCheckbox style="float:right" 
             value="#{GroupBean.selectedPermissions[document.value';'right.value]}" /> 
           </ui:repeat> 
          </p:panelGrid> 
         </p:panelGrid> 
        </ui:repeat> 
       </div> 
      </div> 
     </p:panel> 
</ui:repeat>