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.

You can find the stack used for this lesson in the following url: https://tinyurl.com/yct79n52

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' >

<li><p>one</p></li>

<li><p>two</p></li>

<li><p>three</p></li>

<li><p>four</p></li>

<li><p>five</p></li>

</ol>

The legacy HTML attributes are

disc - disc

circle - circle

square - square

decimal - 1

lower latin - a

upper latin - A

lower roman - i

upper roman - I

Persistence

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

Restoring listStyles to the field when the stack is opened

When the stack is loaded we need to retrieve 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

2 Comments

Jeff

This stack works exactly as expected. And if I use the button to create an "upper latin" list and then type 'put the htmltext of fld "text" ' into the message box, it prints

    ... as expected.

    But if I take that html code,

      ..., and put it into the htmltext of another field, the list is always lowercase. This is true for "upper latin" and "upper roman".

      Is there a way to use "A" and "I" in the htmltext (

        ) and have the corresponding "li" lines be upper case?

Panos Merakos

Hello Jeff,

This sounds like a bug - we have filed this report here https://quality.livecode.com/show_bug.cgi?id=24313
You can add your email in the cc list of the report to get progress updates.

Kind regards,
Panos

Add your comment

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