NowWebThemeable プロトコル: iOS

NowWebThemeable プロトコルは、ネイティブ Web ビューで ServiceNow インスタンスでホストされている Web ページ内で使用される色を上書きできるプロパティを提供します。

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

NowWebColoring プロトコルにはNowUIColoringが含まれています。このプロパティは、 NowWebThemeable が使用できるデフォルトの色変数を参照するために使用されます。

UI のテーマ設定方法についての詳細は、『Mobile SDK Developer Guide (Mobile SDK 開発者ガイド - iOS)』の「 NowUIColoring を使用してテーマ NowWebTheme と NowChatTheme を使用 」を参照してください。

デフォルトの色を使用して WebColor を定義します

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

カスタム色を使用した WebColor の定義

/// Use custom colors with light theme
struct WebColors: NowUIColoring {
    private var defaultTheme: NowWebDefaultTheme { NowWebDefaultTheme(nowUITheme: NowUIDefaultTheme())
    }
    
    var brand: UIColor { lightBrand }
    var primary: UIColor { lightPrimary }
    var textPrimary: UIColor { lightTextPrimary }
    var screenHeaderText: UIColor { lightScreenHeaderText }
    var screenHeaderBackground: UIColor { lightScreenHeaderBackground }
    var textActionable: UIColor { lightTextActionable }
    var alertCritical0: UIColor { lightAlertCritical0 }
    var alertCritical3: UIColor { lightAlertCritical3 }
    var alertPositive0: UIColor { lightAlertPositive0 }
    var alertPositive3: UIColor { lightAlertPositive3 }
    var alertLow0: UIColor { lightAlertLow0 }
    var alertWarning0: UIColor { lightAlertWarning0 }
    var backgroundPrimary: UIColor { lightBackgroundPrimary }
    
    // 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 }
}

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
}