joyfill/components-ios

项目要求

请注意，为了有效地与我们的 API 和 UI 组件交互，用户访问令牌和标识符需要存储在您的端（通常位于用户和基于现有表单字段数据的一组中）。
iOS v14+
Xcode v13+

💻 安装

Swift 包管理器

Swift 包管理器是一个用于管理 Swift 代码分发的工具。它与 Swift 构建系统集成，以自动化下载、编译和链接依赖项的过程。

要使用 Xcode 将 JoyFill 集成到您的 Xcode 项目中，请在 File > Add Packages... 中指定它：

https://github.com/joyfill/components-ios.git, :branch="main"

手动

如果您不想使用任何依赖项管理器，可以手动将 JoyFill 集成到项目中。将 Sources/JoyfillComponents 文件夹放在您的 Xcode 项目中。确保启用 Copy items if needed 和 Create groups。

对于 Swift 项目

请确保替换用户访问令牌和文档标识符。请注意，文档标识符只是本例中的示例，您可以从我们的列出所有文档端点获取一个标识符。

在导入 JoyFill SDK 后，在 JoyFill SDK 代码文件夹内

- Go to 'Source' -> 'JoyfillComponents' -> 'Components' 
- Inside Components right click on Assets folder then navigate to 'Show in Finder'
- Then drag and drop Assets folder to you project and choose 'Create Groups'.

在 swift 视图控制器文件内

在顶部第 1 个导入 joyfill 包

import JoyfillComponents

然后在内部您的视图控制器类中添加以下变量

var apiUrl = "https://api-joy.joyfill.io"
var identifier = "<REPLACE_ME>"
var userAccessToken = "<REPLACE_ME>"

然后在内部视图控制器重写方法 viewDidLoad() 中添加

override func viewDidLoad() {
    super.viewDidLoad()
    getDocumentAsync()
    self.overrideUserInterfaceStyle = .light
}

然后在您的视图控制器文件内添加以下函数

func getDocumentAsync() {
    let url = URL(string: apiUrl + "/v1/documents/" + identifier)
    guard url != nil else {
        print("Error")
        return
    }
            
    var request = URLRequest(url: url!)
    let verificationToken = ["Authorization": "Bearer \(userAccessToken)"]
    let header = verificationToken
            
    request.httpMethod = "GET"
    request.allHTTPHeaderFields = header
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")
    URLSession.shared.dataTask(with: request) {data, _, error in
        if error == nil && data != nil {
            do {
                jsonData = data!
                DispatchQueue.main.async {
                    let components = Form()
                    components.saveDelegate = self
                    components.translatesAutoresizingMaskIntoConstraints = false
                    self.view.addSubview(components)
                    NSLayoutConstraint.activate([
                        components.topAnchor.constraint(equalTo: self.view.topAnchor),
                        components.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
                        components.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
                        components.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
                    ])
                            
                    uploadImageTapAction = {
                        <Add upload image action here> 
                    }
                            
                    saveButtonTapAction = {
                        self.updateDocumentChangelogsAsync()
                    }
                }
            }
        }
    }.resume()
}
        
func updateDocumentChangelogsAsync() {
    do {
        let jsonData = try JSONSerialization.data(withJSONObject: docChangeLogs, options: [])
        if let url = URL(string: apiUrl + "/v1/documents/" + identifier + "/changelogs") {
            var request = URLRequest(url: url)
            request.httpMethod = "POST"
            request.httpBody = jsonData
                    
            request.addValue("application/json", forHTTPHeaderField: "Content-Type")
            let verificationToken = ["Authorization": "Bearer \(userAccessToken)"]
            let header = verificationToken
            request.allHTTPHeaderFields = header
            let session = URLSession.shared
            let task = session.dataTask(with: request) { data, response, error in
                if let error = error {
                    print("Error: \(error)")
                } else if let data = data {
                    let json = try? JSONSerialization.jsonObject(with: data, options: [.fragmentsAllowed])
                    let _ = json as? NSDictionary
                    self.getDocumentAsync()
                }
            }
            task.resume()
        }
    } catch {
        print("Error serializing JSON: \(error)")
    }
}

然后在您的视图控制器文件内添加以下 onChange、onBlur 和 onFocus 方法

func handleOnChange(docChangelog: [String : Any], doc: [String : Any]) {
    print(">>>>>>>> docChangelog: ", docChangelog)
    print(">>>>>>>> onChange: ", doc)
}
    
func handleOnFocus(blurAndFocusParams: [String : Any]) {
    print(">>>>>>>> handleFocus: ", blurAndFocusParams)
}
    
func handleOnBlur(blurAndFocusParams: [String : Any]) {
    print(">>>>>>>> handleBlur: ", blurAndFocusParams)
}

现在可以运行了。

对于 Objective-C 项目

请确保替换用户访问令牌和文档标识符。请注意，文档标识符只是本例中的示例，您可以从我们的列出所有文档端点获取一个标识符。

按照安装依赖项下的步骤将 Swift SDK 添加到您的 Objective-C 项目中。
在导入 JoyFill SDK 后，在 JoyFill SDK 代码文件夹内

- Go to 'Source' -> 'JoyfillComponents' -> 'Components' 
- Inside Components right click on Assets folder then navigate to 'Show in Finder'
- Then drag and drop Assets folder to you project and choose 'Create Groups'.

在您的 Objective-C 项目中创建一个新的 Swift 文件，并在创建 Swift 文件弹出窗口出现时选择“创建桥接头”。
如果项目中不存在，手动创建桥接头文件

To use Swift code in an Objective-C project, you need to create a bridging header. The bridging header is an Objective-C header file that allows your Objective-C code to access Swift code. Xcode will typically prompt you to create a bridging header when you add Swift code to an Objective-C project. If it doesn't, you can create one manually.
- Right click on Project folder -> "New File..."
- Select "Header File" under the "Source" section and give it a name like "YourProject-Bridging-Header.h."

用以下给定的代码替换新创建的 Swift 文件中的内容

import Foundation
import UIKit
import JoyfillComponents

@objc(JoyDocForm)
class JoyDocForm: UIView, onChange {
    
    var apiUrl = "https://api-joy.joyfill.io"
    var identifier = "<REPLACE_ME>"
    var userAccessToken = "<REPLACE_ME>"
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    public init() {
        super.init(frame: .zero)
    }
    
    @objc public func getDocumentAsync(viewController: UIViewController) {
        let url = URL(string: apiUrl + "/v1/documents/" + identifier)
        guard url != nil else {
            print("Error")
            return
        }
        
        var request = URLRequest(url: url!)
        let verificationToken = ["Authorization": "Bearer \(userAccessToken)"]
        let header = verificationToken
        
        request.httpMethod = "GET"
        request.allHTTPHeaderFields = header
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")
        URLSession.shared.dataTask(with: request) {data, _, error in
            if error == nil && data != nil {
                do {
                    jsonData = data!
                    DispatchQueue.main.async {
                        let components = Form()
                        components.saveDelegate = self
                        components.translatesAutoresizingMaskIntoConstraints = false
                        viewController.view.addSubview(components)
                        NSLayoutConstraint.activate([
                            components.topAnchor.constraint(equalTo: viewController.view.topAnchor),
                            components.leadingAnchor.constraint(equalTo: viewController.view.leadingAnchor),
                            components.trailingAnchor.constraint(equalTo: viewController.view.trailingAnchor),
                            components.bottomAnchor.constraint(equalTo: viewController.view.bottomAnchor)
                        ])
                        uploadImageTapAction = {
                            <Add upload image action here>
                        }
                        
                        saveButtonTapAction = {
                            self.updateDocumentChangelogsAsync(viewController: viewController)
                        }
                    }
                }
            }
        }.resume()
    }
    
    func updateDocumentChangelogsAsync(viewController: UIViewController) {
        do {
            let jsonData = try JSONSerialization.data(withJSONObject: docChangeLogs, options: [])
            if let url = URL(string: apiUrl + "/v1/documents/" + identifier + "/changelogs") {
                var request = URLRequest(url: url)
                request.httpMethod = "POST"
                request.httpBody = jsonData
                
                request.addValue("application/json", forHTTPHeaderField: "Content-Type")
                let verificationToken = ["Authorization": "Bearer \(userAccessToken)"]
                let header = verificationToken
                request.allHTTPHeaderFields = header
                let session = URLSession.shared
                let task = session.dataTask(with: request) { data, response, error in
                    if let error = error {
                        print("Error: \(error)")
                    } else if let data = data {
                        let json = try? JSONSerialization.jsonObject(with: data, options: [.fragmentsAllowed])
                        let _ = json as? NSDictionary
                        self.getDocumentAsync(viewController: viewController)
                    }
                }
                task.resume()
            }
        } catch {
            print("Error serializing JSON: \(error)")
        }
    }
    
    func handleOnChange(docChangelog: [String : Any], doc: [String : Any]) {
        print(">>>>>>>> docChangelog: ", docChangelog)
        print(">>>>>>>> onChange: ", doc)
    }
    
    func handleOnFocus(blurAndFocusParams: [String : Any]) {
        print(">>>>>>>> handleFocus: ", blurAndFocusParams)
    }
    
    func handleOnBlur(blurAndFocusParams: [String : Any]) {
        print(">>>>>>>> handleBlur: ", blurAndFocusParams)
    }
}

在 Objective-C 视图控制器 m 文件内添加

#import "<Your Project Name>-Swift.h"

然后在 Objective-C 视图控制器 m 文件的 viewDidLoad() 中添加

- (void)viewDidLoad {
    [super viewDidLoad];
    
    JoyDocForm *joyDoc = [JoyDocForm new];
    [joyDoc getDocumentAsyncWithViewController:self];
}

现在可以运行了。

字段事件

文本、文本区域、数字
- onFocus(params: object, e: object) 在字段获得焦点时触发。
- onChange 在字段值被修改时触发。
- onBlur 在字段失去焦点时触发。
日期、下拉列表
- onFocus 在字段按下并显示选择模态时触发。
- onChange 在字段值被修改时触发。
- onBlur 在字段失去焦点且选择模态关闭时触发。
多选
- onFocus 在字段第一次选择或取消选择选项时触发。
- onChange 在字段中选择或取消选择选项时触发。
图表
- onFocus 在“查看”按钮按下且显示模态时触发。
- onChange 在字段值被修改时触发。
- onBlur 在模态关闭时触发。
图片
- onFocus 在“查看”按钮按下且显示模态时触发。
  - 空图片字段获得焦点将也会触发 onUploadAsync 请求。
  - 已填充的图片字段获得焦点将触发打开图片模态。
- 当字段图片上传或移除时，会触发 onChange 事件。
- onBlur 在模态关闭时触发。
签名
- 按下打开模态按钮并显示模态时，会触发 onFocus 事件。
- onChange 在字段值被修改时触发。
- 关闭模态时，会触发 onBlur 事件。
表格
- onFocus 在“查看”按钮按下且显示模态时触发。
- onBlur 在模态关闭时触发。
- 表格单元格
  - 文本单元格
    - 当单元格被聚焦时，会触发 onFocus 事件。
    - 当单元格值被修改时，会触发 onChange 事件。
    - 当单元格失去聚焦时，会触发 onBlur 事件。
  - 下拉单元格
    - 当单元格被按下并显示选择模态时，会触发 onFocus 事件。
    - onChange 在字段值被修改时触发。
    - 当单元格失去聚焦且关闭选择模态时，会触发 onBlur 事件。
  - 图片单元格
    - 当单元格被按下并显示模态时，会触发 onFocus 事件。
      - 被聚焦的空图片单元格也会触发 onUploadAsync 请求。
      - 被聚焦的图片单元格会触发图片模态打开。
    - 当单元格图片上传或移除时，会触发 onChange 事件。
    - onBlur 在模态关闭时触发。

重要提示： JoyDoc SDK 的 onFocus、onChange 和 onBlur 事件并不总是按相同的顺序调用。两个不同的字段可以同时触发事件。例如，如果您先聚焦字段 A，然后再聚焦字段 B，字段 B 的 onFocus 事件可能会在字段 A 的 onBlur 事件之前触发。始终检查事件参数对象 ids 来匹配相关字段事件。

packageSwift 1.0.0

packageSwift 1.0.0

packageSwift 1.0.0

joyfill/components-ios

项目要求

💻 安装

Swift 包管理器

手动

对于 Swift 项目

对于 Objective-C 项目

字段事件