Calculator

Day 1 :Building User Interface

Create It With

in cooperation with

1

Select New Mainstack from the File menu.

Just like in our “Hello World” App, you start by selecting “New Mainstack” in the Edit Menu.

Calculator App

Starting our next App: Calculator

2

We will go into details about screen sized and the multi device market for the mobile market today.

For now, we are going to standardize on 667 height and 375 width for our stack size for all of the Apps we will create.

Calculator App

Setting the Stack Size for Mobile Devices

667

375

Paint CodeThey have a complete description of the different iPhone sizes and an explanation.Read More 3

Again, we start building our App by adding controls to the card.

For the Calculator App we will start with buttons.

But this time, as you can see, we are going to need 19 of them. We will also need to change the “look & feel” of the buttons to match the Calculator App design.

Calculator App

Starting our next App: Calculator

4

Let’s start by adding 4 buttons to our card. Then use the mouse pointer to select all 4 buttons.

When you select more than one object you will see that the Align Object section of the Property Inspector.

You can also hold down the SHIFT key and click each button you want included.

Calculator App

Start building the User interface

5

To get the controls aligned together one at a time, but LiveCode makes it quite easy for you.

There is a quick way to align controls to the left, right, top, bottom, center and middle. You can make widths equal or heights equal.

Please try out all the features to thoroughly understand object alignments.

Calculator App

Setting Control Alignment

6

You will see there is full functionality to make your user interface just as you want it. Try it out! Trying it yourself is important for the learning process.

We have measured the button sized and the numbers that work best are 90 width and 110 height.

You can just type the numbers in the Height and Width text box on the property inspector.

Calculator App

Size & Position the Controls

7

Just like the last lesson, we are selecting a group of controls and using the copy and paste method populate the UI with controls.

Not only is it easier, but I don’t have to set the size again.

Calculator App

Copy + Paste Controls

8

Now let’s turn off Three D, Border and Hilite border for all buttons. This will keep the buttons to the simple new “flat” look.

You can see there are a lot of features to set such as an icon for your button. These are really very important and we will explore them soon. Let’s just keep to the basics for now.

Calculator App

Icons & Border of Buttons

9

Setting the colors will be next, for now choose the Orange and the dark orange colors.

1. Select the stack and set the Background color to black.

2. Set the Fill color of the operator buttons on the right side to match the calculator app’s orange color.

3. Set the Text color of the buttons to white.4. Set the Hilited color to dark orange.

Do the same with the other buttons, but their color is gray.

Please try out all the features and make sure you understand what they do.

Calculator App

Colors & Patterns

10

Now let’s change our button’s Text Formatting

1. Select the button(s) you wish to set.2. Choose Text Formatting on the

Property Inspector.3. Set the Font to Helvetica Neue Thin4. Size the text to 485. Set the Alignment to Center and the

Margins to 0.

Please do these steps for all the buttons.

Calculator App

3

Text Formatting

1

2

45

11

1. Select the bottom left button.2. Choose Basic Properties Set the Labels

of the number buttons.3. Set Names & labels buttons as below:

1

2

3

4

Calculator App

Label Name

AC clear

± toggleSign

% percentage

÷ divide

X multiply

- minus

+ plus

= equals12

As you can see, the background color of the calculator is black. This can easily be set in LiveCode.

Calculator App

Set the Background to Black

1. Select Stack Inspector from the Object menu.

2. Choose Colors & Patterns on the Property Inspector.

3. Click the right box on the Background line.

4. Select the black color in the color picker.

12

3

13

Now we need a text field to display the results of calculations. For the text field we also set the Fill color to black and the Text color to white. Set the font to Helvetica and the size 52 and the margins to 15.

You must turn on Lock text to stop text input. Also turn off Focusable, Three dimensional and Show border.

Calculator App

Display the Numbers

14

1. Make sure the number display is selected.

2. Select the Contents option.3. Set the name to display.4. Then simply set the content value

to 0 as the default.

Calculator App

1

2

3

4

Display Properties

15

Calculator App

Take for example when one of the Operators is clicked, you will see the border get dark because we set the Hilited text color to darker Orange.

But also in the App you will see thata black Border remains as an indicator to remind them of which operator is selected - giving a better the user experience.

Q: How do we do that?A: Code

User Interface is also about User Interaction

16

Calculator App

If you edit script the “multiply” button and add in the following code, you will see the black border appear. Don’t forget to hit Apply button.

Now add the same code to the other 4 operator buttons. Each one will show the black border when clicked.

Let’s Set the BorderColor Property on mouseUp

--Set the border color to Black set the BorderColor of me to 0,0,0 set the showBorder of me to true

end mouseUp

**BTW - What is me?Well in LiveCode controls are like people. When you just what to reference yourself, you just say me. But, a control can ONLY reference itself me in it’s own space.

17

Calculator App

But the border never goes back to orange when you click on another operator, so we need to set the code to set the other buttons to orange. But why would you copy so much code to every on mouse up? Answer: you should not

What you should do is “group” the code into one command. We are going to call this command “operatorPress” and pass which button is pressed as a parameter.

Create Your own Command

on operatorPressed pOperator

set the showBorder of button "/" to false set the showBorder of button "x" to false set the showBorder of button "-" to false set the showBorder of button "+" to false

--Set the border color to Black set the borderColor of button pOperator to black set the showBorder of button pOperator to true

end operatorPressed

18

Calculator App

You will need to change the text in each of the mouseUp script to just one line. The line is calling our new command and passing the name of the operator clicked.

Click Apply, switch in run mode...and click the different buttons to see how the black border effects the user interface and experience.

One Line can now do it all

on mouseUp

operatorPressed the short name of me

end mouseUp

on mouseUp

set the BorderColor of me to black set the showBorder of me to true

end mouseUp

19

If you wish to learn more… Visit LiveCode

Congrats on completing:The User InterfaceDon’t forget to save your LiveCode Project!

Calculator App

20