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

0 Comments

Add your comment

E-Mail me when someone replies to this comment