Creating a LiveCode User Interface Programmatically
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
Creating a LiveCode User Interface Programmatically
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
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
Re: Creating a LiveCode User Interface Programmatically
You could do that, or even just
Code: Select all
new stack "myStack"
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"
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"
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.
Re: Creating a LiveCode User Interface Programmatically
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).
Re: Creating a LiveCode User Interface Programmatically
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.
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.
Re: Creating a LiveCode User Interface Programmatically
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
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
Re: Creating a LiveCode User Interface Programmatically
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!
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!
Re: Creating a LiveCode User Interface Programmatically
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 :
'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 :
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:
Move your mouse over the new stack, make sure the messagebox has the focus, and execute the command.
It is all fun fun stuff
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.
Heh, there really isn't any 'preferred way' to do things in Lc, other than what you pick up and decide you like.voranis wrote: ↑Mon Jul 08, 2019 12:16 pmThen 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.
'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;
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"
It is all fun fun stuff
-
- VIP Livecode Opensource Backer
- Posts: 9847
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Creating a LiveCode User Interface Programmatically
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".
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
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Creating a LiveCode User Interface Programmatically
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....bogs wrote: ↑Mon Jul 08, 2019 2:53 pmI 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:Move your mouse over the new stack, make sure the messagebox has the focus, and execute the command.Code: Select all
set the title of the mouseStack to "My Jazzy Title"
It is all fun fun stuff
Last edited by voranis on Wed Jul 10, 2019 2:11 am, edited 1 time in total.
Re: Creating a LiveCode User Interface Programmatically
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
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
-
- Livecode Opensource Backer
- Posts: 9440
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Creating a LiveCode User Interface Programmatically
I suppose, after working with LiveCode for about 19 years, and still "cheating",cheating is extremely helpful in the beginning
i.e. not creating everything programmatically, I'll never reach the end.
Re: Creating a LiveCode User Interface Programmatically
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
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
-
- Livecode Opensource Backer
- Posts: 9440
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Creating a LiveCode User Interface Programmatically
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.
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.
Re: Creating a LiveCode User Interface Programmatically
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.bogs wrote: ↑Wed Jul 10, 2019 11:19 amI 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
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
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.
Re: Creating a LiveCode User Interface Programmatically
@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
@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