ProgramingApp Inventor

Variable Declaration

• App Inventor: Declare Variables using the “Define Variable As” Block – Find the Blocks Editor (top-left), click the Definition button, then pull

out the correct block.– How would I make a variable named “count”???

Variable Assignment• Assign a variable named “count” to 5

– In App Inventor, use “set global - to” block in the My Blocks Menu

• Only available once defined your variable• Drag the “set global - to” block out• Create a number block by typing in “5” in the editor window• Click 5 into the “set global – to” block

App Inventor Math using VariablesCombine the “Set-To” Block with operators from the “Built-In->Math” Menu

Count = 9

Count = 5

Count = 14

Count = 3

Count = 1 (modulo gives the remainder of division)

Variable Initialization

• You are forced to define a variables value when you declare it in App Inventor

• A general place for program initialization is the “When Screen1.Initialize” block – Note: Most Text-Based languages use the “main()” function as

the start of the program– For example, set count to 100 when the program starts:

Implementing an Equation inApp Inventor

• Area of a Rectangle = Length * Width– Step 1: What variables do we need?

• Area, Length, and Width

– Step 2: Declare them in App Inventor– Step 3: Use Math. Operators to Implement

Output: The Label Component• Label

– Components used to show text. – Displays text specified by the Text property. – Useful Properties

• Text• Width• Visible• Background Color

Output: The Image Component• Image

– Components used to show a picture– Displays text specified by the Picture property. – Useful Properties

• Picture• Width• Visible• Height

Output: The Texting Component• Texting

– A non-visible component to allow users to send andreceive text messages. – Useful Properties

• Message• Phone Number• Receiving Enabled (Does this also make the Texting component a input?)

Input: The Button Component• Button

– Components used to show text. – Displays text specified by the Text property. – Useful Properties

• Text• Width• Visible• Background Color

Input: The TextBox Component• TextBox

– Components used to show text. – Displays text specified by the Text property. – Useful Properties

• Text• Width• Visible• Background Color

Implementing the Algorithm: The DesignerFirst, add the necessary components to in the Designer Window

– 2 TextBoxes, a Button, and a Label– name your components

• AmountPaidBox• TipPercentBox• CalculateButton• TipLabel

– Remember, to put “Calculate Tip” on the button and remove the default label

text

Next, need to declare and initialize our variables – Declare: amount_paid, tip_percentage, tip_amount– (Optional) Because it doesn’t make sense to have a 0%

tip, let’s give it a default value of 5 and place that in the AmountTipBox at program startup

Next step: wait until the button is clicked• Add a “When Button Clicked” Block to your code• What’s the name of the button that needs to be clicked?

Next step: want us to get information from the textboxes

• What component variables (properties) represent the textbox data?

• What variables do we save this data to?

Next step: calculate the tip amount• What variable represents the tip amount?• Why do we divide tip percentage by 100???

Next step: display the tip amount to the user• What component variables (properties) represent the label

output?

Download to the Emulator and Test!!!

If-Blocks

Nesting If and If-Else BlocksOften times, we want to check if a prior condition is true, before checking another condition.

– Example: If x > 100, then check if y is < 100. If y < 100, then assign z to 1. If x <= 100, set z to 35.

ImplementationStep 1: Lamp Doesn’t Work

– If-Block or If-Else Block? Why?

Step 2: Lamp Plugged In?

Step 3: Bulb Burned Out?