Create Cocoa Hello World | How To Create macOS Apps

This series of articles explains how to create a Cocoa version of Hello World. This time, we will create Hello World with zero coding, just editing the storyboard.

In this article, we use Xcode. If you have not installed Xcode, please see the following article to set up Xcode.

TOC

What is Cocoa?

macOS has a layered structure. The Cocoa Application Layer is situated at the upper level of the layered structure. It provides the APIs necessary for creating applications with a macOS app-like feel. The upper layers are implemented using the lower layers.

“Cocoa” is more commonly used in the narrow sense of API than as an application layer. However, you may not only come across this term a few times. Since “UIKit” for creating iOS applications and “SwiftUI” for cross-platform use in the Apple Platform are introduced, it seems that the framework name “AppKit” has become more common than the term “Cocoa”.

Incidentally, “UIKit” used to be called “Cocoa Touch”, but now the framework name “UIKit” seems more established.

macOS Layer Structure
macOS Layer Structure

About SwiftUI

SwiftUI is implemented with native APIs for each platform. It uses AppKit on macOS, and UIKit on iOS. So when you implement your apps with SwiftUI, it uses appropriate native APIs even if you don’t use them directly.

For this reason, I thought about using SwiftUI from the beginning of this series. Still, the implementation status of SwiftUI for macOS apps needs to be improved as of macOS Monterey 12. macOS Ventura 13 and later will improve the situation considerably. While the situation is expected to significantly improve with macOS Ventura 13, the full realization of these improvements remains in the future. With that in mind, we will start by explaining app development using AppKit.

On October 27, 2022, macOS Ventura 13 was officially released, so things have slightly changed since I wrote the article.

Create the project

Create a macOS app project using Xcode as follows.

STEP
Select the “Project…” in the submenu of “New” in the “File” menu.
STEP
Select the template and click the “Next” button.

The project template dialog is displayed. Click the “macOS” tab, select the “App” and click the “Next” button.

Project Template Dialog
Project Template Dialog
STEP
Enter the project option and click the “Next” button.

Enter the project option as follows and click the “Next” button.

OptionValueDescription
Product NameHelloWorldThe name of the project.
TeamNoneThe development team.
Organization Identifiercom.exampleThe prefix of the bundle identifier.
InterfaceStoryboardThe user interface technology.
LanguageSwiftThe main programming language.
Use Core DataOffUse CoreData or not.
Include TestsOffCreate the targets for the test bundle or not.
Project Options

Note that you can change any of these settings later. For example, you can use SwiftUI even if you select the Storyboard as Interface and any programming language even if you choose Swift as a Language.

Project option
STEP
Select the save location and click the “Create” button.

The save pane is displayed. Select the save location and click the “Create” button. If you turn on the “Create Git repository on my Mac” checkbox, Xcode will create the local git repository. If you want to create it, then turn on this option. I usually turn off this option, create the remote git repository in GitLab or GitHub, clone it to the local, and copy created project and files there.

Save panel
Save panel

Edit the storyboard file

Codes generated from the template load the Main.storyboard when the application is launched. The Main.storyboard contains an empty window displayed when the application is launched.

Let’s edit the Main.storyboard to show “Hello World” text in the empty window.

Add the label

Follow these steps to add a label:

STEP
Select the “Main.storyboard” in the project window in Xcode.
Select "Main.storyboard"
Select “Main.storyboard”
STEP
Select the “View Controller Scene”.
Select the "View Controller Scene"
Select the “View Controller Scene”
STEP
Click the “+” button in the toolbar. Object window will be displayed.
Click the "+" button
Click the “+” button
STEP
Drag the “Label” and drop it onto the “View Controller Scene”. The new label will be added to the view.
Drag and Drop the "Label"
Drag and Drop the “Label”
STEP
Double-click the label.

Once the label is in edit mode, type “Hello World” and press the “Return” key.

Edit the text of the label
Edit the text of the label

Change the text size

Change the text size. In macOS, you can specify the text size with point value or system-defined text style. Unfortunately, macOS doesn’t support Dynamic Type, so the system settings do not change the font size dynamically.

Change the text size by doing the following.

STEP
Select the label in the preview.

If you select the label when the label is already selected, the internal cell will be selected. If the internal cell is selected, click the point in the view where any sub-view is not placed to unselect all and select the label again.

STEP
Click the attributes inspector button, which is located on the right side of the project window.
Attributes inspector button
Attributes inspector button
STEP
Change the font size.

Click the “T” button, which is located on the side of the “Font” in the attributes inspector, and select the “Large Title” from the “Font”. The text size will be changed.

Change the font size
Change the font size

Auto layout

AppKit has an auto layout that controls the location and the size of views. It is a highly functional layout function with flexible control but becomes more complex when combined.

In this article, set the auto layout to center the label. Do following.

STEP
Select the label in the preview if it is not selected.
STEP
Click the add new constraint button.

Add new constraint sheet will be displayed. The constraint is a rule of the auto-layout.

Add new constraint
Add new constraint
STEP
Turn on “Width” and “Height, and click the “Add 2 Constraints” button.

The displayed value is the current size of the label in the preview. This operation adds the constraints that fix the width and height to the specified value. Then, the red frame will appear around the label in the preview. This means that more than the constraints is needed and the layout will be failed yet, more constraints are needed.

Add the constraints for width and height
Add the constraints for width and height
STEP
Click the new alignment constraints button.
Click the new alignment constraints button
Click the new alignment constraints button
STEP
Turn on “Horizontal in Container” and “Vertically in Container”, and click “Add 2 Constraints” button.

Doing this operation, add the two constraints, and align the label to the horizontal and vertical centers.

Add two constraints
Add two constraints
STEP
The preview is updated.

The label moves to the center of the view. The red frame around the label will be removed. Instead, the blue lines and blue frame will appear. The appropriate constraints are set, and the auto-layout will work fine.

Valid auto layout is set
Valid auto layout is set

Change the text color

Next, let’s change the text color. In AppKit, you have the option to specify the text color either by an absolute value or by using a system-defined color. In this article, we use system-defined color. Do as follows.

STEP
Select the label if it is not selected.
STEP
Select the “System Blue Color” from the “Text Color” in the attributes inspector. The text color will be changed.
Change the text color
Change the text color

Check the dark mode

macOS has two appearance modes: light mode and dark mode. First, check the appearance of the dark mode. Then, click the “Appearance” button at the bottom of the preview. Each time you click, the appearance mode of the preview switches.

Dark mode
Dark mode

When you use system-defined color, the text color is changed depending on the appearance mode of the system. We check the RGB value of the “System Blue”. The result is the following table.

Appearance ModeRGB Value
Light Mode0, 122, 255
Dark Mode10, 132, 255
The RGB Value of the System Blue

If it is difficult to see the difference in changes, set the text color to the “Text Color” or “Label Color”. They are dramatically changed depending on the appearance mode.

ライトモード
ライトモード
Dark Mode
Dark Mode

Run the app

Let’s run the app. Click the “Run” button or press the R key with the Command key. Xcode builds the app and launches it. The app is launched, the window is displayed, and it has a label with “Hello World” text.

Window displayed by the app
Window displayed by the app

Download the sample code

You can download the Cocoa Hello World created in this article from the following link.

List of Serialized Articles

This article is part of our series “How to create macOS Apps with AppKit”. To access the other articles in this series, please follow the links below.

How to create macOS apps with AppKit List of Serialized Articles

Let's share this post !
TOC