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