NowWebThemeable プロトコル - iOS

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

このプロトコルには、 ColorAdaptable を拡張する NowWebColoring カラーオブジェクトが含まれています。ColorAdaptable は、デバイスの表示設定に基づいて明るい色と暗い色のどちらを表示するかを自動的に決定するために使用されます。

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

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

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

デフォルトの色を使用してウェブカラーを定義する

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

カスタム色を使用したウェブカラーの定義

/// 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
}