Create a SwiftUI application in AppCode

Step 1. Create a project

Launch AppCode and click New Project on the Welcome screen:
If you have another project open in AppCode at the moment, select File | New project from the main menu.
In the dialog that opens, you see the list of Xcode project templates. Select iOS | Application | App and click Next:
On the next page, adjust the general project settings:
- Product Name: your project name which will also be the name of your application. Type iOSConferences.
- Organization Identifier: your or your company's identifier in reverse-DNS format, for example, com.mycompany.
  tip
  Your project name and organization identifier together build a bundle identifier — an automatically generated string that will identify your application in the operating system.
- Make sure that Swift is selected as a programming language and SwiftUI as the user interface.
- Leave all checkboxes deselected.
In the Finder window that opens, select a directory where your project will be located.

A new Swift project will be created and immediately opened in AppCode.

Step 2. Enable SwiftUI preview

Prepare your project

Add the HotReloading package to your project from Xcode:
Alternatively, install and run the InjectionIII application.
Add the -Xlinker -interposable flag to the Other Linker Flags section of the project build settings ⌃ ⌥ ⇧ S:
Gif

Open the iOSConferencesApp.swift file and in the iOSConferencesApp structure, add the init() method with the code that loads the InjectionIII bundles:

import SwiftUI
@main
struct iOSConferencesApp: App {
    // Add this method
    init() {
        #if DEBUG
        var injectionBundlePath = "/Applications/InjectionIII.app/Contents/Resources"
        #if targetEnvironment(macCatalyst)
        injectionBundlePath = "\(injectionBundlePath)/macOSInjection.bundle"
        #elseif os(iOS)
        injectionBundlePath = "\(injectionBundlePath)/iOSInjection.bundle"
        #endif
        Bundle(path: injectionBundlePath)?.load()
        #endif
    }
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

tip
In projects that use the UIKit App Delegate life cycle, add the same code to the application(_:didFinishLaunchingWithOptions:) method in AppDelegate.swift.

Go to the ContentView.swift file. In ContentView_Previews, add the #if DEBUG block with the injected() method inside and convert struct to class:

class ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }

#if DEBUG
    @objc class func injected() {
        let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
        windowScene?.windows.first?.rootViewController =
                UIHostingController(rootView: ContentView())
    }
#endif
}

tip
The injected() method reloads the view on code injection. Instead of reloading the view, you can generate a design-time preview (like in Xcode):
@objc class func injected() {
    let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
    windowScene?.windows.first?.rootViewController =
            UIHostingController(rootView: ContentView_Previews.previews)
}

Step 3. Create a list

Let's add a List control and adjust its appearance.

Wrap the Text control in a List:

struct ConferenceList: View {
    var body: some View {
        List {
            Text("Hello, world!")
                    .padding()
            Text("Hello, world!")
                    .padding()
        }
    }
}

The preview will display this change:

Select the List control in the editor, press ⌃ ⇧ A, and find the Save as Live Template… action:
In the dialog that opens, modify the template text:
```
$ELEMENT$ {$SELECTION$}
```
Make the template applicable in Swift declarations and statements (click the Change link in the bottom-left corner of the dialog).
Add an abbreviation for the template, for example, sut, rename the custom template group to SwiftUI, and click OK:
Now you can use this template to surround your code with SwiftUI elements. Select the code lines that need to be surrounded, press ⌃ ⌥ T, and choose the new template from the list:
Gif

Add a title to the list. To do this, wrap the list in NavigationView and call the navigationBarTitle(_:) method:

struct ConferenceList: View {
    var body: some View {
        NavigationView {
            List {
                Text("Hello, world!")
                .padding()
                Text("Hello, world!")
                .padding()
            }.navigationBarTitle("Conferences")
        }
    }
}

Instead of two list items, create one that consists of a title and subtitle. In the title, display the conference name and in the subtitle — location. To do this, wrap the two Text controls in a VStack container, change their values, and apply the corresponding font styles to them:

struct ConferenceList: View {
    var body: some View {
        NavigationView {
            List {
                VStack {
                    Text("Conference").font(.headline)
                    Text("Location").font(.subheadline)
                }
            }.navigationBarTitle("Conferences")
        }
    }
}

Align both Text controls left using the alignment parameter for the VStack container:
```
VStack(alignment: .leading) {
   // …
}
```
tip
To show documentation for a symbol at caret, press ⌃ Q.

In the end, the list will look as follows:

Step 4. Load data from JSON

Next, we will add a JSON file with conferences data to our project and display this data in the ConferenceList view.

Let's add a function for parsing the JSON data into an array of Decodable objects and create a data model for these objects.

In the iOSConferences group, create a group called Model.
Create a new Swift file there (New | Swift File) and call it Data:
In the newly created file, add the loadFile() function that we will use to decode the JSON file:
```
func loadFile<T: Decodable>(_ filename: String) -> T { {...}
```
In the Model group, create the Conference Swift class (New | Swift Type) :

The Conference class should conform to the Codable and Identifiable protocols and include a set fields that correspond to the parsed JSON data:

class Conference: Codable,Identifiable {
    var name: String
    var location: String
    var start: Date
    var end: Date?
    var link: String
}

In Data.swift, introduce the conferencesData variable that will store an array of Conference objects parsed from the JSON file:
```
let conferencesData: [Conference] = loadFile("conferencesData.json")
```
tip
You can use the let live template to introduce variables: type let and press ⇥. To navigate between the template placeholders, also press ⇥.

Now when we have the array of conferences saved in the conferencesData variable, we can pass it to ConferenceList.

Go to the ConferenceList.swift file and pass conferencesData to the List initializer:
```
List(conferencesData) {conference in
    …
}.navigationBarTitle("Conferences")
```
Now the list displays as many items as the conferencesData array contains:

Finally, replace the Conference and Location strings with the real data:

List(conferencesData) {conference in
    VStack(alignment: .leading) {
        Text(conference.name).font(.headline)
        Text(conference.location).font(.subheadline)
    }
}.navigationBarTitle("Conferences")

The updated list will look as follows:

Step 5. Add the details view

In the Project tool window, select the iOSConferences group, press ⌘ N, and select File from Xcode Template….
In the dialog that opens, select iOS | User Interface | SwiftUI View and click Next:
On the next page, type the filename — ConferenceDetails, make sure that the iOSConferences group and location are selected, and click Finish.

Enable the interactive preview for the new view in ConferenceDetails_Previews the same way you did it for ConferenceList_Previews:

class ConferenceDetails_Previews: PreviewProvider {
    static var previews: some View {
        ConferenceDetails()
    }

    #if DEBUG
    @objc class func injected() {
        let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
        windowScene?.windows.first?.rootViewController =
            UIHostingController(rootView:  ConferenceDetails())
    }
    #endif
}

To set up connection between the views, we will use the NavigationLink functionality.

In the ConferenceList.swift file, wrap the VStack container in a NavigationLink.

NavigationLink {
    VStack(alignment: .leading) {
        Text(conference.name).font(.headline)
        Text(conference.location).font(.subheadline)
    }
}

Pass the ConferenceDetails view to the destination parameter of the NavigationLink:

NavigationLink(destination: ConferenceDetails()) {
    VStack(alignment: .leading) {
        Text(conference.name).font(.headline)
        Text(conference.location).font(.subheadline)
     }
}

The list items are now clickable, and the details view opens on tapping each of them:

https://resources.jetbrains.com/help/img/idea/2022.2/ac_list_details_connection.png

The ConferenceDetails view should display the detailed information on the conference selected in the list.

Go to the ConferenceDetails view and replace the default Hello, World! text with the conference location:

struct ConferenceDetails: View {
    var body: some View {
        Text(conference.location)
    }
}

The conference field is not added yet, that's why its usage is highlighted in red. Apply the Create property 'conference' intention action (⌥ ⏎) to create the field:
Gif
As a result, you should have the following code:
```
struct ConferenceDetails: View {
    var conference: Conference
    var body: some View {
        Text(conference.location)
    }
}
```

After adding the new field, we need to pass it as a parameter to all the ConferenceDetails() initializer calls. Press F2 to navigate to the error-causing code, place the caret at ConferenceDetails(), and press ⌥ F7 to find all usages of this initializer.

In the Find tool window, you will see all the calls we need to fix. Place the caret at the highlighted code, press ⌥ ⏎, and select Apply Fix-it:

In the ConferenceDetails.swift file, pass Conference() as the conference parameter in both usages:

class ConferenceDetails_Previews: PreviewProvider {
    static var previews: some View {
        ConferenceDetails(conference: Conference())
    }
    #if DEBUG
       @objc class func injected() {
            let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
            windowScene?.windows.first?.rootViewController =
                    UIHostingController(rootView: ConferenceDetails(conference: Conference()))
        }
    #endif
}

In ConferenceList.swift, change the initializer call as follows:

NavigationLink(destination: ConferenceDetails(conference: conference)) {
    …
}

Conference() is still highlighted because the Conference class doesn't have any initializers. To add one, place the caret at Conference(), press ⌥ ⏎, and select Create initializer:
Gif
An empty init() method will be added to the Conference class. Set initial values for all the properties there, for example:
```
init() {
    name = "Conference Name"
    location = "Location"
    start = Date()
    end = Date()
    link = "https://www.google.com"
}
```

Now take a look at the preview. The ConferenceDetails view displays the location of the conference selected from the ConferenceList view:

Duplicate ⌃ D the Text(conference.location) line two times:

struct ConferenceDetails: View {
    var conference: Conference
    var body: some View {
        Text(conference.location)
        Text(conference.location)
        Text(conference.location)
    }
}

The conference start and end dates should be displayed in the following format: MMMM dd, yyyy - MMMM dd, yyyy. To do this, we need to convert Date to String. Let's use a new textDates() method for this purpose and call it for the second Text control:

struct ConferenceDetails: View {
    var conference: Conference
    var body: some View {
        Text(conference.location)
        Text(conference.textDates())
        Text(conference.location)
    }
}

Place the caret at the highlighted code, press ⌥ ⏎, and select Create method 'textDates':

https://resources.jetbrains.com/help/img/idea/2022.2/ac_swiftui_create_method.png

An empty textDates() method will be created in the Conference class. Add the following code there:

func textDates() -> String {
    var result = start.dateToString()
    if let end = self.end {
        result = "\(result) - \(end.dateToString())"
    }
    return result
}

This method uses the dateToString() utility function that we will add to the Date class. Go to Data.swift and add the following code there:

extension Date {
    func dateToString() -> String {
        let format = DateFormatter()
        format.dateFormat = "MMM dd, yyyy"
        return format.string(from: self)
    }
}

The conference dates now appear in the details view:

Implement the LinkButton control which will display a clickable link to conference websites. In ConferenceDetails.swift, add the following code:

struct LinkButton: View {
    var link = ""
    var body: some View {
        Button(action: {
            UIApplication.shared.open(URL(string: self.link)!)
        }) {
            Text("Go to official website")
        }
    }
}

Now replace the third Text control with LinkButton:

struct ConferenceDetails: View {
    var conference: Conference
    var body: some View {
        Text(conference.location)
        Text(conference.textDates())
        LinkButton(link: conference.link)
    }
}

The new control will immediately appear in the preview:

The only thing left now is to enchance the details view layout.

In the ConferenceDetails view, wrap the Text controls and the LinkButton in a VStack container and move it to the top-left corner of the screen adjusting its frame's width, height, and alignment:

struct ConferenceDetails: View {
      var conference: Conference
      var body: some View {
          VStack {
              Text(conference.location)
              Text(conference.textDates())
              LinkButton(link: conference.link)
          }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
      }
  }

Align the VStack content left:
```
VStack(alignment: .leading) {
// …
}
```

Add the default padding for the VStack container:

VStack(alignment: .leading) {
    // …
}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
        .padding()

Add the bottom padding for the elements within the VStack container:
```
VStack(alignment: .leading) {
      Text(conference.location).padding(.bottom)
      Text(conference.textDates()).padding(.bottom)
      LinkButton(link: conference.link).padding(.bottom)
}
```
tip
You can place multiple carets and type your code in several lines at the same time. To do this, place the caret where you want to start typing, press and hold Shift+Alt, and place the caret at the other lines:
Gif

Show the conference name in the view title using the navigationBarTitle(_:) method:

VStack(alignment: .leading) {
    // …
}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
        .padding()
        .navigationBarTitle(conference.name)

Finally, the ConferenceDetails view will look as follows:

Create a SwiftUI application in AppCode﻿

Step 1. Create a project﻿

tip

Step 2. Enable SwiftUI preview﻿

Prepare your project﻿

tip

tip

Run the application with preview﻿

note

Step 3. Create a list﻿

1. Rename the view﻿

2. Create a surround livee template for SwiftUI elements﻿

3. Change the list appearance﻿

Step 4. Load data from JSON﻿

1. Add a JSON file to the project﻿

2. Parse the JSON file﻿

3. Display conferences in the list﻿

Step 5. Add the details view﻿

1. Create a new SwiftUI file﻿

2. Set up navigation between the views﻿

3. Pass conference data to the details view﻿

4. Display conference dates and links﻿

5. Adjust the details view appearance﻿

What's next﻿

Create a SwiftUI application in AppCode

Step 1. Create a project

Step 2. Enable SwiftUI preview

Prepare your project

Run the application with preview

Step 3. Create a list

1. Rename the view

2. Create a surround livee template for SwiftUI elements

3. Change the list appearance

Step 4. Load data from JSON

1. Add a JSON file to the project

2. Parse the JSON file

3. Display conferences in the list

Step 5. Add the details view

1. Create a new SwiftUI file

2. Set up navigation between the views

3. Pass conference data to the details view

4. Display conference dates and links

5. Adjust the details view appearance

What's next