Details

    • Type: New Feature
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.3.0-M1
    • Component/s: examples
    • Labels:
      None

      Description

      In many forms it is required to use a "separator" between fields, to group them visually, but not to add them to a FieldSet (since this should be a pure visual effect).
      Adding the controls to a FieldSet also breaks the alignment between groups, since each FieldSet seems to be aligned differently (due to the use of tables for auto-rendering).
      A simple implementation for a FieldSeparator would look like the following snippet:
      <code>
      /**

      • A separator made by <b>re-using</b> the FieldSet control.<p/>
      • A special CSS style: <code>.fieldSeparator</code> is added to the HTML fieldset,
      • that draws only the bottom line:
      • <pre>
      • .fieldSeparator { * border-bottom:0; * border-left:0; * border-right:0; * border-top-width:4px; * }
      • </pre>
        *
      • @see net.sf.click.control.FieldSet
        */
        public class FieldSeparator extends FieldSet {
        public FieldSeparator() {
        }

      public FieldSeparator(String name)

      { super(name); addStyleClass("fieldSeparator"); }

      public FieldSeparator(String name, String legend)

      { super(name, legend); addStyleClass("fieldSeparator"); }

      // override container methods since this should be a pure visual control.
      // ....
      }
      </code>

      Thank you,

      A.

        Activity

        Hide
        jschmidt71 Joseph Schmidt added a comment -

        Would you please check this in?
        Or are there any objections for including this into the official Click 2.2.0?

        Show
        jschmidt71 Joseph Schmidt added a comment - Would you please check this in? Or are there any objections for including this into the official Click 2.2.0?
        Hide
        a_adrian Adrian A. added a comment -

        This will be included in examples first, and maybe the functionality will be still merged into FieldSet itself,
        since even if this control is very useful and required, it does so little more than a usual FieldSet to justify yet another Control (see the problem high fragmentation with many small controls).

        Show
        a_adrian Adrian A. added a comment - This will be included in examples first, and maybe the functionality will be still merged into FieldSet itself, since even if this control is very useful and required, it does so little more than a usual FieldSet to justify yet another Control (see the problem high fragmentation with many small controls).
        Hide
        sabob Bob Schellink added a comment -

        This ticket suggests that FieldSeparator "is a" FieldSet. That doesn't seem right?

        Show
        sabob Bob Schellink added a comment - This ticket suggests that FieldSeparator "is a" FieldSet. That doesn't seem right?
        Hide
        a_adrian Adrian A. added a comment -

        > This ticket suggests that FieldSeparator "is a" FieldSet. That doesn't seem right?
        Yes, it is a FieldSet, but only for decorative purposes, not functional ones: no fields can be (shall be) added to it.
        The desired effect could be made with other HTML controls too, but it's just too complicated - since FIELDSET HTML tag achieves the best result in a cross browser manner.

        However, Click already has many controls, so I'm not sure if it's justified to add another one just for such a small "improvement" (instead of just adding this functionality to FieldSet itself).

        Show
        a_adrian Adrian A. added a comment - > This ticket suggests that FieldSeparator "is a" FieldSet. That doesn't seem right? Yes, it is a FieldSet, but only for decorative purposes, not functional ones: no fields can be (shall be) added to it. The desired effect could be made with other HTML controls too, but it's just too complicated - since FIELDSET HTML tag achieves the best result in a cross browser manner. However, Click already has many controls, so I'm not sure if it's justified to add another one just for such a small "improvement" (instead of just adding this functionality to FieldSet itself).
        Hide
        sabob Bob Schellink added a comment -

        I'm probably missing why other HTML controls will be too complicated to implement this. Reading the proposed CSS it seems what is required is to have a bit of whitespace between fields.

        Wouldn't the following be simpler?

        class FieldSeperator extends AbstractControl {
        public FieldSeparator()

        { setAttribute("class", "seperator"); }

        public String getTag()

        { return "div"; }

        }

        In the upcoming 2.2.0 it is also possible to set a Field parent CSS class:

        field.setParentClass("separator");

        This will result in the following markup:

        <form>
        ...
        <td class="separator"> field markup
        </td>
        ...
        </form>

        Show
        sabob Bob Schellink added a comment - I'm probably missing why other HTML controls will be too complicated to implement this. Reading the proposed CSS it seems what is required is to have a bit of whitespace between fields. Wouldn't the following be simpler? class FieldSeperator extends AbstractControl { public FieldSeparator() { setAttribute("class", "seperator"); } public String getTag() { return "div"; } } In the upcoming 2.2.0 it is also possible to set a Field parent CSS class: field.setParentClass("separator"); This will result in the following markup: <form> ... <td class="separator"> field markup </td> ... </form>
        Hide
        a_adrian Adrian A. added a comment -

        > I'm probably missing why other HTML controls will be too complicated to implement this.
        Because the desired effect is not a HR like line but something like:

        – Label -------------------

        so exactly like the FieldSet (with Section name - errr Label ) but without the bottom, left and right line

        Show
        a_adrian Adrian A. added a comment - > I'm probably missing why other HTML controls will be too complicated to implement this. Because the desired effect is not a HR like line but something like: – Label ------------------- so exactly like the FieldSet (with Section name - errr Label ) but without the bottom, left and right line
        Hide
        sabob Bob Schellink added a comment -

        I see and agree that there is no need to add another control for something which boils down to a bit of CSS.

        That said, have you thought about the impact this has on accessibility? Imagine someone with a screen reader going to your site. The screen reader (eg JAWS) will report all the FieldSets. Except the FieldSets won't actually be FieldSets but Field separators. Could be confusing and a time waste for a blind person.

        Show
        sabob Bob Schellink added a comment - I see and agree that there is no need to add another control for something which boils down to a bit of CSS. That said, have you thought about the impact this has on accessibility? Imagine someone with a screen reader going to your site. The screen reader (eg JAWS) will report all the FieldSets. Except the FieldSets won't actually be FieldSets but Field separators. Could be confusing and a time waste for a blind person.
        Hide
        a_adrian Adrian A. added a comment -

        > That said, have you thought about the impact this has on accessibility?
        Yes, but the form won't consist only of FieldSets, but many fields that follow after each FieldSet too, so the user will hear, e.g.:
        Section Naming, than the fields.

        Also note that this is how it's done by most forms on the web that need a separator with a label.

        Show
        a_adrian Adrian A. added a comment - > That said, have you thought about the impact this has on accessibility? Yes, but the form won't consist only of FieldSets, but many fields that follow after each FieldSet too, so the user will hear, e.g.: Section Naming, than the fields. Also note that this is how it's done by most forms on the web that need a separator with a label.
        Hide
        sabob Bob Schellink added a comment -

        Thanks for that Adrian. Can you point to some sites using this approach? Are they high profile sites? Would be interesting to see high profile site promoting this use of FieldSet.

        I did a quick investigation on how screen readers interact with fieldsets and stumbled upon this article:

        http://www.paciellogroup.com/blog/?p=3

        According to this article screen readers will not read the fieldset legend as you tab down the form fields. Only fields inside the fieldset will have the fieldset legend prefixed to the name of the field, providing the user with feedback on what is contained inside the FieldSet.

        Screen readers also has the command "Next Fieldset" (E) and "Previous Fieldset" (shift+E) which won't work if FieldSet is used as a separator since the user will be jumping from FieldSet to FieldSet but won't find any fields available inside the fieldset.

        Interesting stuff.

        Show
        sabob Bob Schellink added a comment - Thanks for that Adrian. Can you point to some sites using this approach? Are they high profile sites? Would be interesting to see high profile site promoting this use of FieldSet. I did a quick investigation on how screen readers interact with fieldsets and stumbled upon this article: http://www.paciellogroup.com/blog/?p=3 According to this article screen readers will not read the fieldset legend as you tab down the form fields. Only fields inside the fieldset will have the fieldset legend prefixed to the name of the field, providing the user with feedback on what is contained inside the FieldSet. Screen readers also has the command "Next Fieldset" (E) and "Previous Fieldset" (shift+E) which won't work if FieldSet is used as a separator since the user will be jumping from FieldSet to FieldSet but won't find any fields available inside the fieldset. Interesting stuff.
        Hide
        a_adrian Adrian A. added a comment -

        Added this control to examples only for now.

        Show
        a_adrian Adrian A. added a comment - Added this control to examples only for now.

          People

          • Assignee:
            a_adrian Adrian A.
            Reporter:
            a_adrian Adrian A.
          • Votes:
            2 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development