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.

Description:  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.

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.

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

 

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.

 

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).

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

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

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

revGoUrl myLink

else if myLink contains "card" then

go cd 2

end if

end linkClicked

Save 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

3 Comments

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

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.