Page 1 of 1

Dynaform question

Posted: 02 Nov 2012, 14:47
by mungo
Hi,

I have a question - maybe you can provide me solution for this.

I need to create structure like follow:

<div class="header">
<h:outputText value="#{model.header}" />

<h:outputText value="#{model.label1}" />
<p:inputText value="#{model.value1}" />
<h:outputText value="#{model.label2}" />
<p:inputText value="#{model.value2}" />
</div>
<div class="header">
<h:outputText value="#{model.header}" />

<h:outputText value="#{model.label3}" />
<p:inputText value="#{model.value3}" />
<h:outputText value="#{model.label3}" />
<p:inputText value="#{model.value3}" />
</div>

And the problem is that these header DIVs are also dynamically added and contains dynamic components too.

I was thinking about creating two DynaFormControls: headerstart with opening <div> and headerend with </div> but this is not valid (got exception about unclosed tag).

I would be very glad to hear any help.

Re: Dynaform question

Posted: 02 Nov 2012, 20:55
by Oleg
I don't know your use case. Do you only need two <div class="header"> blocks with dynamically added components inside? Or is the count of <div class="header"> blocks is unknown?

Re: Dynaform question

Posted: 02 Nov 2012, 21:41
by mungo
Number of divs is not known - they are also generated based on some data in backing bean.

The use case is that I have a data model in bean that describes form with many input components (text, upload, calendar etc.) but these components are divided in some groups so I want to create separate <div> section per group (with header for each group) but the whole page would be just one form.

Number of groups is dynamic (read from DB and can change) same as components inside each group.

Re: Dynaform question

Posted: 03 Nov 2012, 17:17
by Oleg
Hi,

I think you can use headers, of course. You can also use separator as in this example http://fractalsoft.net/primeext-showcas ... rForms.jsf Look e.g. for p:separator, switch the model and see other 3 separators as well. You can use the same technique for your div. Divs can be defined as follows:

Code: Select all

<div class="ui-widget ui-widget-header ui-corner-all headline-title">
    <h:outputText value="..." />
</div>

.headline-title {
    padding: 4px 10px;
    margin: 3px 0 3px 0
}