Dyna Form

Community Driven Extensions Project
kdhrubo
Posts: 58
Joined: 26 Sep 2010, 06:52
Location: Kolkata, India
Contact:

14 May 2012, 10:38

I see in the source trunk a new component called dyna form appearing in the coming release of PF-Extensions project.
Can anyone throw some light on the features provided by this component?
Look forward to hearing as I am keen on it.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

14 May 2012, 16:51

Sure. I'm working just now on it. Here are some descriptions.

General:
"Normally we can build a form quite straightforward by h:panelGrid oder p:panelGrid if the count of rows / columns, positions of elements, etc. are known. That's true for static forms. But it's not possible to use h:panelGrid oder p:panelGrid if a form is described dynamically, at runtime. E.g. if the entire form's definition is placed in a database or a XML file.
DynaForm makes possible to build a dynamic form with labels, inputs, selects and other elements by model. Other enhancements are expandable extended view area (grid), autoSubmit feature, widget's client-side API, various facets. Supported facets:
- headerRegular
- footerRegular
- headerExtended
- footerExtended
- buttonBar
See use cases for more information."

Use case: Basic usage
"This example demonstrates how to build a simple dynamic form."

Use case: Advanced features
"This example demonstrates how to build an advanced dynamic form with facets, autoSubmit feature and extended view area (grid). Furthermore, using of "varStatus" object shows how to access "forValue" in order to use h:outputLabel with "for" attribute.
When you see this page, the form was already submitted on page load automatically - autoSubmit feature allows to submit the form after its rendering.
Extended grid with form elements is closed per default, but you can open it by using of client-side API (see last form button)."

Tag lib. documentation
Search here DynaForm and DynaFormCell.

Usage example

Code: Select all

<pe:dynaForm value="${formBean.dynaFormModel}" var="formElement" varStatus="curStatus">
    <pe:dynaFormCell type="label">
        <h:outputLabel value="${formElement.value}" for="curStatus.forValue"/>
    </pe:dynaFormCell>
    <pe:dynaFormCell type="input">
        <p:inputText value="#{formElement.value}" required="#{formElement.required}" .../>
    </pe:dynaFormCell>
    <pe:dynaFormCell type="date">
        <p:calendar value="#{formElement.value}" .../>
    </pe:dynaFormCell>
    <pe:dynaFormCell type="select">
        <p:selectOneMenu value="#{formElement.value}" ...>
            ...
        </p:selectOneMenu>
    </pe:dynaFormCell>
    ...
</pe:dynaForm>
I don't want to show how to build the model in Java. It's being refactored...
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

kdhrubo
Posts: 58
Joined: 26 Sep 2010, 06:52
Location: Kolkata, India
Contact:

15 May 2012, 08:55

Hello Oleg
This is exactly what I (and I am sure many many others are looking at) am looking at. This is an incredible component. I would like to see some options for large forms. For example there should be a switch to break a form into form segments which will be rendered as fieldset or tabs. I hope I am making some sense. Also there should be option for the button bar to appear both on top and bottom of the form.

But one key question, when will this component is expected to be released?

Regards ...dhrubo

!! Great Job Folks!!!

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

15 May 2012, 09:38

Hi dhrubo,

I know, some other people, also from our PF Extensions team are waiting for this component. Yeah, I will try to implement it as soon as possible. Maybe this week. It's ready to ca. 70%.

Regarding "here should be a switch to break a form into form segments which will be rendered as fieldset or tabs". I thought about this. I think it's better to place more than one DynaForm in this case. I mean e.g., one DynaForm in fieldset, another one below in fieldset too, etc. Generally, you can group content within one DynaForm too. You will typically build a form as follows:

Code: Select all

DynaFormRow row1 = new DynaFormRow();
row1.addControl(data, type, colspan, rowspan);
...
DynaFormModel model = new DynaFormModel();
model.addRegularRow(row1);
...
If you now put a control with a proper colspan and a type, say "separator", you can output a separator in XHTML above your groupped elements.

Code: Select all

<pe:dynaForm value="${formBean.dynaFormModel}" var="data">
    <pe:dynaFormCell type="separator">
        <h:panelGrid colspan="2">
            <h:outputText value="Any segment">
            <p:separator/>
        <h:panelGrid colspan="2">
    </pe:dynaFormCell>
    ...
</pe:dynaForm>
Regarding "there should be option for the button bar to appear both on top and bottom of the form." I think I will drop "buttonBar" facet because we have four other facets placed at top or bottom "headerRegular", "footerRegular", "headerExtended", "footerExtended". What do you think?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

kdhrubo
Posts: 58
Joined: 26 Sep 2010, 06:52
Location: Kolkata, India
Contact:

15 May 2012, 11:12

Looks like we are more or less on the same page. I feel this component will be an incredible addition for design time UI and people making products which needs UI customization based on meta data from DB or XML.
Now continuing on our discussion on breaking large forms (ideally we should avoid large forms as its not great from usability perspective). But then we need it. Now for form segments are you suggesting we use this

Code: Select all

<pe:dynaForm
</pe:dynaForm>
......
<pe:dynaForm
</pe:dynaForm>

Will this generate multiple forms? or just a single form
The button bar would be helpful as its not been easy thus far for people to create ajax command buttons pragmatically and submit it.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

15 May 2012, 12:32

Nested pe:dynaForm are not supported in the first version. Do you mean it makes sence? Do you have a screenshot? Is it like p:subTable? You can place a pe:dynaForm inside of pe:dynaFormCell which represents a td element with any content. It would be possible, but I haven't tested nested forms. I saw h:dataTable has a specific logic for nested tables, maybe I have to add this logic too, don't know at the moment. Regarding "buttonBar" facet, I haven't planned to render any buttons in DynaFormRenderer class. It's just a facet. You can place any content, buttons, etc. into it. This is because I said we don't need it - we already have header / footer facets.

I have redesigned a little bit the Java part. It looks like now

Code: Select all

DynaFormModel model = new DynaFormModel();
DynaFormRow row = model.createRegularRow();

// add label control
DynaFormControl label = row.addControl(data1, type1, colspan1, rowspan1);

// add corresponding edit control
DynaFormControl edit = row.addControl(data2, type2, colspan2, rowspan2);

// set relationship between label and edit controls in order to support h:outputLabel with "for" attribute
label.setRefKey(edit.getKey());
...
Note: key is generated automatically for every control and is unique.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

kdhrubo
Posts: 58
Joined: 26 Sep 2010, 06:52
Location: Kolkata, India
Contact:

15 May 2012, 13:25

Sounds good.
Here is a form from an application I develop on googlecode.
This is a large form broken into tabs (i.e the form segments) with Button bar. I want to be able to render all the fields -- input text, input text area, calendar, rating etc dynamically. Also the bottons should be dynamic ajax or non ajax.
Image

Does the model support action listeners (ajax and non ajax?) how about value binding to a bean properties? is there support for value expressons?

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

15 May 2012, 13:39

Hi,

What you shown me is a wizard like component with several forms. I guess you can use p:wizard or pe:masterDetail components to achieve this look-&-feel. Each tab / step contains a separate form. It's a composite component in your case, I don't think we need to add some complex logic to pe:dynaForm. At least at this stage. My opinion to your screen: I would use pe:masterDetail with pe:dynaForm for each step. Otherwise we have to think how to combine p:tabView with just one pe:dynaForm.

You asked "Does the model support action listeners (ajax and non ajax?)" What should this mean? Model classes can't support action listeners. If you mean whether you can attach p:ajax to pe:dynaForm, yes, but I couldn't find any usage and any event for that. Value expressions are supported of course and you can bind DynaForm to a bean properties. It's valid for all our components.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

kdhrubo
Posts: 58
Joined: 26 Sep 2010, 06:52
Location: Kolkata, India
Contact:

15 May 2012, 13:55

Yes wizard is fine for a create scenario.
But I want same look and feel for create, detail and edit hence the use of tabs.
But overall you have a great idea with this gem of a component. I look forward to using it soon.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

15 May 2012, 14:23

Thanks. You're the 2. beta-tester after the 1. one from our team.

By the way, with pe:masterDetail you can create clickable buttons as steps and simulate tabs. It offers unlimited possibilities.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: StevenPrab and 3 guests