Art Probleme: Ui: Wiederholt mit SelectManyCheckBox, mit umschaltbare Platten

Question

Was ich haben will ist eine einfache Möglichkeit für die Benutzerrechte für meine Software zu setzen.

Ich habe eine TreeSet von Objekten sollte jedes Objekt 1 togglebar Panel in der Ansicht erstellen. Nicht jedes Gitter 3 Kontrollkästchen für jede Zeile haben wird, werden einige haben nur 1 oder 2

Meine Objektklasse:

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; 
    } 

} 

Ich habe versucht, dies aus meiner Sicht:

<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> 

Wie Sie sehen können, habe ich Float benutzt, um alles in die richtige Position zu bringen. Ich weiß, dass das nicht sehr reaktionsschnell ist, also suche ich nach einem besseren Weg, um ein solches Design zu bekommen. Ich habe versucht, das Etikett für die ceckboxes und den selectedItems in zwei verschiedenen Rastern zu setzen, aber dann verschwand mein Kontrollkästchen.

Ich mag auch mit 2 Spalten die umschaltbare Platten in einem Raster haben.

At the moment it looks like this

Answer 1

fand ich eine Lösung panelGrids jetzt zu verwenden. Der Rest der Arbeit sollte jetzt für unseren css-Kerl einfach sein :)

<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>