NowWebThemeable-Protokoll – iOS

Das Protokoll „NowWebThemeable“ bietet Eigenschaften, mit denen Sie die Farben, die in Webseiten verwendet werden, die auf Ihrer Instanz ServiceNow gehostet werden, in einer nativen Webansicht überschreiben können.

Dieses Protokoll enthält ein NowWebColoring-Farbobjekt, das die FarbeAdaptableerweitert. „ColorAdaptable“ wird verwendet, um automatisch zu bestimmen, ob helle oder dunkle Farben basierend auf der Anzeigeeinstellung des Geräts angezeigt werden sollen.

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

Das NowWebColoring -Protokoll enthält NowUIColoring. Diese Eigenschaft wird verwendet, um auf Standardfarbvariablen zu verweisen, die von NowWebThemeable verwendet werden können.

Weitere Informationen zum Designen der Anwenderoberfläche finden Sie unter Verwenden Sie NowUIColoring, um NowWebTheme und NowChatTheme zu gestalten im Mobile SDK Developer Guide - iOS.

Definieren Sie WebColors mit Standardfarben

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

Definieren Sie WebColors mit anwenderdefinierten Farben

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

Definieren Sie die WebTheme-Struktur mit dem NowWebThemeable-Protokoll

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

Instanziiert ein WebTheme-Objekt, indem WebColor als Eingabe übergeben wird

let webTheme = CarrascoWebTheme(webColors: WebColors())

Übergeben Sie ein WebTheme-Objekt an NowWebService.checkWebViewController

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
}