how to design a form for a real life application

Hi,

I am wondering how to design a real life input form with struts2.

Default struts2 theme is xhtml which allows only one text field in a row. Not very useful for a real life application.

I have spent a lot of time and I have only found out just one(single one) relatively good example how to extend a xhtml theme functionality - qxhtml (http://www.vitarara.org/cms/struts_2_cookbook/creating_a_theme). qxhtml is just fine, but if I add additional widget I could not use <s:param name="labelcolspan" value="%{1}"/> and <s:param name="inputcolspan" value="%{5}"/>.

For example:
I add a simple editor(tinymce) to my page and I could not control my layout anymore because I could not use param with tinymce.

I would like to know your experience about designing a form layout? What are your proposals to design a form? Which technique do you use? Do you extend a xhtml theme or are you using a completely different technique?

At the moment I could only use a simple theme to achieve a real flexibility but I lose a lot of good features with simple theme (validation...)

Best regards,
Javanus

Armin Vetek wrote:At the moment I could only use a simple theme to achieve a real flexibility but I lose a lot of good features with simple theme (validation...)

Nope. We do not loose any features. We can use the <s:fielderror fieldName="name_of_the_field"></s:fielderror> tags incase of simple theme for displaying the field error messages.

OK, I know that the simple theme also support validation but you have to show a field error messages by hand for each field. I have to put field error beside each field if I am using simple theme and the html code becomes harder to read and maintain.

I would like to know what is the best practice? How do you develop a form which should have 3 input field in one row? Should I extend html theme (qxhtml), use simple theme or something completely different?

Best regards,
Javanus

Armin Vetek wrote:I have to put field error beside each field if I am using simple theme and the html code becomes harder to read and maintain.

That's really true. I haven't used it yet.

Armin Vetek wrote:How do you develop a form which should have 3 input field in one row? Should I extend html theme (qxhtml), use simple theme or something completely different?

IMHO css_xhtml is the much flexible theme to use.

Hi,

I have not used css_xhtml theme yet. I checked out the theme description and I found out that one of the feature is also "Standard two-column CSS-based layout".

IMHO "

Standard two-column CSS-based layout" is not a feature at all !!

Have you ever try to have an input form with two textfields in one row?

Regards,
Javanus

Armin Vetek wrote:Have you ever try to have an input form with two textfields in one row?

Yes. I have.. lots of time.

How about you? Have you tried?

Above code will display three fields in a row

Hi,

Thank you Anbarasu Aladiyan.

Yes, css_html is the answer!!!

CSS_XHTML is so useful to me and I decided to help also other developers. You can read more about at struts2: how to display more than one textfield in one row

Best regard,
Javanus

Hi,

I found one problem using css_xhtml.

Imagine a table with 2 textfield in 2 rows.
Form looks like:

label1: textfield1 label2:textfield2
label3: textfield3 label4:textfield4

In my jsp I put the following code:

I would like that labels are left aligned and input boxes are aligned to the right.

I found out that both label and a input box are in the same table cell. How can I align label to the left and input text to the right?
I found a workaround like in the code below. Is there a better way?

<s:form action="javanusAction" theme="css_xhtml">
            <table>
                <tr>
                    <td><s:label label="Label1" labelposition="left" required="true" requiredposition="right" tooltip="Hi"/></td>
                    <td><s:textfield label="" labelposition="left" labelSeparator=""/></td>
                    <td><s:label label="a very long Label" labelposition="left" required="true" requiredposition="right"/></td>
                    <td><s:textfield label="" labelposition="left" labelSeparator=""/></td>
                </tr>
                <tr>
                    <td><s:label label="Label1 long one" labelposition="left" required="true" requiredposition="left"/></td>
                    <td><s:textfield label="" labelposition="left" labelSeparator=""/></td>
                    <td><s:label label="a very" labelposition="left" required="true" requiredposition="left"/></td>
                    <td><s:textfield label="" labelposition="left" labelSeparator=""/></td>
                </tr>
            </table>
        </s:form>

Requiredposition does not move * to the left. Is this only happening to me?

Best regards,
Javanus

As you see "label" and "required" attributes are not mandatory, we can use html tags for that.