NowWebThemeable-Protokoll – iOS

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

Dieses Protokoll enthält ein NowWebColoring-Farbobjekt, das ColorAdaptableerweitert. ColorAdaptable wird verwendet, um basierend auf der Anzeigeeinstellung des Geräts automatisch zu bestimmen, ob helle oder dunkle Farben 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 NowWebThemeable verwenden kann.

Weitere Informationen zum Thema Design der Benutzeroberfläche finden Sie unter Verwenden Sie NowUIColoring, um NowWebTheme und NowChatTheme zu gestalten im Mobile SDK-Entwicklerleitfaden - iOS.

Definieren Sie WebColors mit Standardfarben

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

Definieren Sie WebColors mit benutzerdefinierten 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)
    }
}

Instanziieren Sie ein WebTheme-Objekt, indem Sie WebColor als Eingabe übergeben

let webTheme = CarrascoWebTheme(webColors: WebColors())

Übergeben Sie ein WebTheme-Objekt an 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
}