Forum:

PrimeFace dashboard running panels

Greenhorn

Posts: 5

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have problem with runnings panels. After I edit my panel description I have a lot of mess and it isn't looking good.

My dashboard before edit:

And after edit one of panel, I have a little mess

How to repair that mess to looks good?

myDashboard.xhtml

<ui:composition 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"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions">

<p:dialog id="addProjectDialog" header="#{msg['add.project.dialog.header']}" appendTo="@(body)" resizable="true" widgetVar="addProjectDialog" modal="true" width="800" height="400">
        <h:form id="projectForm">
            <p:tabView id="tabView">
                <p:tab title="#{msg['add.project.dialog.project.data']}">
                    <h:panelGrid columns="2" cellpadding="10">
                        <h:outputText rendered="#{createPmsProjectBean.project.id != null}" value="#{msg['add.project.dialog.number']}" />
                        <h:outputText rendered="#{createPmsProjectBean.project.id != null}" id="columnNumber" value="#{createPmsProjectBean.project.number}"/>
                        <h:outputText value="#{msg['add.project.dialog.name']}" />
                        <p:inputText  id="columnName" value="#{createPmsProjectBean.project.name}" required="true"/>
                        <h:outputText value="#{msg['add.project.dialog.start']}" />
                        <p:calendar id="startDate" value="#{createPmsProjectBean.project.startDate}" pattern="yyyy-MM-dd HH:mm:ss" />
                        <h:outputText value="#{msg['add.project.dialog.end']}" />
                        <p:calendar id="endDate" value="#{createPmsProjectBean.project.endDate}" pattern="yyyy-MM-dd HH:mm:ss" />
                        <h:outputText value="#{msg['add.project.dialog.active']}" />
                        <p:selectBooleanButton id="van" value="#{createPmsProjectBean.project.active}" onLabel="#{msg['yes']}" offLabel="#{msg['no']}" onIcon="ui-icon-check" offIcon="ui-icon-close" style="width:60px" />
                    </h:panelGrid>
                </p:tab>
                <p:tab  title="#{msg['add.project.dialog.fields']}">
                    <h:panelGrid  id="filedGrid" columns="2" cellpadding="10">
                        <p:dashboard  id="c" model="#{createPmsProjectBean.dashboardModel}">
                            <p:panel id="filed1">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(1)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed1Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed1Desc}" />
                            </p:panel>

<p:panel id="filed2">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(2)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed2Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed2Desc}" />
                            </p:panel>

<p:panel id="filed3">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(3)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed3Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed3Desc}" />
                            </p:panel>

<p:panel id="filed4">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(4)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed4Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed4Desc}" />
                            </p:panel>

<p:panel id="filed5">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(5)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed5Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed5Desc}" />
                            </p:panel>

<p:panel id="filed6">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(6)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed6Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed6Desc}" />
                            </p:panel>

<p:panel id="filed7">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(7)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed7Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed7Desc}" />
                            </p:panel>

<p:panel id="filed8">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(8)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed8Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed8Desc}" />
                            </p:panel>

<p:panel id="filed9">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(9)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText value="#{createPmsProjectBean.filed9Header}" />
                                </f:facet>
                                <h:outputText escape="false" value="#{createPmsProjectBean.filed9Desc}" />
                            </p:panel>

<p:panel id="filed10">
                                <f:facet name="header">
                                    <p:commandButton icon="ui-icon ui-icon-pencil"
                                                     immediate="true"
                                                     action="#{createPmsProjectBean.editFiled(10)}"
                                                     oncomplete="editFiledDialog.show()" update=":projectForm :filedForm"
                                                     title="#{msg['button.edit']}" style="float:right; width: 18px; height: 18px;">
                                    </p:commandButton>
                                    <h:outputText escape="false" value="#{createPmsProjectBean.filed10Header}" />
                                </f:facet>
                                <h:outputText value="#{createPmsProjectBean.filed10Desc}" />
                            </p:panel>
                        </p:dashboard>
                    </h:panelGrid>
                </p:tab>
                <p:tab title="#{msg['add.project.dialog.ccc.links']}">
                    <h:panelGrid columns="2" cellpadding="10">
                        <h:outputText value="#{msg['add.project.dialog.coming.soon']}" />
                    </h:panelGrid>
                </p:tab>
            </p:tabView>