This is a series of articles explaining 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.
What is Cocoa?
macOS has a layered structure. The Cocoa Application Layer is the upper layer of that layer structure and provides the APIs necessary to create macOS app-like applications. 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, this is a name you don’t hear very often these days. 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.
About SwiftUI
SwiftUI is implemented with native APIs for each platforms. It uses AppKit on macOS, UIKit on iOS. When you implement your apps with SwiftUI, it uses appropriate native APIs even you don’t use them directly.
For this reason, I thought about using SwiftUI from the beginning of this series, but the implementation status of SwiftUI for macOS apps is not sufficient as of macOS Monterey 12. macOS Ventura 13 and later will improve the situation considerably, but the operating environment can be changed to We believe that the situation will be greatly improved after macOS Ventura 13, but it will still be a matter of 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 changed a bit since I wrote the article.
Create the project
Create a macOS app project, using Xcode as follows.
The project template dialog is displayed, click the “macOS” tab, select the “App” and click the “Next” button.
Enter the project option as follows and click the “Next” button.
| Option | Value | Description |
|---|---|---|
| Product Name | HelloWorld | The name of the project. |
| Team | None | The development team. |
| Organization Identifier | com.example | The prefix of the bundle identifier. |
| Interface | Storyboard | The user interface technology. |
| Language | Swift | The main programming language. |
| Use Core Data | Off | Use CoreData or not. |
| Include Tests | Off | Create the targets for the test bundle or not. |
Note that any of these settings can be changed later. SwiftUI can be used in conjunction with Storyboard even if you select the Storyboard as Interface, and any programming languages can be used even if you select the Swift as Language.
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, the local git repository will be created. If you want to create it, then turn on this option. I usually turn off this option, create the remote git repository in the GitLab or GitHub, clone it to the local and copy created project and files into there.
Edit the storyboard file
Codes generated from the template, loads the Main.storyboard when the application launched. The Main.storyboards contains the empty window and display it when the application launched.
Let’s edit the Main.storyboard to show “Hello World” text into the empty window.
Add the label
Add a label by doing the following.
The label become edit state, enter “Hello World” and press “Return” key.
Change the text size
Change the text size. In macOS, you can specify the text size with point value or system defined text style. macOS doesn’t support the Dynamic Type, so the font size is not changed dynamically by the system settings.
Change the text size by doing the following.
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.
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.
Auto layout
AppKit has an auto layout which controls the location and the size of views. It is a highly functional layout function with flexible control, but it tends to become more complex when combined.
In this article, set the auto layout to center the label. Do following.
Add new constraint sheet will be displayed. The constraint is a rule of the auto-layout.
Displayed value is current size of the label in the preview. This operation adds the constraints that fix the width and height to specified value. Then, the red frame will be appeared around the label in the preview. This means that the constraints are not enough and the layout will be failed yet, more constraints are needed.
Doing this operation add the two constraints, align the label to the horizontally center and the vertically center.
The label move to center of the view. The red frame around the label will be removed, the blue lines and blue frame will be appeared. This means that the appropriate constraints are set and auto-layout will work fine.
Change the text color
Change the text color. In AppKit, you can specify the color of the text with absolute value or system defined color. In this article, we use system defined color. Do as follows.
Check the dark mode
macOS has two appearance mode that are the light mode and the dark mode. Check the appearance of the dark mode. Click the “Appearance” button at the bottom of the preview. Each time you click, the appearance mode of the preview switches.
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 following table.
| Appearance Mode | RGB Value |
|---|---|
| Light Mode | 0, 122, 255 |
| Dark Mode | 10, 132, 255 |
If it is difficult to see the difference of changes, set the text color to the “Text Color” or “Label Color”. They are dramatically changed depending on the appearance mode.
Run the app
Let’s run the app. Click the “Run” button or press R key with the Command key. Xcode builds app and launch it. The app is launched, the window is displayed and it has a label with “Hello World” text.
Download the sample code
The Cocoa Hello World created in this article can be downloaded here.
List of Serialized Articles
This article is part of a series of articles titled “How to create macOS Apps with AppKit”. For other articles, please open the following links.
How to create macOS apps with AppKit List of Serialized Articles
