Protocole NowWebThemeable - iOS

Le protocole NowWebThemeable fournit des propriétés qui vous permettent de remplacer les couleurs utilisées dans les pages Web hébergées sur votre ServiceNow instance dans une vue Web native.

Ce protocole contient un objet de couleur NowWebColoring qui étend ColorAdaptable. ColorAdaptable est utilisé pour déterminer automatiquement s’il faut afficher des couleurs claires ou foncées en fonction des paramètres d’affichage de l’appareil.

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

Le protocole NowWebColoring contient NowUIColoring. Cette propriété est utilisée pour référencer les variables de couleur par défaut que NowWebThemeable peut utiliser.

Pour plus d’informations sur la façon de définir le thème de l’interface utilisateur, consultez Utiliser NowUIColoring pour le thème NowWebTheme et NowChatTheme le Guide du développeur du SDK mobile - iOS.

Définir les couleurs Web à l’aide des couleurs par défaut

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

Définir des couleurs Web à l’aide de couleurs personnalisées

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

Définir la structure WebTheme avec le protocole NowWebThemeable

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

Instancier un objet WebTheme en transmettant WebColor comme entrée

let webTheme = CarrascoWebTheme(webColors: WebColors())

Transmettre un objet 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
}