Lab 2
Create a project called TextShuffler.
Use the Tabbed Application template when creating
the project.
The application will have a Basic and Advanced tab,
as shown below:
All students are encouraged to complete both tabs,
which are in fact separate views/applications.
For FA majors, only the Basic tab is required;
for CS/MIS majors, only the Advanced tab is required.
Begin by renaming the tabs from "First" and "Second"
to "Basic" and "Advanced".
Remove the labels that are in both views so you can begin
with empty views as you complete this lab.
When you are done,
compress the application folder,
rename the zip file xxxxxx-TextShuffler.zip,
and submit this file to
moodle .
The description of the Basic and Advanced tabs follow.
Basic Tab
This view contains one or two labels, two text fields, and three buttons.
The actions that correspond to clicking the buttons are:
- Grab L (grab left): transfers text from the right text field
to the left text field and sets the right text field to blank.
- Grab R (grab right): transfers text from the left text field
to the right text field and sets the left text field to blank.
- Swap: swaps the contents of the left and the right text fields.
When the application launches,
the user is expected to type text on the text fields,
as shown below:
The keyboard could be dismissed by pressing return.
Clicking on "Grab R", causes the following transition:
Clicking on "Grab L", causes the reverse:
Clicking on "Swap", causes the following transition,
assuming the texts "Tic" and "Tac" have
been placed in the text fields:
Refer to the following hints and tips that might help:
- You must name the action connections for the different buttons
differently; e.g., grabLeft:, grabRight:, and swap:
These actions represent different functionalities.
- Do not forget to create outlet connections for the text fields
- The label does not require an outlet connection since
you will never need to retrieve or update its text
- To set a text field to blank, assign its text the value @""; e.g.,
self.someTextField.text = @"";
- When swapping the text of two text fields,
the following code will not work:
self.textField1.text = self.textField2.text;
self.textField2.text = self.textField1.text;
Instead, you will need a temporary variable to carry out the swap, like so:
NSString *temp = self.textField1.text;
self.textField1.text = self.textField2.text;
self.textField2.text = temp;
- To dismiss the keyboard,
you will need to add a delegate connection for both text fields.
You will also need to add the following to FirstViewController.m:
- (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
[theTextField resignFirstResponder];
return YES;
}
Advanced Tab
This view contains two buttons which, when clicked,
cause a "rotation" of a round graphic (the letter "O") on the screen.
For example,
after clicking on the "Right" button 4 times,
the following transitions occur:
Notice that a counter reflects the number of rotation
steps carried out.
When the "Left" button is clicked,
the graphic rotates counter-clockwise,
and the counter decrements.
This application does not require graphics.
In fact, it can be carried out through labels.
Specifically,
there are six labels around the buttons,
one of which contains the text "O",
while the remaining five contain blanks.
This is illustrated below (the background
of the view has been set to white,
while the label backgrounds have been set
to light blue, for clarity):
You will note that on the bottom of the screen,
two additional labels contain the text "Counter:"
and the actual integer.
Here are some hints and tips that might help:
-
Make sure to create outlet connections for the labels.
-
The "Right" and "Left" buttons will need action connections
and must be named differently.
Their methods will contain very similar code.
-
The rotation "illusion" can be carried out
by transferring text between the labels.
You will need a temporary variable.
The sample code below "rotates" the text between three labels:
NSString *temp = self.label1.text;
self.label1.text = self.label2.text;
self.label2.text = self.label3.text;
self.label3.text = temp;
-
Inside a method,
you can declare an integer variable
just like you would do in Java/C/C#,
e.g.,
int num;
The statement:
num++;
increments that variable,
while
num--;
decrements that variable.
-
To convert from text to an integer,
use a statement similar to the following:
num = [self.someLabel.text intValue];
-
To convert an integer to text,
use a statement similar to the following:
self.someLabel.text = [NSString stringWithFormat:@"%d",num];