Février 2016
Volume 31, numéro 2
Cet article a fait l'objet d'une traduction automatique.
Windows 10 - Universal Windows Platform pour développeurs Web
Par Tim Kulp | Février 2016
Un développeur Web d'entreprise, vous avez une parfaite compréhension du code HTML, CSS et JavaScript. Vous pouvez créer des applications Web réactives qui s'adaptent à la taille de l'écran tout en conservant les fonctionnalités sur les navigateurs pris en charge ou bien vos appareils. Les mêmes compétences que vous utilisez pour Éclairez le Web peuvent être utilisés pour créer des applications de plate-forme de Windows universelle (UWP). Si vous créez pour le bureau, mobile ou n'importe quelle plateforme Windows 10, votre enseignements à partir d'applications Web évolutives multinavigateurs permet d'obtenir un bon départ UWP.
Dans cet article, j'Explorer l'utilisation de base de connaissances du développement Web depuis la création d'applications entre les navigateurs pour les applications UWP flexibles qui s'exécutent sur un périphérique Windows. Pour ce faire, je commence par examiner comment les notions fondamentales de la création d'interfaces réactives traduire CSS et HTML vers UWP. Ensuite, j'examine à l'aide de VisualStates et des vues XAML pour structurer votre application basée sur les fonctionnalités du périphérique spécifique. Enfin, j'utilise le Code adaptatif de cibler les périphériques basés sur l'utilisation du bon vieux JavaScript pour cibler des navigateurs spécifiques.
Pourquoi XAML pour les développeurs Web ?
Dans cet article, je vais créer parallels du développement Web en XAML. Les développeurs Web peuvent déjà avoir un fort compétences HTML, CSS et JavaScript et souhaitez générer UWP avec ce compétences. Si vous aimez HTML et JavaScript, n'hésitez pas à lier avec lui. Si vous êtes nouveau UWP et savez pas où commencer, XAML est un excellent outil pour vous aider à en raison de sa nature fortement typée.
Un exemple courant de ce utilise une disposition grille dans XAML et HTML. En XAML, la création d'une disposition en grille commence par ajout d'un contrôle de grille, en définissant les colonnes et les lignes, puis en assignant à chaque contrôle dans la grille à une ligne ou une cellule spécifique. En HTML, il existe plusieurs façons pour générer une disposition de grille telles que :
- À l'aide de valeurs en virgule flottante avec la hauteur et la largeur pour créer des cellules avec efface pour démarrer une nouvelle ligne
- À l'aide de : afficher la grille sur l'élément de conteneur avec chaque élément enfant ayant une colonne et une ligne définie
- À l'aide d'une table avec éléments tr et td
Qui est implémentée est jusqu'à vos connaissances de CSS ou HTML et ces approches ne vous donnent à l'aide des outils tels qu'IntelliSense, ainsi que le contrôle de grille en XAML. Les contrôles fortement typés de XAML facilitent savoir comment créer une interface utilisateur via IntelliSense, qui est extrêmement utile pour les développeurs qui découvrent UWP.
Code fortement typé fournit également un grand nombre de valeur lors de la résolution des problèmes. Dans HTML, CSS et JavaScript, les développeurs ont une grande souplesse à plier les règles pour les demandes de l'application à l'aide de code faiblement typé. Cela est très utile pour la création d'applications, mais peut être un cauchemar en termes de prise en charge des applications. Résolution des problèmes de code faiblement typé peuvent être un défi si types changent ou objets changent de manière dynamique. Les développeurs d'entreprise, la création d'applications est amusant, mais à un moment donné, quelqu'un va devoir conserver cette application en cours d'exécution. La possibilité de naviguer facilement sur les fonctionnalités d'une application via des objets fortement typés et IntelliSense permet à l'équipe de support de comprendre l'application.
Si vous êtes passionné de HTML, CSS et JavaScript, UWP offre une plateforme à utiliser votre code existant pour produire des applications exceptionnelles. HTML, CSS et JavaScript et XAML sont deux des outils efficaces avec un grand nombre d'avantages et inconvénients. Il existe deux autres articles sur la raison pour laquelle un auteur préfère XAML JavaScript (bit.ly/1NxUxqh) et un autre préfère JavaScript XAML (bit.ly/1RSLZ2G). J'adore HTML pour les applications Web, mais je vous encourage à Explorer XAML si vous ne connaissez pas UWP pour découvrir les contrôles UWP, pour réduire les coûts de support pour votre équipe via du code fortement typé avec intégration IntelliSense riche et amusez-vous en apprenant à quelque chose de nouveau.
Bâtiment déjà sur ce que vous savez
UWP a beaucoup de similitudes avec les principes fondamentaux de conception de sites Web. Les principes de base tels que la séparation des intérêts dans le développement Web entre HTML et JavaScript traduisent dans UWP XAML et le fichier code-behind XAML.cs. Toute la logique est placé dans le code-behind, tandis que présentation tous est conservée dans le fichier XAML (comme toute logique se place dans JavaScript présentation est au format HTML à l'aide de CSS). En outre, Web modernes nombreuses applications exploitent les infrastructures telles que Knockout et AngularJS pour implémenter le modèle de conception Model-View-ViewModel (MVVM) par le biais de liaison de données. Connaissance de ces infrastructures MVVM est en général la base pour comprendre la liaison de données dans UWP. Bien que la syntaxe est différente entre le développement Web et UWP, lorsqu'il s'agit de concepts de base, les développeurs Web ont une base solide pour la création d'applications qui dépassent les fonctionnalités de navigateurs et périphériques.
Il existe des différences entre le développement Web et UWP que je n'aborderai pas dans cet article, telles que la gestion d'état et le stockage des données. Pour cet article, je vais me concentrer sur la conception de l'interface utilisateur et de s'assurer que l'application peut interagir avec le périphérique sur lequel il est en cours d'exécution.
Positionnement : Float et désactivez à RelativePanel
En HTML, vous déterminez le positionnement de chaque élément dans le modèle d'objet de Document. HTML est verticale avec chaque élément de rendu dans l'ordre du premier élément déclaré au dernier. Lorsque CSS a été introduit, il permet éléments dotées de basé sur la définition du style d'affichage de l'élément (inline, bloc, etc.) des dispositions sophistiquées, positionner (relative ou absolue), ainsi que float et effacer. À l'aide de float, les développeurs Web peut prendre un élément HTML hors du flux de haut en bas et placer l'élément à gauche (float : gauche) ou vers la droite (float : droite) de l'élément conteneur.
Imaginez une disposition simple, y compris l'en-tête, contenu principal, encadré et un pied de page. À l'aide de float fait en sorte que le navigateur pour afficher la barre latérale sur le bord droit du conteneur et pour restituer le contenu principal et le bord gauche du conteneur. À l'aide de float, éléments place entre eux à gauche ou à droite, selon le type float est spécifiée. Clear est utilisée pour arrêter flottante d'éléments et de retourner au flux de haut en bas standard du HTML. Figure 1 montre un exemple d'utilisation de float pour générer une disposition simple.
Figure 1 Utilisation Float pour générer une disposition Simple
div {
width: 100%;
}
mainContent {
width: 60%; float: left;
}
sidebar{
width: 40%; float: right;
}
clearer {
clear: both;
}
CSS for design
<header>
</header>
<div>
<section class="content"></section>
<section class="sidebar"></section>
<div class="clearer"></div>
</div>
<footer>
</footer>
HTML for design
Où les développeurs Web utilisent float et clair pour créer une disposition, UWP fournit un contrôle appelé le RelativePanel, qui, comme son nom l'indique, permet une mise en page est défini à l'aide de relations relatives à d'autres contrôles. Comme float, RelativePanels permettent aux développeurs de gérer la manière dont les contrôles sont positionnés par rapport à un contrôle d'ancrage. Classes CSS sont utilisés pour déterminer le positionnement des éléments de la page Web. Pour répliquer la même disposition, utilisez le RelativePanel et les propriétés jointes de la RelativePanel dans les contrôles :
<RelativePanel>
<!-- Header is the anchor object for the relative panel -->
<TextBlock Text="Header" Name="tbHeader"></TextBlock>
<TextBlock Text="Content" RelativePanel.Below="tbHeader"
Name="tbContent"></TextBlock>
<TextBlock Text="SideBar" RelativePanel.RightOf="tbContent"
RelativePanel.Below="tbHeader" Name="tbSideBar"></TextBlock>
<TextBlock Text="Footer" RelativePanel.Below="tbSideBar"
Name="tbFooter"></TextBlock>
</RelativePanel>
Dans ce bloc de code, le positionnement de chaque contrôle est relatif à la position du contrôle d'ancrage (dans ce cas, le point d'ancrage est l'en-tête TextBlock). À l'aide de RelativePanel, chaque contrôle peut être assigné à où le contrôle doit apparaître sur l'écran par rapport à d'autres contrôles. Où les développeurs Web utilise float : gauche, les développeurs UWP utiliseraient RelativePanel.LeftOf ou RelativePanel.RightOf (pour float : droit) pour positionner le contenu. Cette méthode est similaire à celle de float, il n'est pas un concept d'utilisation d'effacer pour retourner le flux normal ; au lieu de cela, veuillez noter que quelque chose est sous l'élément précédent. Cela simplifie la résolution des problèmes de mise en forme en tant que la gestion des valeurs en virgule flottante et efface peut obtenir un défi pour les développeurs qui ne disposent pas de compétences CSS forts. À l'aide de la RelativePanel fournit une méthode déclarative pour spécifier où un contrôle doit apparaître par rapport à d'autres contrôles. Lorsque le RelativePanel est fermée, l'application renvoie au flux de rendu normal du XAML (c'est-à-dire de haut en bas comme HTML).
Mise à l'échelle : Pourcentage de Pixels
Création d'une application Web réactive via redimensionnement signifie à l'aide de dimensionnement relatif pour les éléments. À l'aide de l'en-tête, le contenu, la mise en page barre latérale et de pied de page, imaginez que cette interface utilisateur n'a été créée pour un écran de bureau. Les concepteurs Web identifie tout d'abord la largeur en pixels optimal pour la page de disposition. Dans cet exemple, la largeur de page sera 1000px. Comme chaque élément est généré lors de la conception, l'élément est généré à la largeur en pixels en le conteneur 1000px en n'oubliant pas. En HTML, la section contenu serait 800px large alors que la section de la barre latérale serait 200px large. À l'aide de la formule : cible / contexte = pourcentage, la section de contenu est de 80 % du contexte (alors que le contexte = la page 1000px) alors que l'encadré est de 20 %.
À l'aide de pourcentages dans la conception de sites Web permet la mise en page redimensionner en tant que le redimensionnement du conteneur. Dans ce cas, si l'objet de page 1000px ont été redimensionnée par l'utilisateur à 659px uniquement, le contenu et la barre latérale redimensionnez 527px et 131px, respectivement. De même, la création de styles pour utiliser « em » au lieu de point spécifique ou des tailles de pixel permet l'échelle de la police en fonction du contexte. Ces pratiques garantissent qu'une conception conserve le proportionnel dimensionnement indépendamment de la taille de la fenêtre.
Alors que l'utilisation de pourcentages semble mathématiques simples, d'autres facteurs impliqués dans comment à l'échelle des éléments, tels que de la densité en pixels de l'appareil et l'orientation, laquelle ajouter un élément d'imprévisibilité à votre conception. UWP simplifie la mise à l'échelle à l'aide de la notion de « pixel efficace » pour toutes les mesures. Un pixel effectif n'est pas identique à un seul pixel. Pixels effectifs utilisent l'algorithme de mise à l'échelle de UWP savoir comment représenter un pixel efficace en fonction de distance standard de l'appareil de l'utilisateur et la densité en pixels.
Par exemple, une Surface Hub aurait une densité de pixels beaucoup plus élevée qu'un Tablet PC ou un téléphone. Les développeurs UWP suffit générer des pixels efficace dans des outils tels que Blend et l'algorithme de mise à l'échelle permettent de gérer les calculs complexes nécessaires diminue ou augmente en conséquence. Une chose à garder à l'esprit : Pixels effectifs doivent être un multiple de quatre. Basé sur le fonctionne de l'algorithme de mise à l'échelle, à l'aide d'un multiple de quatre garantit bords propres comme les échelles de l'interface utilisateur.
ViewStates et les requêtes de média
Dans le développement Web, les CSS fournit les informations de disposition pour une application. Création d'une application avec des pourcentages permet de redimensionner, mais à un moment donné, la conception doit s'interrompre et réforme pour répondre aux besoins changeants complet. Une disposition générée pour un périphérique mobile, tel qu'une tablette ne va pas être identique à une disposition générée pour un appareil de présentation de la base de données de plus de 80 pouces tels que le concentrateur de Surface. Une analogie plus anciens pour la conception de sites Web est le cas où un utilisateur souhaiteriez imprimer une conception basée sur l'écran. CSS permettent aux concepteurs de résoudre le dilemme de l'écran à imprimer avec les requêtes de média CSS. L'utilisateur imprimé la conception, le navigateur utiliserait la CSS d'impression au lieu de l'écran de CSS. Comme la conception Web réactive a grandi, les requêtes de média se sont développés pour prendre en charge des informations plus détaillées. Voici un exemple de requête de média CSS :
<link type="text/css" rel="stylesheet"
href="styles/719style.css"
media="screen and (max-device-width: 719px)"/>
Dans cette requête, le fichier 719style.css est appliqué si le support d'affichage de l'application Web est un écran avec une largeur de périphérique inférieure ou égale à 719px. Par exemple, cette requête de média peut être utilisée pour effacer les valeurs float et de présenter les éléments de contenu et de la barre latérale dans une conception empilée et côte à côte. En utilisant un support de requêtes permet aux développeurs Web personnaliser l'affichage en fonction de la taille de l'écran, la résolution, l'orientation et beaucoup plus d'options (voir la liste complète de CSS3 à bit.ly/1riUA2h).
Dans UWP, le ViewStateManager peut servir les requêtes de média pour modifier la conception de l'application en fonction des paramètres définis. Le VisualStateManager contient un ou plusieurs VisualStateGroups, un objet conteneur de plusieurs ViewStates. Chaque état d'affichage conserve les accesseurs Set (les propriétés mis à jour pour chaque contrôle) et les déclencheurs (ce qui rend les accesseurs Set modifier). ViewStateManager gère les déclencheurs pour savoir quand appliquer les valeurs d'accesseur Set d'un état d'affichage spécifique. En termes de CSS, les déclencheurs sont comme les requêtes de média et les accesseurs Set sont les valeurs de style dans la feuille de style référencée dans la requête de média. Consultez l'exemple dans Figure 2.
Figure 2 contrôles Repositionner selon les déclencheurs VisualState
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ResponseStateGroup">
<VisualState x:Name="LessThan720">
<VisualState.Setters>
<Setter Target="tbSideBar.(RelativePanel.Below)" Value="tbContent"/>
<Setter Target="tbSideBar.(RelativePanel.RightOf)" Value=""/>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1"/>
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="GreaterThan720">
<VisualState.Setters>
<Setter Target="tbSideBar.(RelativePanel.Below)" Value="tbHeader"/>
<Setter Target=" tbSideBar.(RelativePanel.RightOf)" Value="tbContent"/>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Dans ce code, deux VisualStates sont définies. L'état d'affichage LessThan720 est déclenchée lorsque la largeur de la fenêtre est 1px à 719px. Lorsque la fenêtre se développe à 720px ou une version ultérieure, l'état d'affichage GreaterThan720 est déclenchée. Chacun de ces ViewStates fonctionne avec les paramètres du contrôle tbSideBar RelativePanel. Si la taille de la fenêtre est inférieure à 720, puis l'écran n'est pas suffisante pour prendre en charge un modèle où le contenu est située en regard de la barre latérale. Dans ce cas, l'état d'affichage LessThan720 sera déclenché, ce qui s'empilent l'encadré ci-dessous le contenu principal TextBlock. Cela revient à l'aide de la requête de média dans la mesure où je peux définir float : aucun dans un fichier LessThan719.css.
Tout comme les requêtes de média, ViewStates peut être utilisé pour repositionner ou remanier les contrôles basés sur les déclencheurs. Gestion des ViewStates et ViewStateGroups peuvent se compliquer comme une interface gagne en complexité. ViewState complexe de la gestion des modifications sont plus faciles avec Blend pour Visual Studio 2015. À l'aide de l'éditeur de fusion, vous pouvez créer de nouvelles VisualStates et voir les modifications apportées à la conception de l'application en cours de frappe. Blend gère écrivant le code XAML et veillez à fournir les données nécessaires pour déclencher la modification VisualState. Microsoft Virtual Academy dispose des vidéos de grande étape par étape sur l'utilisation de Blend pour la gestion d'état d'affichage à bit.ly/1P94e32.
À l'aide de vues de remanier l'expérience
Parfois, un site mobile est une interface utilisateur différente en raison d'une réduction de cas d'usage ou modification de focus par le site mobile par rapport à l'expérience de bureau complet. Dans ce scénario, les développeurs Web seraient adapter le contenu à l'expérience mobile pour une expérience plus agréable, ou pour mettre en évidence les fonctionnalités de l'appareil mobile. À l'aide de différentes méthodes de détection, les développeurs Web peuvent rediriger les utilisateurs une expérience remaniée adaptées à leur appareil, souvent appelé le site m.webapp.com.
UWP fournit la même fonctionnalité au moyen de vues. Utilisation des familles de périphériques différents en fonction de l'application, peut nécessiter cette différence austère dans l'interface utilisateur pour lequel le ViewStateManager peut ne pas être le bon outil. Les vues permettent aux développeurs d'exploiter le code principal existant avec un nouveau UI XAML. Vous pouvez simplifier à l'aide des vues via ViewModels bien structurée alors que vous pouvez tirer parti d'un seul objet ViewModel par plusieurs vues. Connaissance de Knockout ou AngularJS aidera les développeurs Web créer bon ViewModel dans UWP pour UXes adaptées pour une famille de périphériques spécifiques.
Permet de paramétrer un affichage pour un périphérique spécifique en créant un dossier dans le dossier de vues de l'application.
Dans le dossier Views, créez un nouveau dossier appelé DeviceFamily-Mobile. Ce code indique les technologies modernes de ressource à utiliser la vue MainPage.xaml trouvée dans le dossier DeviceFamily-Mobile lorsque MainPage est demandée sur un périphérique dans la famille de périphériques mobiles (tel qu'un téléphone). Si la demande de MainPage provient de n'importe quel autre famille de périphériques, la réponse sera MainPage standard. Cette fonctionnalité permet aux développeurs UWP générer une interface utilisateur ciblé pour les cas d'usage qui sont uniques pour les familles Windows spécifiques.
Code ADAPTATIF
Dans la création d'applications Web, pas tous les navigateurs sont les mêmes. Dans une entreprise, vous devrez peut-être une norme d'entreprise, mais lorsque vous développez des utilisateurs externes, la complexité proviennent de différents systèmes d'exploitation, les types de navigateurs et versions. Les développeurs Web ont de nombreuses astuces leurs manches pour gérer ces différences en douceur. Bibliothèques, telles que Modernizr (modernizr.com) effectuées gère ces difficultés plus faciles, mais l'activation de fonctionnalités basées sur le périphérique ou le navigateur n'est pas une nouveauté pour les développeurs Web.
Création d'applications UWP peut avoir la même complexité en tant que fonctionnalité sur plusieurs navigateurs. Imaginez une application de notes où les utilisateurs peuvent ajouter des images à leurs notes. L'application peut exploiter les fonctionnalités de l'appareil photo intégré d'un téléphone pour prendre une photo, ou peut simplement laisser les utilisateurs afficher des images qui existent déjà sur leurs périphériques.
La première étape de l'utilisation des fonctionnalités spécifiques à l'appareil consiste à vérifier que les API d'Extension appropriés sont inclus dans le projet. Par exemple, dans l'application de prise de notes, les boutons matériel devra être accessible sur un téléphone. Pour utiliser ces boutons, vous devez ajouter une référence aux Extensions Windows Mobile pour la série UWP. Cela est fait en ajoutant une référence au projet (comme toute autre référence), puis en sélectionnant Universal Windows, puis les Extensions. Vous verrez une liste des extensions possibles telles que bureau, Mobile et équipe (pour Surface Hub) extensions. Sélectionner les extensions que vous devez ajouter au projet et cliquez sur OK.
Où JavaScript détecter les fonctionnalités du navigateur serait via une série de navigateur vérifie, dans l'application vérifie la présence de l'API nécessaire à la méthode IsTypePresent UWP. Dans l'application de prise de notes, recherchez le bouton matériel à utiliser l'appareil photo via le code suivant :
string apiName = "Windows.Phone.UI.Input.HardwareButtons";
if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(apiName))
{
Windows.Phone.UI.Input.HardwareButtons.CameraPressed +=
HardwareButtons_CameraPressed;
}
Ce code court permet les application cible spécifique fonctionnalités ajoutées via les API d'Extension. En encapsulant la déclaration de gestionnaire d'événements CameraPressed avec la méthode IsTypePresent, vous assurez que vous n'essayez pas à inscrire le Gestionnaire d'événements lorsque l'API n'est pas présent. Il existe des outils pour vous assurer que les vérifications de l'API se produisent afin que l'application ne se bloque lors de l'API n'est pas présent. Élément est un excellent package NuGet qui simplifie l'identification et toute référence à une API qui n'est pas tout d'abord validé via la méthode ApiInformation.IsTypePresent d'extension d'habillage. En savoir plus sur ce package NuGet sur le site PlatformSpecific GitHub bit.ly/1GvhkF0.
Comme dans le développement Web, une version spécifique du navigateur doit parfois ciblage pour un client ou d'une norme d'entreprise. Dans ces situations, les développeurs Web doivent se concentrer sur une configuration de navigateur spécifique qui ne correspond ne peut-être pas à ce qui utilise le reste d'Internet.
De même, les développeurs UWP peut-être cibler les contrats spécifiques d'une API d'extension pour conserver le code existant. Cela est très utile dans les applications d'entreprise où l'équipe informatique peut avoir un boucles rapide et lente pour le déploiement des mises à jour pour les ordinateurs des employés. La boucle rapide peut obtenir une nouvelle fonctionnalité excellente d'extension de certaines API qui doit être implémentée dans l'application immédiatement. Dans ce cas, les utilisateurs de boucle lente doivent toujours leurs fonctionnalités. IsApiContractPresent UWP permet de vérifier que l'API d'extension est disponible et que la version attendue est disponible avant d'exécuter le code :
if(Windows.Foundation.Metadata.ApiInformation.IsApiContractPresent(apiName, 3))
{
newKillerFunction();
}
Dans ce segment de code, l'application s'exécutera uniquement la newKillerFunction si le Nom_api fourni est de version 3. Si la version est inférieure à 3, newKillerFunction ne sera pas exécuté. Si une version supérieure est présente (comme exemple, la version 4), puis newKillerFunction s'exécute.
Synthèse
Développement de UWP s'appuie sur la plupart des compétences et connaissances qu'utilisé par les développeurs Web pour créer des applications Web multinavigateurs réactives. Conception de disposition, répondre aux différences d'affiche (statique et dynamique), ainsi que les capacités du système, est toutes les pratiques courantes pour les développeurs Web à gérer avec le monde sauvage de navigateurs Web. Appliquer ces compétences de développement de UWP vous aidera à génération UXes riches qui s'adaptent aux fonctions, des périphériques et taille de l'écran.
Tim Kulpest un architecte technique senior dans Baltimore, MD. Il est un site Web, mobiles et développeur UWP, ainsi que l'auteur, peintre, Papa et « wannabe Mad scientifiques Maker. » Le trouver sur Twitter : @seccode ou via LinkedIn : linkedin.com/in/timkulp.
Merci à l'experte technique Microsoft suivante d'avoir relu cet article : Kevin Hill