Professional macOS Programming

In the previous section, we added some dummy flower names into the project just to have some data to display in the table view. In this section, we’ll add real images of flowers and use the file manager class, to load the flower names from our app bundle.

   •  Drag the flower images into the project

   •  Use File Manager class to load the flower names from bundle

   •  Print the contents of the resources in the app bundle

Once we have access to the contents of the resources in the app bundle, we can filter the contents in order to add only the flower names into our collection. Also, we don’t want to display the .PNG extension from the flower name on the app, so we’ll use a string function to strip out the extension. We’ll also display the name in the upper-case.

   •  Add only the flower names into the collection

   •  Remove the .PNG extension from the flower name

   •  Display the upper -case value for the name

When creating a macOS app, there are a few options that must be configured for a better user experience. The first option we are going to change is the app title. Also, we need to make sure that the user is not able to resize the app window to an unusable size, by setting the minimum content size for the app.

   •  Change the window title to the app name

   •  Change the table cell row height and font size

   •  Set the minimum content size for the app window

Even though the table shows the name of the flowers, we are not able to see the photo of the flower when the row is selected. There’s a table delegate function that is called, whenever the user selects a table row. This function will be used to get access to the split view item, that contains the image view and then the flower image for the image view is set.

   •  Create a new function inside the PhotoViewController

   •  Implement TableView function that is called, when the row is tapped

   •  Set the ImageView to display the selected flower

Now that the app is completed, we can add some improvements and fix a minor bug, that makes the image view take over the entire app window. We can also look at other options that can be configured for the app.

   •  Understand the content compression resistance priority property

   •  Change the content compression resistance priority for the image view

   •  Configure other windows options

Sometimes, we want to display our data in a grid format rather than in rows (like in a table view). Collection view allows us to display our data in grid view format. Here, we’ll learn how to set up a collection item, how to access the app’s document directory, and how to display images on the grid.

   •  Create new Xcode project, add collection view, and set the properties

   •  Add layout constraints and create IBOutlet

   •  Configure the data source and delegate object

A collection view item represents individual grid on a collection view. The design of individual grid on a collection view is done on the collection view item. Setting up a collection view item isn’t as straightforward as a table view cell. XIB file will be used to design each grid, and we must use a subclass of collection view item class.

   •  Create a subclass of the NSCollectionViewItem

   •  Add image view to the XIB file and connect the ImageView outlet

   •  Add a collection view item from the object library and change its identity

In order to see the grids of the collection view, we need to conform to two protocols, the data source and delegate protocols. These two protocols allow us to write the code, that will set the number of grids, that are required and what each grid should display.

   •  Confirm the View Controller to the data source and delegate protocols

   •  Implement the two required functions

   •  Set background color of each grid, so we can see the grids

Every macOS app has its own unique document directory where files can be saved. The location of the document directory can be easily accessed. We are also going to learn how to return the URL of the current user’s document directory and how to create folders inside of this directory. Finally, we’ll learn how to check if a folder exists.

   •  Access the user’s home directory with one line of code

   •  Navigate to the folder using a finder

   •  Create a function that returns the user’s document directory

The last step is to display the flowers inside of the document directory subfolder on the collection view. This step talks about how the flowers were displayed on the table view, however we’ll be converting a URL to a data object before we can display it. We’ll also learn how to access all the objects inside of a document directory.

   •  Create a collection of URLs to store the data

   •  Add all the flowers URLs to the collection object

   •  Create image from a URL object and display on collection view item

Here, we are going to learn how to add a toolbar to a window scene. The first thing that we are going to do is to create a new macOS project. We’ll then add a toolbar to a window object and not to a View Controller. Default buttons are added to the toolbar which can be removed.

   •  Create a new macOS project

   •  Drag a toolbar from the object library to the window scene

   •  Add and remove toolbar buttons and run the app

The next step is to add a custom button to the toolbar. This button will be used to launch the sharing service picker. Learn to add a custom button to the toolbar. In this case, it’s the textured rounded button from the object library. Drag one of these textured buttons onto the allowed toolbar items on the toolbar to configure its properties.

   •  Remove all buttons from the toolbar, except flexible space button

   •  Add a rounded textured button to the toolbar

   •  Configure the properties of this custom button

The next step is to set up the app user interface by adding a TextField and an image view, which we’re going to be using to share the text and an image. Whatever we type inside of the text field will be attached to the selected sharing service, and be ready for sharing alongside the image on the ImageView.

   •  Add a TextField and image view to the View Controller

   •  Add layout constraints to both the TextField and the image view

   •  Setup the layout constraints for both objects

Once we have the user interface setup completely, the next step is to create an IBAction function, that will be triggered whenever the user clicks the share toolbar button. The toolbar button will not be useful, unless it can perform an action. Hence, we are creating an IBAction, that will be attached to the custom button that we added to the toolbar.

   •  Create a new IBAction inside the View Controller

   •  Create an object of the NSSharingServicePicker class

   •  Call the show function and pass in the 3 parameters

The last step is to connect the share button to the IBAction function that we created previously, in order to show the sharing service picker when the share button is clicked. Once the connection is set up, we’ll be able to see the list of sharing services available whenever the share button is clicked.

   •  Find the NSButton using the document outline

   •  Control-drag from the button to the first responder object

   •  Select the function from the list to establish the connection

In order to run an app completely from the menu bar, we need to remove the window and the dock icon of the app. Removing the app window is quite straightforward. We simply disable the initial View Controller for the storyboard. Removing the icon however requires setting a key in the property list file.

   •  Explore apps that run only from the menu bar

   •  Remove the entry point for the storyboard

   •  Add new key to PLIST file to remove the app icon

The next step will be to create a status bar item and add it to the menu bar. Once this is done, we are going to add two menu items to it, so we can use the menu items to run different actions.

   •  Create a status bar item in the app delegate

   •  Create two different menu items

   •  Add the menu items to the status bar item

Even though we added menu items to the status bar item, we did not add any action to the menu items. Menu items have an action parameter, that can be set to call a function, when the menu item is selected.

   •  Create two functions that will be called from menu items

   •  Use the selector to call the functions

   •  Display an alert when a menu item is selected

We are not able to see the app, since we removed the app window. So, we need to find another way to display the app to the user. One way is to use a popover window, which will display the app in a location we set, in this case, near the menu item on the menu bar.

   •  Set the View Controller identifier using the identity inspector

   •  Instantiate the View Controller using the storyboard object

   •  Use the NSPopover class to display the app

We are going to develop a simple app to save a note. The app will have 2 buttons, one to clear the text and one to save the text. We’ll learn how to use keyboard shortcuts instead of clicking the buttons to perform those actions.

   •  Create a new Xcode project for the app

   •  Add two buttons and one TextView object

   •  Add layout constraints, IBOutlets, and IBActions for the objects

By default, any text that we type inside of the app is not preserved. We want to be able to persist the text inside of TextView, so that when we launch the app in the future, we can retrieve the previously saved data.

   •  Create an object of the UserDefaults class, and use it to save the text

   •  Use a key to retrieve the saved text and display it

   •  Set the key to nil to clear texts from UserDefaults

There’s an API that can be used to monitor the key down event, which reports back, as to which key has been pressed on the keyboard. We are able to see the key code and the characters associated with the key that was pressed. We can use this information to identify a key.

   •  Add a code to monitor the key down event

   •  Print the key code and characters for pressed key

   •  Use if statement to save and clear based on key code

For every key event there a property known as a modifier flag. This flag will tell us all the modifier keys that has been pressed in combinations with other keys. We can then check if the modifier flags contain the modifier key (Command, Control, Shift, etc.) that we are interested in.

   •  Check if the event modifier flag contains the Command key

   •  Check for multiple modifier keys by passing an array

   •  Use modifier key + key pressed to save and clear

The next step is to add an alert to the app. The purpose of the alert is to prompt the user when a clear button is clicked, so that we can confirm from him if the action was intended. We’ll add multiple buttons to an NSAlert, and then run actions based on the selected button.

   •  Use the add button function to add 2 buttons to the alert

   •  Store the response result of runModal() function

   •  Perform actions based on each button’s response

We are going to create a new app that will be used to show the user's location on a map. Create a new Xcode project and add a map view to the default View Controller Scene. We’ll also add a label to show the address the user selected on the map view.

   •  Create a new Xcode project for the app

   •  Add a map view and a label to the scene

   •  Add layout constraints and IBOutlets for the objects

We’ll be using the Location API to get access to the user’s current location. There are many steps required before we are able to gain access to that. We’ll need to ask for the user’s permission before we can get that, and then we need to set a few properties of the Location Manager class and also conform to location delegate functions.

   •  Create the location manager object and set its properties

   •  Ask the user’s permission to access the location

   •  Conform to the location manager delegate functions

Once you have the user’s coordinate object, you can display the user’s location on a map. By default, when you show the user’s location, the map does not automatically zoom to that location. We are going to add the ability to zoom to the user’s current location using a map region.

   •  Set the map view property to show the user’s location

   •  Create a map region around the user’s coordinate

   •  Zoom the map view to the new region

We are going to use a click gesture recognizer detect, when a user clicks on a map view. Map view has a function that can convert an NSPoint (a point on a view) to location coordinates, which we are going to use.

   •  Create an object of click gesture recognizer

   •  Get the NSPoint, the user clicks on the view

   •  Convert the NSPoint to a map coordinate

There’s an API that can be used to convert a physical address to a location coordinate, this API is known as Geocoding. Reverse Geocoding API allows us to convert a map coordinate to a physical address, and this is what we are going to use to convert selected coordinates on a map, to a real address.

   •  Create an object of the Geocoder

   •  Use the coordinates in the reverse the geocoding function

   •  Get the street address from the placemark object

The animator proxy object is used to animate common view properties such as background color, alpha property, and so on. By using the animator proxy object, we do not need to write any line of code to perform animations. The animator proxy object does the animation on the property change of a view.

   •  Add Image View and button to the View Controller

   •  Create the IBOutlet and IBAction for Image View and button

   •  Animate the alpha value of the view, using animator proxy

Calling the animator proxy object on view is straight forward, but the same is not true when trying to animate the layer property of a view. We have to set a property to implicitly allow animations on the layer. Also, keep in mind that some views do not have layer backing by default so this must also be enabled.

   •  Set the border width and border color of Image View

   •  Implicitly allow animations on the view’s layer

   •  Set the view’s layer backing in order to animate layer

Sometimes,, we want to run a set of code when an animation has been completed. This is the purpose of the completion handler in the animation function. Usually, the completion handler is used to reverse the animation so that it loops around, such as fading a view in the animation code and then unfading the view, when the animation has completed.

   •  Use the runAnimationGroup function of the NSAnimationContext to animate

   •  Change the rotation and alpha value of Image View

   •  Use the completion handler to reverse the animation

CABasicAnimation class allows you to modify the animations directly, so they can be used to create a slightly more advanced animations than the animator proxy object. They are also used to animate properties of layers that are stated as key paths.

   •  Create animation to change the opacity of the Image View

   •  Create animation to scale the size of Image View

   •  Animate the Image View along the x and y axis

Setting up a SpriteKit game project is quite easy on Xcode. Simply select the Game template and then select the SpriteKit from the Game Technology option. However, using this template means so many extra files and template codes will be added to our game, and this may be slightly confusing for beginners. Instead, we are going to use a normal Cocoa project that we are already familiar with, and convert it to a game template.

   •  Create new Xcode Cocoa project and change View to SKView

   •  Create a Game Scene and implement didMove function

   •  Create a sprite node and present the game scene

There are many properties of the sprite nodes that can be changed. These properties include the scale and position of the node, which determines the size and the location of the node respectively. We can also add different actions to the sprite node, for example, to move the node from one location to another, or to remove the node from the parent view.

   •  Add a ball and change the scale and position of the ball

   •  Create actions to move and delete the ball

   •  Run the actions on the ball sprite node

In order to drop new balls every second, we need to use a timer function to call the addBall function. Timer class allows us to perform an action at certain intervals. Also, we’ll learn how to move the mouse to the location, where the user clicks on the screen, and also learn how to drag the cat along the x axis, using the mouse functions.

   •  Use the timer function, to call the addBall function every second

   •  Move the cat to the clicked location on the screen

   •  Move the cat along the x-axis, using mouse dragged function

Objects in the real world bounce or change directions when they collide with other objects, but currently in our game, the ball and the cat do not collide, even when they are in the same path. By adding physics body, to both the cat and the ball, we’ll make them behave as they would in the real world; which means, they’ll be able to collide and bounce. We are also going to learn how to use a delegate function to detect when a contact is being made between the two bodies.

   •  Add physics body to both the cat and ball sprite nodes

   •  Use the didBegin delegate property, to detect collision between nodes

   •  Remove the ball from the game when contact is detected

Just as we use the SKSpriteNode to display images in the game, the SKLabelNode is used to add text to the game. We’ll add game scores and increment the value, whenever the cats catch the ball. We’ll also learn how to add transitions, when presenting a new scene. Finally, we’ll learn how to detect a click on a sprite node.

   •  Add the score label and increment the score value

   •  Use update function to check if the ball has reached the bottom

   •  Use transitions to present a new scene

We are going to develop a mini Web Browser App that allows us to learn how to navigate to the websites on a macOS app. We are going to set up the project by adding TextField and segmented control to a toolbar. These will be used for typing out the website address and for navigating forward and backwards respectively. Finally, we’ll add a Web View which will be used to show the website.

   •  Create new Xcode project for Browser App

   •  Add a toolbar and delete the defaults buttons

   •  Add a TextField and segmented control, and change their properties

In order to set up IBoutlet connections for the two custom objects on the toolbar, we have to use a custom Windows Controller. We’ll also use this custom class to hide the title of the window. Finally, we’ll create the functions that will be called whenever we click on the forward/back button, and also when the user presses the enter button.

   •  Create custom Windows Controller class

   •  Establish IBOutlet for segmented control and TextField

   •  Create IBAction functions for the segmented control and TextField

Finally, we’ll learn how display a website on a Web View object. However, this is not as straightforward, we have to configure two options in the project, which is to enable outgoing connections inside the Capabilities options and also add a new key to the info.plist file so we can visit non-secure links.

   •  Use the loadRequest function of the Web View to load a website

   •  Enable outgoing connections in Capabilities tab

   •  Add a key to info.plist to allow non-secure links

Sometimes, we want to know when something happens inside of a Web View, such as, when it has completely loaded, or when a link has been clicked, and so on. The Web View navigation delegate allows us to track some of these events. We are going to learn how to know, when the Web View has changed navigation to a new page and displays the current URL of the page.

   •  Implement the navigation using the goForward and goBack functions

   •  Conform to the WKNavigationDelegate didCommit function

   •  Show the current website address in the TextField

In order to publish the app to the App Store, the app must have sets of icons with different sizes. These icons must be added to the icons sets inside of the xcassets folder. Once added, the icons will be displayed for the app.

   •  Add icon files to the Assets Catalogue

   •  Clean the project so the icon can be linked

   •  Run the project to see the new app icon