Procédure pas à pas : création d'un client LightSwitch pour les utilisateurs mobiles

Article
03/12/2013

À l'aide de Microsoft LightSwitch pour Visual Studio Update 2, vous pouvez créer un client HTML dans lequel les utilisateurs Mobiles peuvent afficher, ajouter, puis mettre à jour les données des emplacements distants à l'aide de moderne, les appareils fonctions tactiles- orientés tels que les téléphones et les tablettes.Dans cette procédure pas - à - pas, vous créerez un client pour une entreprise de déménagement fictive, Contoso déplacement, afin que son propre de service client puisse facilement estimer le nombre de personnes, de camions, et de zones chaque travail requiert.

Le site web Contoso, les planificateurs passez la majeure partie de leur temps dans le bureau, parlant aux clients éventuels en personne ou de téléphone et réorganisation de visites de suivi.Ces ouvriers utilisent un client pour ordinateur de bureau enrichi basé sur Silverlight et qui entrée de données importante de meilleurs charge à l'aide de le clavier et la souris.En revanche, des spécialistes de planification voyagent toute la journée, rendant de visites de traçage dans différents emplacements et stockant des informations telles que la taille, le contenu, et les spécifications d'entrée de chaque partie.Ces utilisateurs Mobiles ont besoin d'un client qui leur affiche non seulement des informations sur chaque visite de suivi des planificateurs mais prennent également en charge les types de données spécifiques entrants, en prenant des images, et alertant l'équipe de mouvements sur les restrictions de stationnement ou d'autres informations.

Le client pour ordinateur de bureau pour les planificateurs a déjà été généré.Vous générerez le client mobile que des spécialistes de planification utilisent pour suivre les notez que les réorganiser planificateurs et écrire des détails sur chaque déplacement.

Composants requis

Téléchargez et installez Microsoft LightSwitch pour Visual Studio Update 2.
Téléchargez l'exemple d'application de ContosoMoving.
Installez l'extension du gestionnaire de module de NuGet, comme dans la procédure suivante.

Pour installer l'extension de NuGet

Dans la barre de menus, sélectionnez Outils, Extensions et mises à jour.
Dans la boîte de dialogue Extensions et mises à jour, sélectionnez le nœud En ligne .
Dans la zone de texte Recherchez la galerie Visual Studio, entrez NuGet.
Dans la liste des résultats, choisissez Gestionnaire de module de NuGet, puis choisissez le bouton Télécharger .

[!REMARQUE]

Vous devez redémarrer Visual Studio pour rendre l'extension disponible.

Mise en route

Avant de générer le client mobile, vous créerez des exemples de données pour le client pour ordinateur de bureau, que vous avez téléchargé.

Pour créer des exemples de données

Dans la barre de menus, sélectionnez Fichier, Ouvrir, Projet/Solution.
Localisez le fichier de ContosoMoving.sln que vous avez téléchargé, et l'ouvrez ensuite.
Dans la barre de menus, sélectionnez Débogage, Démarrer le débogage.
Dans le client en cours de exécution, dans la barre de menus, sélectionnez Exemple de données, Créer des exemples de données.
Dans la barre d'outils de l'écran Créer des exemples de données, cliquez sur le bouton Ajoutez toutes les exemples de données .

L'exemple de données est créée pour État, Employé, Client, et des entités Gardez .
Dans la barre d'outils, cliquez sur le bouton Enregistrer .
Dans la barre de menus, sélectionnez Accueil.
Dans la barre d'outils, cliquez sur le bouton Actualiser .

Une liste de rendez-vous suivants pour tous les employés s'affiche, et vous pouvez explorer les autres écrans dans le client pour ordinateur de bureau.

Ajoutez un client mobile

Vous ajouterez ensuite un projet client HTML à la solution existante.

Pour ajouter un projet de client HTML

Dans Explorateur de solutions, sélectionnez le nœud ContosoMoving .
Dans la barre de menus, sélectionnez Projet, Ajouter un client.
Dans la boîte de dialogue Ajouter un client, choisissez Client HTML, nommez le MobileClient, puis choisissez le bouton OK .
Dans la boîte de dialogue de mise à jour de projet qui s'affiche, cliquez sur le bouton OK .

Le projet est mis à jour à Microsoft LightSwitch pour Visual Studio Update 2, et un état de migration s'affiche dans votre navigateur.La structure de fichiers de la solution est modifiée, et vous ne pouvez plus la solution sur un ordinateur qui n'a pas cette version de LightSwitch est installé.

Dans Explorateur de solutions, le nœud Sources de données a été renommé Serveur, le nœud Écrans a été renommé Client, et un nœud a été ajouté et MobileClientnommé.Le nœud MobileClient est marqué comme un client Démarrage, il apparaît lorsque vous déboguez l'application.Vous pouvez modifier le client Démarrage en ouvrant le menu contextuel pour tout nœud client puis choisissez Définissez comme un client de démarrage.

Ensuite vous créerez un écran d'accueil et les détails examinent, définissez la navigation entre les écrans, et créent une boîte de dialogue modale.Les clients mobiles utilisent un modèle différent de navigation que les clients de bureau.En général, un seul écran est visible à la fois dans un client mobile, et les modifications sont validées lorsque vous passez d'un écran à un autre.

Pour créer un écran d'accueil

Dans Explorateur de solutions, sélectionnez le nœud MobileClient .
Dans la barre de menus, sélectionnez Projet, Ajouter un écran.
Dans la boîte de dialogue Ajouter un nouvel écran, choisissez le modèle Recherchez l'écran de données .
Dans la zone de texte Nom de l'écran, entrez Home.
Dans la liste Données d'écran, choisissez UpcomingAppointments, puis choisissez le bouton OK .

Pour personnaliser l'écran d'accueil

Dans le concepteur d'écran, sélectionnez le nœud Gardez, puis choisissez Disposition des lignes dans la liste déroulante.
Sous le nœud Disposition des lignes | Appointment, supprimez tous les nœuds à l'exception Date de début et Client.
Dans la barre de menus, sélectionnez Démarrer le débogage.

Le client mobile s'affiche dans le navigateur.

À ce stade, les affichages écran uniquement des rendez-vous.Vous ajouterez ensuite un écran de détails afin que les détails de rendez-vous s'affichent lorsqu'un utilisateur tape un rendez-vous.

Pour créer un écran de détails

Dans Explorateur de solutions, sélectionnez le nœud MobileClient .
Dans la barre de menus, sélectionnez Projet, Ajouter un écran.
Dans la boîte de dialogue Ajouter un nouvel écran, choisissez le modèle Écran de détails de vue .
Dans la zone de texte Nom de l'écran, entrez ViewAppointmentDetail.
Dans la liste Données d'écran, choisissez Gardez.
Sélectionnez Détails des rendez-vous, les cases à cocher Notez AppointmentPhotos, et de Salles de rendez-vous, puis choisissez le bouton OK .

Dans le concepteur d'écran, une disposition Onglets est créée, et les types de données sont classés par des tabulations.

Pour personnaliser l'écran de détails

Dans Explorateur de solutions, ouvrez l'écran ViewAppointmentDetail .
Dans le concepteur d'écran, sélectionnez le nœud Disposition des lignes | Détails .
Supprimez Date de début, Date de fin, Remarques, Type de déplacement, Employé, et les nœuds Client .
Ouvrez le menu contextuel du nœud Onglets, puis choisissez Ajouter un onglet.
Dans la fenêtre Propriétés, affectez à la propriété Nom à Remarques.
Dans le concepteur d'écran, sélectionnez le nœud Disposition des lignes | Remarques, développez le nœud Ajouter, puis choisissez Autre examinent les données.

La boîte de dialogue Ajouter des données d'écran s'affiche.
Dans la zone de texte Spécifiez les données d'écran pour ajouter, entrez Appointment.Notes, puis choisissez le bouton OK .
Sélectionnez le nœud Remarques, puis choisissez le contrôle Espace de texte dans la liste déroulante.
Dans la fenêtre Propriétés, affectez à la propriété Hauteur à Étirement au conteneur.
Sélectionnez le nœud Disposition des lignes | Détails, développez le nœud Ajouter, puis choisissez Autre examinent les données.

La boîte de dialogue Ajouter des données d'écran s'affiche.
Dans la zone de texte Spécifiez les données d'écran pour ajouter, entrez Customer.Phone, puis choisissez le bouton OK .
Sélectionnez le nœud Téléphone, puis choisissez le contrôle Éditeur de numéros de téléphone dans la liste déroulante.
Développez le nœud Ajouter, puis choisissez Autre examinent les données.

La boîte de dialogue Ajouter des données d'écran s'affiche.
Dans la zone de texte Spécifiez les données d'écran pour ajouter, entrez Customer.Email, puis choisissez le bouton OK .
Sélectionnez le nœud Courrier électronique, puis choisissez le contrôle Éditeur d'adresse de messagerie dans la liste déroulante.

Dans Explorateur de solutions, ouvrez l'écran Accueil .
Dans le concepteur d'écran, sélectionnez le nœud Liste | Upcoming Appointments .
Dans la fenêtre Propriétés, choisissez la propriété Prise d'élément, puis cliquez sur le lien Aucun .
Dans la boîte de dialogue Modifiez la prise d'élément, sélectionnez la case d'option Choisissez une méthode existante, puis choisissez showViewAppointmentDetail dans la liste déroulante.
Dans la liste Tâche, choisissez Enregistrer.
Dans la zone de texte Gardez, entrez UpcomingAppointments.selectedItem, puis choisissez le bouton OK .
Dans la barre de menus, sélectionnez Démarrer le débogage pour exécuter le client mobile.

Dans chaque rendez-vous, une flèche indique que vous pouvez naviguer vers un autre écran.
Tapez un rendez-vous pour afficher l'écran ViewAppointmentDetail .

Pour créer une boîte de dialogue modale

Dans Explorateur de solutions, ouvrez l'écran ViewAppointmentDetail .
Dans le concepteur d'écran, sélectionnez le nœud Boîtes de dialogue, puis sélectionnez le nœud Ajouter une boîte de dialogue .
Dans la fenêtre Propriétés, affectez à la propriété Nom à EditContactInformation.
Développez le nœud Ajouter, puis choisissez Autre examinent les données.

La boîte de dialogue Ajouter des données d'écran s'affiche.
Dans la zone de texte Spécifiez les données d'écran pour ajouter, entrez Appointment.Customer.FirstName, puis choisissez le bouton OK .
Développez le nœud Ajouter, puis choisissez Autre examinent les données.

La boîte de dialogue Ajouter des données d'écran s'affiche.
Dans la zone de texte Spécifiez les données d'écran pour ajouter, entrez Appointment.Customer.LastName, puis choisissez le bouton OK .
Développez le nœud Ajouter, puis choisissez Autre examinent les données.

La boîte de dialogue Ajouter des données d'écran s'affiche.
Dans la zone de texte Spécifiez les données d'écran pour ajouter, entrez Appointment.Customer.Phone, puis choisissez le bouton OK .
Sélectionnez le nœud Téléphone, puis choisissez le contrôle Éditeur de numéros de téléphone dans la liste déroulante.
Développez le nœud Ajouter, puis choisissez Autre examinent les données.

La boîte de dialogue Ajouter des données d'écran s'affiche.
Dans la zone de texte Spécifiez les données d'écran pour ajouter, entrez Appointment.Customer.Email, puis choisissez le bouton OK .
Sélectionnez le nœud Courrier électronique, puis choisissez le contrôle Éditeur d'adresse de messagerie dans la liste.
Dans le volet gauche, le glisser-déplacer Rue, le Ville, le État, et le Code postal sous le nœud de messagerie électronique.

La section résultante Boîtes de dialogue ressemble à l'illustration suivante.

[!REMARQUE]

Au lieu de faire glisser, vous pouvez également ajouter Rue, Ville, Étatles champs, et de Code postal à l'aide de les mêmes étapes que les champs Prénom et de nom de famille .

Pour afficher la boîte de dialogue

Dans Explorateur de solutions, ouvrez l'écran ViewAppointmentDetail .
Dans le concepteur d'écran, ouvrez le menu contextuel du nœud Disposition des lignes | Détails, puis choisissez Bouton Ajouter.
Dans la boîte de dialogue Bouton Ajouter, sélectionnez la case d'option Choisissez une méthode existante, choisissez ShowDialog dans la liste, puis choisissez le bouton OK .
Sélectionnez le nœud Afficher les informations de contact de modification .
Dans la fenêtre Propriétés, affectez à la propriété Nom à Modification.
Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.
Dans le client mobile en cours de exécution, tapez un rendez-vous pour ouvrir un écran Affichez le détail de rendez-vous .
Tapez le bouton Modifier pour afficher la boîte de dialogue.

OK et des boutons Annuler sont inclus automatiquement.

Personnalisez l'interface utilisateur

Vous pouvez personnaliser l'interface utilisateur de votre client non seulement en modifiant les paramètres dans le concepteur d'écran mais également en ajoutant des contrôles personnalisés et en écrivant du code JavaScript.

Pour appliquer la mise en forme personnalisée à l'aide de les bibliothèques JavaScript

Dans Explorateur de solutions, ouvrez l'écran Accueil .
Dans le concepteur d'écran, sélectionnez le nœud Disposition des lignes | Appointment, puis choisissez contrôle personnalisé dans la liste.
Dans la liste Écrire le code, sélectionnez la méthode RowTemplate_render .

Dans l'éditeur de code, ajoutez le code suivant pour la fonction d' RowTemplate_render :

myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

Ce code JavaScript utilise la variable membre d' contentItem.value pour déterminer les éléments à afficher et la méthode d' format pour définir la mise en forme.

Dans Explorateur de solutions, choisissez Affichage des fichiers de la liste dans la barre d'outils.
Dans le menu contextuel du nœud MobileClient, choisissez Gérez les ensembles de NuGet.
Dans la boîte de dialogue Gérez les ensembles de NuGet, sélectionnez le nœud En ligne .
Dans la zone de texte Recherche en ligne, entrez moment.js.
Choisissez le bouton Installer pour installer la bibliothèque de Moment.js, puis choisissez le bouton Fermer .
Dans Explorateur de solutions, développez le nœud MobileClient, puis ouvrez le fichier default.htm .
Dans l'éditeur de code, ajoutez la balise suivante de script après la dernière balise d' </script> :
```
<script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
```
Cette balise ajoute une référence à la bibliothèque de moment.js.
Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.

Le rendez-vous est mis en forme, et le temps et le numéro de téléphone sont ajoutés.

Pour modifier la disposition

Dans Explorateur de solutions, choisissez Affichage logique dans la liste dans la barre d'outils, et l'ouvre l'écran Accueil .
Dans le concepteur d'écran, sélectionnez le nœud Liste | Upcoming Appointments, puis choisissez Liste de mosaïque dans la liste déroulante.
Sélectionnez le nœud contrôle personnalisé | Appointment .
Dans la fenêtre Propriétés, affectez à la propriété Largeur à 280 pixels.
Dans la fenêtre Propriétés, affectez à la propriété Hauteur à 80 pixels.
Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.

Les rendez-vous suivants d'affichages d'écran d'accueil dans une disposition mosaïque- sur.Modifiez la largeur de la fenêtre du navigateur pour montrer comment la disposition des mosaïques règle dynamiquement pour que le bon usage de l'espace horizontal disponible.Cette démonstration montre comment la disposition de liste peut modifier selon l'orientation et la taille de l'écran d'un appareil mobile.

Pour ajouter un titre dynamique d'écran

Dans Explorateur de solutions, ouvrez l'écran ViewAppointmentDetail .
Dans le concepteur d'écran, sélectionnez le nœud Disposition des lignes | Détails .
Dans la liste Écrire le code, choisissez Details_postRender.

Dans l'éditeur de code, ajoutez le code suivant JavaScript :

myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Customer.FirstName + " " +
        contentItem.value.Customer.LastName + " " +
        moment(contentItem.value.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.EndDate).format("h:mma");
    };
};

Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.

Les écrans de rendez-vous- petit groupe indiquent le nom du client et les heures de début et de fin pour le rendez-vous.

Publiez le client

Jusqu'à présent, vous avez examiné votre client en l'affichant dans le navigateur local.Pour accéder au client d'un appareil mobile, vous devez le publier dans internet information services (IIS).

[!REMARQUE]

Vous pouvez également publier un client mobile à l'azure windows comme n'importe quelle application d' LightSwitch .Pour plus d'informations, consultez Comment : Héberger une application sur Windows Azure.

Pour configurer le serveur

Sur le serveur sur lequel vous déploierez l'application, ouvrez Gestionnaire des services Internet (IIS).
Dans le volet de Connexions, développez le nœud du serveur, puis sélectionnez le nœud Site Web par défaut .
Ouvrez le menu contextuel du nœud Site Web par défaut, puis choisissez Ajouter une application.

La boîte de dialogue Ajouter une application s'affiche.
Dans la zone de texte Alias, entrez ContosoMoving.
Dans la zone de texte Chemin d'accès physique, entrez un chemin d'accès pour les fichiers clients (par exemple, C:\inetpub\wwwroot\Contoso), puis choisissez le bouton OK .
Dans le volet central, ouvrez le menu contextuel pour l'icône Authentification, puis choisissez Ouvrir la fonctionnalité.
Dans le volet de Authentification, définissez les valeurs suivantes :

Nom

État

Authentification anonyme

Activé

Emprunt d'identité ASP.NET

Disabled

Authentification par formulaire

Activé

Authentification Windows

Disabled

Nom	État
Authentification anonyme	Activé
Emprunt d'identité ASP.NET	Disabled
Authentification par formulaire	Activé
Authentification Windows	Disabled

Pour publier le client

Dans la liste Déboguer dans la barre d'outils, cliquez sur Version finale.
Dans Explorateur de solutions, sélectionnez le nœud ContosoMoving .
Dans la barre de menus, sélectionnez Build, Publiez ContosoMoving.

L'Assistant de Publication d'application LightSwitch s'affiche.
Dans la page Type d'application, sélectionnez la case d'option Exécutez l'application, puis choisissez le bouton Suivant .
Sur la page l'application de configuration serveur sélectionnez le serveur IIS.
Sur la page Sortie de publication , sélectionnez la case à cocher Publiez à distance sur un serveur maintenant .
Dans la zone de texte URL du service, entrez l'URL du serveur qui exécute IIS où vous souhaitez publier le client.
Dans la zone de texte Site/application, entrez Site Web par défaut/ContosoMoving.
Dans la zone de texte Nom d'utilisateur, entrez le nom d'un utilisateur disposant des autorisations d'administrateur du serveur qui exécute IIS.
Dans la zone de texte Mot de passe, entrez le mot de passe de l'utilisateur, puis choisissez le bouton Suivant .
Dans la page Paramètres de sécurité, sous l'onglet de Administrateur d'application, entrez Nom d'utilisateur, Nom complet, et Mot de passe pour l'utilisateur qui a initialement un accès administratif au client.

Important

Vous aurez besoin de ces informations d'identification pour accéder au client après l'avoir publié.
Sous l'onglet de HTTPS, sélectionnez la case d'option Non, S-HTTP n'est pas obligatoire, puis choisissez le bouton Suivant .

La page Connexions de données s'affiche.
Dans la zone de texte Spécifiez la connexion utilisateur, entrez la chaîne de connexion pour la base de données SQL Server qui hébergera vos données.

Cette base de données peut être sur le même serveur qu'IIS ou sur un autre serveur.

Conseil

Vous pouvez choisir le bouton de sélection pour ouvrir la boîte de dialogue Propriétés de connexion et écrire des propriétés pour construire la chaîne de connexion.
Dans la zone de texte Publier le schéma de base de données, entrez la même chaîne de connexion.
Choisissez le bouton Publier pour publier l'application.

Conseil
Vous pouvez choisir le bouton de sélection pour ouvrir la boîte de dialogue Propriétés de connexion et écrire des propriétés pour construire la chaîne de connexion.

Pour tester le client

Dans la barre d'adresses d'un navigateur Web, entrez http://IISServer/contosomoving/client, où IISServer est le nom du serveur où vous avez publié le client.
Dans les zones de texte Nom d'utilisateur et de Mot de passe, entrez les informations d'identification que vous avez spécifiées pour l'administrateur client, puis choisissez le bouton Se connecter .
Dans la barre de menus, sélectionnez Exemple de données, Créer des exemples de données.

[!REMARQUE]

Les données qui sont entrées au moment de le design ne sont pas publiées, vous devez ajouter les exemples de données à la base de données de production.
Sur l'écran Créer des exemples de données, choisissez le bouton de barre d'outils Ajoutez toutes les exemples de données .

L'exemple de données est créée pour État, Employé, Client, et des entités Gardez .
Dans la barre d'outils, cliquez sur le bouton Enregistrer .
Dans la barre d'adresses du navigateur, entrez http://IISServer/contosomoving/mobileclient, où IISServer est le nom du serveur où vous avez publié le client.
Lorsque vous êtes invité à entrer un nom d'utilisateur et un mot de passe, entrez ACarter en tant qu'utilisateur et pass@word1 comme un mot de passe.

Les rendez-vous suivants pour le Carter d'Adam s'affichent.

Ajoutez un contrôle personnalisé des photos de téléchargement

L'écran de détails de rendez-vous a un onglet de Photos de rendez-vous afin qu'un spécialiste de planification pour déplacer Contoso puisse prendre des photos d'un site de client pour estimer le travail plus exactement.Pour activer cette tâche, vous ajouterez un contrôle personnalisé au client.

Pour ajouter un contrôle personnalisé

Dans Explorateur de solutions, choisissez Affichage des fichiers dans la liste dans la barre d'outils.
Ouvrez le menu contextuel du nœud Scripts, choisissez Ajouter, puis choisissez Élément existant.
Dans la boîte de dialogue Ajouter un élément existant, naviguez jusqu'au dossier ContosoMoving, ouvrez le dossier Ressources, puis ouvrez les dossiers ImageUploader .
Sélectionnez les fichiers base64-file-encoder et de télépartageur image, puis choisissez le bouton Ajouter .
Ouvrez le fichier default.htm puis, dans l'éditeur de code, ajoutez la référence suivante à image-uploader.js à la fin de le bloc de références de script :
```
<script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
```
Dans Explorateur de solutions, choisissez Affichage logique dans la liste dans la barre d'outils, puis ouvrez l'écran ViewAppointmentDetail .
Dans le concepteur d'écran, sélectionnez le nœud Photo rendez-vous, puis choisissez Disposition des colonnes dans la liste.
Ouvrez le menu contextuel du nœud Boîtes de dialogue, puis choisissez Ajouter une boîte de dialogue.
Dans la fenêtre Propriétés, affectez à la propriété Nom à ImageUploader.
Affectez la valeur des propriétés Hauteur et de Largeur à Étirement au conteneur.
Dans le volet gauche du concepteur d'écran, développez le nœud AppointmentPhotos, puis faites glisser le nœud Élément sélectionné au nœud Disposition des lignes | Gestionnaire d'images dans le volet central.
Supprimez le nœud que vous venez d'ajouter Gardez .
Sélectionnez le nœud Image, puis choisissez contrôle personnalisé dans la liste.
Dans la fenêtre Propriétés, cliquez sur le lien hypertexte du La modification affichent le code .
Dans l'éditeur de code, ajoutez le code suivant à la fonction de Picture1_render :
```
createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
```
Ce code initialise le contrôle personnalisé d'ImageUploader lorsque l'écran est affiché.
Dans le concepteur d'écran, ouvrez le menu contextuel du nœud Disposition des lignes | Appointment Photos, puis choisissez Bouton Ajouter.
Dans la boîte de dialogue Bouton Ajouter, sélectionnez la case d'option Choisissez une méthode existante .
Dans la liste showDialog, choisissez AppointmentPhotos.AddAndEditNew.
Dans la liste Naviguer vers, choisissez Gestionnaire d'images, puis choisissez le bouton OK .
Faites glisser le bouton Ajoutez la photo rendez-vous afin qu'il s'affiche sur le nœud Liste | Appointment Photos .
Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.
Dans le client en cours de exécution, tapez un rendez-vous.
Sur l'écran spécifique de rendez-vous, tapez Photos de rendez-vous tableau.
Tapez le bouton Ajoutez la photo rendez-vous pour ouvrir la boîte de dialogue Gestionnaire d'images .

Mappez l'adresse du client

L'organisation que le spécialiste doit également être en mesure de trouver le site de client, si vous suivant ajoute les fonctionnalités de mappage à l'aide d'un contrôle de carte bing.

Pour ajouter un contrôle de mappage

Dans Explorateur de solutions, choisissez Affichage des fichiers dans la liste dans la barre d'outils.
Ouvrez le menu contextuel du nœud Scripts, choisissez Ajouter, puis choisissez Élément existant.
Dans la boîte de dialogue Ajouter un élément existant, naviguez jusqu'au dossier ContosoMoving, puis ouvrez le dossier Ressources .
Sélectionnez le fichier lightswitch.bing-maps.js, puis choisissez le bouton Ajouter .
Ouvrez le fichier default.htm puis, dans l'éditeur de code, ajoutez une référence au début du bloc de références de script :
```
<script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
```

À la fin de le bloc de références de script, ajoutez une référence au fichier JavaScript :

<script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>

Dans Explorateur de solutions, choisissez Affichage logique de la liste dans la barre d'outils, puis ouvrez l'écran ViewAppointmentDetail .
Dans le concepteur d'écran, ouvrez le menu contextuel du nœud Onglets, puis choisissez Ajouter un onglet.
Dans la fenêtre Propriétés, affectez à la propriété Nom à Carte.
Faites glisser le nœud Disposition des lignes | Carte afin qu'il s'affiche sur le nœud Disposition des lignes | Remarques .
Ouvrez le menu contextuel du nœud Disposition des lignes | Carte, puis choisissez Ajouter un contrôle personnalisé.

La boîte de dialogue Ajouter un contrôle personnalisé s'affiche.
Dans la zone de texte Spécifiez les données du nouveau contrôle personnalisé, entrez Gardez, puis choisissez le bouton OK .
Dans la fenêtre Propriétés, cliquez sur le lien hypertexte du La modification affichent le code .

Dans l'éditeur de code, ajoutez les méthodes utilitaires suivantes avant que la fonction Appointment_render :

function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        width: "600",
        height: "400"
    });
};

Ajoutez le code suivant à la fonction Appointment_render :

mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

Ce code lie les champs de la nomination au contrôle de mappage lorsque l'écran est affiché.

Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.
Dans le client en cours de exécution, tapez un rendez-vous.
Sur l'écran spécifique de rendez-vous, tapez l'onglet de Carte pour afficher une carte de l'adresse du client.

Ajoutez la personnalisation

Ensuite vous modifierez le titre du client par un nom plus explicite que MobileClient, et vous ajouterez un logo d'entreprise mobile Contoso pour personnaliser le client.

Pour modifier le titre

Dans Explorateur de solutions, choisissez Affichage des fichiers de la liste dans la barre d'outils.
Ouvrez le fichier default.htm puis, dans l'éditeur de code, remplacez l'élément d' <title>MobileClient</title> par le code suivant :
```
<title>Contoso Moving Mobile</title>
```

Pour ajouter une icône

Dans Explorateur de solutions, développez les nœuds Contenu et de Images .
Supprimez les fichiers user-logo.png et d' user-splash-screen.png .
Ouvrez le menu contextuel du nœud Images, choisissez Ajouter, puis choisissez Élément existant.
Dans la boîte de dialogue Ajouter un élément existant, naviguez jusqu'au dossier ContosoMoving, puis ouvrez le dossier Ressources .
Sélectionnez le fichier logo.png, puis choisissez le bouton Ajouter .
Dans Explorateur de solutions, ouvrez le menu contextuel du nœud logo.png, choisissez Renommer, puis entrez user-logo.png.
Ouvrez le menu contextuel du nœud Images, choisissez Ajouter, puis choisissez Élément existant.
Dans la boîte de dialogue Ajouter un élément existant, sélectionnez le fichier logo.png, puis choisissez le bouton Ajouter .
Dans Explorateur de solutions, ouvrez le menu contextuel du nœud logo.png, choisissez Renommer, puis entrez user-splash-screen.png.
Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.

[!REMARQUE]

Vous devrez peut-être effacer le cache du navigateur pour que les modifications apparaissent.

Modifiez le thème

Feuilles de style en cascade (CSS) pour définir le thème d'un client.Vous pouvez modifier le thème par défaut pour modifier l'apparence de votre client, ou vous pouvez substituer ce thème en modifiant le fichier .css.Vous utiliserez un outil Web, ThemeRoller, pour créer le fichier d'a.css avec un thème personnalisé.

Pour basculer entre les thèmes

Dans Explorateur de solutions, choisissez Affichage des fichiers de la liste dans la barre d'outils.
Ouvrez le fichier default.htm puis, dans l'éditeur de code, remplacez la ligne <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> par le code suivant :
```
<link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" />
```
Dans Explorateur de solutions, développez le nœud Contenu, puis ouvrez le fichier user-customization.css .
Recherchez le fichier pour le commentaire /* if light theme change ‘white’ to ‘black */, puis remplacez msls-white-icons par la chaîne suivante dans les quatre occurrences :
```
msls-black-icons
```
Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.

Pour personnaliser un thème existant

Dans votre navigateur Web, accédez ThemeRoller au site Web.
Dans la barre d'outils de ThemeRoller, cliquez sur le bouton Importation ou mise à jour .

La boîte de dialogue Importer un thème s'affiche.
Dans Visual Studio, dans Explorateur de solutions, choisissez Affichage des fichiers de la liste dans la barre d'outils.
Développez le nœud Contenu, puis ouvrez le fichier light-theme.css .
Dans l'éditeur de code, copiez le contenu entier du fichier.
Dans ThemeRoller, collez le contenu du fichier light-theme.css dans la boîte de dialogue Importer un thème, puis choisissez le bouton Importer .
Dans le volet gauche, sélectionnez l'onglet de Global, puis développez le nœud Rayons faisants le coin .
Dans la zone de texte Groupe, entrez 0.8em.
Dans la zone de texte Bouton, entrez 1.5em.

Les éléments d'interface utilisateur dans le volet droit ont maintenant arrondi des angles.
Sous l'onglet de B, cliquez sur le lien Supprimer .

LightSwitch utilise les paramètres uniquement Global et d' Un exemple .Si vous supprimez des exemples supplémentaires, la taille du fichier .css diminue.
Répétez le processus pour supprimer des exemples supplémentaires.
Dans le volet droit, faites glisser une couleur dans la palette de couleurs sur la zone d'arrière-plan Un exemple.
Faites glisser une autre couleur sur l'élément Cases d'option 1 .

Tous les éléments associés sont également la couleur.Lorsque vous désignez un élément, il devient une couleur complément, indiquant la couleur de sélection.
Dans la barre d'outils de ThemeRoller, choisissez le bouton Télécharger .
Dans la boîte de dialogue Téléchargez le thème, choisissez le bouton Téléchargez le zip .
Extrayez le contenu du fichier compressé dans un dossier local.
Dans Explorateur de solutions, ouvrez le menu contextuel du nœud Contenu, choisissez Ajouter, puis choisissez Élément existant.
Dans la boîte de dialogue Ajouter un élément existant, accédez au dossier où vous avez extrait les fichiers, sélectionnez le fichier my-item.css, puis choisissez le bouton Ajouter .
Ouvrez le fichier default.htm, recherchez la ligne <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" /> dans l'éditeur de code, puis remplacez la ligne contenant le code suivant :
```
<link rel="stylesheet" type="text/css" href="Content/my-theme.css" charset="utf-8" />
```
Dans la barre de menus, sélectionnez Déboguer, Démarrer le débogage pour exécuter le client.

Republiez le client

Maintenant que le client est terminé, vous le republierez à IIS.

Pour republier le client

Dans Explorateur de solutions, sélectionnez le nœud ContosoMoving .
Dans la barre de menus, sélectionnez Build, Publiez ContosoMoving.
Dans Assistant Publication d'application LightSwitch, choisissez le bouton Publier pour publier le client.
Dans la barre d'adresses du navigateur, entrez http://IISServer/contosomoving/mobileclient, où IISServer est le nom du serveur où vous avez publié le client.
Lorsque vous êtes invité à entrer un nom d'utilisateur et un mot de passe, entrez ACarter en tant qu'utilisateur et pass@word1 comme un mot de passe.

Le client reflète les modifications les plus récentes que vous avez apportées.

[!REMARQUE]

Vous devrez peut-être effacer le cache du navigateur.

Voir aussi

Autres ressources

Écrans de client HTML pour les applications LightSwitch

Partager via