1. Input, Variables, and Calculations

2. The TextBox Component Performing Calculations Storing Data with Variables Creating Blocks with Typeblocking The Slider Component Math Functions

3. The TextBox component is a rectangular area that can display text, and can also accept keyboard input. In the Designer, the TextBox is located in the User Interface section of the Palette. TextBox components are automatically given default names such as TextBox1. It is a good idea to change a component’s default name to something meaningful. When the user types into a TextBox component, the text is stored in the component’s Text property.

5.  When the user clicks a TextBox, the emulator’s virtual keyboard pops up on the screen.

6.  The the Click event handler for the ButtonReadInput component is shown (Figure 3-3).  The blocks inside the event handler set the Text property of LabelOutput to the Text property of TextBoxName.

7.  Figure 3-4 shows the app running in the emulator after the user has entered Kathryn Smith.

8.  Other TextBox Properties BackgroundColor – Sets the TextBox’s background color. Enabled – If checked, user is able to enter input into the TextBox. FontBold, FontItalic, and FontSize – Affect the font of the text displayed in the TextBox. Hint – Displays a hint for the user. MultiLine – If checked, allows user to enter multiple lines of input. NumbersOnly – If checked, only allows numbers to be entered.

9.  Other TextBox Properties TextAlignment – Specifies how the text inside the TextBox is aligned. It may be set to left, center, or right. TextColor – Sets the color of the text displayed in the TextBox. Visible – Specifies whether component appears on screen or is hidden. Width and Height – Determines the control’s width and height. May be set to Automatic, Fill parent, or a specific number of pixels.

10. You can use math operators to write expressions that perform simple calculations. The result of a math expression can be assigned to variable. A programmer’s tool for performing calculations are the math operators.

11.  Math operators are found in the Blocks Editor by opening the Math drawer in the Built-in section.  Note the 5 common math operators:  Addition  Subtraction  Multiplication  Division  Exponentiation

13. Each math operator block has its math symbol displayed in the center with two empty sockets on either side. Must fill the empty sockets with the two operands. The addition block must be plugged into (or used by) another block such as the Set block. Example below shows how we can assign the value of the addition block to a label’s Text property.

14.  Mutator Blocks The addition and multiplication operator blocks have a blue box in their upper-left corner. A block with this blue box is called a mutator block. Clicking the blue mutator icon allows you to add operands to the block. Click & drag the number block to the block on the right to add operands

16. Combining Operator Blocks Can combine Math blocks to create complex expressions. Example below shows a complex expression created by combining an addition block with a division block. Inner block calculations take precedence so the addition operation will occur first.

17.  A number can be rounded to a given number of decimal places using format as decimal. Number socket needs the number or expression to be rounded Places socket needs the number of decimal places to be displayed

18. Unformatted result Formatted result

19. A function is a method that performs an operation and then returns a value. When you execute a function, we say that you are calling it. Often functions require additional pieces of data in order for the function to operate. When we provide arguments to a function, we say that we are passing the arguments to the function.

20. A variable is a name that represents a value stored in the computer’s memory. A variable is not associated with a component Unlike a text box, it is hidden from the user It holds a value in a named memory location So far, apps you have created have stored data only in component properties. The information that is stored in a variable may change, hence the name “variable”

21.  Store values entered by the user, so they may be manipulated  Perform arithmetic on values  Test values to see if they meet some criterion  Temporarily hold and manipulate the value of a control property  Remember information for later use in the program

22.  The programmer creates a name for each variable to be used  App Inventor associates that name with a location in the computer's RAM  A value assigned to the variable is stored in the memory location referenced by that name  Declare a variable when your app must save & recall data not stored in a component  Variables must be initialized to a value

23. A local variable is declared inside a block Can be used only by blocks inside that definition Outside that definition the variable is undefined So a local variable is available only in a limited, localized set of blocks A global variable is declared outside all blocks Standalone definition in Blocks editor workspace Can be used by any block anywhere in workspace

24.  A global variable has scope throughout all blocks for the app  As apps become more complex, errors with global variables become difficult to deal with  If a global variable has the wrong value…  Must examine entire app to find the error  If a local variable has the wrong value…  Can examine only blocks where it has scope  So it’s easier to debug local variable issues

25.  Use a local variable when the value will be needed only within a single event  Drag an Initialize Local block into the workspace  Blocks using this variable must be placed inside the Initialize Local block  Note two Initialize Local blocks, each with a different shape  We will use the circled one for the time being

26.  Local variable definitions are typically inside and at the start of an event procedure  Variable initialization block not yet complete. We must: Change to a meaningful name that describes its purpose Naming rules same as before… only letters, numbers, or underscores allowed but name must begin with a letter Also assign an initial value to the variable

27. First example Variable named Age Initialized to the value 25 These variables have scope (can be used) anywhere within the initialize local block Second example Variable named FirstName Initialized to the value Johnny

28.  Naming conventions are a guideline to help improve readability but are not required  A variable name should describe its use  Each variable has a recommended prefix, in lower case, based on the type of data it holds  The 1 st letter of each subsequent word in the name should be capitalized (camel casing)  intHoursWorked - an integer value  decGrossPay – a number with a decimal point  strLastName - a string of characters (or text)

29. Data TypePrefix  Booleanbln  Datedat  Decimaldec Data TypePrefix  Integerint  Stringstr

30. Data TypePrefix  Text Boxtxt  Labellbl  Buttonbtn  Imageimg Data TypePrefix  Check boxchk  Stringstr  Canvascvs  Soundsnd

31. Use a get instruction to retrieve the value in a variable. Use a set instruction to store a value in a variable. Example shows the get and set blocks found in the Variables drawer.

34.  The initialize local is a mutator allowing multiple local variables to be defined in one block Click the blue box in the block’s upper-left corner to display the mutator bubble as shown below.

35.  The variables Tax & Total are declared locally  Tax & Total are utilized inside the initialization local blocks

36.  Use a global variable when the value will be needed across multiple events in the workspace  Drag an Initialize Global block into the workspace  Place it anywhere in the workspace  Must be a free-standing block (not contained inside any other block)  Must assign a name and initialization value

37. First example Variable named InterestRate Initialized to the value 0.03 These variables have scope (can be used) anywhere throughout all events in the workspace Get and set used in the same way as local variables Second example Variable named Balance Initialized to the value 5000

38.  Increment a variable (increase by 1)  Decrement a variable (decrease by 1)  Square a variable (multiply by itself)

39.  Find position of the character in the middle of a string with an odd number of characters  Length returns number of characters in strText  Quotient returns integer result of division with no remainder  Add 1 to integer result giving middle position  If length=7, quotient returns 3 (integer of 7/2)  Add 1 to 3, middle character is at position 4

40. Most programmers carefully restrict the use of global variables. Global variables make debugging more difficult When a variable value is incorrect, must search the entire application to discover where it went wrong If the variable is local, you need only search that portion of the application A global variable can be modified by any instruction anywhere in the program.

41. Typeblocking is a shortcut to create blocks quickly with the keyboard In the Blocks Editor click anywhere in the workspace and type part of the name of the block that you want to create In the example shown, key in click and you get a list of button click events

42. Suppose you want to create a number block with the value 25 Click in the workspace Type 25 Press Enter To create a text string: Click in the workspace Type a double quote Then the text you want Press Enter

43.  The Slider component provides a visual way to adjust a value within a range of values  Located in the Basic Pallet in the Designer Slider component has MinValue and MaxValue properties that must be set to numeric values By default the MinValue property is set to 10.0 By default the MaxValue property is set to 50.0

44.  Other Slider component properties: ColorLeft – Specifies color of the portion left of the thumb slider ColorRight – Specifies color of the portion right of the thumb slider MaxValue – The Slider component’s maximum value MenValue – The Slider component’s minimum value ThumbPosition – Initial position of the thumb slider. Visible – Determines if the component is visible on the screen Width – The width of the component on the screen. Can be set to: Automatic Fill parent Or a specific number of pixels.

45.  Slider component has a PositionChanged event handler in the Blocks Editor  Can use this event to detect when the user changes the slider  Allows an app to respond automatically to a new value for the slider

46. PositionChanged event handler is shown below thumbPosition is a local variable that provides the value of the slider This is called a parameter variable It’s a piece of data passed to the event handler thumbPosition has scope only within event handler

47.  Note how a slider can interactively control the font size of text in a label  Drag slider to the right and the text gets bigger  Drag slider to the left and the text gets smaller