Merge pull request #1614 from livecode/interactive_tutorial-hello_world

Interactive tutorial hello world

Author: livecodeali

Toolset/palettes/tutorial/courses/First Run/tutorials/Hello World/lessons/App Lesson.txt

@@ -0,0 +1,244 @@
+tutorial "Hello World"
+
+prologue
+	Welcome to LiveCode, to help you get started this Interactive Tutorial will
+	show you how to create a simple 'Hello World' app.
+end prologue
+
+step "Tutorials Intro"
+	You can keep track of how much of the tutorial you have completed
+	with this progress bar, and exit the tutorial at any time by
+	clicking on the stop button.
+
+	Clicking the fast-forward button will skip to the next important
+	concept being introduced in the tutorial. Use this if you've got the
+	idea about something or don't want to have to create every last
+	part of the user interface, for example.
+
+	The tutorial will also help you out by disabling any options you
+	don't need for the current step.
+action
+	interlude
+	highlight toolbar "tutorial"
+	go to step "Stack Interlude"
+end step
+
+skip point
+
+step "Stack Interlude"
+	We start by creating the User Interface (UI) for the Hello World app.
+
+	The first step is to create a new LiveCode app at the default size.
+
+	Click on the File menu, and select 'New Stack' → 'Default Size'.
+action
+	highlight menu item "Default Size" of menu item "New Stack" of menu "File"
+	capture the next new stack as "Mainstack"
+	capture the next new card of stack "Mainstack" as "HelloWorld"
+	wait until there is a stack "Mainstack"
+	go to step "Properties interlude"
+end step
+
+skip point
+
+step "Properties interlude"
+	Every object in LiveCode has a set of properties associated with it. These
+	properties control the appearance, location and behavior of the objects
+	in your app.
+
+	The Property Inspector is a window that allows you to control these properties.
+action
+	interlude
+	go to step "Set Stack Properties"
+end step
+
+step "Set Stack Properties"
+	Click on the 'Inspector' icon on the Toolbar to open the Property
+	Inspector.
+action
+	highlight toolbar "Inspector"
+	wait until there is an inspector for stack "Mainstack"
+	go to step "Set Stack Title"
+end step
+
+step "Set Stack Title"
+	Set the 'Title' property of the stack to "Hello World" and press 'Enter'.
+
+	You will see the title of the stack change after you set the property.
+action
+	highlight property "title" of section "basic"
+	wait until the title of stack "Mainstack" is "Hello World"
+	go to step "Tools Palette Interlude"
+end step
+
+skip point
+
+step "Tools Palette Interlude"
+	The next step is to add some objects to your stack.
+
+	This is the Tools Palette. It contains all the built-in objects that
+	you can drag out onto your stack, such as buttons, text fields and
+	scrollbars. It also contains more complex controls including a header bar,
+	navigation bar, browser and line graph.
+action
+	interlude
+	highlight tools
+	go to step "Create Button"
+end step
+
+step "Create Button"
+	The first object we will add is a button. Clicking on this button will
+	show a message to the user.
+
+	Drag a button from the tools palette onto your stack.
+action
+	highlight tool "Create Button"
+	capture the next new button of stack "Mainstack" as "hello"
+	wait until there is a button "hello"
+	go to step "Set Button Location"
+end step
+
+step "Set Button Location"
+	Position the button, as shown.
+action
+	add guide "buttonLoc" with rect "159,119,241,142" to stack "Mainstack"
+	highlight guide "buttonLoc"
+	wait until button "hello" fits guide "buttonLoc" with tolerance 5
+	go to step "Open Property Inspector"
+end step
+
+step "Open Property Inspector"
+	Click on the 'Inspector' icon in the Toolbar to open the Property Inspector
+	for the button.
+
+	Remember that properties control how objects look and behave and can be set using the Property Inspector.
+action
+	highlight toolbar "Inspector"
+	wait until there is an inspector for button "hello"
+	go to step "Set button name"
+end step
+
+step "Set button name"
+	Set the 'Name' property of the button to "Say Hello" and press 'Enter'. You will see the Name appear on the button.
+action
+	highlight property "name" of section "Basic"
+	wait until the name of button "Hello" is "Say Hello"
+	go to step "Events and messages interlude"
+end step
+
+skip point
+
+step "Events and messages interlude"
+	Now that the UI is complete the next stage is to add code to the app
+	to make it interactive.
+
+	LiveCode apps work by responding to 'messages', which are usually triggered by some kind of user action. A message might tell the app that the user has
+	clicked on a button or typed in a field. You add code to tell the app what
+	to do when a message is received.
+
+	Each object has it's own individual code, so different buttons can respond to
+	messages in different ways.
+action
+	interlude
+	go to step "Open Add Script"
+end step
+
+step "Open Add Script"
+	Select the button and click the 'Code' button in the Toolbar.
+action
+	highlight toolbar "Code"
+	wait until there is a script editor for button "Hello"
+	go to step "Script Editor Interlude"
+end step
+
+step "Script Editor Interlude"
+	The Script Editor is a window that allows you to add code to the
+	objects on your stack.
+
+	Any code you have added in the Script Editor does not become live
+	until you click on the 'Apply' button. When this is clicked, you will
+	get feedback about whether the code you have written has any
+	errors in it or not.
+action
+	interlude
+	highlight "Apply" of script editor for button "Hello"
+	go to step "mouseUp message"
+end step
+
+skip point
+
+step "mouseUp message"
+	The message we will respond to is 'mouseUp'. This message is sent when the
+	user clicks on the button.
+
+	We will add code to display a message to the user saying "Hello World!"
+
+	Add this handler to the button script.
+
+	Don't forget to click the 'Apply' button when you have finished.
+script
+	on mouseUp
+			answer "Hello World!"
+	end mouseUp
+action
+	highlight script editor for button "Hello"
+	wait until button "Hello" is scripted
+	go to step "Edit Tool Interlude"
+end step
+
+skip point
+
+step "Edit Tool Interlude"
+	LiveCode has two modes: Edit mode and Run mode.
+
+	Up until now you have been in Edit mode all the time. In Edit mode
+	you can add, edit and move objects on your stack. You can also select objects
+	to change their properties or add code to them.
+action
+	interlude
+	highlight tool "Edit Mode"
+	go to step "Run Tool Interlude"
+end step
+
+step "Run Tool Interlude"
+	In Run mode your app is live - objects will behave as they would for
+	the app user. For example, clicking on the 'Say Hello' button will show a hello message.
+
+	To test the code you have just added, we are going to enter Run mode and click the button.
+
+	Select 'Run mode' in the Tools Palette.
+action
+	highlight tool "Run Mode"
+	wait until the tool is run
+	go to step "Test Button"
+end step
+
+step "Test Button"
+	Click on the 'Say Hello' button to see the message.
+action
+	highlight button "hello"
+	wait until button "hello" pops up answer dialog
+	go to step "Next Steps"
+end step
+
+step "Next Steps"
+	That's it, you have finished your app.
+
+	Why don't you try customizing it by changing the message or adding multiple buttons that display different messages.
+
+	To learn more about LiveCode development why not try a more advanced tutorial or take a look at some of the lessons in our Lessons portal.
+action
+		interlude
+    highlight toolbar "Tutorials"
+    go to step "Using in FileMaker"
+end step
+
+epilogue
+	Congratulations on completing your first LiveCode app. You have learned
+
+	- How to build the User Interface(UI) of an app by dragging and dropping objects
+
+	- The basics of coding in LiveCode to add interactivity to your app
+
+	- How to use the features of the LiveCode Integrated Development Environment (IDE)
+end epilogue