Creating a LiveCode User Interface Programmatically

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

voranis
Posts: 9
Joined: Thu Jul 04, 2019 2:33 am

Creating a LiveCode User Interface Programmatically

Post by voranis » Sun Jul 07, 2019 10:58 pm

Hi,

LiveCode newbie here. I am just playing around with LiveCode right now and prefer to try creating a user interface programmatically for learning purposes, if possible.

Under Core Concepts in the LiveCode docs, there is a page called “Programming a User Interface” which suggests it can be done programmatically. And there are lots of code examples there, but I could not find an example for getting started by creating the toplevel window. If I wanted to create a toplevel window named “MainWindow”, would it be somethng like:

create stack “MainWindow”

Also, I can’t find any place in the LiveCode Community IDE to execute code snippets. I know in Smile there is an editor in whch you can type AppleScript code, select the code, and then select a menu item to run the currently selected code. Is there an equivalent in LiveCode?

Thanks,

Robbie

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Creating a LiveCode User Interface Programmatically

Post by bogs » Mon Jul 08, 2019 6:34 am

voranis wrote:
Sun Jul 07, 2019 10:58 pm
If I wanted to create a toplevel window named “MainWindow”, would it be somethng like:
create stack “MainWindow”
You could do that, or even just

Code: Select all

new stack "myStack"
...which makes the following
Selection_001.png
new stack...
Selection_001.png (14.61 KiB) Viewed 6974 times
Then if you wanted a field, button, or any other part of the interface, you could just type those in as well, and set the topLeft (buttons, labels, etc) or the whole rect (if you need them bigger or smaller than default).

For example, open the message box, and create the stack in the single line panel as you see in the picture. Then, simply for ease of use, you can use either the multiple line part of the message box, or type in

Code: Select all

edit the script of stack "myStack"
which will bring up the script editor.

For now, stick with the multiline message box. Type in the following...

Code: Select all

new button "myButton"
set the topLeft of button "myButton" to the left of this card +2, the bottom of this card -30
set the height of button "myButton" to 23; set the width of button "myButton" to 80
edit the script of button "myButton"
...and then hit Enter or ctrl/return or cmd/return if your on a mac. You should see something like this...
Selection_002.png
stacks and buttons and scripts, oh my!
If you don't like how the button turns out, you can always either delete it, or go back to the single line entry and enter everything one line at a time, or separate several commands with a semi-colon and space.

Card coordinates have 0,0 at the top left of the card. topLeft is actually the reverse of how you enter the topLeft, the first coordinate is actually left, then top for the second coordinate. The dictionary goes into it all in greater detail.
Image

voranis
Posts: 9
Joined: Thu Jul 04, 2019 2:33 am

Re: Creating a LiveCode User Interface Programmatically

Post by voranis » Mon Jul 08, 2019 7:56 am

So the Message Box can act as a code editor? I opened one when I was trying to find a code editor in the IDE, but I thought it was just a user interface object like the ones on the palette (in this case, a message dialog box that is to be opened when the user clicks on a button or gets an error while the user interface they created is running).

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Creating a LiveCode User Interface Programmatically

Post by bogs » Mon Jul 08, 2019 8:22 am

The message box can do much more than act like a code editor, but I believe testing code snippets is its primary function.

The actual code editor is right next to it on the menu bar, but is disabled if you don't have a stack selected. Once you create a stack in any way, you can then open the code editor itself.
menuBar.png
code and message...
Image

voranis
Posts: 9
Joined: Thu Jul 04, 2019 2:33 am

Re: Creating a LiveCode User Interface Programmatically

Post by voranis » Mon Jul 08, 2019 12:16 pm

Right—I saw the Code Editor was disabled, and I figured if I created a stack using the IDE it would become enabled. But if I wanted to create the entire UI programmatically, that would defeat my purpose...

Just to be completely honest, I was a software developer for over 20 years, specializing in user interfaces. When I began in the early 90s, there were few if any UI builders. I know the UI builder is the way to go, but when learning a language, in the beginning, I like to try to do everything programmatically. Especially when I am just playing around. Imagine—a UI developer who prefers to write code rather than use the UI. Oh, the irony. :)

I am on disability now, and my mind is not as sharp as it used to be. I struggled with this for a few days before asking, as I felt like I should be able to figure this out. I actually typed ‘new stack “MainWindow”’ in some window a few days ago, but I couldn’t find any menu item in the menu bar, tool bar, or popup menu to run it. Must’ve been the wrong window. Then I noticed the “Programming the User Interface” code snippets used “create”, as in “create button...”, so I wasn’t sure if “new” or “create” was preferred. I realize “newStack” is more in keeping with the LiveCode nomenclature, but I just wanted to try naming it “MainWindow” for old time’s sake.

I have used many languages over the years. I prefer languages with English-like syntax, like Smallktalk, AppleScript, and to a lesser extent, Ruby. But LiveCode has the most readable syntax I have ever seen.

Thanks for your help!

Robbie

SparkOut
Posts: 2839
Joined: Sun Sep 23, 2007 4:58 pm

Re: Creating a LiveCode User Interface Programmatically

Post by SparkOut » Mon Jul 08, 2019 12:35 pm

Here is a tip for you:

In the Property Inspector you can see the settings you can apply to any objects. The display will show the "description of the property" by default and if you hover over the description with the mouse pointer you will see a tooltip with the actual property name that applies to script.

In the IDE preferences, you can set the PI to display the scriptable property name by default.

This can be a handy way of identifying what property details apply to objects, and how to refer to them in script.

eg traversalOn is not a property that you might intuitively try scripting on a field unless you already had some reason to know of its existence and purpose.

Also, "the properties of object x" will provide an array of all the normally gettable / settable properties for that object in one go. You can examine the keys and values of this array to learn more too.

Hope this is helpful info.

Good luck!

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Creating a LiveCode User Interface Programmatically

Post by bogs » Mon Jul 08, 2019 2:53 pm

I know your story well heh. The good news is, you literally can do everything programmatically in Lc, but as SparkOut points out, cheating is extremely helpful in the beginning. The good news is, you can cheat programmatically too, such as his example :
objProperties.png
SparkOut's example...
voranis wrote:
Mon Jul 08, 2019 12:16 pm
I actually typed ‘new stack “MainWindow”’ in some window a few days ago, but I couldn’t find any menu item in the menu bar, tool bar, or popup menu to run it. Must’ve been the wrong window.
Actually, it probably wasn't the wrong window. The execution of things typed in to the message box requires either the 'return' key, or, if your keyboard doesn't have one (or it is awkwardly located), depending on the Os you would use the combo [ctrl + Enter] or on OSX [cmd + Enter]. I myself wish it had a button, but if it does, I haven't found it.
voranis wrote:
Mon Jul 08, 2019 12:16 pm
Then I noticed the “Programming the User Interface” code snippets used “create”, as in “create button...”, so I wasn’t sure if “new” or “create” was preferred. I realize “newStack” is more in keeping with the LiveCode nomenclature, but I just wanted to try naming it “MainWindow” for old time’s sake.
Heh, there really isn't any 'preferred way' to do things in Lc, other than what you pick up and decide you like.

'Create' is just as valid as 'new' in this situation. If you crack open the dictionary, you will find that many of the commands have synonyms and other links to commands that are similar, or complimentary.

Example for the single line message box :

Code: Select all

create field "myLabel"; put "This is my new label" into the last field; set the lockText of the last field to true; set the opaque of the last field to false;
will produce a label with a 3d border and locked text.

Also, when making a new stack this way, you have to set the title if you want to ditch the asterisk shown when you just set the name. To test this out, take your newly created stack, and in the message box type:

Code: Select all

set the title of the mouseStack to "My Jazzy Title"
Move your mouse over the new stack, make sure the messagebox has the focus, and execute the command.

It is all fun fun stuff :D
Image

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9802
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Creating a LiveCode User Interface Programmatically

Post by FourthWorld » Mon Jul 08, 2019 8:21 pm

Most things in LC are commands that operate on objects by adjusting properties. Keep that in mind as you go, and the opportunities for creating and modifying UIs on the fly become increasingly self-evident as you learn.

We have the "create" command to make new objects, "delete" to get rid of them, and "set" to set properties governing their appearance, content, size, location, contents, etc.

Also, as you use LC remember that everything you see in the IDE is made in LiveCode itself. And in recent versions, most of the UI is created dynamically from script. You can explore those scripts for inspiration (though they may be daunting for a newcome - they do a LOT): in your LC application folder see Toolset/palettes/, and inside there are numerous folders for IDE windows in files ending in "livecodescript".
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

voranis
Posts: 9
Joined: Thu Jul 04, 2019 2:33 am

Re: Creating a LiveCode User Interface Programmatically

Post by voranis » Wed Jul 10, 2019 2:00 am

bogs wrote:
Mon Jul 08, 2019 2:53 pm
I know your story well heh. The good news is, you literally can do everything programmatically in Lc, but as SparkOut points out, cheating is extremely helpful in the beginning. The good news is, you can cheat programmatically too...

Also, when making a new stack this way, you have to set the title if you want to ditch the asterisk shown when you just set the name. To test this out, take your newly created stack, and in the message box type:

Code: Select all

set the title of the mouseStack to "My Jazzy Title"
Move your mouse over the new stack, make sure the messagebox has the focus, and execute the command.

It is all fun fun stuff :D
Thanks for all your help! My energy has been down for the past few days, so I haven’t had a chance to try anything yet. I was going to wait and thank you once I had something to report, but now I’m thinking I should go ahead and say thanks before I forget....
Last edited by voranis on Wed Jul 10, 2019 2:11 am, edited 1 time in total.

voranis
Posts: 9
Joined: Thu Jul 04, 2019 2:33 am

Re: Creating a LiveCode User Interface Programmatically

Post by voranis » Wed Jul 10, 2019 2:11 am

bogs, SparkOut, and FourthWorld—

Thanks for all your help! My energy has been down for the past few days, so I haven’t had a chance to try anything yet. I was going to wait and thank you once I had something to report, but now I’m thinking I should go ahead and say thanks before I forget....

Incidentally, is there a way to reply to a specific post in this forum without using the quote (“) button? I read this forum on an iPad in bed when I am not feeling well enough to sit at my desktop computer, and deleting the quoted material, if all I want to say is “thanks,” can be quite time consuming. I did reply to bogs directly, but I deleted much of the (very useful) quoted material to cut down on repetition, but then I just decided to use the Post Reply button at the end of the posts to reply to everyone so I would not have to spend a lot of time deleting quoted material. Unfortunately I don’t know if everyone gets notified if I reply generally to this thread, rather than to everyone individually...

Robbie

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Creating a LiveCode User Interface Programmatically

Post by richmond62 » Wed Jul 10, 2019 7:30 am

cheating is extremely helpful in the beginning
I suppose, after working with LiveCode for about 19 years, and still "cheating",
i.e. not creating everything programmatically, I'll never reach the end. :D

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Creating a LiveCode User Interface Programmatically

Post by bogs » Wed Jul 10, 2019 11:19 am

voranis wrote:
Wed Jul 10, 2019 2:11 am
My energy has been down for the past few days...
...is there a way to reply to a specific post in this forum without using the quote (“) button?
I certainly hope you feel better soon.

As to replying to a specific post with just part of the post included, as I did above, the easiest way is when you hit [Reply] and are in the editor, highlight the specific part of the particular post you want to quote before hitting the quote button.
postQuote.png
Quote part of a post...
Other ways to do something similar is just how you did it on the top of your last post, something like
@bogs --
blah blah blah

@Fourthworld -- etc etc etc

Really the number of ways are up to you :D

Lastly, notifications are setup by the user in the control panel. They can either receive email, or access the forum through rss (what I do), or read the 'new posts' section of the board, or they can opt out entirely.

When you hit > 10 posts, you will also be able to send private messages and include links and images. Rest up, and we'll be here when your ready :wink:
Image

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Creating a LiveCode User Interface Programmatically

Post by richmond62 » Fri Jul 12, 2019 8:44 pm

Actually, I had a bash at creating an interface programmatically in LiveCode
in 2004:

https://www.dropbox.com/s/jdmuunzzkyhm7 ... N.pdf?dl=0

The source code is available, so contact me if you want to play around with it.

voranis
Posts: 9
Joined: Thu Jul 04, 2019 2:33 am

Re: Creating a LiveCode User Interface Programmatically

Post by voranis » Sat Jul 13, 2019 10:41 am

bogs wrote:
Wed Jul 10, 2019 11:19 am
voranis wrote:
Wed Jul 10, 2019 2:11 am
My energy has been down for the past few days...
...is there a way to reply to a specific post in this forum without using the quote (“) button?
I certainly hope you feel better soon.

As to replying to a specific post with just part of the post included, as I did above, the easiest way is when you hit [Reply] and are in the editor, highlight the specific part of the particular post you want to quote before hitting the quote button.

Other ways to do something similar is just how you did it on the top of your last post, something like
@bogs --
blah blah blah

@Fourthworld -- etc etc etc

Really the number of ways are up to you :D

Lastly, notifications are setup by the user in the control panel. They can either receive email, or access the forum through rss (what I do), or read the 'new posts' section of the board, or they can opt out entirely.

When you hit > 10 posts, you will also be able to send private messages and include links and images. Rest up, and we'll be here when your ready :wink:
Thanks bogs! I used to select a small amount of text and quote it when replying on the TCM Message Boards, but I have been off that system for many years due to the fatigue, and I had forgotten that technique.

When I included your user ids in my previous reply, I did not preface them with '@'. If I preface them with '@' (like a Twitter handle), does that make them "real" user id references (as it would in a tweet), and does the user get notified, if they have the appropriate notifications enabled?

I am at my desktop computer right now, so I can type better than I can on the iPad.

voranis
Posts: 9
Joined: Thu Jul 04, 2019 2:33 am

Re: Creating a LiveCode User Interface Programmatically

Post by voranis » Sat Jul 13, 2019 10:45 am

@bogs
@SparkOut
@FourthWorld
@richmond62

Thanks guys! I got a window to come up. That is all I have had time to try for now. When I am able to do more and have more questions, I hope you will see my questions if I add them to this thread/topic.

Robbie

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”