How to create simple lists in LiveCode

In LiveCode 4.6 experimental support has been added to the field for simple, single level, ordered and unordered lists. This lesson will show how to use this new feature and preserve the content.

Attached Files

The sample stack

The sample stack

There is an example stack included with this lesson. The stack consists of a field and four buttons that set bullet points on the content of the field.

The handler that sets the list style of each paragraph in the field can be found in the card script of the sample stack. When the handler is called by one of the button it steps through each line in the field and sets the listStyle property of each line

on setBullets pStyle

## Step through each line/paragraph of the field

## Set the listStyle property of each line

repeat with tLineNum = 1 to the number of lines of field "text"

set the listStyle of line tLineNum of field "text" to pStyle

end repeat

end setBullets

Note: You can mix listSyles within a field. Each paragraph does not have to have the same listStyle.

htmlText format

Paragraphs with a non-empty listStyle present themselves in htmlText wrapped with <LI> tags. Sequences of such paragraphs with the same listStyle are bracketed by <UL> or <OL> tags. These tags take a type attribute, matching the (legacy) HTML attribute of the same name.

For example the list shown above woule be represented as

<ol type='i' >







The legacy HTML attributes are

disc - disc

circle - circle

square - square

decimal - 1

lower latin - a

upper latin - A

lower roman - i

upper roma - I


As it stands the listStyle property does not save into the stack-file, to ensure persistence of listStyles we will save the htmlText of the field as a custom property of the field. This is saved when the stack is saved and can be used to restore the content and styling of the field when the stack is reloaded.

Saving the htmlText when the stack is closed

When the stack is closed we want to save the htmlText of the field as a custom property of the field. To do this we handle the closeStack message. This allows us to save the htmlText before the stack is closed.

The following handler is on the stack script

on closeStack

set the cHTMLText of field "text" to the htmlText of field "text"

save this stack

pass closeStack

end closeStack

Resoring listStyles to the field when the stack is opened

When the stack is loaded we need to retieve the custom property we saved in the last step and set the htmlText of the field to what is stored in the custom property, This will restore the listSyles of the field.

The following handler is on the stack script

on openStack

set the htmlText of field "text" to the cHTMLText of field "text"

end openStack


Add your comment

E-Mail me when someone replies to this comment