Styles Web dans les applications natives

Les styles destinés aux applications Web peuvent être facilement partagés avec des applications mobiles/de bureau natives. Les développeurs ont également la possibilité de modifier le style à la volée.

MAUI interface utilisateur juillet est une initiative communautaire d’un mois dirigée par Matt Goldman, où chacun peut partager son enthousiasme et sa passion pour .NET MAUI. Qu’est-ce qu’il n’y a pas à aimer dans le nouveau contenu des développeurs chaque jour du mois de juillet ? Cet article fait fièrement partie de MAUI UI July pour célébrer l’enthousiasme des développeurs autour de .NET MAUI.

Les applications mobiles/de bureau multiplateformes modernes s’efforcent souvent d’offrir une expérience utilisateur agréable, et une interface utilisateur magnifiquement conçue est un moyen pour les développeurs d’atteindre cet objectif. Mais le Web est également omniprésent. Peut-être avez-vous créé des applications Web modernes avec Blazor, peut-être les stylisez-les avec des feuilles de style en cascade (CSS) à partir d’un système de conception personnalisé ou en gardant à l’esprit l’accessibilité et la réactivité.

Les styles utilisés pour les applications Web peuvent-ils être importés et partagés avec des applications mobiles/de bureau natives créées avec .NET MAUI ? La réponse est oui : les frameworks et outils de développement modernes facilitent le partage de styles entre les applications Web et natives. Explorons.

Style XAML avec CSS

.NET FIXE est l’évolution de la pile de développement multiplateforme .NET moderne, permettant aux développeurs d’atteindre des facteurs de forme mobiles et de bureau à partir d’une seule base de code partagée. Alors que .NET MAUI est carrément destiné aux développeurs pour créer des applications mobiles/de bureau natives, armées de WebViews intelligentes modernes, .NET MAUI est plus que capable d’accueillir du contenu Web dans son pays natal. En fait, les développeurs Blazor/JavaScript devraient se sentir habilités à apporter des composants d’interface utilisateur Web, du routage, du style et bien plus encore aux applications .NET MAUI multiplateformes natives, tout en obtenant un accès complet à l’API de la plate-forme native.

Les développeurs natifs .NET/C# écriront probablement l’arborescence visuelle des applications .NET MAUI avec XAML, le langage de balisage flexible avec de puissantes fonctionnalités intégrées. Alors que pour un public de niche, styliser les arborescences visuelles XAML dans les applications .NET MAUI avec CSS a été une tâche ardue. option depuis un certain temps maintenant – cela permet le partage de styles entre les applications Web/natives. Bien qu’il y ait des limites, les bases fonctionnent et il existe même des paradigmes de style CSS spécifiques à .NET MAUI.

Démarrons une application Vanilla .NET MAUI : les modèles de projet par défaut sont assez performants. Bien que des personnalisations spécifiques à une plate-forme soient possibles avec une solution multi-cible, le véritable avantage est un véritable projet partagé unique : les polices, images, écrans de démarrage et autres ressources peuvent être partagés sur iOS, Android, Windows, macOS et Tizen.

L’un des avantages de .NET MAUI réside dans les styles partagés dans la plupart des composants d’interface utilisateur utilisés : les modèles suppriment des styles XAML étendus et des couleurs par défaut. Ces styles fonctionnent de manière transparente sur toutes les plates-formes, mais peuvent également être personnalisés facilement à partir d’un seul endroit.

Maintenant, insérons un fichier CSS dans notre projet .NET MAUI. En réalité, il pourrait s’agir d’un style partagé déjà utilisé dans une application Web complémentaire.

Une fois que l’action de construction du fichier CSS est définie sur MauiCssle fichier de style peut être facilement référencé dans des vues XAML individuelles comme ci-dessous ou globalement au niveau de l’application.

<ContentPage.Resources>
    <StyleSheet Source="/Resources/Styles/CSSStyles.css" />
</ContentPage.Resources>

Voyons maintenant comment styliser le balisage XAML dans le balisage par défaut MainPage.xaml. Tout est bien empilé dans un VerticalStackLayout et nous pouvons en ajouter quelques-uns StyleClass attributs aux éléments individuels de l’interface utilisateur que nous souhaitons styliser avec CSS.

<ScrollView>
    <VerticalStackLayout
        Padding="30,0"
        Spacing="25">
        <Image
            Source="dotnet_bot.png"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />

        <Label
            Text="Hello, World!"
            Style="{StaticResource Headline}"
            SemanticProperties.HeadingLevel="Level1" />

        <Label
            Text="Welcome to &#10;.NET Multi-platform App UI"
            StyleClass="MySpecialLabel"
            Style="{StaticResource SubHeadline}"
            SemanticProperties.HeadingLevel="Level2"
            SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

        <Button
            x:Name="CounterBtn"
            Text="Click me" 
            SemanticProperties.Hint="Counts the number of times you click"
            Clicked="OnCounterClicked"
            HorizontalOptions="Fill" />
    </VerticalStackLayout>
</ScrollView>

Une chose à garder à l’esprit : il peut y avoir des directives de style contradictoires entre les styles XAML et CSS, tous deux essayant de styliser un certain élément de l’interface utilisateur. Pour que CSS gagne, vous devrez peut-être commenter des styles XAML spécifiques.

Maintenant, écrivons du CSS pour styliser une interface utilisateur XAML spécifique dans notre page .NET MAUI par défaut.

verticalstacklayout { 
    background-color: lightpink; 
}

verticalstacklayout label { 
    background-color: lightblue; 
}

.MySpecialLabel {
    background-color: tan;
}

#CounterBtn {
    background-color: yellow;
}

Et nous pouvons lancer notre application .NET MAUI pour qu’elle s’exécute sur des plates-formes mobiles/de bureau pour voir le style CSS prendre effet, comme ci-dessous.

Comme il est évident, la plupart des techniques CSS fonctionnent également lors du style XAML, comme les relations parent-enfant, les sélecteurs d’arborescence visuels réguliers, les identifiants de nom ou de classe et bien plus encore. Malheureusement, aucune variable CSS. Il est encourageant de voir une large prise en charge des propriétés et même un style spécifique à .NET MAUI. Bien que le style XAML avec CSS existe depuis un certain temps, il s’adresse définitivement à un public de niche. Il est toujours réconfortant de voir les styles Web pouvoir être réutilisés tels quels pour les applications .NET MAUI natives.

Styliser les applications hybrides Blazor

Blazer mange le monde. Blazor est le framework Web gratuit, open source et très apprécié pour créer des applications Web modernes. Les développeurs peuvent exploiter la puissance du .NET moderne, du C# front et back et des outils modernes pour créer de superbes applications Web interactives.

Le modèle de composant Blazor, le moteur de rendu et les mécanismes de style offrent de la flexibilité. Toutes les qualités de Blazor sont également les bienvenues sur les applications mobiles/de bureau natives via .NET MAUI. Si vous utilisez Interface utilisateur Telerik pour Blazor composants pour applications Web, tous les L’interface utilisateur fonctionne également sur les applications hybrides mobiles/de bureau.

Créons une nouvelle application Blazor Hybrid avec le modèle par défaut. Il s’agit essentiellement de supprimer les composants/mises en page de l’interface utilisateur Blazor et le démarrage de l’application Web directement dans un projet d’application native .NET MAUI.

Les applications Blazor Hybrid fonctionnent en exploitant un composant WebView moderne dans une application .NET MAUI, une abstraction intelligente qui emprunte une instance de navigateur au système d’exploitation hôte pour restituer l’interface utilisateur Web. WebView restitue uniquement l’interface utilisateur et les styles Web : Blazor et .NET MAUI partagent le runtime .NET commun, s’exécutant sur le métal de l’appareil mobile/de bureau. Donné un BlazorWebViewBlazor peut prendre en charge le rendu à l’intérieur, y compris les composants de l’interface utilisateur Blazor, les styles, le routage et la navigation entre les composants.

<BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

Réutiliser CSS

Devinez ce que les projets d’application Blazor Hybrid .NET MAUI incluent d’autre : oui, des fichiers de style CSS dans le wwwroot dossier. Ceci est référencé à partir de index.html et devrait être immédiatement familier aux développeurs Web.

La modification de CSS pour les applications Blazor Hybrid devrait être une expérience familière, avec l’aide intelligente de Visual Studio IDE ou de l’éditeur VS Code. Changeons la couleur du bouton Blazor dans le modèle par défaut en violet .NET bien-aimé, simplement parce qu’il fait désormais partie d’une application .NET multiplateforme native.

Nous pouvons exécuter notre application Blazor Hybrid en tant qu’application mobile/de bureau, sur un appareil ou via des simulateurs : les styles CSS se contentent de styliser les composants de l’interface utilisateur Blazor comme prévu.

Partager CSS entre Web et natif

Bien qu’il soit agréable que les styles CSS des applications Blazor/Web puissent être déposés directement dans les applications .NET MAUI Blazor Hybrid, cela n’est peut-être pas une solution réaliste pour beaucoup. Le même style CSS est désormais conservé à deux endroits : un pour les applications Web et un pour les applications mobiles/de bureau. Une solution beaucoup plus propre consiste à réellement partager un style CSS commun entre les applications Web et natives, un style qui pilote l’UI/UX dans les navigateurs et les applications mobiles/de bureau natives.

L’astuce pour réaliser un véritable partage de style est l’abstraction : les composants/styles courants de l’interface utilisateur Web ne peuvent appartenir ni au projet Blazor pour les applications Web, ni au projet Blazor Hybrid pour les applications natives. Au lieu de cela, un simple Razor Class Library (RCL) peut héberger l’interface utilisateur/les styles Web et ce projet est référencé à partir d’applications Web et natives. L’énorme avantage est qu’un ensemble de composants d’interface utilisateur Web et leurs styles CSS correspondants peuvent piloter l’interface utilisateur à travers les expériences Web et natives : les personnalisations de plate-forme sont faciles avec des implémentations d’interface variées.

Alors que les développeurs .NET MAUI/Blazor peuvent réaliser de tels interface utilisateur partagée manuellement aujourd’hui, cela deviendra beaucoup plus facile avec le runtime .NET 9. Les bits .NET MAUI pour .NET 9 Preview incluent désormais une marque nouveau modèle de projet Blazor Hybrid + Web– cela fonctionne exactement comme souhaité.

Le modèle fait tourner quelques projets : une application native .NET MAUI Blazor Hybrid, une application Web Blazor et un projet de bibliothèque de classes Razor qui héberge une interface utilisateur/des styles partagés. Le partage de code et de style entre les applications Web et natives est excellent pour la productivité des développeurs : il est bon de voir les frameworks/outils évoluer pour offrir une telle flexibilité.

Bricoler avec CSS

Être capable de styliser l’interface utilisateur dans les applications natives Blazor Hybrid avec CSS est plutôt cool. Mais il reste encore beaucoup à faire pour inclure les développeurs Web afin qu’ils soient à l’aise avec le style CSS des applications natives. Quelle que soit la pile de développement Web, toute personne travaillant avec CSS a besoin d’un outil indispensable : les outils de développement de navigateur. Les navigateurs modernes et persistants comme Chrome/Edge/Firefox, etc. incluent tous des outils de développement robustes. L’avantage est de pouvoir extraire le code source Web, inspecter les éléments de l’interface utilisateur, déboguer JavaScript et, surtout, bricoler CSS à la volée.

Il peut parfois être difficile d’obtenir un style CSS parfait : les développeurs/concepteurs aiment la flexibilité de modifier le style à la volée pendant que l’application est en cours d’exécution et de voir les modifications mises en œuvre immédiatement. Étant donné que les applications .NET MAUI Blazor Hybrid comportent essentiellement des composants d’interface utilisateur Web, ne serait-il pas cool de pouvoir bricoler CSS à la volée avec les outils de développement de navigateur pendant que l’application native est en cours d’exécution ? La réponse est oui, sinon nous n’en parlerions pas.

Regardons un échantillon MauiProgram.cs fichier qui démarre une application .NET MAUI Blazor Hybrid.

using Microsoft.Extensions.Logging;

namespace MauiBlazorHello;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();

#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

Avec l’injection de dépendances intégrée, nous intégrons le composant de service évident BlazorWebView– il s’agit de l’abstraction WebView multiplateforme qui fournit le canevas pour le rendu de l’interface utilisateur/des styles Web.

Avec une directive du compilateur, nous pouvons ajouter un service supplémentaire uniquement pour le mode Debug : le BlazorWebViewDeveloperTools. Comme son nom l’indique, cette doublure rend le contenu BlazorWebView disponible aux outils de développement de navigateurs, permettant aux développeurs de bricoler HTML/CSS/JavaScript exactement comme sur le Web via un navigateur Web. La différence réside dans le fait que l’interface utilisateur/les styles Web sont désormais rendus dans une application mobile/de bureau multiplateforme native. Chaque aspect est inspectable via les outils de développement du navigateur.

L’ajout de dépendances de BlazorWebViewDeveloperTools devrait suffire à inspecter le contenu Web des applications .NET MAUI Blazor Hybrid pour Android et Windows. Les développeurs recevront des outils de développement Chrome pour la cible Android et des outils de développement Edge pour la cible de bureau Windows. Le jardin clos d’Apple nécessite un peu plus de configuration pour les cibles iOS et macOS. Accordé MainPage.xaml est la page hébergeant BlazorWebView, voici un petit code pour le fichier code-behind.

namespace MauiBlazorHello;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, EventArgs e)
    {
    #if MACCATALYST
            WebKit.WKWebView view = (WebKit.WKWebView)blazorWebView.Handler.PlatformView;
            view.SetValueForKey(Foundation.NSObject.FromObject(true) , new Foundation.NSString("inspectable"));
    #endif
    }
}

Essentiellement pour iOS/MacCatalyst, nous pouvons accéder au WebView correspondant (WKWebView/WebKit) et ajouter une autorisation à la volée pour rendre le contenu WebView inspectable par les outils de développement du navigateur. Avec la configuration ajoutée, Safari peut voir que le contenu Web est rendu dans une WebView exécutée dans une application macOS native. L’URL n’a pas d’importance puisque l’application est essentiellement locale.

Les développeurs peuvent lancer les outils de développement Safari et être en mesure d’inspecter tous les aspects de l’interface utilisateur Web rendue dans la WebView d’une application .NET MAUI Blazor Hybrid : éléments d’interface utilisateur HTML, styles CSS, arborescence visuelle sélectionnable, JavaScript, stockage local et bien plus encore. Les développeurs/concepteurs peuvent bricoler les styles CSS à leur guise pour styliser l’interface utilisateur Web, simplement rendus avec une WebView dans une application .NET MAUI multiplateforme native.

Apportez des styles Web aux applications natives

.NET MAUI est l’évolution de la pile de développement multiplateforme .NET moderne, permettant aux développeurs d’accéder aux facteurs de forme mobiles et de bureau à partir d’une seule base de code partagée. Et Blazor est le framework Web .NET gratuit, open source et très apprécié pour créer des applications Web modernes. Les applications Blazor Hybrid marient à merveille les deux technologies, permettant de réutiliser les composants et les styles de l’interface utilisateur Web Blazor dans les applications mobiles/de bureau natives.

Le partage de styles CSS entre applications Web et applications natives serait un avantage évident pour les développeurs. Pour un public de niche, les styles CSS Web peuvent être utilisés pour styliser l’interface utilisateur de l’arborescence visuelle XAML native dans les applications mobiles/de bureau .NET MAUI. Les applications Blazor Hybrid permettent évidemment le style CSS des composants de l’interface utilisateur Web, mais les nouveaux modèles de projet dans .NET 9 permettent véritablement de partager les styles CSS entre les applications Web et natives. Une bibliothèque de classes d’interface utilisateur partagée commune peut héberger des composants d’interface utilisateur Web et leurs styles CSS correspondants, permettant ainsi des expériences personnalisables sur toutes les plateformes.

Les frameworks et outils modernes permettent le partage de styles Web dans des applications natives : productivité des développeurs et partage de code pour la victoire.