Swift Projects in AppCode Without a Main.storyboard

For years, the only language for developing UI applications for OSX and iOS was Objective-C and the only IDE was Apple’s Xcode. Apple announced Swift at WWDC a year ago and Swift 2.0 at this year’s WWDC. Swift has a much easier syntax to learn than Objective-C, and is more secure and less prone to latent bugs like stack overflow errors.

There are at least three ways to develop GUI applications for iOS and OSX.

You can use a traditional text editor (like vim or emacs) to edit your source and use the command line compilers to compile and build your application. If you’ve ever set up a continuous integration system, you’re familiar with the command line tools.

Apple’s Xcode is a full featured IDE for developing C, C++, Objective-C, and Swift applications. The editor has its own idiosyncrasies, like hitting the tab key with a range of lines selected replaces the lines with a tab character instead of the expected behavior of indenting the lines. The interface for setting the various options for building and linking your program can be overwhelming.

JetBrains’ AppCode brings all of their excellent IDE functionality to building Objective-C and Swift applications. You get the added bonus of JetBrains’ HTML, JavaScript, and CSS editors. AppCode isn’t perfect, though. You still need to use Xcode for things like adding images to xcassets, and working with Storyboards. For the most part you can do your work in AppCode.

Xcode has a Storyboard editor built in. This editor allows you to design the user interface for your app with a drag and drop WYSIWYG view and form based entry to configure the properties of the user interface elements. There are point and click features for connecting events to methods in your classes, though you will be switching between source code for your classes and the WYSIWYG editor to do so.

There’s no requirement that you use Storyboards at all. The alternative is to instantiate the UI element classes and to configure the elements’ properties in code. In doing so, you may dynamically layout your screen based upon screen dimensions and business logic that dictates elements be hidden or shown.

In this post, we will demonstrate how to create a Swift project in JetBrains’ AppCode, eliminate the Main.storyboard, and generate a view with a button that is centered on the screen horizontally. We won’t need to use Xcode at all.

Project Creation

The first thing we need to do is create our project in AppCode. Selecting “File”, then “New Project” brings up the following dialog. Note: we choose iOS Application and Single View Application.

On the next screen, we choose a product name and Swift as the Language for the project.

Now that the project is created, we can run the default application generated by AppCode to see what it does. From the Run menu, choose Run, and then select a simulator or device target on which to run.

The simulator will launch (if it’s not already running) and you’ll get a blank white screen. This is all that the default application does.

Notice in the project tree there’s a Main.storyboard file. This contains the blank white screen that we are seeing in the simulator. We want to remove it from the project.

Delete these two lines in the Info.plist file.

Delete the Main.storyboard file from your project.

The application will only show a blank black screen because we have not specified a View to be displayed. We’ll need to edit the AppDelegate.swift file to set the window and its rootViewController. We set the window member to a created UIWIndow element. There is always one UIWIndow per application unless your app will display on an external device screen.

AppCode generated a ViewController.swift file for us that defines a default ViewController that basically does nothing. We had a blank white screen, after all. We set the rootViewController to this ViewController.

We also set the window’s background color to white and made the window visible.

When we run this version of the app, we get a blank white screen, but it’s being displayed with code and not by the Main.storyboard file.

We will create our UI by editing the ViewController.swift file. Let’s try something really simple, like changing the screen background to blue.

When we run the app, the background is indeed blue.

In ViewController.swift, we’ll implement an Alert function that wraps UIAlertController to provide a JavaScript like alert.

Next, we’ll create a UIButton. The buttonPressed method of our ViewController will be invoked when the button is pressed. We instantiate the UIButton, and set its title, color, and position. Then we added it to our view (self.view). The button’s position and size are hard coded, which is often what you’d do with the Storyboard Editor in XCode.

When we run the app, we see this:

When we tap on the button, we get our alert:

To complete this example, we’ll want to demonstrate how to dynamically layout the view. This version will center the button horizontally in the view.

Sure enough, our button is centered.

Finally, let’s render 5 buttons vertically, each centered horizontally. Notice how the top variable is calculated using each button’s calculated height and not a fixed constant.

The buttonPressed method is modified to render the title of the button that was pressed.

The app does render the 5 buttons.

If we tap on the first, we get the expected alert.

When we tap on the fourth button, we get the expected alert, too.

Conclusion

AppCode has come a long way and is moving towards being the only tool you need to develop OSX and iOS applications. While it is not 100% there yet, it is just a matter of time before you won’t need to use the Xcode GUI at all.

For now, we can use AppCode, almost exclusively, to build entire applications. This gets you JetBrains’ code formatting, inspections, refactoring, key bindings, snippets, and other great tools, during development.

The idea of dynamically generating the screens is quite powerful. You can detect tablet vs phone and generate very different layouts for each. You can detect large screen phone (6+/6s+) vs small screen phone (iPhone 4) and render accordingly.

You can find the code for the example application on GitHub.

https://github.com/moduscreate/appcode-swift-without-main-storyboard