Hello World! 3 ways
What's the first thing you want to learn to do with LiveCode? A "Hello World!" application of course.
This lesson will show you a variety of ways to say "Hello World!" using LiveCode.
Your first stack
First things first, we need a stack so we can start building our application. Go to the File menu and select New Stack - Default Size(1) We now have a stack containing a single card(2)
Edit mode
Selecting Edit Mode allows you to add controls to the stack, select controls and edit scripts and properties of controls.
In the Tools Palette select Edit Mode.
Adding a field to the stack
To add a field to the stack we can simply drag it onto our stack from the Tools Palette.
Browse mode
Selecting the Browse tool allows you to interact with the stack in non-editing mode. This tool is used for user actions such as clicking buttons and typing in fields.
Displaying Hello World! in the field
We can then simply type "Hello World!" into the field.
Opening the Message Box
When you start up LiveCode you should see the Message Box(1). If you cannot see it click the Message Box button in the Menubar(2).
Using the Message Box
The Message Box is a command line tool that allows you to try out short scripts and test parts of your program. It provides a convenient output window for debugging and can be used for editing and setting properties. It is one of the more useful components in LiveCode when you are starting out and wanting to try out simple scripts.
to output to the Message Box we simply type
put "Hello World!"and press return to execute the command and there it is, "Hello World!" is displayed in the Message Box.
To put text into a field we can use almost the same script, we just also specify where to put the text
put "Hello World!" into field 1Using a dialog box
Another option is to use a dialog box to display a message. For this all we need to do is use the answer command. Execute this line in the Message Box
answer "Hello World!"Using a field and a button
If we don't want a field that can be edited manually we can use a label field and a button. Again we just drag them onto our stack from the Tools Palette.
Scripting the button
Now we want to put "Hello World!" into the field when the button is clicked.
1. Go into Edit mode
2. Select the button and open the Script Editor for the button by clicking the Code button in the Menubar
We can reuse our line of LiveCode from earlier, this time we want it to be executed when the button is clicked. Enter this into the code editor:
on mouseUp
put "Hello World!" into field 1
end mouseUpCompile the script by clicking Apply(3), go into Run mode(4) and click the button.
Cornelio Cano
It seems so easy. Even a Non-English Speaker, like me, can understand it.
Hubert
missing how to build the application and launch the simulator!
Elanor Buchanan
Hi Hubert
There are a couple of separate lessons on building applications for Mobile, using the simulator and depolying to devices.
For iOS
http://runrev.screenstepslive.com/spaces/lessons/buckets/1004/lessons/23075-How-do-I-build-an-iPhone-application-for-iOS-
and for Android
http://lessons.runrev.com/spaces/lessons/buckets/1004/lessons/27733-The-Basics-How-do-I-Create-Hello-World-on-Android-
Hopefully these are useful.
Elanor
Ralph
What exactly does LiveCode put on the Android device?
I can think of three possibilities
1. The Main Stack is converted to Java and runs as a native app.
2. The Main Stack is converted to JavaScript and runs in the Android browser.
3. The Main Stack is converted to HyperTalk and runs in a HyperTalk virtual machine that is running on the Android device.
Please advise,
thanks,
--ralph
Esme Moore
It seems odd to me that there's this Message Box in which one puts code sometimes, and then there's thsi Code tool in which one does the same thing, only more so. Still, early days yet. Let's see how the rest of this goes.
Elanor Buchanan
Hi Esme
All the scripts you write that make your application work need to be part of your stack. This allows you to save them and makes them a part of the application you create.
The message box is a useful tool for running scripts, executing single lines of code, trying short scripts, checking properties, testing parts of your code and using as an output window for debugging but it is not a part of the application you are creating.
For more information on the message box have a look at section 3.7 of the User Guide which is available from the Help menu.
I hope that helps.
Elanor
Sergio
Yes, that was easy!!!
Horst Andreas
So I have one text field and two label fields. So how do I know the correct number. For example put "Hello You" into field 2 is not the same like the field-ID "1010".
Can i use the field-id and how do I do that?
Thanks for answer
Andreas
Elanor Buchanan
Hi Andreas
You can find the id of a field (or any other object) by opening up the Property Inspector of the object. The name and ID of the object are displayed in the title bar of the inspector.
I hope that helps.
Elanor
Trace
Elanor,
The name and ID of the object are displayed in the title bar of the inspector do not match the field id.
Example:
When I have one field on a new mainstack I reference it with "field 1" however the name and ID of the object displayed in the title bar of the inspector is: field "Field", ID 1004"
How does that correlate?
Elanor Buchanan
Hi Trace
Each control has a name, number and an id.
In this case the field's name is "Field", number is 1 and ID is 1004.
The ID is unique throughout the stack, there will only ever be 1 field with the id 1004 in a stack.
The number of a control is its layer on the card. Lower numbers are further back; higher numbers are farther forward. If you create several controls and don't change their layer order, the first control you created has the number 1 and the rest of the controls are numbered in the order of creation.
I hope that helps.
Elanor
David Murphy
So if I read this correctly, if I create a field it will be 'field 1'. A second field added after that would be 'field 2'. However if I added a third and put it physically ahead of the first field, all the numbers would now change - the new field would be 1, the original field 1 would become field 2 and so on.
If this is the case, using the relative field name in code is very dangerous isn;t it? It would make the code very inflexible. Is it not better to use the field id or name in code? and if so, how does one do this?
David Williams
Hi David,
These number of a control corresponds to the order they are added to the stack. More technically, the number is the layer (layers are the order in which controls are 'layered' on top of one another on a stack) of that control, so yes, if you manually relayered these fields on the stack, their numbers would change.
However, you would almost never use this form in a more involved, real-world app - it is just a simple way of demonstrating the mechanics here. You would (as you say) usually refer to the name of a control, or sometimes the id of a control. In order to use the name of a control, you simply use the name in place of the number:
put "Hello World!" into field "My Field"
Or, to use the id:
put "Hello World!" into field id 12345
I hope this answers your question.
-David
Vincenzo Fabiano
Very easy! Nice.
tyler
im really new to coding so i don't know like nothing how you make a progress bar go full
Hanson Schmidt-Cornelius
Hi Tyler,
this question is answered in the following lessons:
https://runrev.screenstepslive.com/s/lessons/m/4071/l/11887-How-do-I-use-a-Progress-Bar-
https://runrev.screenstepslive.com/s/lessons/m/4071/l/7285-How-to-show-the-progress-of-a-download
Hope this helps.
Kind Regards,
Hanson
Misto
I like !!! it is very easy till now;
ILANSA
So far so good. I'm liking it. Easy to use and understand, and I have never coded in my life.
wong
Never code in my life! I want to start the fundamentals of app designing, so, far, lesson has been straight-foward.
Farrah
ok
josh scott
ermm ... just a little bit stuck, may sound stupid but where is the run button?
Hanson Schmidt-Cornelius
Hi Josh,
it is not at all stupid. There is a learning curve associated with all new development environments.
The Run/Browse tool is the arrow on the top left of the tools palette. Once you select this tool, your stack is in run mode. You can then interact with the stack. Selecting the button "Button" in this mode executes the script behind the button.
Kind Regards,
Hanson
Terrence Brannon
Very nice environment. I would comment that inspecting the label does not give you any info as to why "field 1" would be the way to reference it from code.
I also checked for intellisense or someway to simply navigate to the events of the button and simply fill i the code, but as it stands, you have to know the events.
Hanson Schmidt-Cornelius
Hello Terrence,
you can use the "Property Inspector" to view the properties of every control on a stack. This allows you to view and change the name of the controls. For example, you could change "field 1" to something like "Hello World Display Line". You would then of course also have to update your code accordingly.
With regards to events, you can browse the dictionary and select "Language->Message" on the left hand side of the dictionary. This allows you to view all of the events that are handled. Their name should give you a bit of an idea of what they do.
Kind Regards,
Hanson
sharan
i am fresh engineering graduate .i want learn livecode. if i learn livecode i can have bright feature? and how? tell me plz
Hanson Schmidt-Cornelius
Hi Sharan,
LiveCode is a tool for developing a wide range of software applications. Have a look at the following link for further information on the benefits: http://www.runrev.com/products/livecode/
Now you are asking some challenging questions here and if there was a universal answer to them, a lot more people would have a bright future.
You are responsible for the direction your future takes, and this relies very much on the decisions you make along the way. If you do find yourself wanting to develop software in a company or as a freelance developer, then LiveCode can potentially give you the edge over competitors, depending on the domain in which you want to operate.
Hope this helps. Wish you all the best with your future career.
Kind Regards,
Hanson
Graham Seed
After completing the Tutorial I saved my work as HelloWorld.livecode but note that even after selecting File|Save the Mainstack title remains "Untitled 1 *". I assumed that the * indicated unsaved work but if I close my .livecode file and reopen it the title still displays "Untitled 1*". Thus, I have 2 questions: 1) How is the "*" removed from the title? and 2) How is the title name changed?
Thanks.
Hanson Schmidt-Cornelius
Hi Graham,
I have answered your questions Q2 fist and Q1 next. Just made more sense that way around:
Answer to Q2: You can change the name of a stack by selecting "Tools -> Application Browser". This opens a new dialog. Right click on the name of the stack in the left "Name" panel and select "Property Inspector". A new dialog opens and you can alter the name of your stack in the "Name" field.
Answer to Q1: The "*" indicates that the stack name uses the name of the stack rather than a title. The differentiation between the two becomes important when you want to refer to the stack from within LiveCode, in which case you use the name rather than the title. You can make the "*" disappear by entering a name in the "Title" field.
Kind Regards,
Hanson
Vaughn
This brings back days gone by with HyperCard from Apple. HyperCard was the beginning script engine for user designed apps for Mac. We thought this was the cats wishers back in the day. I find IOS like a massive complex tool with an overwhelming learning curve. Every time you get close the learning IOS they change the OS and add additional complexity. As an IOS developer for 4 years I don't need or want the complexity. LiveCode may be the best option available to find a better way. It needs to support all of the user interface features and quality of IOS to make it as an option.
kubica
i had "save as standalone application" a apk for android，it‘s froyo type，but when i put it
into my android device，the application can't install（my device’s system android4.0），thank you！
Language Teacher
Hanson,
Thanks for the answer re: renaming fields. That made it so much clearer.
Is there anyway to get rid of the text that is displayed in the button i.e. have a 'blank button'?
Thanks in advance!
Language Teacher
Hanson Schmidt-Cornelius
Hi Vaughn,
thank you very much for your comments.
Indeed, iOS changes frequently and LiveCode adapts to these changes in order to provide a development experience that is as consistent as possible. We do not provide hooks for every single iOS feature that apple provides, but you can create iOS externals that allow you to build iOS applications that combine both LiveCode and iOS code. You can find further information here: http://livecode.com/developers/guides/externals/
Kind Regards,
Hanson
Hanson Schmidt-Cornelius
Hi Kubica,
there could be many reasons for this happening.
If you are just wanting to test the application on your mobile device, then I would suggest trying to use the "Test" button, after selecting the target device. This is covered in a "Hello World" lesson that is specific to android devices:
http://lessons.runrev.com/s/lessons/m/4069/l/27733
If you are looking for more information on how to deploy to android devices then have a look at the following lessons:
http://lessons.runrev.com/s/lessons/m/4069/l/27385
http://lessons.runrev.com/s/lessons/m/4069/l/27389
Kind Regards,
Hanson
Hanson Schmidt-Cornelius
Hello Language Teacher,
yes, you can remove the name of the button and change other properties by using the Property Inspector for the particular control. Here are the steps:
1. Change LiveCode to "Edit" mode
2. Right click on the button you would like to make blank and select "Property Inspector"
3. Ensure the drop down menu of the Property Inspector reads "Basic Properties"
4. Untick the button that says "Show name"
Kind Regards,
Hanson
Karsten
Hi all,
thanks for this tutorial. Actually there's one thing I'm missing: Assume I want to use the input field for somebody to enter her/his name.
Now, when pressing the button, the answer message should be something like
"Hello, " &&
How would I achieve that? Just don't get it after spending hours of reading your documentation.
Cheers,
Karsten
TheSheik
In the "using a field and a button" section, you show the label in the screen shot displaying "Hello World". I woud have thought that I can edit the text in the label by simply clicking into the field, there doesn't seem to be any way to do that, and you don't mention how. Am I missing something? Thanks!
Elanor Buchanan
Hi Karsten
You can do this by directly referencing the field, which will use its contents e.g.
answer "Hello," && field "name"
I hope that helps.
Kind regards
Elanor
Elanor Buchanan
Hi TheSheik
That is because the field used in that section is a label field, the properties of label fields are set up for display only, not for user entry. If you want to me able to type into a filed use a Text Entry Field instead, as described in the section Displaying Hello World! in the field.
I hope that helps.
Kind regards
Elanor
Nicholas Spies
Following the instructions from the top, simply changing the script of the button to direct the text to the text field does not work! It persists to show the text in the Alert box. I found it necessary to make a new button, copy the script from the code of the original button into the code of the 2nd button, and only then did the text end up in the destination (which I modified the destination of to read: field "field" of card ID 1002 so as to be unambiguous) when the 2nd button is pressed (and released).
Nicholas Spies
The tutorial doesn't work as written. A new button needs to be created to redirect text output to the text field, otherwise it continues to behave as first scripted and outputs to a dialog (or is it actually an Alert?). As mentioned by others, the Label field is named "label". IMHO using the ID of an object is the safest way to specify it because it remains unique.
Elanor Buchanan
Hi Nicholas
Thank you for your comments. The button script can be changed to redirect to the field, after making any change to a script in LiveCode you need to ensure you have applied your changes by clicking the Apply button in the Script Editor, this should cause the indicator to go green, if it is yellow it means there are unapplied changes to the script, LiveCode will not recognise unapplied changes to the script so the button will continue to behave as if the changes had not been made. Of course this might not be the issue here, if your changes are applied and the button is still creating an answer dialogue then that sounds like a bug that we will need to investigate so please do let me know if that is the case.
As for referring to the field you are right the ID of an object is unique so if a safe way to refer to an object, however IDs are not very descriptive and using IDs make writing, and reading, your code more difficult as yo. My preferred method is to name all my objects and use the names when I refer to them in code. You can also refer to a control by it number property, which is the method used in this tutorial, we only have 1 field so it's not confusing and means we don't need to set the name property or look up the ID, I wouldn't generally use this method to explicitly refer to controls in a real app.
Kind regards
Elanor
Lisa C
Wow this is very cool. Can't wait to see what else I can do with this program.
Steve Covello
Please note that "Return" key on a Mac extended keyboard is the key located above the right shift key. This does not work in your instructions. It creates a line break, not an execute command.
Instead, tell Mac users to use the "Enter" key next to the number pad.
Elliot
How do I get to run the emulator for Android after coding for an android platform. What is it am I supposed to have after installing LiveCode on my pc
Jose Ashley
I hope I learn something new when using LiveCode
eury
Its so nice