Creating Hypertext Links in Fields
Creating hyperlinks in field objects.
Introduction
This tutorial explains how to use the textStyle and textLink properties to create hypertext links within a locked text field.
Launch LiveCode and create a new stack by opening it from the File menu.
Creating your text field.
Create a text field that will contain the text which you wish to make into a hypertext link by click-dragging the field object creation tool on the tools palette over to your stack. Resize the field using the selection handles to a suitable size for your stack.
Adding text to your text field.
Enter the following in the text field by either switching to browse/run mode and entering the text directly or by entering it into the "Contents" section of the field's Object Inspector, obtained by first clicking on the field to make it active and then performing the menu command Object -> Object Inspector:
Click here to go to LiveCode's site. -- this is the beginning of the text to enter into the text field
Click here to go to a card with more information. -- this is the end of the text to enter into the text field
Using the Object Inspector, name the field "text" or some such thing. While this step isn't really necessary, it is good practice to give objects names that are easily remembered.
From the Object menu (1) create a New card (2). Open the message box from the toolbar (3). Using the message box, go back to card 1 by typing the following plus return (4):
go card 1
Setting the textStyle to link.
Open the message box and type the following, followed by a return/enter:
set the textStyle of word 2 of line 1 of fld "text" to link
This sets the second word of the first line as having a link textStyle. It should result in the indicated word having a blue, underlined, link appearance.
Linking the link to a destination (website).
Enter the following in the message box, followed by a return/enter:
set the linkText of word 2 of fld "text" to "https://www.livecode.com"
This makes the link, when clicked, open a web browser that opens this URL.
Repeat this process to underline the "here" on the second line, changing the chunk descriptor to reflect the second "here" in the text field. (Hint, it's on line 2).
Linking the link to a destination (a card in your stack).
Repeat the instruction above to create a link for the second "here" but, instead of the URL, give the destination as "card 2" or whatever you have named card 2.
Locking the text field
Lock the field "text" by right clicking on it, accessing its Property Inspector palette, and ticking the box titled "Lock text" on the Basic tab (1).
Scripting the Locked Field
We will now script the field to handle the links being clicked and directing the user to the desired location. To do so, select the text field by right clicking, and select Edit Script.
In the Script Editor window, enter the following script and click on the "Apply" button in the upper-left corner:
on linkClicked myLink
if myLink contains "https://" then
launch url myLink
else if myLink contains "card" then
go cd 2
end if
end linkClickedSave and test!
Save your stack by performing the menu command File -> Save As...
Switch into browse/run mode by clicking on the arrow tool on the Tools Palette (1), then click on your links (2), (3) to see if they work. Obviously, we haven't entered any text on card 2, and you would need a navigation button to take you back to card 1 - see the lesson "Navigating around a Stack" for information on how to add such a button. http://lessons.livecode.com/m/4603/l/565726-navigating-around-a-stack
bogs
I was doodling around with this lesson today, and while it works as expected, I also found that just enclosing the link in an href tag also works to launch it, i.e.
{ link text setup as The forums
Code changed to -
on linkClicked myLink
launch url(myLink)
end linkClicked
Torsten
In the current releases 9.0.3 the linktext style is NOT blue and underline but the color of the LC version: green color for community, blue for Indy and grey for Business :-)
In the standalone version of e.g. the Indy stack, the color and underline are as decribed. It seems that there is a difference between development and standalone. Please correct it.
Thanks
Torsten
Elanor Buchanan
Hi Torsten,
Thanks for bringing this to our attention. This is a bug, I have reported it here
https://quality.livecode.com/show_bug.cgi?id=22033
The Start Center is setting the linkColor and underlineLinks properties, but it is setting the global properties when they should only be set for the Start Center stack. There are 2 workarounds you can use in the meantime until the bug is fixed
1. Uncheck the "Show at Startup" checkbox in the Start Center so it is not automatically opened and the properties are not changed.
2. Execute
set the linkColor to 0,0,239
set the underlineLinks to true
in the Message Box to reset the properties.
Kind regards
Elanor