6 Replies Latest reply on Aug 16, 2007 7:12 AM by ntsiii

    Proper way to lay out tabular data?

    JoshBeall Level 1
      Hi All,

      Consider the following:

      http://joshbeall.com/personal/donation_detailview.png

      The data here is displayed in a table. Two columns, with the left column showing the name of the field, and the right column showing the data for that field.

      In HTML this is fairly easy to do with a table. It's just what a table was designed for (laying out tabular data). In Flex, what is the appropriate way to do this? I considered the DataGrid, but it is really designed for showing multiple records, in a horizontal layout (header row, with one additional row per record). What I want is to display only a single record, with one row per field in the result set.

      What is the Flex way for laying out data like this? I'm a newcomer to Flex (been doing ASP.NET for the past 2 years), and I'm aware this is very much a beginner question.

      -Josh
        • 1. Re: Proper way to lay out tabular data?
          koushks
          Flex uses an 'absolute' positioning system, in that you can make controls show up at any co-ordinate you need on the page (using x and y properties). So you really don't need an equivalent of a HTML table.

          For your requirement, you will need to add Label and Text combos for every line, just like you would on a VB or ASP.NET form. The labels are aligned right and the Text controls (with the checkbox) are aligned left.

          Once this is done, you bind the controls on the right to data so that different values show up there based on the data you are currently looking at.
          • 2. Re: Proper way to lay out tabular data?
            JoshBeall Level 1
            One of the nice things about HTML tables is that when you are creating the markup by hand (as opposed to using a designer), you don't have to worry about positioning that much. It will automatically put everything in a grid, with rows, columns, individual cells, etc.

            If I am creating the MXML for the different labels, checkbox(es), and any other controls, I have to specify the offsets (position) for each control. Is there a way to get the "automatic" positioning I would get from a table (just add another row, and it tacks it on the bottom of my table) using a Flex layout facility of some kind?
            • 3. Re: Proper way to lay out tabular data?
              koushks Level 1
              Try the Grid component. You'll find it in the 'Layout' folder of the component tree pane.
              • 4. Re: Proper way to lay out tabular data?
                JoshBeall Level 1
                Grid looks like exactly what I wanted. Thanks!
                • 5. Re: Proper way to lay out tabular data?
                  Josh Johnson Level 1
                  Actually, based on your reference, you don't want a table (dataGrid), because what you have is a list of property data, not tabular data. A grid is a good component, but if you want something a little simpler than a grid, you might also want to check out the Form component. Instead of having to define each cell individually, you can essentially define only the value cell and give it a Label string which automatically creates the label cell.
                  • 6. Re: Proper way to lay out tabular data?
                    ntsiii Level 3
                    Yes, and be aware that Grid is one of the most "expensive" components in terms of rendering performance.
                    Tracy