tutorial "My First App"

prologue
	The first step in creating an App is the User Interface. You can design an
	app just like you would draw a picture.
	
	Each part of your app is going to be an object you drag out from the
	tools palette.
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 x button.
action
	highlight toolbar "tutorial"
	interlude
	go to step "Create Mainstack"
end step

step "Create Mainstack"
	Click on the File menu, and select New Stack > Default Size
action
    -- Give the user a visual hint of where they should be clicking
    highlight menu item "New Stack" of menu "File"
    -- The tutorial scripts only act on 'captured' object - this will cause the next created stack
    -- to be internally tagged as 'Mainstack' so it can be referenced in the rest of the tutorial
    capture the next new stack as "Mainstack"
    -- Wait until there is a captured stack with tag "Mainstack"
    wait until there is a stack "Mainstack"
    -- Advance to another step
    go to step "Set Mainstack Rect"
end step

step "Set Mainstack Rect"
    Start by resizing your stack. You can drag the edges to change the width
    and height.
    
    Make this stack approximately the shape of a mobile device, as shown by the dotted line.
action
    -- Add a guide to the previously captured stack. Guides are local to a step, and can't be
    -- interacted with by the user.
    add guide "Size" with rect "1,1,361,581" to stack "Mainstack"
    -- The 'fits' operator is an approximate match of the rect of the tagged object to the named
    -- guide
    highlight guide "Size"
    wait until stack "Mainstack" fits guide "Size" with tolerance 3
    go to step "Create Header Graphic"
end step

step "Create Header Graphic"
    Drag a rectangle graphic from the Tools palette onto your stack.
action
    highlight tool "Create Rectangle Graphic"
    capture the next new graphic of stack "Mainstack" as "Header Graphic"
    wait until there is a graphic "Header Graphic"
    go to step "Set Header Graphic Area"
end step

step "Set Header Graphic Area"
    Resize the graphic, and position it at the top of the stack as shown.
action
    add guide "Area" with rect "1,1,361,48" to stack "Mainstack"
    highlight guide "Area"
    wait until graphic "Header Graphic" fits guide "Area" with tolerance 3
    go to step "Set Header Graphic Properties"
end step

step "Set Header Graphic Properties"
    Double click on the graphic to open up the property inspector.
action
    highlight graphic "Header Graphic"
    wait until there is an inspector for graphic "Header Graphic"
	go to step "Property Inspector Interlude"
end step

step "Property Inspector Interlude"
	The Property Inspector is a window that allows you to control the appearance, location and behavior of the objects in your app.
	Properties of objects are grouped into sections. You can hover over the icons at the top of the 
	inspector to see what each section is called.
action
	interlude
    go to step "Set Header Graphic Line Size"
end step	

step "Set Header Graphic Line Size"
    Remove the outline of the graphic by setting the line thickness to 0.
action
    -- Navigates to the specified section of the property inspector, and highlights the specified
    -- property editor 
    highlight property "Line thickness" of section "Basic"
    wait until the lineSize of graphic "Header Graphic" is 0
    go to step "Select Header Graphic"
end step

step "Select Header Graphic"
    Select the header graphic by left-clicking on it.
action
	highlight graphic "Header Graphic"
    wait until graphic "Header Graphic" is selected
    go to step "Duplicate Header Graphic"	
end step

step "Duplicate Header Graphic"
    Click on the Edit menu, and duplicate the graphic.
action 
    highlight menu item "Duplicate" of menu edit
    capture the next new graphic of stack "Mainstack" as "Footer Graphic"
    wait until there is a graphic "Footer Graphic"
    go to step "Set Footer Graphic Area"
end step

step "Set Footer Graphic Area"
    Resize and position the footer graphic at the bottom of the stack as shown.
action
    add guide "Area" with rect "1,546,361,581" to stack "Mainstack"
    highlight guide "Area"
    wait until graphic "Footer Graphic" fits guide "Area" with tolerance 3
    go to step "Create Message Field"
end step

step "Create Message Field"
    Drag out a field from the Tools palette onto your stack, to create a text entry control.
action
    highlight tool "Create Field"
    capture the next new field of stack "Mainstack" as "Message Field"
    wait until there is a field "Message Field"
    go to step "Set Message Field Area"
end step

step "Set Message Field Area"
    Resize and position the message field at the bottom of the stack as shown.
action
    add guide "Area" with rect "18,552,286,576" to stack "Mainstack"
    highlight guide "Area"
    wait until field "Message Field" fits guide "Area" with tolerance 5
    go to step "Create Send Button"
end step

step "Create Send Button"
    Drag out a button from the Tools palette onto your stack. We will use this to trigger 
    the message send action.
action
    highlight tool "Create Button"
    capture the next new button of stack "Mainstack" as "Send Button"
    wait until there is a button "Send Button"
    go to step "Set Send Button Area"
end step

step "Set Send Button Area"
    Resize and position the message field at the bottom of the stack as shown.
action
    add guide "Area" with rect "294,550,356,576" to stack "Mainstack"
    highlight guide "Area"
    wait until button "Send Button" fits guide "Area" with tolerance 5
    go to step "Set Send Button Properties"
end step

step "Set Send Button Properties"
    Double click on the button to display its properties in the property inspector.
action
    highlight button "Send Button"
    wait until there is an inspector for button "Send Button"
    go to step "Set Send Button Label"
end step

step "Set Send Button Label"
    We're going to set the properties of the button to make it similar to the equivalent 
    button in the messages app.
    
    First set the label of the button to "Send"
action
    highlight property "Label" of section "Basic"
    wait until the label of button "Send Button" is "Send"
    go to step "Set Send Button Style"
end step

step "Set Send Button Style"
    Set the button style to transparent by selecting "transparent" from the style 
    dropdown menu. This will clear everything except the text from the button.
action
    highlight property "Style" of section "Basic"
    wait until the style of button "Send Button" is "Transparent"
    go to step "Set Send Button Text Size"
end step

step "Set Send Button Text Size"
    We want the font of the button to be a little larger, so set the size of the button text to 18.
action
    highlight property "Text Size" of section "Text"
    wait until the textSize of button "Send Button" is 18
    go to step "Open Send Button Script"
end step

step "Open Send Button Script"
    Now that we have the User Interface set up, it's time to add some code.
    
    Right click on the button and select 'Edit Script' from the menu to open the script editor.
action
    highlight button "Send Button"
    wait until there is a script editor for button "Send Button"
	go to step "Script Editor Interlude"
end step

step "Script Editor Interlude"
	The Script Editor is a window that allows you to make parts of you app responsive to user actions. 
	This is achieved by adding blocks of script which tell LiveCode what to do when a given user action has occurred.
action
	interlude
	go to step "Apply Button Interlude"	
end step	

step "Apply Button Interlude"
	The script entered into 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 script you have written is correct.
action
	highlight "Apply" of script editor for button "Send Button"
	interlude
	go to step "Send Button Script"	
end step

step "Send Button Script"
	The mouseUp message is sent to a button when the user clicks on it. We are going to make a dialog
	box pop up when the user clicks on the 'Send' button, by using LiveCode's 'answer' command in response 
	to the mouseUp message.
action
	interlude
	go to step "Set Send Button Script"	
end step

step "Set Send Button Script"
    Set the script of the button to the following, and click the Apply button (in the top left corner of the script editor):
script
    on mouseUp
    	answer "Hello World"
    end mouseUp
action
    wait until button "Send Button" is scripted
    go to step "Set Tool To Run"
end step

step "Set Tool To Run"
    Now test the code you have written. First, switch to run mode by clicking on the run 
    mode tool in the Tools palette.
action 
    highlight tool "Run Mode"
    wait until the tool is run
	go to step "Run Mode Interlude"
end step

step "Run Mode Interlude"
	In Run Mode, you can test your app. Clicking on a button will trigger the mouseUp message, as opposed to
	Edit Mode which will just select the button.
action
	interlude
	go to step "Click Send Button"
end step

step "Click Send Button"
    Click on the "Send" button to see the result.
action
    highlight button "Send Button"
    wait until button "Send Button" pops up answer dialog
    go to step "Set Tool To Edit"
end step

step "Set Tool To Edit"
    Now switch back to Edit Mode to make some more changes to the app.
action 
    highlight tool "Edit Mode"
    wait until the tool is edit
    go to step "Set Message Field Properties"
end step

step "Set Message Field Properties"
    Double click on the field to open up its property inspector.
action
    highlight field "Message Field"
    wait until there is an inspector for field "Message Field"
    go to step "Set Message Field Name"
end step

step "Set Message Field Name"
    We're going to set the name of the text field so its contents can be referenced by 
    the button script.
    Change the name of the field to "newMessage"
action
	highlight property "Name" of section "Basic"
    wait until the name of field "Message Field" is "newMessage"
    go to step "Open Send Button Script 2"
end step

step "Open Send Button Script 2"
    Right click on the button and select 'Edit Script' from the menu to open the script 
    editor again.
action
    highlight button "Send Button"
    wait until there is a script editor for button "Send Button"
    go to step "Set Send Button Script 2"
end step

step "Set Send Button Script 2"
    Code allows your app to be flexible and interactive. 
    
    Change the second line of the button script so that it reads as follows, and click "Apply":
script
    on mouseUp
        answer field "newMessage"
    end mouseUp
action
    wait until button "Send Button" is scripted
    go to step "Set Tool To Run 2"
end step

step "Set Tool To Run 2"
    Now test this new code. First, switch to Run Mode by clicking on the Run Mode tool in 
    the Tools palette.
action 
    highlight tool "Run Mode"
    wait until the tool is run
    go to step "Enter Message Field"
end step

step "Enter Message Field"
    Click on the field to enter text into it.
    Notice that in Edit Mode, clicking on the field selects it and allows you to drag it 
    around and change the size, whereas in Run Mode you can enter text.
action
    highlight field "Message Field"
    wait until field "Message Field" is focused
    go to step "Enter A Message"
end step

step "Enter A Message"
    Type a message into the field, and click the "Send" button.
action
    highlight button "Send Button"
    wait until button "Send Button" pops up answer dialog
    go to step "Understanding What Happened"
end step

step "Understanding What Happened"
    Understanding what happened:
    
    When you clicked the mouse, LiveCode sent the mouseUp message when you lifted your finger.
    
    The command 'answer' tells LiveCode to pop up a message dialog.
    
    First it showed the text "Hello World".
    
    You changed it to show whatever text is in the field named "newMessage".
action
    interlude
    go to step "Set Tool To Edit 2"
end step

step "Set Tool To Edit 2"
    The iPhone app puts the message you send in a bubble. It's easier than you would think.
    
    We just need to add a couple more controls to the stack. Switch back to Edit Mode to 
    make some more changes to the app.
action
    highlight tool "Edit Mode"
    wait until the tool is edit
    go to step "Create Bubble Image"	
end step

step "Create Bubble Image"
    We're going to import the bubble image. Click on the file menu, and select Import As Control > Image File...
    Find the blue-bubble.png file in the code resources folder and click open.
file
	blue-bubble.png
action
    capture the next new image of stack "Mainstack" as "Bubble Image"
    highlight menu item "Import As Control" of menu "File"
    wait until there is an image "Bubble Image"
    go to step "Set Bubble Image Area"
end step

step "Set Bubble Image Area"
    Position the image as shown.
action
    add guide "Area" with rect "177,62,347,126" to stack "Mainstack"
    highlight guide "Area"
    wait until image "Bubble Image" fits guide "Area" with tolerance 5
    go to step "Create Label Field"
end step

step "Create Label Field"
    Drag out a label field from the tools palette.
action
    capture the next new field of stack "Mainstack" as "Label Field"
    highlight tool "Create Label Field"
    wait until there is a field "Label Field"
    go to step "Set Label Field Area"
end step

step "Set Label Field Area"
    Resize and position the label field over the image as shown.
action
    add guide "Area" with rect "186,70,324,120" to stack "Mainstack"
    highlight guide "Area"
    wait until field "Label Field" fits guide "Area" with tolerance 5
    go to step "Set Label Field Properties"
end step

step "Set Label Field Properties"
    Double click on the field to display its properties in the property inspector.
action
    highlight field "Label Field"
    wait until there is an inspector for field "Label Field"
    go to step "Set Label Field Name"
end step

step "Set Label Field Name"
    Set the name of the label field to "messageLabel" so it can be referenced by the button script.
action
    highlight property "Name" of section "Basic"
    wait until the name of field "Label Field" is "messageLabel"
    go to step "Set Label Field Wrap"
end step

step "Set Label Field Wrap"
    Uncheck the "Don't wrap" option so that our message will display on multiple lines in the bubble.
action
    highlight property "Don't Wrap" of section "Basic"
    wait until the dontWrap of field "Label Field" is false
    go to step "Set Label Field Color"
end step

step "Set Label Field Color"
    Set the text fill color of the label to white.
action
    highlight property "Text Fill" of section "Colors"
    wait until the foreColor of field "Label Field" is "255,255,255"
    go to step "Set Label Field Align"
end step

step "Set Label Field Align"
    Set the text align of the label to left aligned.
action
    highlight property "Text Align" of section "Text"
    wait until the textAlign of field "Label Field" is "left"
    go to step "Open Send Button Script 3"
end step

step "Open Send Button Script 3"
    Now we'll connect the label field with the message via the send button script.
    
    Right click on the button and select "Edit Script" from the menu to open the script editor again.
action
    highlight button "Send Button"
    wait until there is a script editor for button "Send Button"
    go to step "Set Send Button Script 3"
end step

step "Set Send Button Script 3"
    Change the button script to read as follows, and click "Apply"
script
    on mouseUp
        set the text of field "messageLabel" to the text of field "newMessage"
    end mouseUp
action
    wait until button "Send Button" is scripted
    go to step "Set Tool To Run 3"
end step

step "Set Tool To Run 3"
    Switch to Run Mode again to test your code.
action 
    highlight tool "Run Mode"
    wait until the tool is run
    go to step "Enter A Message 2"
end step

step "Enter A Message 2"
    Type a message into the field, and click the "Send" button.
action 
    highlight button "Send Button"
    wait until button "Send Button" is clicked
end step

epilogue
    Congratulations, you have just made your first app!
end epilogue
