Partager via

Étude de cas Windows Runtime 8.x vers UWP : exemple d’application QuizGame

  • Article

Cette rubrique présente une étude de cas sur le portage d’un exemple d’application winRT 8.1 de jeu de jeu d’égal à égal fonctionnel vers une application Windows 10 plateforme Windows universelle (UWP).

Une application 8.1 universelle est une application qui génère deux versions de la même application : un package d’application pour Windows 8.1 et un autre package d’application pour Windows Phone 8.1. La version WinRT 8.1 de QuizGame utilise une disposition de projet d’application Windows universelle, mais elle adopte une approche différente et génère une application fonctionnellement distincte pour les deux plateformes. Le package d’application Windows 8.1 sert d’hôte pour une session de jeu de questionnaire, tandis que le package d’application Windows Phone 8.1 joue le rôle du client sur l’hôte. Les deux moitiés de la session de jeu de questionnaire communiquent via la mise en réseau peer-to-peer.

L’adaptation des deux moitiés au PC et au téléphone, respectivement, est judicieux. Mais, n’est-ce pas encore mieux si vous pouviez exécuter l’hôte et le client sur un seul appareil de votre choix ? Dans cette étude de cas, nous allons porter les deux applications vers Windows 10 où elles seront générées dans un package d’application unique que les utilisateurs peuvent installer sur un large éventail d’appareils.

L’application utilise des modèles qui utilisent des vues et des modèles d’affichage. En raison de cette séparation propre, le processus de portage de cette application est très simple, comme vous le verrez.

Notez que cet exemple suppose que votre réseau est configuré pour envoyer et recevoir des paquets de multidiffusion de groupe UDP personnalisés (la plupart des réseaux domestiques sont, bien que votre réseau professionnel ne soit peut-être pas). L’exemple envoie et reçoit également des paquets TCP.

 

Remarque Lors de l’ouverture de QuizGame10 dans Visual Studio, si vous voyez le message « Mise à jour visual Studio requise », suivez les étapes décrites dans TargetPlatformVersion.

 

Téléchargements

Téléchargez l’application QuizGame Universal 8.1. Il s’agit de l’état initial de l’application avant le portage.

Téléchargez l’application QuizGame10 Windows 10. Il s’agit de l’état de l’application juste après le portage.

Consultez la dernière version de cet exemple sur GitHub.

Solution WinRT 8.1

Voici à quoi ressemble QuizGame, l’application que nous allons porter.

l’application hôte quizgame s’exécutant sur windows

Application hôte QuizGame s’exécutant sur Windows

 

l’application cliente quizgame s’exécutant sur windows phone

Application cliente QuizGame s’exécutant sur Windows Phone

Procédure pas à pas de QuizGame en cours d’utilisation

Il s’agit d’un bref compte hypothétique de l’application en cours d’utilisation, mais il fournit des informations utiles si vous souhaitez essayer l’application vous-même sur votre réseau sans fil.

Un jeu de questionnaire amusant se déroule dans un bar. Il y a une grande télévision dans le bar que tout le monde peut voir. Le quizmaster a un PC dont la sortie est affichée sur la télévision. Ce PC a « l’application hôte » en cours d’exécution. Toute personne qui souhaite participer au questionnaire doit simplement installer « l’application cliente » sur son téléphone ou Surface.

L’application hôte est en mode lobby, et sur la grande télévision, il est publicitaire qu’elle est prête pour les applications clientes à se connecter. Joan lance l’application cliente sur son appareil mobile. Elle tape son nom dans la zone de texte Nom du joueur et appuie sur Join game. L’application hôte reconnaît que Joan a rejoint en affichant son nom, et l’application cliente de Joan indique qu’elle attend que le jeu commence. Ensuite, Maxwell passe par ces mêmes étapes sur son appareil mobile.

Le quizmaster clique sur Démarrer le jeu et l’application hôte affiche une question et les réponses possibles (il affiche également une liste des joueurs joints en poids de police normal, gris coloré). Simultanément, les réponses s’affichent sur les boutons sur les appareils clients joints. Joan appuie sur le bouton avec la réponse « 1975 » sur celle-ci où tous ses boutons deviennent désactivés. Sur l’application hôte, le nom de Joan est peint en vert (et devient gras) en accusé de réception de sa réponse. Maxwell répond aussi. Le quizmaster, notant que tous les noms des joueurs sont verts, clique sur La question suivante.

Les questions continuent d’être posées et répondues dans ce même cycle. Lorsque la dernière question est affichée sur l’application hôte, afficher les résultats est le contenu du bouton, et non la question suivante. Lorsque vous cliquez sur Afficher les résultats , les résultats sont affichés. En cliquant sur Retour à la salle d’attente , retourne au début du cycle de vie du jeu à l’exception que les joueurs joints restent joints. Mais, revenir à la salle d’attente donne aux nouveaux joueurs une chance de rejoindre, et même un moment pratique pour les joueurs joints à partir (bien qu’un joueur joint puisse partir à tout moment en appuyant sur Quitter le jeu).

Mode de test local

Pour tester l’application et ses interactions sur un seul PC au lieu d’être distribués sur des appareils, vous pouvez créer l’application hôte en mode de test local. Ce mode contourne complètement l’utilisation du réseau. Au lieu de cela, l’interface utilisateur de l’application hôte affiche la partie hôte à gauche de la fenêtre et, à droite, deux copies de l’interface utilisateur de l’application cliente empilée verticalement (notez que, dans cette version, l’interface utilisateur du mode test local est fixe pour un affichage PC ; elle ne s’adapte pas aux petits appareils). Ces segments d’interface utilisateur, tous dans la même application, communiquent entre eux via un communicator client fictif, qui simule les interactions qui se produisent autrement sur le réseau.

Pour activer le mode de test local, définissez LOCALTESTMODEON (dans les propriétés du projet) comme symbole de compilation conditionnelle et régénérez.

Portage vers un projet Windows 10

QuizGame a les éléments suivants.

  • P2PHelper. Il s’agit d’une bibliothèque de classes portable qui contient la logique de mise en réseau d’égal à égal.
  • QuizGame.Windows. Il s’agit du projet qui génère le package d’application pour l’application hôte, qui cible Windows 8.1.
  • QuizGame.WindowsPhone. Il s’agit du projet qui génère le package d’application pour l’application cliente, qui cible Windows Phone 8.1.
  • QuizGame.Shared. Il s’agit du projet qui contient du code source, des fichiers de balisage et d’autres ressources et ressources, qui sont utilisés par les deux autres projets.

Pour cette étude de cas, nous avons les options habituelles décrites dans If you have a Universal 8.1 app with respect to what devices to support.

En fonction de ces options, nous allons porter QuizGame.Windows vers un nouveau projet Windows 10 appelé QuizGameHost. Et nous allons porter QuizGame.WindowsPhone vers un nouveau projet Windows 10 appelé QuizGameClient. Ces projets ciblent la famille d’appareils universelle, afin qu’ils s’exécutent sur n’importe quel appareil. Et nous allons conserver les fichiers sources QuizGame.Shared, etc. dans leur propre dossier, et nous allons lier ces fichiers partagés aux deux nouveaux projets. Comme avant, nous allons garder tout dans une solution et nous allons le nommer QuizGame10.

La solution QuizGame10

  • Créez une solution (Nouveau projet d’autres types de>projets>Visual Studio Solutions) et nommez-la QuizGame10.

P2PHelper

  • Dans la solution, créez un projet de bibliothèque de classes Windows 10 (Nouvelle bibliothèque de classes universelle Windows de projet>(Windows Universal>)) et nommez-le P2PHelper.
  • Supprimez Class1.cs du nouveau projet.
  • Copiez P2PSession.cs, P2PSessionClient.cs et P2PSessionHost.cs dans le dossier du nouveau projet et incluez les fichiers copiés dans le nouveau projet.
  • Le projet sera généré sans avoir besoin d’autres modifications.

Fichiers partagés

  • Copiez les dossiers Common, Model, View et ViewModel de \QuizGame.Shared\ vers \QuizGame10\.
  • Common, Model, View et ViewModel sont ce que nous allons signifier lorsque nous faisons référence aux dossiers partagés sur le disque.

QuizGameHost

  • Créez un projet d’application Windows 10 (Ajoutez>une application vide windows universelle Windows de projet>(Windows Universel>)) et nommez-le QuizGameHost.
  • Ajoutez une référence à P2PHelper (Ajouter une solution>de projets>de référence>P2PHelper).
  • Dans Explorateur de solutions, créez un dossier pour chacun des dossiers partagés sur le disque. À son tour, cliquez avec le bouton droit sur chaque dossier que vous venez de créer, puis cliquez sur Ajouter>un élément existant et accédez à un dossier. Ouvrez le dossier partagé approprié, sélectionnez tous les fichiers, puis cliquez sur Ajouter en tant que lien.
  • Copiez MainPage.xaml de \QuizGame.Windows\ vers \QuizGameHost\ et remplacez l’espace de noms par QuizGameHost.
  • Copiez App.xaml de \QuizGame.Shared\ vers \QuizGameHost\ et remplacez l’espace de noms par QuizGameHost.
  • Au lieu de remplacer app.xaml.cs, nous allons conserver la version dans le nouveau projet et apporter une seule modification ciblée pour prendre en charge le mode de test local. Dans app.xaml.cs, remplacez cette ligne de code :
rootFrame.Navigate(typeof(MainPage), e.Arguments);

par le code :

#if LOCALTESTMODEON
    rootFrame.Navigate(typeof(TestView), e.Arguments);
#else
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
#endif
  • Dans Propriétés>Générer>des symboles de compilation conditionnelle, ajoutez LOCALTESTMODEON.
  • Vous pourrez maintenant revenir au code que vous avez ajouté à app.xaml.cs et résoudre le type TestView.
  • Dans package.appxmanifest, remplacez le nom de la fonctionnalité d’InternetClient par InternetClientServer.

QuizGameClient

  • Créez un projet d’application Windows 10 (Ajouter>une application vide windows universelle windows de projet>(Windows universel>)) et nommez-le QuizGameClient.
  • Ajoutez une référence à P2PHelper (Ajouter une solution>de projets>de référence>P2PHelper).
  • Dans Explorateur de solutions, créez un dossier pour chacun des dossiers partagés sur le disque. À son tour, cliquez avec le bouton droit sur chaque dossier que vous venez de créer, puis cliquez sur Ajouter>un élément existant et accédez à un dossier. Ouvrez le dossier partagé approprié, sélectionnez tous les fichiers, puis cliquez sur Ajouter en tant que lien.
  • Copiez MainPage.xaml de \QuizGame.WindowsPhone\ vers \QuizGameClient\ et remplacez l’espace de noms par QuizGameClient.
  • Copiez App.xaml de \QuizGame.Shared\ vers \QuizGameClient\ et remplacez l’espace de noms par QuizGameClient.
  • Dans package.appxmanifest, remplacez le nom de la fonctionnalité d’InternetClient par InternetClientServer.

Vous serez maintenant en mesure de générer et d’exécuter.

Interface utilisateur adaptative

L’application QuizGameHost Windows 10 semble correcte lorsque l’application s’exécute dans une large fenêtre (qui n’est possible que sur un appareil avec un grand écran). Lorsque la fenêtre de l’application est étroite, cependant (qui se produit sur un petit appareil et peut également se produire sur un appareil volumineux), l’interface utilisateur est écrasée tellement qu’elle n’est pas lisible.

Nous pouvons utiliser la fonctionnalité Visual State Manager adaptative pour résoudre ce problème, comme nous l’avons expliqué dans l’étude de cas : Bookstore2. Tout d’abord, définissez les propriétés sur les éléments visuels afin que, par défaut, l’interface utilisateur soit disposée dans l’état étroit. Toutes ces modifications ont lieu dans \View\HostView.xaml.

  • Dans la grille principale, remplacez la hauteur du premier RowDefinition par « 140 » par « Auto ».
  • Sur la grille qui contient le TextBlock nommé pageTitle, set x:Name="pageTitleGrid" et Height="60". Ces deux premières étapes permettent de contrôler efficacement la hauteur de cette RowDefinition via un setter dans un état visuel.
  • On pageTitle, set Margin="-30,0,0,0".
  • Sur la grille indiquée par le commentaire <!-- Content -->, définissez x:Name="contentGrid" et Margin="-18,12,0,0".
  • Sur le TextBlock immédiatement au-dessus du commentaire <!-- Options -->, définissez Margin="0,0,0,24".
  • Dans le style TextBlock par défaut (la première ressource du fichier), remplacez la valeur de FontSize setter par « 15 ».
  • Dans OptionContentControlStyle, remplacez la valeur de FontSize setter par « 20 ». Cette étape et la précédente nous donneront une bonne rampe de type qui fonctionnera bien sur tous les appareils. Ces tailles sont beaucoup plus flexibles que les « 30 » que nous utilisions pour l’application Windows 8.1.
  • Enfin, ajoutez le balisage Visual State Manager approprié à la grille racine.
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="WideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="548"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="pageTitleGrid.Height" Value="140"/>
                <Setter Target="pageTitle.Margin" Value="0,0,30,40"/>
                <Setter Target="contentGrid.Margin" Value="40,40,0,0"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Style universel

Dans Windows 10, vous remarquerez que les boutons n’ont pas le même remplissage cible tactile dans leur modèle. Deux petits changements vont remédier à cela. Tout d’abord, ajoutez ce balisage à app.xaml dans QuizGameHost et QuizGameClient.

<Style TargetType="Button">
    <Setter Property="Margin" Value="12"/>
</Style>

Ensuite, ajoutez ce setter dans OptionButtonStyle \View\ClientView.xaml.

<Setter Property="Margin" Value="6"/>

Avec ce dernier ajustement, l’application se comporte et se présente comme avant le port, avec la valeur supplémentaire qu’elle va maintenant exécuter partout.

Conclusion

L’application que nous avons porté dans cette étude de cas était relativement complexe impliquant plusieurs projets, une bibliothèque de classes et une grande quantité de code et d’interface utilisateur. Même si, le port était simple. Une partie de la facilité de portage est directement attribuable à la similarité entre la plateforme de développement Windows 10 et les plateformes Windows 8.1 et Windows Phone 8.1. Certains sont dus à la façon dont l’application d’origine a été conçue pour conserver les modèles, les modèles d’affichage et les vues séparées.