Fermer

juillet 16, 2022

Restauration sur ordinateur de bureau et mobile avec .NET MAUI

Restauration sur ordinateur de bureau et mobile avec .NET MAUI


.NET MAUI permet aux développeurs de cibler à la fois les ordinateurs de bureau et les appareils mobiles à partir d’une seule base de code, mais avec des expériences utilisateur variées.

.NET MAUI est le framework de développement multiplateforme .NET moderne, permettant aux développeurs d’accéder à une plate-forme étendue à partir d’une seule base de code. Ce qui a commencé comme une évolution de Xamarin.Forms avec un état d’esprit axé sur le mobile inclut désormais la prise en charge des ordinateurs de bureau en tant que citoyen de première classe. .NET MAUI est tourné vers l’avenir avec un support d’outils solide pour une pile de développement multiplateforme moderne et permet la modernisation des applications avec beaucoup de partage de code sur mobile/bureau/web.

Cependant, les développeurs peuvent être un groupe cynique, et la plupart des solutions à écriture unique et exécutée partout soulèvent des sourcils. En effet, alors que .NET MAUI atteint sans effort les mobiles et les ordinateurs de bureau, la réalité des différents facteurs de forme exige une réflexion sur la conception des applications pour une expérience utilisateur optimale. L’espace d’écran varie considérablement entre les facteurs de forme mobiles et de bureau, et les bonnes applications .NET MAUI doivent respecter les différences. Heureusement, il n’est pas difficile de répondre à la fois aux mobiles et aux ordinateurs de bureau à partir d’une seule base de code, mais avec des expériences légèrement différentes. Examinons quelques solutions.

Cet article fait partie du merveilleux .NET MAUI UI Juillet série. Bravo à Matt Goldmann pour avoir lancé la série et félicitations à la communauté des développeurs pour avoir intensifié le contenu. .NET MAUI UI July est une source d’inspiration pour tous ceux qui créent une interface utilisateur multiplateforme moderne avec .NET MAUI.

Mode double application

La .NET MAUI La promesse est séduisante pour les développeurs .NET qui cherchent à passer à plusieurs plates-formes : un véritable projet unique permet aux applications de fonctionner sur iOS/Android/Windows/MacOS. Cependant, on ne peut nier les différences d’espace d’écran, de facteur de forme et d’interactions utilisateur entre les ordinateurs de bureau et les appareils mobiles. Pour une expérience utilisateur (UX) simplifiée, les applications .NET MAUI feront mieux pour reconnaître les différences de plate-forme/appareil et s’occuper séparément du mobile/desktop. Cependant, les développeurs ne voudraient pas trop s’éloigner de la promesse de base de code unique de .NET MAUI. La clé serait de répondre aux besoins du mobile/desktop d’une manière réactive nuancée, tout en partageant autant de code que possible.

.NET MAUI commence également à profiter d’un écosystème riche—Interface utilisateur Telerik pour .NET MAUI est une suite complète de composants d’interface utilisateur performants et raffinés pour les ordinateurs de bureau et les appareils mobiles. L’un des exemples d’applications pour Telerik UI pour .NET MAUI est le CryptoTracker—une application de démonstration qui suit les changements dans les prix des crypto-monnaies et présente une interface utilisateur Telerik. Idéalement source ouverte pour l’inspiration des développeurs, l’application CryptoTracker fait un bon travail de présentation du mode double souhaité pour les applications .NET MAUI, répondant à une UX légèrement différente pour mobile et ordinateur de bureau.

Sur les facteurs de forme mobiles, comme iOS, l’application CryptoTracker commence essentiellement par une liste de crypto-monnaies et leurs tendances de prix.

CryptoTracker sur iPad Air affiche les deux principales tendances, puis une liste alphabétique des crypto-monnaies avec valeur et +/-

Les utilisateurs peuvent appuyer sur n’importe quelle crypto-monnaie répertoriée et accéder à une vue détaillée, une montrant les données de tarification historiques avec des visualisations de données précises.

CryptoTracker sur iPad Air montrant un aperçu détaillé de la crypto-monnaie AAVE avec sa valeur et un graphique linéaire de sa fluctuation

Lancez la même application CryptoTracker sur le bureau, comme sur MacOS, et l’utilisateur obtient une expérience de démarrage différente. Les écrans de bureau ont plus d’espace et les applications .NET MAUI ont la possibilité d’en tirer parti, si vous le souhaitez. Pour l’application CryptoTracker sur ordinateur, la liste des crypto-monnaies et la vue historique détaillée montrant les tendances pour la crypto-monnaie sélectionnée s’affichent ensemble dans une vue consolidée. Les utilisateurs peuvent cliquer sur une crypto-monnaie et voir les tendances de prix à droite, juste une meilleure UX pour le bureau.

CryptoTracker sur le bureau affiche à la fois la liste des crypto-monnaies et la vue détaillée de la crypto-monnaie sélectionnée

Restauration aux plates-formes

Restauration d’un UX légèrement différent sur le bureau par rapport au mobile, tout en étant sur la base de code partagée de .NET MAUI, n’est en fait pas si difficile. Grâce aux directives de compilateur conditionnel, les développeurs .NET MAUI ont la possibilité de savoir à tout moment sur quelle plate-forme leur code s’exécute et de prendre les mesures appropriées pour se différencier de l’UX. L’astuce, cependant, peut être de ne pas aller trop loin dans les personnalisations de la plate-forme et de réutiliser autant de code que possible sur les ordinateurs de bureau/mobiles.

Jetons un coup d’œil à la façon dont l’application CryptoTracker propose une UX différente pour le mobile par rapport au bureau. Si nous extrayons le code open source de l’application CryptoTracker, nous voyons une implémentation familière du modèle de conception Model View ViewModel (MVVM). UN pages Le dossier contient la poignée de pages utilisées dans l’application – la plupart ont à voir avec les informations/sélection de pièces cryptographiques, mais il existe une page dédiée au mode bureau.

Liste des pages CryptoTracker

Et puis il y a un Vues dossier—contenant les vues réutilisables, qui constituent le cœur de l’interface utilisateur. Les pages hébergent les vues, aussi simple que cela.

Liste des vues CryptoTracker

Alors, comment l’interface utilisateur est-elle modifiée pour le bureau par rapport au mobile ? Vérifications simples sur la plate-forme sur laquelle l’application s’exécute—pour MacOS/Windows, le Page de bureau est chargé, tandis que les facteurs de forme mobiles exécutant iOS / Android obtiennent la vue avec la liste des crypto-monnaies dans un NavigationPage.

namespace CryptoTracker
{
    public partial class App : Application
    {
        public App()
        {
            ...

#if MACCATALYST
            MainPage = new DesktopPage();
#elif WINDOWS
            MainPage = new NavigationPage(new DesktopPage())
            {
                BarBackgroundColor = Colors.White,
                BarTextColor = Color.FromArgb("#121212"),
            };
#else
            MainPage = new NavigationPage(new CoinSelectionPage())
            {
#if IOS
            BarBackgroundColor = Colors.White,
            BarTextColor = Color.FromArgb("#121212"),
#else
            BarBackgroundColor = Color.FromArgb("#121212"),
            BarTextColor = Colors.White,
#endif
            };
#endif
        }
    }
}

Et la DesktopPage dédiée rassemble quelques vues pour mieux utiliser l’espace supplémentaire sur les facteurs de forme de bureau. Notez la réutilisabilité ici – aucune nouvelle interface utilisateur n’est créée, mais simplement en rassemblant deux des vues de l’UX mobile.

 <Grid RowDefinitions="Auto, *" ColumnDefinitions="500, *, Auto">
        ...
        <Views:CoinSelectionView Grid.Row="1" CoinSelected="OnCoinSelected" Padding="20, 20, 20, 10"/>
        <Views:CoinInfoChartView x:Name="selectedCoinInfo" Padding="0, 20, 25, 10" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1">
            <Views:CoinInfoChartView.BindingContext>
                <local:CoinInfoViewModel/>
            </Views:CoinInfoChartView.BindingContext>
        </Views:CoinInfoChartView>
</Grid>

Modèles de navigation

Alors que les applications .NET MAUI à partir d’une seule base de code fonctionnent de manière transparente sur mobile/bureau, il existe certainement des attentes UX variables en fonction des facteurs de forme et des périphériques d’entrée utilisateur. Certains paradigmes de navigation fonctionnent mieux sur le bureau avec une souris/un clavier, tandis que d’autres sont mieux adaptés aux mobiles avec des interactions tactiles. Cela a également un impact sur la façon dont le contenu de l’application est organisé.

Un paradigme d’interface utilisateur .NET MAUI qui fonctionne particulièrement bien pour les applications de bureau est le Barre de menu—les menus ont toujours été populaires pour la navigation sur le bureau.

Navigation MauiDesktop indiquant l'emplacement

Il est assez facile de restituer une barre de menus pour les applications .NET MAUI : elles prennent en charge les commandes et peuvent être liées aux données pour les options dynamiques.

<ContentPage.MenuBarItems>

    <MenuBarItem Text="Locations">
        <MenuFlyoutSubItem Text="Change Location">
            <MenuFlyoutItem Text="New York, USA"
                            Command="{Binding ChangeLocationCommand}"
                            CommandParameter="NewYork" />
            <MenuFlyoutItem Text="Berlin, Germany"
                            Command="{Binding ChangeLocationCommand}"
                            CommandParameter="Berlin" />
            <MenuFlyoutItem Text="Madrid, Spain"
                            Command="{Binding ChangeLocationCommand}"
                            CommandParameter="Madrid"/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Add Location"
                        Command="{Binding AddLocationCommand}" />
    </MenuBarItem>

</ContentPage.MenuBarItems>

.NET MAUI a également adopté le Coquille comme moyen par défaut d’organiser le contenu et de fournir une navigation – bien qu’ils ne soient pas obligés d’utiliser le Shell, la plupart des développeurs peuvent trouver que le Shell fournit un bon point de départ. Le Shell fournit également un paradigme d’interface utilisateur commun – le Envoler. Les applications Web/mobiles modernes ont rendu les menus « hamburger » populaires, et les utilisateurs de bureau peuvent également être ouverts à une telle organisation/navigation.

La navigation dans les menus de MauiDesktop affiche un Flyout / hamburger

Les menus Flyout peuvent être modélisés/personnalisés selon le contenu du cœur et également basés sur les données.

Navigation MauiDesktop avec menu Flyout ouvert, montrant l'anglais, l'allemand, l'espagnol

Voici à quel point il est simple de rendre les Flyouts de base à partir de Shell – ils peuvent être modélisés et peuvent contenir des éléments d’en-tête/menu/pied de page :

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiDesktop.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiDesktop"
    Shell.FlyoutBehavior="Flyout">

    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

    <FlyoutItem Title="English" Icon="language.png">
        <ShellContent Title="Home"
                            ContentTemplate="{DataTemplate local:MainPage}"
                            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem Title="German" Icon="language.png"> 
        <ShellContent Title="Heim"
                            ContentTemplate="{DataTemplate local: GermanPage}"
                            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem Title="Spanish" Icon="language.png">
        <ShellContent Title="Hogar"
                            ContentTemplate="{DataTemplate local: SpanishPage}"
                            Route="MainPage" />
    </FlyoutItem>

</Shell>

Bien que Flyouts soit désormais populaire sur le Web et les applications de bureau, il existe un paradigme d’interface utilisateur particulièrement bien adapté aux petits facteurs de forme mobiles – voici, le Bien sûr. Les onglets présentent une manière astucieuse d’organiser le contenu de l’application dans un conteneur et de fournir une expérience utilisateur universellement bien comprise.

La barre d'onglets sur un iPad Air affiche le menu en bas

Heureusement, si vous utilisez le shell .NET MAUI, le rendu des onglets est également intégré au shell. La logique conditionnelle pourrait être de rendre les Flyouts pour le bureau et les onglets pour le mobile.

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiDesktop.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiDesktop"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <Tab Title="English" Icon="language.png">
            <ShellContent Title="Home"
                                ContentTemplate="{DataTemplate local:MainPage}"
                                Route="MainPage" />
        </Tab>
        <Tab Title="German" Icon="language.png"> 
            <ShellContent Title="Heim"
                                ContentTemplate="{DataTemplate local:GermanPage}"
                                Route="MainPage" />

        </Tab>
        <Tab Title="Spanish" Icon="language.png">
            <ShellContent Title="Hogar"
                                ContentTemplate="{DataTemplate local:SpanishPage}"
                                Route="MainPage" />

        </Tab>
    </TabBar>

</Shell>

Conclusion

.NET MAUI fait une grande promesse : des applications multiplateformes natives pour mobiles et ordinateurs de bureau. En effet, la plupart des développeurs .NET apprécient la beauté d’avoir une véritable base de code partagée unique avec .NET MAUI et de pouvoir bénéficier d’un large support de plate-forme. Entre iOS/Android pour mobile et Windows/MacOS pour ordinateur de bureau, .NET MAUI permet aux développeurs d’atteindre une grande majorité d’utilisateurs.

Cependant, le mobile et le bureau sont des plates-formes très différentes et les appareils correspondants sont différents. Les applications .NET MAUI feront bien d’honorer les différences et de fournir une UX appropriée pour mobile/bureau. Heureusement, il est facile pour les développeurs de reconnaître les plates-formes et de changer l’interface utilisateur par programmation, tout en partageant la plupart du code sur mobile/bureau. Bravo pour beaucoup plus de code commun entre mobile/bureau tout en ayant une belle UX adaptée à chaque plate-forme.






Source link