# Views

The Jabber Guest SDK for iOS comes with several custom views that can be used to implement the most common Jabber Guest functionality.

## The Remote View

The remote view is your window to the incoming video stream. You only need to point CJGuestCall to an UIImageView to use as the remote view, and the incoming video buffers will be displayed on that UIImageView. If you would like the video to fit inside the remote view and retain its aspect ratio, then set the content mode of the UIImageView to UIViewContentModeScaleAspectFit. If you use any other content mode with the UIImageView (a common second choice is UIViewContentModeScaleAspectFill), then you will likely want to call setClipsToBounds:YES on the UIImageView to have the video clipped. Otherwise it can extend outside its frame's bounds and draw over other parts of your interface.

The code below sets the remote view to an UIImageView that is 720 points wide by 480 points high and centered at the top of the current frame.

    UIImageView * remoteView = [[UIImageView alloc] initWithFrame:CGRectMake((self.view.frame.size.width - 720) / 2.0,
                                                                              0.0,
                                                                              720,
                                                                              480)];
    [remoteView setContentMode:UIViewContentModeScaleAspectFit];
    [self.view addSubview:remoteView];
    [[CJGuestCall sharedInstance] setRemoteView:remoteView];

When the call is connected, incoming video will be displayed on the remoteView UIImageView. To start the call, place the below code in a button, or other convenient spot in your app.

    CJGuestCall * call = [CJGuestCall sharedInstance];

    [call setServerName:@"your.jabber.guest.server"];
    [call setToURI:@"your.uri"];
    [call startCall];

## The Self View

The self view is your window to the outgoing video stream. You have two choices for how to present the self view. You can either use the CJGuestCallSelfView, which wraps up camera switching functionality along with displaying the outgoing video, or you can set the property selfView on CJGuestCall, which uses the provided UIImageView to mirror outgoing video buffers.

### CJGuestCallSelfView

The code below creates an instance of CJGuestCallSelfView that is 240 points wide by 360 points high and centered at the top of the current frame. CJGuestCallSelfView, by default, uses a content mode of UIViewContentModeScaleAspectFill and does clip to bounds.

    CJGuestCallSelfView * guestCallSelfView = [[CJGuestCallSelfView alloc] initWithFrame:CGRectMake((self.view.frame.size.width - 240) / 2.0,
                                                                                                     remoteView.frame.origin.y + remoteView.frame.size.height + 20.0,
                                                                                                     240,
                                                                                                     360)];
    [self.view addSubview:guestCallSelfView];

### CJGuestCall selfView

You only need to point CJGuestCall to an UIImageView to use as the self view. If you would like the video to fit inside the self view and retain its aspect ratio, then set the content mode of the UIImageView to UIViewContentModeScaleAspectFit. If you use any other content mode with the UIImageView (a common second choice is UIViewContentModeScaleAspectFill), then you will likely want to call setClipsToBounds:YES on the UIImageView to have the video clipped. Otherwise it can extend outside its frame's bounds and draw over other parts of your interface.

The code below sets the self view to an UIImageView that is 240 points wide by 360 points high and centered at the top of the current frame.

    UIImageView * selfView = [[UIImageView alloc] initWithFrame:CGRectMake((self.view.frame.size.width - 240) / 2.0,
                                                                            0.0,
                                                                            240,
                                                                            360)];
    [selfView setContentMode:UIViewContentModeScaleAspectFit];
    [self.view addSubview:selfView];
    [[CJGuestCall sharedInstance] setSelfView:selfView];

To start the self view, call startSelfView on the CJGuestCall instance.

    [[CJGuestCall sharedInstance] startSelfView];

### Aspect Ratio

When you create the frame for your self view, make sure to use an aspect ratio that correlates to the camera on your device. We find 3:4 offers a good self view.

## The Call Bar View

The call bar view is a bar of buttons that allows a user of your app to manipulate the Jabber Guest call once it starts. It consists of four buttons:

- Mute mutes the audio on the first touch. Touching it a second time will unmute the audio.
- Video turns off the video on the first touch. Touching it a second time will turn on the video.
- Keypad displays a DTMF keypad. Touching it a second time will hide the keypad.
- Hook starts or ends the call.

The call bar view is encapsulated in CJGuestCallBarView. The size of the call bar is fixed by the number of buttons, one to four, that are shown on the bar. To determine the size of any given call bar, use the button size constants CJGuestCallBarButtonWidth and CJGuestCallBarButtonHeight. The width of the call bar will be the number of buttons shown multiplied by CJGuestCallBarButtonWidth. The height of the call bar is always equal to CJGuestCallBarButtonHeight, since the call bar is always a single row of buttons.

The code below creates an instance of the call bar centered at the bottom of the current frame. The call bar is, by default, created with all four buttons showing.

    CJGuestCallBarView * callBar = [[CJGuestCallBarView alloc] initWithOrigin:CGPointMake((self.view.frame.size.width - (CJGuestCallBarButtonWidth * 4)) / 2.0,
                                                                                          self.view.frame.size.height - CJGuestCallBarButtonHeight)];
    callBar.delegate = self;
    [self.view addSubview:callBar];

To have a view controller be notified when a button is touched on the call control view, you will need to implement the CJGuestCallControlViewDelegate protocol.

    @interface YourViewController () <CJGuestCallBarViewDelegate>

    - (void)callBarView:(CJGuestCallBarView *)callBarView clickedButton:(CJGuestCallBarButtonType)buttonType
    {
         NSLog(@"Call Bar View : %@ button was clicked", [CJGuestCallBarView stringFromGuestCallBarButton:buttonType]);
    }

The callControlView:clickedButtonAtIndex: method will be called when a button is touched on the call control view. The index is enumerated with CJGuestCallControlButtonType, which you can use to determine which button was touched. To get a string representation of the button that was touched, use stringFromGuestCallControlButton:. The code above uses this method to log the button that was touched in the call control view.

## The Keypad View

The keypad view is a DTMF dialer that allows a user to dial DTMF digits. If you are using CJGuestCallBarView, then the Keypad button is already wired to use the keypad view and you don't have to worry about it. It will just work. If, on the other hand, you are writing your own custom call bar or need a keypad for any reason, then you can use this keypad view directly.

The keypad view is encapsulated in CJGuestCallKeypadView. The code below creates an instance of the keypad view with an origin point at the top left corner of the screen.

    CJGuestCallKeypadView * keypadView = [[CJGuestCallKeypadView alloc] initWithOrigin:CGPointMake(0,0)];
    [self.view addSubview:keypadView];

Once an instance is created it is ready to dial digits after the call is connected. No other code is necessary to make it work.