Labs
  1. Labs
  2. LABS-207

[beansview] Make showbean table-less

    Details

    • Type: Wish Wish
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: Current
    • Fix Version/s: Current
    • Component/s: Magma
    • Labels:
      None

      Description

      ShowBean, and inherently forms, currently produce layout tables. These are quite well done, and does not create problems with WAI/WCAG validations, but it would be better to find another approach, eventually based on some CSS/JavaScript client layout framework.

      Eventually, this could be an additional package.

        Activity

        Hide
        Simone Gianni added a comment -

        We need to have ul/li/div/span based outputs for all of the current view elements :

        • ShowBean
        • ShowList
        • SmartForm
        • SmartList

        This view should be an alternative to the table based one, cause while the table is well defined, the non-table ones will require the user to write some CSS to display them properly.

        Show
        Simone Gianni added a comment - We need to have ul/li/div/span based outputs for all of the current view elements : ShowBean ShowList SmartForm SmartList This view should be an alternative to the table based one, cause while the table is well defined, the non-table ones will require the user to write some CSS to display them properly.
        Hide
        Simone Gianni added a comment -

        It is still not possible to emulate what is done with tables using pure CSS.

        The problem is that table cells tend to fill the available space, while floating divs tend to use minimal space. In current table-based forms, if I place a fixed size (like zipcode) field on the side of a full size (like address) field, cells will correctly use the minimum space for the fixed size field and filol all the rest with space for the full size one. On the opposite, using divs and CSS this is not possible, unless display:table(-row|-cell) is used, which is currently supported only in IE8, making it a solution for the future but not right now.

        There are some CSS+Javascript framework that manages to emulate the "fill as much as possible" behaviour using floating divs, like ElastiCSS, and they are compatible back to IE6, but are an intermediate solution.

        So, I'll proceed with extracting the HTML generation part in a separate replaceable class, but forms will now stay on the table based system, while the non-table based implementation will not honor the side-by-side relations. Implementations based on display:table or css+javascript framework will be a viable options once there is an easy way to replace the generated HTML.

        Show
        Simone Gianni added a comment - It is still not possible to emulate what is done with tables using pure CSS. The problem is that table cells tend to fill the available space, while floating divs tend to use minimal space. In current table-based forms, if I place a fixed size (like zipcode) field on the side of a full size (like address) field, cells will correctly use the minimum space for the fixed size field and filol all the rest with space for the full size one. On the opposite, using divs and CSS this is not possible, unless display:table(-row|-cell) is used, which is currently supported only in IE8, making it a solution for the future but not right now. There are some CSS+Javascript framework that manages to emulate the "fill as much as possible" behaviour using floating divs, like ElastiCSS, and they are compatible back to IE6, but are an intermediate solution. So, I'll proceed with extracting the HTML generation part in a separate replaceable class, but forms will now stay on the table based system, while the non-table based implementation will not honor the side-by-side relations. Implementations based on display:table or css+javascript framework will be a viable options once there is an easy way to replace the generated HTML.
        Hide
        Simone Gianni added a comment -

        After a lot of work, I went another way to solve the problem.

        Now, ShowList and ShowBean (the basic producers) accepts a "style". The style is a class responsible of generating the HTML. This class generates a velocity template, which is then cached and reused, that contains calls to generate the actual content.

        This approach permits to have different styles (currently the table based and ul/li based for lists, the table based for show bean and form, and a "plain divs" for show bean only).

        Also, since the HTML template is generated only once, it is no longer a performance issue.

        The velocity template contains only the HTML part. Everything else is fetched doing calls inside velocity. This includes labels, cause they have to generated every time due to i18n.

        The choice of velocity is just because of simplicity.

        Show
        Simone Gianni added a comment - After a lot of work, I went another way to solve the problem. Now, ShowList and ShowBean (the basic producers) accepts a "style". The style is a class responsible of generating the HTML. This class generates a velocity template, which is then cached and reused, that contains calls to generate the actual content. This approach permits to have different styles (currently the table based and ul/li based for lists, the table based for show bean and form, and a "plain divs" for show bean only). Also, since the HTML template is generated only once, it is no longer a performance issue. The velocity template contains only the HTML part. Everything else is fetched doing calls inside velocity. This includes labels, cause they have to generated every time due to i18n. The choice of velocity is just because of simplicity.
        Hide
        Simone Gianni added a comment -

        It all seems to work correctly, so I'm closing this bug.

        Show
        Simone Gianni added a comment - It all seems to work correctly, so I'm closing this bug.

          People

          • Assignee:
            Simone Gianni
            Reporter:
            Simone Gianni
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development