Introduction

On Monday, we started talking about controls on iOS.
We said the three types of controls one might see are active, static, and passive.
We then gave a demo of how to set up and use a text field control and get the keyboard to disappear properly
We begin today by looking at how to control the value of a label via a slider.

Sliders

Now let's look at how to use a simple slider to change the value of a label.
We first in interface builder add to our view a slider and a label that will hold an integer value for the slider.
Under the slider's attributes we set its min value to 0, its max value to 100, and its initial value to 50.
We can use the alignment icons to right align the text in the label.
Next we modify our label. We want the label to exactly wrap the size of the biggest value it will hold.
To do this we set the text for the label to 100 and press apple-=. Then we set the label's value to 50.

Finally, we create an outlet for the label, and hook it up, we create a new action with the following header signature and implementation code:

//in the demo's ViewController.h
- (IBAction)sliderChanged:(id)sender;

// in the demo's ViewController.m
-(IBAction)sliderChanged:(id)sender
{
    UISlider *slider = (UISlider *)sender;
    int sliderPos = (int)(slider.value + 0.5f);
    NSString *text = [[NSString alloc] initWithFormat:@"%d", sliderPos];
    _sliderLabel.text = text;
}

and then we hook it up in IB as well. We set it up as the result of the Value Changed event for the UISlider.

Segmented Controls and Switches

For our next UI example we will look at how segmented controls can be used. We will use such a control to hide or display a subview of additional controls.
This subview will have on it two toggle switches. If you change the value of one of these toggle switches, the other toggle switch will change as well.
First, we drag over a segmented control. We change its title to Visible. This will after the label on the left segment. We double click on the other segment to edit its values and change it to Invisible. Alternatively, in the attribute inspector, you can use the Segment dropdown to set the text of each segment.
Next we drag out another View and place it beneath the segmented control and put on this View two Switch's. Notice for segmented controls that we can set the number of segments under attributes and there is a drop down to control which segment we are looking at.
We are not going to make use of an outlet for the segmented control; however, we will have an outlet for our sub view, and for two outlets for the left and right switches.

Segmented Control and Switch Header

#import <UIKit/UIKit.h>
#define kShowSegmentIndex 0

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UITextField *nameField;
@property (weak, nonatomic) IBOutlet UITextField *numberField;
@property (weak, nonatomic) IBOutlet UILabel *sliderLabel;
@property (weak, nonatomic) IBOutlet UIView *switchView;
@property (weak, nonatomic) IBOutlet UISwitch *leftSwitch;
@property (weak, nonatomic) IBOutlet UISwitch *rightSwitch;

-(IBAction)textFieldDoneEditing: (id)sender;
-(IBAction)backgroundClick:(id)sender;
-(IBAction)sliderChanged:(id)sender;
-(IBAction)switchChanged:(id)sender;
-(IBAction)toggleShowHide:(id)sender;
@end

Segmented Control and Switch Implementation

-(IBAction)switchChanged:(id)sender
{
    UISwitch *whichSwitch = (UISwitch *)sender;
    BOOL setting = whichSwitch.isOn;
    [_leftSwitch setOn:setting animated:YES];
    [_rightSwitch setOn:setting animated:YES];
}

-(IBAction)toggleShowHide:(id)sender
{
    UISegmentedControl *segmentedControl = (UISegmentedControl *)sender;
    NSInteger segment = segmentedControl.selectedSegmentIndex;

    if(segment == kShowSegmentIndex) [_switchView setHidden:NO];
    else [_switchView setHidden:YES];
    
}

After writing this code we need to set up each of the outlets and actions in Interface Builder.

Switch Segmented Control Screenshot

Action Sheets and Alerts

We are now going to discuss adding a button and making an action sheet appear after clicking it.
Action sheets are modal dialogs -- when an action screen is shown, the user cannot interact with any other part of the application.
To implement an action sheet we need to say our class conforms to the protocol UIActionSheetDelegate.

Protocols are a little bit like Java interfaces. To review what we said before, they can be defined in a header file using the syntax:

@protocol MyDelegate
// list optional methods
-(void) optionalMethod1;
// ...
@required
//list required methods to implement protocol
-(void) requiredMethod1:(id)myThing;
//...
@end;

A class that uses this protocol says so with a declaration like:
```
@interface MyClass : NSObject <MyDelegate>
//...
@end;
```

How we modify our Controller's Header

#import 
#define kShowSegmentIndex 0

@interface ViewController : UIViewController 
<UIActionSheetDelegate>

@property (retain, nonatomic) IBOutlet UITextField *nameField;
@property (retain, nonatomic) IBOutlet UITextField *numberField;
@property (retain, nonatomic) IBOutlet UILabel *sliderLabel;
@property (retain, nonatomic) IBOutlet UISwitch *rightSwitch;
@property (retain, nonatomic) IBOutlet UISwitch *leftSwitch;
@property (retain, nonatomic) IBOutlet UIView *switchView;

-(IBAction)textFieldDoneEditing: (id)sender; 
-(IBAction)backgroundClick:(id)sender;
-(IBAction)sliderChanged:(id)sender;
-(IBAction)switchChanged:(id)sender;
-(IBAction)toggleShowHide:(id)sender;
// we hook up doStuff with a new button we add to our view
-(IBAction)doStuff:(id)sender;
@end

Code for doStuff

Here is the code for the doStuff method which we set up to be called on a Touch Up Inside event on a new button with label DoStuff we add to out storyboard.

-(IBAction)doStuff:(id)sender
{
    UIActionSheet *actionSheet = [[UIActionSheet alloc]
                                  initWithTitle:@"Are you sure?"
                                  delegate:self
                                  cancelButtonTitle:@"No Way!"
                                  destructiveButtonTitle:@"Yes, I'm Sure!"
                                  otherButtonTitles:nil];
    [actionSheet showInView:self.view];
}

Code for Protocol Method

Here now is the code we add to implement the UIActionSheetDelegate protocol (again, this will be in ViewController.m)

-(IBAction)actionSheet:(UIActionSheet *)actionSheet
didDismissWithButtonIndex:(NSInteger)buttonIndex
{
    if(!(buttonIndex == [actionSheet cancelButtonIndex]))
    {
        NSString *msg = nil;
        if(_nameField.text.length > 0)
        {
            msg = [NSString stringWithFormat:
                   @"You can breathe easy, %@, everything went okay.",
                   _nameField.text ];
        }
        else
        {
            msg = @"You can breathe easy, everything went okay.";
        }

        UIAlertView *alert = [[UIAlertView alloc]
                              initWithTitle:@"Something was done"
                              message:msg
                              delegate:self
                              cancelButtonTitle:@"Phew!"
                              otherButtonTitles:nil];
        [alert show];
    }
}

Action Sheet in Action

Image after destructive button title clicked

Javascript

We are now going to return to the topic of HTML 5.
By Monday, we are going to make a simple app which can detect when the screen orientation changes from portrait to landscape or vice-versa.
In order to do this detection, we are going to make use of Javascript.
So to start today, we are going to have a crash course on Javascript, DOM, and jQuery

Understanding Javascript

Javascript is an interpreted language developed by Brendan Eich at Netscape around 1995.
Many details on Javascript can be found at: http://www.webreference.com/javascript/reference/core_ref/contents.html
As we have already seen in our first demo of HTML 5, Javascripts can be either directly or indirectly embedded in a document.

Directly:

<script type="text/javascript">
<!-- hide from old browsers
-- code --
// -->
</script>

Indirectly:

<script type="text/javascript" src="myscript.js" />

Basic Syntax

Identifiers in Javascript (i.e., names of variable or functions) must begin with a letter, an underscore, or a $ and subsequent characters may be one of these three or numbers
Javascript supports /*...*/ and // for comments.
Semicolons to end lines in Javascript are optional. Beware:
```
return 
x; // has the effect of just return!
```
Most statement syntax; operators +, -, *, /, %, ++, --, etc; control structure such as: if/else, for, while, do..while; are written in the same way as Java.
Javascript has five primitive types: Number, String, Boolean, Undefined and Null.
Javascript has predefined objects corresponding to Number, String and Boolean. Each of these is wrappers for a value of the corresponding primitive type.
Javascript supports literals such as 5.5, 3, NaN, "hi", 'yo', true, false, undefined, null.
Numbers can by converted to strings using the toString method of Number. So can do:
```
x = 5.5; y = x.toString(); 
```
Strings can be concatenated using +. Ex: greeting = "hi" + "you";

Ways to invoke Javascript

When a web page is loaded, it is parsed from top to bottom.
When a script tag is found it is evaluated.
Javascript in a browser setting has several built-in objects that allow it to refer to the current document (document), the current window (window), etc.

To write out text as the document is being parsed we might do things like:

document.write("Hi there!");
document.writeln("This strings has a new line after it!");

After the page is done being parsed and drawn, there several different ways that Javascript might be invoked:
1. By a link:
```
<a href="javascript:alert('hi there')">Hi there alert</a>
```
  Hi there alert
2. By an event set up using an attribute:
```
<button onclick="alert('hi there')">Hi There!</button>
```
3. By an event set up using Javascript:
```
<button id="yo">Yo!</button>
<script>
document.getElementById("yo").onclick = function() {alert("yo");}
</script>
```

Remarks on Ways to invoke Javascript

After the document is loaded, any document.write() is viewed as a new document. So the document.write() overwrites the current document.
Notice each tag in a web page corresponds to an object in Javascript that can be accessed using document methods. This is what we did when we invoked getElementById().
This correspondence is called the document object model (DOM).

Objects

Objects can be created with an initial declaration like:
```
var my_object = new Object();
```
This object would initially have no properties. To delete an object use: delete my_object;

An assignment like:

my_object.make= "V6" /* would then give a property make a value. */
//can access as
p = my_object["make"]
q = my_object.make

You can also nest objects this:
```
my_object.subObject = new Object();
```
You can loop over properties using:
```
for(var prop in my_object){...}
```

Arrays

Arrays can be created with the syntax:

var myArr = new Array(1, 2, "hello")
var myArr = new Array(100);
var myArr = [1,2,3];
//to access
myArr[0]
//to determine length
myArr.length

Functions in Javascript

Below is an example of the syntax for declaring a function in Javascript

function swap(i, j, a)
{
    var tmp=a[i]; /* explicitly defined variables 
                     have scope within the function
                     if I had declared the variable 
                     implicitly it would have global scope */
    a[i] = a[j]; a[j] = tmp;
}

This function could be called with a syntax like:
```
swap(10, 5, b);
```
A return statement can be used to return a value from a function.
Functions are objects so can be assigned to variables.
```
var b = swap;
```
We can create functions anonymously (often done in jQuery) and assign them to variables:
```
swap = function(i, j, a) { /* code above */}
```
The definition of a function does not need to list its arguments. One can obtain a list of arguments using the argument subobject of a Function.
```
function swap()
{ var i = this.arguments[0], j=this.arguments[1], a=this.arguments[2];
  //same code as before
}
```

Constructors

Javascript constructors are special methods that create and initialize the properties for newly created objects. For example,

function car(new_make, new_model, new_year)
{
   this.make = new_make;
   this.model = new_model;
   this.year = new_year;
}

I could then create an object with

my_car = new car("Ford", "Contour SVT", "2000");

More iPhone Controls, Javascript

Outline