How do I display a table in a field?
LiveCode's field features allow you to embed simple tables directly into your text fields and alter their appearance. This lesson applies to LiveCode 5.5 and later.
The sample stack
Create a new stack, add a field, name it "Display" and add some tab separated data to the field.
If you like you can also include some text before and after the data to be displayed in a table.
Creating the grid
To create the grid set the hGrid and vGrid properties of the lines of the field which make up the table. Run the following code in the message box:
set the hGrid of line 2 to -2 of field "Display" to true
set the vGrid of line 2 to -2 of field "Display" to trueThe hGrid property causes 1 pixel width grid lines to be placed before and after any line with it set to true. The vGrid property causes 1 pixel width grid lines to be placed between each tab position and forces text to clip to tab width in a cell-like fashion.
We are operating on lines "2 to -2". LiveCode counts both down from the top and up from the bottom of the lines in your field. So line 2 is the first line in the table, and because we have a line of text after the last line of the table the last line of the table is -2 from the bottom. We could also have used "line 2 to 5" but this would mean that if another line was added to the table, the code would break. Also, some of the later operations we are going to do on this table would have strange results.
Make the table fixed width
Now to make the table 'fixed width' we make sure the tabWidths finishes with a zero-width tab.
This has two effects:
the vertical grid lines will stop at the zero-width tab
the left and right sides of the table determine the location of paragraph borders, filling and alignment.
set the tabWidths of line 2 to -2 of field "Display" to 30,30,30,30,30,30,30,0Adding spacing before and after the table
Now we want to add some spacing between the text paragraphs and the table.
set the spaceBelow of line 1 of field "Display" to 10
set the spaceAbove of line -1 of field "Display" to 10Adding a border to the table
To add a border to the table as a whole we set the borderWidth of all the lines in the table. When in hGrid mode, borders of adjacent lines which have compatible properties are merged into a 1-pixel grid line.
set the borderWidth of line 2 to -2 of field "Display" to 2Adding indentation
You can add an indent to the left or right of the table by setting the leftIndent or rightIndent property of the lines of the field that make up the table.
set the leftIndent of line 2 to -2 of field "Display" to 20Adding padding
You can add padding to the cells of field by setting the padding property.
set the padding of line 2 to -2 of field "Display" to 5
Daniel
I don't know where to put this code, i can only figure out how to run code via handlers like mouse down etc. Putting this code in the script of the field does nothing, i assume it doesnt run unless its called by something. So where does this script go?
Hanson Schmidt-Cornelius
Hi Daniel,
yes, you could put the code into an event handler. You could add the code into a function or command, or you could execute the code from the message box. As the lesson does not describe exactly where the code should be added, I would recommend using the message box. This would also be a good exercise that helps you get used to some more of the features of the development environment.
You should see an icon with the text "Message Box" on the top panel of the IDE. Select that to open a dialogue.
You can use the top line of the dialogue to pass LiveCode syntax directly to LiveCode.
Type in a line of syntax and hit "Enter".
Kind Regards,
Hanson
zlgo
This example crashes IDE in ver 7.0
Elanor Buchanan
Hi
Thanks for letting us know, I just tested it out here in Windows 7 and I didn't experience the crash, could you let us know what OS and version of LiveCode you are using so we can investigate.
Thank you.
Elanor