Damien, iOS developer. Currently working for Ctrip.

The Session: developer.apple.com/videos/play…

preface

In this Session you will learn how to build a document-based App in SwiftUI. You can quickly integrate document management with your App using the DocumentGroup API, as well as a combination of Pure SwiftUI App and Scenes. For example, browsing documents and iCloud files without the hassle.

An overview of the

Accessing and working with documents is the most common operation for users. The function of document App is also clear:

Documents can be created and opened
Users can edit documents and save them to disk
You can share files with another user
Manage files on disk
You can add, delete, and check iCloud files

Text might be a little bit abstract, but let’s just list a few well-known apps so you can quickly understand what a document App is, okay

File apps in iOS/iPadOS
Xcode & System mail App
Writing software Ulysses & Mind Mapping software MindNode

And so on…

As early as iOS 11 in 2017, Apple released Sessions on how to build documentation apps in iOS, For details, see Session (Building Great Document-based Apps in iOS 11).

However, now (iOS 14), Apple has brought it to SwiftUI and provided an easier and more elegant way for developers to access it. Next, we will take you step by step on how to develop a document App using SwiftUI. We’ll end up with a Mac/iPadOS application that provides drawing and has the ability to save drawing data and open drawing files.

The principle of exploring

Create a project

Create a Document App using Xcode 12. We can choose multiple platforms. Because we support iPadOS and MacOS

Code is a preliminary study

Once created, you can see the template code structure generated by Xcode

@main
struct TextEdit: App {
        var body: some Scene {
                DocumentGroup(newDocument: TextDocument()) { file in
                        TextEditor(text: file.$document.text)
                }
        }
}
Copy the code

It can be noticed that in iOS 14, SwiftUI code has undergone some changes. For example, some View has been changed into some Scene, and App & DocumentGroup has been added. Don’t worry, I’ll take you step by step through the changes.

First, let’s look at a hierarchy diagram:

App: SwiftUI’s new API, App ProtoCl allows us to easily replace AppDelegate and SceneDelegate with a structure that will manage our scenes and App life cycle. Scene: SwiftUI’s new API, which means the interface can be displayed independently by different platforms. DocumentGroup: A new SwiftUI API that automatically manages the opening, editing and saving of document-based scenes supported by iOS, iPadOS and macOS. The performance of DocumentGroup on different platforms is as follows:

IPadOS:

MacOS:

To learn more about SwiftUI’s changes, check out WWDC 2020 – What’s New in SwiftUI

Ok, with these concepts in mind, we can successfully run our App (MacOS) and see what happens

Well, it’s a simple editor with basic capabilities

Let’s comb through the internal code flow for easy understanding:

1. In the App file, our new API App & @main is used to specify the entrance of the program, and the outermost layer uses the new API Scene so that the interface can be independently displayed by different platforms, and our new API DocumentGroup is used to automatically manage the opening of the Scene of the document. Edit and save, and then initialize the ContentView for the UI presentation

2. In the ContentView, ContentView_Previews is the entry for SwiftUI preview. It’s not what we care about. We used TextEditor(a new Swift iOS 14 control) to display the text of the document, which is the UI from the Hello World section of our previous Demo.

3. ShapeEditDocument implements the FileDocument protocol to complete a series of operations for writing and opening files.

FileDocument: FileDocument is also a new API in iOS 14. The FileDocument protocol is a document model definition for serialization between file contents. The following methods need to be implemented:

init(fileWrapper: FileWrapper, contentType: UTType)In the followFileDocumentWhen a protocol object is created, it is called back, either to initialize it or to create a new object when a file is opened.
func write(to: inout FileWrapper, contentType: UTType)It is called back when it needs to be saved to disk.
var readableContentTypes: [UTType]Returns an identifiable UTType.

What is a UTType?

UTType(Uniform Type) : a string that uniquely identifies an abstract Type. They can be used to describe file formats or data types in memory, but they can also be used to describe the types of other kinds of entities, such as directories, quantities, or packages.

further

Above we have implemented a simple text editor, next we will complete a custom drawing software. And complete the function of saving and loading custom file formats. Let’s make some changes:

1. Reconstruct the ShapeEditDocument code to support our custom format for saving. We use JSON encoding and decoding to serialize our graphic information. The code is modified as follows:

Code,

We changed the init(fileWrapper: fileWrapper, contentType: UTType) and func write(to: Inout fileWrapper, contentType: UTType) methods. JSON decoding is used in the load method and JSON encoding is used in the write to disk method.

2. Register custom extension types with the system

The system will maintain a list of which types of files can be processed by which apps. We need to realize the loading and saving of custom types, so we need to register with the system which types of files we can process. Modified as follows:

Code,

We expanded the UTType, custom UTType: com. Example. ShapeEdit. Shapes. We then overwrite var readableContentTypes: [UTType] to return the custom type.

Note:

UTType is ExportedType and ImportedType. The former represents the special type owned by our App to register with the system, while the latter identifies the type owned by other apps, but we can support its use. More details can be found in the documentation:

Defining File and Data Types for Your App

3. Finally, replace our TextEditor with our custom drawing Canvas (due to space issues, code details will not be shown)

This completes our quest for today’s Session.

conclusion

In iOS 14, Apple has given us a much simpler way to create a document App. A few lines of code can create a powerful document App. Hopefully developers can build more value from this.

Limited welfare

This article is from WWDC20 Inside Reference. I recommend this column here.

The “WWDC Insider reference” series was initiated by the veteran Driver Weekly, Knowledge Collection and SwiftGG technology organizations. We’ve been doing it for a couple of years, and it’s been good. It is mainly for the annual WWDC content, do a selection, and call on a group of front-line Internet iOS developers, combined with their actual development experience, Apple documents and video content to do a second creation.

There are 213 sessions this year. WWDC20 Insider selected 135 of these sessions, and the column has now produced 97 articles. It is on sale now, only 29.9 yuan, very discount.

See article also not enough friends, to subscribe to the WWDC20 inside ~ https://xiaozhuanlan.com/wwdc20 to continue reading

Pay attention to our

We launched LSJCoiding, a weekly newsletter for veteran drivers, which is called a welcome update to each issue.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

【WWDC20】10039 – How to write a standalone App with SwiftUI?

preface

An overview of the