CPTabView: A Quick Overlook

Once we have a handle on views in general (Click here for a review of CPView), the CPTabView is rather simple to understand.  Remove the "Hello World" label code and copy-and-paste the code here below into your applicationDidFinishLaunching function of a new project.  Then add the method that follows to your AppController implementation.  Reload the page, and we will discuss and play:

    var tabView = [[CPTabView alloc] initWithFrame:CGRectMake(10,10,500,300)],
        tabFrame = [tabView frame];
    //Note, we use the contentView defined in the auto generated code, so don't replace everything.
    [contentView addSubview:tabView];
  
    var tab1 = [[CPTabViewItem alloc] initWithIdentifier:@"Tab1"],
        tab2 = [[CPTabViewItem alloc] initWithIdentifier:@"Tab2"],
        tab3 = [[CPTabViewItem alloc] initWithIdentifier:@"Tab3"];
  
    [tab1 setLabel:@"Tab 1"];
    [tab2 setLabel:@"Tab 2"];
    [tab3 setLabel:@"Tab 3"];
  
    var view1 = [[CPView alloc] initWithFrame:tabFrame],
        view2 = [[CPView alloc] initWithFrame:tabFrame],
        view3 = [[CPView alloc] initWithFrame:tabFrame];
  
    [self addText:@"This is tab 1" toView:view1];
    [self addText:@"This is tab 2" toView:view2];
    [self addText:@"This is tab 3" toView:view3];
  
    [tab1 setView:view1];
    [tab2 setView:view2];
    [tab3 setView:view3];
  
    [tabView addTabViewItem: tab1];
    [tabView addTabViewItem: tab2];
    [tabView addTabViewItem: tab3];

Add this method to AppController:

-(void)addText:(CPString)stringValue toView:(CPView)aView
{
    var center = [aView center],
        textField = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
  
    [textField setStringValue:stringValue];
    [textField sizeToFit];
    [textField setCenter:center];
    [aView addSubview:textField];
} 

This is what we have created:

 Understanding the CPTabView

CPTabView creates the grey background.  Without the CPTabViewItems, all that exists is this grey canvass, and nothing else.  CPTabView is a CPView object, which means that we have access to all the wonderful functions that are associated with CPViews, including the ability to request the current frame.

In this code, we make that request to create the variable tabFrame.  I want the tab items to have a content area that fills the entire area of the tab view, so the frame's should have the same size and be positioned at (0,0) ideally.  For the purpose of this demo, I have skipped this rather important step.  If we were to set a background color to the views: view1, view2, and view3, we would see that the views are offset from the corner of the tab view area by 10 units on the left edge and 10 units on the top edge.

CPTabViewItem is what provides the tab view the labels for the tabs and the views for the content area.  CPTabViewItem is not a CPView object, and therefore has no ability to become part of the display.  Also, if we fail to set a label on the tab view item, the table does not create a tab to represent the object.  Try commenting out one of the setLabel methods, and you will see that the corresponding tab disappears altogether!  For these reasons, we must remember to always set a label on each tab item as well as a view for that tab.  Without these two critical components, the tab view item will not provide the tab view with the required information to be functional.

Within the tab view, we are able to construct any view that we desire.  If the content will be a larger content area than the defined frame, we can use a CPScrollView as our tab view to add scrollbars to the display area.

Tab Options

Tab Type

If you do not wish to see your tabs at the top of your display, we have some options.  Using setTabViewType, we can switch between five different display options.  The first option is default:

• CPTopTabsBezelBorder
• CPBottomTabsBezelBorder
• CPNoTabsBezelBorder
• CPNoTabsLineBorder
• CPNoTabsNoBorder

These display types are displayed here:

CPTopTabsBezelBorder

CPBottomTabsBezelBorder

CPNoTabsBezelBorder

CPNoTabsLineBorder

CPNoTabsNoBorder

When the tabs are removed, one can change the tab programmatically by calling:

• selectFirstTabViewItem:(id)aSender
• selectLastTabViewItem:(id)aSender
• selectNextTabViewItem:(id)aSender
• selectPreviousTabViewItem:(id)aSender
• selectTabViewItem:(CPTabViewItem)aTabViewItem

Of these functions, only selectTabViewItem requires a specific parameter.  For this method, the parameter is a copy of the tab view instance that should be selected when the method completes its operations.

All the other methods are ideally paired with buttons or other screen elements.  They take the signal sender as an argument and then work only with the current tab view item array to move either to the very first or last items or to change the index by one in either direction.  The method names are sufficiently descriptive that we will not need to identify which ones perform which actions.

setFont

Want to change the font of the tabs?  Pass your font to the method CPTabView :: setFont, and it is done.

Summary

CPTabView is a useful means of putting many displays in one content area, when the displays do not need to share the screen at the same time.  An alternative to this display type, which is also popular, is the CPAccordianView.  The class is delightfully simple to use and manipulate, and requires a basic understanding of CPView operations, which are covered in detail here: CPView Overview.