NowWebThemeable 프로토콜 - iOS

NowWebThemeable 프로토콜은 네이티브 웹 뷰에서 인스턴스에 ServiceNow 호스팅된 웹 페이지 내에서 사용되는 색상을 재정의할 수 있는 속성을 제공합니다.

이 프로토콜에는 ColorAdaptable을 확장하는 NowWebColoring 색 개체가 포함되어 있습니다. ColorAdaptable 은 디바이스 디스플레이 설정에 따라 밝은 색을 표시할지 또는 어두운 색을 표시할지 여부를 자동으로 결정하는 데 사용됩니다.

public protocol NowWebThemeable {
    var color: NowWebColoring { get }
}

NowWebColoring 프로토콜에는 NowUIColoring. 이 속성은 NowWebThemeable 에서 사용할 수 있는 기본 색 변수를 참조하는 데 사용됩니다.

UI 테마를 지정하는 방법에 대한 자세한 내용은 Mobile SDK 개발자 가이드 - iOS 를 참조하십시오 NowUIColoring을 사용하여 NowWebTheme 및 NowChatTheme 테마 지정 .

기본 색상을 사용하여 WebColors 정의

/// Sample structure for using default colors that come with Mobile SDK.
struct WebColors: NowUIColoring {
}

사용자 지정 색을 사용하여 WebColors 정의

/// Use custom colors with light and dark themes
struct WebColors: NowUIColoring {
    private var defaultTheme: NowWebDefaultTheme { NowWebDefaultTheme(nowUITheme: NowUIDefaultTheme())
    }
    
    var brand: UIColor { adaptiveColor(lightBrand, darkBrand) }
    var primary: UIColor { adaptiveColor(lightPrimary, darkPrimary) }
    var textPrimary: UIColor { adaptiveColor(lightTextPrimary, darkTextPrimary) }
    var screenHeaderText: UIColor { adaptiveColor(lightScreenHeaderText, darkScreenHeaderText) }
    var screenHeaderBackground: UIColor { adaptiveColor(lightScreenHeaderBackground, darkScreenHeaderBackground) }
    var textActionable: UIColor { adaptiveColor(lightTextActionable, darkTextActionable) }
    var alertCritical0: UIColor { adaptiveColor(lightAlertCritical0, darkAlertCritical0) }
    var alertCritical3: UIColor { adaptiveColor(lightAlertCritical3, darkAlertCritical3) }
    var alertPositive0: UIColor { adaptiveColor(lightAlertPositive0, darkAlertPositive0) }
    var alertPositive3: UIColor { adaptiveColor(lightAlertPositive3, darkAlertPositive3) }
    var alertLow0: UIColor { adaptiveColor(lightAlertLow0, darkAlertLow0) }
    var alertWarning0: UIColor { adaptiveColor(lightAlertWarning0, darkAlertWarning0) }
    var backgroundPrimary: UIColor { adaptiveColor(lightBackgroundPrimary, darkBackgroundPrimary) }
    
    // Light Colors
    var lightBrand: UIColor { defaultTheme.color.brand }
    var lightPrimary: UIColor { defaultTheme.color.primary }
    var lightTextPrimary: UIColor { defaultTheme.color.textPrimary }
    var lightScreenHeaderText: UIColor { defaultTheme.color.screenHeaderText }
    var lightScreenHeaderBackground: UIColor { defaultTheme.color.screenHeaderBackground }
    var lightTextActionable: UIColor { defaultTheme.color.textActionble }
    var lightAlertCritical0: UIColor { defaultTheme.color.alertCritical0 }
    var lightAlertCritical3: UIColor { defaultTheme.color.alertCritical3 }
    var lightAlertPositive0: UIColor { defaultTheme.color.alertPositive0 }
    var lightAlertPositive3: UIColor { defaultTheme.color.alertPositive3 }
    var lightAlertLow0: UIColor { defaultTheme.color.alertLow0 }
    var lightAlertWarning0: UIColor { defaultTheme.color.alertWarning0 }
    var lightBackgroundPrimary: UIColor { defaultTheme.color.backgroundPrimary }
    
    // Dark Colors
    var darkBrand: UIColor { defaultTheme.color.brand }
    var darkPrimary = UIColor(hex: "#8486FF")
    var darkTextPrimary = UIColor(hex: "#FFFFFF")
    var darkScreenHeaderText = UIColor(hex: "#FFFFFF")
    var darkScreenHeaderBackground = UIColor(hex: "#CADFC0")
    var darkTextActionable = UIColor(hex: "#07080B")
    var darkAlertCritical0 = UIColor(hex: "#7B1E28")
    var darkAlertCritical3 = UIColor(hex: "#E46876")
    var darkAlertPositive0 = UIColor(hex: "#CADFC0")
    var darkAlertPositive3 = UIColor(hex: "#3B7F00")
    var darkAlertLow0 = UIColor(hex: "#DBDBDE")
    var darkAlertWarning0 = UIColor(hex: "#FBF7BF")
    var darkBackgroundPrimary = UIColor(hex: "#FFFFFF")
}

NowWebThemeable 프로토콜을 사용하여 WebTheme 구조 정의

struct CarrascoWebTheme: NowWebThemeable {
    var color: NowWebColoring
    
    struct Color: NowWebColoring {
        var nowUIColor: NowUIColoring
    
        var alertPositive0: UIColor
        var alertPositive3: UIColor
        var alertLow0: UIColor
        var alertWarning0: UIColor
        var backgroundPrimary: UIColor
        
        init(inputs: WebColors) {
            nowUIColor = ThemeColor(inputs)
            
            alertPositive0 = inputs.alertPositive0
            alertPositive3 = inputs.alertPositive3
            alertLow0 = inputs.alertLow0
            alertWarning0 = inputs.alertWarning0
            backgroundPrimary = inputs.backgroundPrimary
        }
    }
    
    public init(webColors: WebColors) {
        color = Color(inputs: webColors)
    }
}

WebColor를 입력으로 전달하여 WebTheme 개체를 인스턴스화합니다

let webTheme = CarrascoWebTheme(webColors: WebColors())

WebTheme 객체를 NowWebService.makeWebViewController에 전달합니다.

func webViewController(for url: URL, delegate: NowWebViewControllerDelegate) -> NowWebViewController? {
  guard let webService = webService else {
    debugPrint("Web service not initialized")
    return nil
  }
  let result = webService.makeWebViewController(for: url, delegate: delegate, theme: CarrascoWebTheme(webColors: WebColors()) )
    
  switch result {
  case .success(let viewController):
    return viewController
  case .failure(let error):
    debugPrint("Web view creation failed with error: \(error.localizedDescription)")
  }
  return nil
}