Module 15 - Graphical User Interface
What is the Pseudocode statement that allows you to store the phone number of the last incoming call?
Declare String phoneNumber phoneNumber = PhoneCall.IncomingNumber
Show the statement that stores the phone number of the person that sent the last received text message.
Declare String phoneNumber phoneNumber = TextMessage.IncomingNumber
See the following: Module ComponentName_EventName() ...statement ...statement ...etc End Module What is this called? What does ComponentName mean? What does EventName mean?
Event handler. ComponentName - name of the component that generated the event. EventName - name of the event that occured (such as Click).
How do the arrows work in a user interface flow diagram?
If actions performed in one window can cause another window to open, the an arrow appears between the two windows with the arrow pointing towards the newly opened window. (If Window 1 points towards Window 2, then Window 1 opens Window 2) If there is a double-headed arrow between two windows, then either window can open the other.
What does IDE stand for and what is it?
Integrated development environment An application/program that allows you to set a program's windows and its graphical elements visually without writing a single line of code.
Assume there is a real variable named "grossPay" with the value "52.91". How do you store this value into a label within a GUI named "grossPayLabel"? Why do you have to do it this way?
Set grossPayLabel.Text = realToString(grossPay) You must use dot notation when referring to a component. The first word is the component's name, followed by a dot and the "Text" property of the label (since you want to change it's text property). Since any value stored within a text box must be a string, the real number variable "grossPay" must be first converted from a real number to a string in order to prevent errors.
Assume there is a text box named hoursTextBox in the GUI in front of you. Now assume you enter "5" into the textbox. How do you store the value within "hoursTextBox" into a new real number variable, "hours"? Why do you have to do it this way?
Set hours = stringToReal(hoursTextBox.Text) Even though the value stored in "hoursTextBox" is a number, anything stored within a text box is saved as a string. In order to save it into the real variable, "hours", it must be first converted into a real number. When referring to a value within a component, you must use dot notation. The first word is the component's name, followed by a dot and the "Text" property of the text box (since you want to change it's text property).
What is the name of the component that sends text messages? What is the name of the method that sends a text message to a specified phone number?
TextMessage (component) sendText (method)
Show the Pseudocode statement that sends the message "What time are you coming over?" to the number "919-555-1212".
TextMessage.sendText("919-555-1212", "What time are you coming over?") You can also store the number and the message into their own respective variables and put the variable names as the arguments. This would allow the user to enter their own message prior to sending.
What is "IncomingText" in Pseudocode?
The TextMessage component generates an "IncomingText" event when the device receives an incoming text message.
What are a GUI's components? Name 8 examples.
The items that appear in a program's graphical user interface. Some examples are: - Check Box - Combo Box - List Box - Text Box - Buttons - Labels - Radio Buttons - Sliders
What is the computer's 'user interface'?
The part of the computer that the user interacts with.
Why are command line interfaces difficult to use?
There are so many commands to be learned, and each command has its own syntax, much like a programming statement. If a command isn't entered correctly, it will not work.
What are a components' properties?
Values that determine how the component appears on the screen, such as it's color, size, and position.
When the user types a value into a text box component, the value is stored in the component's ___________________.
text property
In a GUI environment, the ___________ determines the order in which things happen.
user
How do you write an event handler in Pseudocode?
Module ComponentName_EventName() ...statement ...statement ...etc End Module
What three methods are associated with the "Location" component that can be used to get the user's location?
getLatitude() - returns device latitude as Real number getLongitude() - returns device longitude as Real number getAddress() - returns string containing street address nearest to device
If you had a label that read "Enter the number of hours worked:", what would you name the label?
hoursLabel
If an event occurs and there is no event handler to respond to the event, the event is ______________.
ignored
Recall from Chapter 14 that a method is a ___________________ that an object can execute.
module or function
In most IDEs, if you look at the code that is generated to display a window, you will see that each component in the window is an _________, and the name that you have assigned to the component is used as the name of the _________.
object
What 3 steps can you follow you construct a window in an IDE?
1. Sketch the window on paper before constructing it. This will help you determine the components that are needed. It is helpful to make a list of the necessary components. 2. Create the necessary components and name them in the IDE. As you place each component in the window, assign it a unique and meaningful name. 3. Set the components' properties to the desired values.
What are 4 guidelines mobile developers must following when developing applications?
1.) Prevent less information at once. Content that wil fit easily into one window on a desktop application must sometimes be separated into multiple screens in a mobile app. 2.) Use larger font sizes for easier reading. This reduces eye strain and makes mobile screens easier to read. 3.) Arrange components in a way that works for the smaller screen size. Most important and most often used components should be placed near the top of the screen. 4.) Use components that work well with touchscreens. Should have GUI components that work well in a touch environment, and are arranged in such a way that the user can easily interact with them. For example, avoid buttons placed near edges and use list boxes instead of combo boxes.
What is a command line interface?
A command line interface typically displays a prompt allowing the user to type a command, which is then executed when typed. For many years, the only way that the user could interact with an operating system was through a command line interface.
What is a combo box (GUI component)?
A component (combination of a list and a text box) that displays a drop-down list of items from which the user may select; provides a text box in which the user may type input. (Basically a drop-down)
What is a radio button (GUI component)?
A component that can be either selected or deselected; usually appears in groups and allows the user to select one of several options. o Option 1 o Option 2 o Option 3
What is a location sensor?
A component that can determine the device's latitude, longitude, and nearest street address. Referred to as the "Location" component.
What is a GUI and how is it pronounced?
A graphical user interface allows the user to interact with the operating system through graphical elements on the screen. It is pronounced "gooey"
What is an event handler?
A module that automatically executes when a specific event occurs.
What is the "Init" module?
A module that executes when a GUI application begins to execute.
What is "IncomingNumber"?
A property of the PhoneCall component that holds the phone number, as a string, of the last incoming call.
When calling for the makeCall method, what data type is the argument that is sent?
A string.
What is a diagram that helps a user design the on-screen GUI elements that make up each window in the program's user interface? This diagram also helps determine how the program will flow from one window to the next as the user interacts with it.
A user interface flow diagram.
What is an event?
An action that takes place within a program, such as the clicking of a button.
What is the "LocationChanged" event?
An event associated with the "Location" component that triggers whenever the device's location changes.
How do you refer to the text property of a text box component?
By using dot notation.
Suppose you have an app open on your smartphone that has a GUI which displays your current latitude (LatitudeLabel), longitude (LongitudeLabel), and address (AddressLabel). There is also an exit button (exitButton) at the bottom of the app. Design a program that sets the devices current location (all 3) when the app is opened, updates the location (all 3) every time the location changes, and closes the app when the exit button is clicked.
Module Init() Set LatitudeLabel.Text = realToString(Location.getLatitude) Set LongitudeLabel.Text = realToString(Location.getLongitude) Set AddressLabel.Text = Location.getAddress End Module Module Location_LocationChanged() Set LatitudeLabel.Text = realToString(Location.getLatitude) Set LongitudeLabel.Text = realToString(Location.getLongitude) Set AddressLabel.Text = Location.getAddress End Module Module exitButton_Click() Close End Module
Suppose you have a GUI that requests 3 test scores from the user and then displays the average score. Each test score has a text box (ie , test1TextBox, test2TextBox, test3TextBox) and the average score has a label (ie , averageLabel). There is also a "calculate average" button (calcButton) and an exit button (exitButton). Write in Pseudocode three event handlers for this program - one for when the calcButton is clicked, which causes the average to be determined and displayed in the averageLabel ; one for when the exit button is clicked, which causes the window closes ; one for when the application initially executes, which causes the averageLabel component to display an initial value ($0.00).
Module Init() Set averageLabel.Text = "$0.00" End Module Module calcButton_Click() Declare Real test1 = 0, test2 = 0, test3 = 0, average = 0 Set test1 = stringToReal(test1TextBox.Text) Set test2 = stringToReal(test2TextBox.Text) Set test3 = stringToReal(test3TextBox.Text) Set average = (test1 + test2 + test3) / 3 Set averageLabel.Text = realToString(average) End Module Module exitButton_Click() Close End Module
Suppose you have a GUI application that has a label named "grossPayLabel" that you want to read "$0.00" when the application begins. How would you write this in Pseudocode?
Module Init() Set grossPayLabel.Text = "$0.00" End Module
In Pseudocode, write an app that automatically sends a text message to any phone numbers that call you. The message should indicate that you will be away from your phone for a while.
Module PhoneCall_IncomingCall() Declare String phoneNumber = "" Declare String message = "I am away from my phone, I'll call you back later." phoneNumber = PhoneCall.IncomingNumber TextMessage.sendText(phoneNumber, message) End Module
In Pseudocode, write an event handler that performs an action (blank statements) when the devices receives an incoming phone call.
Module PhoneCall_IncomingCall() ...statements ...statements ...etc End Module
Design a program that sends "I am driving, I will reply later" to anyone that messages you while you have an application open.
Module TextMessage_IncomingMessage() Declare String phoneNumber = "" Declare String message = "I am driving, I will reply later" phoneNumber = TextMessage.IncomingNumber TextMessage.sendText(phoneNumber, message) End Module
Suppose you have a smartphone displaying an app's GUI. The app's GUI has two buttons; Call Home (callButton) and Exit (exitButton). Design a program in Pseudocode that has two event handlers; one for the callButton, which calls the number (919) 555-1212, and one for the exitButton, which closes the window. They are both triggered when they are clicked.
Module callButton_Click() PhoneCall.makeCall("919-555-1212") End Module Module exitButton_Click Close End Module
Suppose there is an exit button (exitButton) in the GUI in front of you. What would the event handler look like in Pseudocode if you clicked this button?
Module exitButton_Click() Close End Module
Suppose you have a smartphone displaying an app's GUI. The app's GUI has two buttons; Send Text (sendButton) and Exit (exitButton). Design a program in Pseudocode that has two event handlers; one for the sendButton, which sends "I'm on my way home" to the number (919) 555-1212, and one for the exitButton, which closes the window. They are both triggered when they are clicked.
Module sendButton_Click() Declare String message = "I'm on my way home." Declare String number = "919-555-1212" TextMessage.sendText(number, message) End Module Module exitButton_Click() Close End Module
In Pseudocode, write an event handler that was triggered by the "showResultButton" being clicked (blank statements).
Module showResultButton_Click() ...statement ...statement ...etc End Module
What is a non-visual component and what are ___ examples?
Objects that you cannot see in a GUI, but provided special capabilities to your programs. PhoneCall component
What is the component for making phone calls in Pseudocode? What is the name of the method that makes a call to a specified phone number?
PhoneCall (component) makeCall (method)
Show in Pseudocode how you can cause a device to call the phone number (919) 555-1212.
PhoneCall.makeCall("919-555-1212")
What do the events "MouseEnter" and "MouseLeave" mean?
When the mouse cursor is moved over a component, and when a mouse cursor is moved off a component, respectively.
What is happening here?: Module Init() Set hoursLabel.Text = "Blank" End Module
When this GUI application executes, the label, "hoursLabel", has it's Text property initialized with the string "Blank". As a result, the label will display "Blank" when the application starts running.
One part of the user interface consists of hardware devices, such as the keyboard and the video display. Another part of the user interface lies in the way that the computer's operation system ________________________________.
accepts commands from the user.
GUI components are also known as __________________________.
controls and widgets
If you want a program to perform an operation when a particular event occurs, you must create an __________________ that responds when that events takes place.
event handler
Because GUI programs must respond to the actions of the user, it is said that they are ______________.
event-driven
In a text-based environment, such as a command line interface, ____________ determine the order in which things happen.
programs
In most IDEs, you must assign ________________ to the components that you place in a window.
unique names