Using Fields
This tutorial describes how to use the different types of LiveCode fields to enter and display text.
Introduction
Fields allow you to display text in your application. You can also use fields to allow the user to enter and edit text or make selections.
Fields support multiple fonts, styles and colors and can display a basic subset of HTML and RTF text.
Field Types
There are 5 basic field types in LiveCode, all of which you can add to your stack from the Tools Palette.
1. Label field: a single line, non-editable field
2. Text entry field: a single line, editable field
3. Scrolling field: a multi line, scrollable, editable field
4. Basic table field: a basic table field allowing data to be displayed in cells
5. Scrolling list field: a multi line, scrollable, non-editable field allowing the user to make single or multiple selections
All these objects are really the same type, they are just templates with different properties set to give different appearance and behavior. For example you could add a basic text entry field to your stack and by setting the appropriate properties turn it into a scrolling list field.
Label, Text Entry and Scrolling fields
The first 3 field types are very similar, label fields cannot be edited by the user but the others can. The only difference between a text entry field and a scrolling field is that a scrolling field is larger and has its vertical scrollbar turned on.
The Contents of a Field
You can put text into a field by typing into it directly, using the 'Contents' pane of the field Property Inspector or by setting the text property of the field in script.
You can retrieve the contents, or a portion of the contents, of a field using the get or put command. You can use chunk expressions with fields to retrieve a portion of the text, for example:
put word 1 of field "text"For more details on using chunk expressions see this lesson.
Table Fields
Table fields allow you to display data in cells, and optionally allow the user to edit the cells. Table fields are ideal for displaying basic tabular data. For more complex data display requirements we recommend you use the Data Grid control.
You move between cells in a table field by clicking in a cell or using the tab and return keys. Setting the text property of a table field to tab delimited data inserts the data into the relevant cells.
A field is made into a table field by turning on the Basic Table object option in the Property Inspector.
List Fields
List fields allow you to display a set of choices. Users cannot edit list fields.
You can allow the user to select multiple lines by setting the multipleHilites property to true and allow them to select lines that do not appear together by setting the noncontiguousHilites to true. Both these properties are available in the Basic Properties pane of the Property Inspector of the field. To select a contiguous range of lines use shift-click, to select multiple non-contiguous lines use cmd-click or ctrl-click.
To check which line or lines are selected use the hilitedLines property, this returns the line number of the selected line, in this example the value of the hilitedLines property would be 1,4.
You can also set the hilitedLines property to highlight lines in the list field.
Display Properties of Fields
You can set the text color, size and font of fields. You can also set the background color and highlight color of a field.
These properties allow you to give fields a highly customized appearance within your application.
yasha
Hi
In my app I'm developing for android I have a scrolling text field which displays text imported from a text file and a scroll bar that the user can use to change the size of the font in the display field.
The code is something similar to this:
set the textSize of field "display" to the tuhmbPosition of fld "scrlBar"
This is inside a handler and it's working fine. The issue is that when I set the font size to larger then 16 the characters within the field get one on top of each other and it's not readable. And it's not due to lack of space in the display field.
On development mode it works properly, the issue starts only when running on my mobile.
I appreciate any insight on the issue
Thanks a lot for this tutorials
Best regards
Yasha
Elanor Buchanan
Hi Yasha
I did a quick test and it seems ok here, could you let us know what OS you are on, what version of LiveCode you are using and what version of Android and device you are testing on so we can look into this.
It might be easier to email [email protected], if you do it would be useful if you can attach your stack so we can have a look at it.
Kind regards
Elanor
Yasha
Hi Elanor
Just to update you or whoever might bump into a similar issue:
I contacted support and the issue was that I was using an outdated LiveCode version which had a bug with android fonts. I updated to livecode 7.0.6 and the problem was gone.
Thanks a million!
Kind regards
Yasha
Elanor Buchanan
Hi Yasha
That's great, glad we could help.
Kind regards
Elanor
Rene
The line:
You can also set the hilitedLines property to highlighted lines in the list field.
should be:
You can also set the hilitedLines property to highlight lines in the list field.
Elanor Buchanan
Hi Rene, thanks for bringing that to our attention. I have updated the text in the lesson.
Elanor
PAUL-LUC
Hi !
Problem with the properties multipleHilites and noncontiguousHilites. I have set them to true (by script or with the property inspecor), but it doesn't work. A single line is always selected in the locked field. My LiveCode version in 10.0 Community Edition. Can you explain that ? Thanks !
Elanor Buchanan
Hi Paul-Luc
With these properties set to true you can select a contiguous range of lines using shift-click, or select multiple non-contiguous lines using cmd-click or ctrl-click.
I have added this information to the section of the lesson on list fields.
I hope that helps.
Elanor
PAUL-LUC
Thanks for your answer. OK ! It works. However, I think it's a pity that the user must use a combination of kees. In my point of view, when the property "select-continuous lines" is selected in a locked field, it would be logical that the selection works without cmd ou ctrl click. I am thinking that this opportunity could be interesting for apps created for young children. The current operation prohibits its use with small kids.
Elanor Buchanan
Hi Paul-Luc, my apologies, there is another property that I didn't mention yesterday. If you set the toggleHilites property of the field to true, along with multipleHilites and noncontiguousHilites, it will behave as you describe.
Kind regards
Elanor
NURUL AMIRA
may i know how to add data that have been chosen from scrolling list field into database Mysql.
Heather Laine
Please look at this lesson:
http://lessons.livecode.com/m/4071/l/7003-connecting-to-a-mysql-database
simon
It seems to me that "set the hilitedLines..." of a List field doesn't work when it is inside an openCard or preopenCard script. Am I correct? If answer is yes how should I do in order to set the default of a List field when the App starts?
Elanor Buchanan
Hi Simon
I did a quick test here and setting the hilitedLines property of a field in a preOpenStack handler works for me. Could something else in your code be resetting it? Do you have an openField, focusIn or selectionChanged handler anywhere?
Kind regards
Elanor
Simon Schvartzman
Hi Elanor, as a matter of fact there was an error in my code...everything works OK. Sorry for the confusion when I found out it was too late. Cheers!
Elanor Buchanan
No problem, glad to hear you got it sorted out!
Elanor
Peter
Hi there. Is there any way to check the input of the user in a field if it is a correct email? I have searched much time but I could´n find some tipps or tricks. I have tried to check with "if then"-condition (to identify the @-Symbol and answer a warning, if no @ is in the string) but I have no idea how I can check, that someone put in the correct part of the string right from the @ (e.g. the .com or .de or .org). Could you help a little bit? Thank you very much.
Elanor Buchanan
Hi Peter
I suggest using the matchText function, you can use it to check if a string matches a regular expression, in this case matching the email that has been entered to an email validating regular expression. You can find lots of regular expressions to validate emails online
http://regexlib.com/Search.aspx?k=email&AspxAutoDetectCookieSupport=1
I hope that helps.
Kind regards
Elanor
Dan Urbauer
Hi Elanor,
I haven't used Livecode for at least 3 years, so I haven't kept up to date with the newer versions of it. I am using the Community version 9.6.0 and have not figured out how to unlock a label field that was locked with a earlier version of Livecode. When I click on the lock icon in the inspector the field is not unlocked, so I can't re-position it. The dots on the field are grayed out--I can't get them to turn black, which is when the field is unlocked. Any Help would be appreciated.
Dan Urbauer
Elanor Buchanan
Hi Dan
It sounds like the lockLocation property of the field is set to true. You can change this in the Property Inspector by going to the "Position" pane (crosshairs icon) and unchecking the Lock size and position box. You could also use the Message Box to do
set the lockLocation of field "my field" to false.
The lock icon in the Inspector actually locks the inspector itself rather than the object.
I hope that helps.
Elanor
Hana Farag
How do I say if they type in .......... then do .............
Elanor Buchanan
Hi
For this you could use an if statement or a switch statement e.g.
if field "input" is "abc" then
doThing1
else if field "input" is "def" then
doThing2
else
doThing3
end if
or
switch field "input"
case "abc"
doThing1
break
case "def"
doThing2
break
default
doThing3
end switch
Kind regards
Elanor
Nick James
on mouseUp
put the fileName of this stack into theFilePath
set the itemDel to "/"
put "Resources/lorem.txt" into the last item of theFilePath
put url theFilePath into field "ShowHelp"
end mouseUp
'theFilePath' returns the absolute file path to the file, I used a temporary field to show me 'theFilePath' so I'm happy that I'm pointing to the file.
The text file itself isn't being shown in the text field 'ShowHelp'. If I prepopulate the fields contents the script with some text then the script clears the text and the field displays nothing.
I am obviously missing something blindingly obvious??
Panos Merakos
Hello Nick,
You have to replace:
put url theFilePath into field "ShowHelp"
with:
put url ("file:" & theFilePath) into field "ShowHelp"
Hope this helps.
Jeff
If you have a field which allows wrapping and scrolling and has more text in it than can be displayed, is there any way to know which lines of the text are visible at any given time?
Imagine that I have a field which is vertically large enough to see only two lines of text, but the field contains four lines of text:
---------------------
one
two
three
four
----------------------
Then the user can scroll and see lines "one & two" or "two & three" or "three & four". Is there anyway to know which lines are visible to the user at any given time?
Panos Merakos
Hello Jeff,
You can try something like this:
on mouseUp pButtonNumber
answer topLine() & "-" & bottomLine()
end mouseUp
function topLine
local tVscroll, tTextHeight
put the vscroll of fld "myField" into tVscroll
put the effective textheight of fld "myField" into tTextHeight
return round(tVscroll / tTextHeight) + 1
end topLine
function bottomLine
return topLine() + round(the height of fld "myField" / the effective textHeight of fld "myField") - 1
end bottomLine
This should work with any field.
Kind regards,
Panos
Jeff
That is very clever, and I think I understand the calculation and why it should work. But unfortunately it doesn't work for me.
Perhaps I don't understand the properties of textHeight and Height of a field. I thought the number of lines which could be displayed in a field would be Height / textHeight. But that's not what happens.
I made a field with a height of 300 and then put lines of text in it with a textHeight of 20. I expect to see 15 lines of text because 300 / 20 = 15. But instead I only see 12 lines of text. It is the same whether I choose a font size which creates a textHeight of 20 or I set the fixedLineHeight to be 20.
Is there something else which takes up space in a field aside from lines themselves? Why does Height / textHeight of a field not equal the number of lines which can be displayed?
Jeff
To add to my question, if I change the fonts, it changes how many lines show. If I use the "Roboto" font, for example, everything works as expected. A field of 300 height with a textHeight of 20 shows 15 lines. This is true whether fixedLineHeight is set or not.
But other fonts don't do this. Arial, for instance, shows 16 lines if I set a font size that results in a textHeight of 20, but shows 15 if I set the fixedLineHeight to 20. In both case the statement 'put the effective textHeight of fld "fieldName" ' shows a textHeight of 20.
So part of the answer seems to be, choose a font that makes these calculations work. Unfortunately the "(Default)", "(System)", and "(Text)" fonts do not work properly (at least on Windows 10) unless I set fixedLineHeight.
Panos Merakos
Hello Jeff,
The "textHeight" value has an effect only if "fixedLineHeight" is "true" - I should have mentioned that the script I posted needs "fixedLineHeight" to be "true". Otherwise (i.e. with fixedLineHeight being "false" I am not sure if there is a way to make this work with any font, since a "textSize" of e.g. 12 has a different line height depending on the font that is used.
Note that the "fixedLineHeight" property can only be set to true or false, and not to a numerical value as you describe in your previous comment (e.g. you mentioned "...if I set the fixedLineHeight to 20")
Hope this helps.
Kind regards,
Panos
Jeff
Thank you! That makes complete sense. If fixedLineHeight is false, then every line could be a different size depending on the size of the font on that line.
Thank you again for such a quick response to my question. I will set fixedLineHeight to true if I need to make these calculations.
Panos Merakos
You're welcome, Jeff.
Willoz
Hello, if I got a simple field with one line and I want the app do something when after some typing I press the "return" key, what is the handler that I should use? I've tryed using "on enterKey" and "on returnKey" buy there is no effect and inside the field a new row is created moving up the first line, but I need that the text don't move and no new lines of text must be added
Thanks in Advance for your answer :-)
Panos Merakos
Hello Willoz,
Have you tried the "on enterInField" and "on returnInField" messages?
Regards,
Panos
--
Willoz
Yeah, sorry for the late answer, but I've discovered it aproximately when you have read my message, because I've seen your answer exactly when I was trying to use it in my code!
I Think that sometime the Livecode lessons cover only one Little part of the use cases and a lot of little possibilities goes lost in unknow handlers and functions... :-)