Create a SwiftUI application in AppCode

1. Place the caret at ContentView, press ⇧ F6, type ConferenceList in the highlighted area, and press ⏎.

2. Click and select the Comments and strings checkbox.

3. In the Find tool window that opens, click Do Refactor. AppCode will modify the usages of this symbol everywhere including filenames and comments.

   

4. The same way, rename ContentView_Previews to ConferenceList_Previews.

1. 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:

   

2. Select the List control in the editor, press ⌃ ⇧ A, and find the Save as Live Template… action:

   

3. In the dialog that opens, modify the template text:

   $ELEMENT$ {$SELECTION$}

4. Make the template applicable in Swift declarations and statements (click the Change link in the bottom-left corner of the dialog).

5. Add an abbreviation for the template, for example, sut, rename the custom template group to SwiftUI, and click OK:

   

6. 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:

   

1. 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") } } }

2. 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") } } }

3. Align both Text controls left using the alignment parameter for the VStack container:

   VStack(alignment: .leading) { // … }

In the end, the list will look as follows:

1. Download the conferencesData.json file from our repository.

2. Select the iOSConferences group in the Project tool window, press ⌘ N, and choose Group.

3. In the dialog that opens, type Resources, make sure the Create folder, checkbox is selected, and click OK:

   

4. Right-click the Resources group, select Add | Files and locate the downloaded JSON in Finder.

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

1. In the iOSConferences group, create a group called Model.

2. Create a new Swift file there (New | Swift File) and call it Data:

   

3. 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 { let data: Data guard let file = Bundle.main.url(forResource: filename, withExtension: nil) else { fatalError("Cannot find \(filename)") } do { data = try Data(contentsOf: file) } catch { fatalError("Cannot load \(filename):\n\(error)") } do { let decoder = JSONDecoder() let format = DateFormatter() format.dateFormat = "yyyy-mm-dd" decoder.dateDecodingStrategy = .formatted(format) return try decoder.decode(T.self, from: data) } catch { fatalError("Cannot parse \(filename): \(T.self):\n\(error)") } }

4. In the Model group, create the Conference Swift class (New | Swift Type) :

   

5. 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 }

6. 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")

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

1. 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:

   

2. 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:

1. In the Project tool window, select the iOSConferences group, press ⌘ N, and select File from Xcode Template….

2. In the dialog that opens, select iOS | User Interface | SwiftUI View and click Next:

   

3. On the next page, type the filename — ConferenceDetails, make sure that the iOSConferences group and location are selected, and click Finish.

4. 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.

1. 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) } }

2. 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:

   

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

1. 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) } }

2. 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:

   

   As a result, you should have the following code:

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

3. 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)) { … }

4. 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:

   

   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:

1. 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) } }

2. 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':

   

   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:

   

3. 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.

1. 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) } }

2. Align the VStack content left:

   VStack(alignment: .leading) { // … }

3. Add the default padding for the VStack container:

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

4. 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) }

5. 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: