Démarrage rapide : affichage des données de contact dans une carte de visite (HTML)
[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Ici, nous allons vous montrer comment créer un contact, lui ajouter des données et afficher ces données dans une carte de visite.
Prérequis
- Nous vous recommandons de vous familiariser avec Microsoft Visual Studio et ses modèles connexes.
- Nous vous recommandons de vous familiariser avec le développement JavaScript.
Créer un contact et lui ajouter des données
Créez une instance de Windows.ApplicationModel.Contacts.Contact et attribuez-le à une variable. Appliquez ensuite au Contact l’adresse de messagerie et/ou le numéro de téléphone fournis par un utilisateur dans l’interface utilisateur.
var emailAddress = document.getElementById("inputEmailAddress").value;
var phoneNumber = document.getElementById("inputPhoneNumber").value;
if ((emailAddress.length === 0) && (phoneNumber.length === 0)) {
WinJS.log && WinJS.log("You must enter an email address and/or phone number of the contact for the system to search and show the contact card.", "sample", "error");
}
else {
// Create input contact object for calling ContactManager.showContactCard().
var contact = new ContactsNS.Contact();
if (emailAddress.length > 0) {
if (emailAddress.length <= MAX_EMAIL_ADDRESS_LENGTH) {
var email = new ContactsNS.ContactEmail();
email.address = emailAddress;
contact.emails.append(email);
}
else {
WinJS.log && WinJS.log("The email address you entered is too long.", "sample", "error");
return;
}
}
if (phoneNumber.length > 0) {
if (phoneNumber.length <= MAX_PHONE_NUMBER_LENGTH) {
var phone = new ContactsNS.ContactPhone();
phone.number = phoneNumber;
contact.phones.append(phone);
}
else {
WinJS.log && WinJS.log("The phone number you entered is too long.", "sample", "error");
return;
}
}
Afficher les données de contact dans une carte de visite
Appelez la méthode ContactManager.ShowContactCard(Contact, Rect, Placement) pour afficher les données de contact précédemment fournies dans une carte de visite.
// Get the selection rect of the button pressed to show contact card.
var boundingRect = evt.srcElement.getBoundingClientRect();
var selectionRect = { x: boundingRect.left, y: boundingRect.top, width: boundingRect.width, height: boundingRect.height };
ContactsNS.ContactManager.showContactCard(contact, selectionRect, Windows.UI.Popups.Placement.default);
WinJS.log && WinJS.log("ContactManager.showContactCard() was called.", "sample", "status");
}
Utiliser la carte de visite
Vous pouvez utiliser la carte de visite pour effectuer ces opérations, notamment l’ajout du contact à l’application Contacts, la récupération de détails sur le contact s’il se trouve déjà dans l’application Contacts, ou l’appel d’un numéro de téléphone associé au contact.
Exemple complet
Cet exemple utilise Contact et ContactManager pour créer un contact et pour afficher les données de contact dans une carte de visite.
(function () {
"use strict";
var ContactsNS = Windows.ApplicationModel.Contacts;
var page = WinJS.UI.Pages.define("/html/ScenarioShowContactCard.html", {
ready: function (element, options) {
// Use element.querySelector() instead of document.getElementById() to ensure that the correct default.html page is targeted.
element.querySelector("#buttonShowContactCard").addEventListener("click", ShowContactCard, false);
}
});
// Length limits allowed by the API
var MAX_EMAIL_ADDRESS_LENGTH = 321;
var MAX_PHONE_NUMBER_LENGTH = 50;
function ShowContactCard(evt) {
var emailAddress = document.getElementById("inputEmailAddress").value;
var phoneNumber = document.getElementById("inputPhoneNumber").value;
if ((emailAddress.length === 0) && (phoneNumber.length === 0)) {
WinJS.log && WinJS.log("You must enter an email address and/or phone number of the contact for the system to search and show the contact card.", "sample", "error");
}
else {
// Create input contact object for calling ContactManager.showContactCard().
var contact = new ContactsNS.Contact();
if (emailAddress.length > 0) {
if (emailAddress.length <= MAX_EMAIL_ADDRESS_LENGTH) {
var email = new ContactsNS.ContactEmail();
email.address = emailAddress;
contact.emails.append(email);
}
else {
WinJS.log && WinJS.log("The email address you entered is too long.", "sample", "error");
return;
}
}
if (phoneNumber.length > 0) {
if (phoneNumber.length <= MAX_PHONE_NUMBER_LENGTH) {
var phone = new ContactsNS.ContactPhone();
phone.number = phoneNumber;
contact.phones.append(phone);
}
else {
WinJS.log && WinJS.log("The phone number you entered is too long.", "sample", "error");
return;
}
}
// Get the selection rect of the button pressed to show contact card.
var boundingRect = evt.srcElement.getBoundingClientRect();
var selectionRect = { x: boundingRect.left, y: boundingRect.top, width: boundingRect.width, height: boundingRect.height };
ContactsNS.ContactManager.showContactCard(contact, selectionRect, Windows.UI.Popups.Placement.default);
WinJS.log && WinJS.log("ContactManager.showContactCard() was called.", "sample", "status");
}
}
})();
Récapitulatif et étapes suivantes
Nous avons créé un contact, lui avons ajouté des données et avons affiché ces données dans une carte de visite.
À présent, vous connaissez les bases pour afficher des données de contacts dans une carte de visite. Téléchargez l’exemple d’API du Gestionnaire de contacts dans la galerie de code pour obtenir l’exemple compte d’utilisation des contacts et du gestionnaire de contacts.
Ensuite, nous allons créer un contact, lui ajouter des données initiales, afficher ces données initiales dans une carte de visite, puis mettre à jour cette carte de visite de façon différée avec des données supplémentaires.
Affichage des données de contact initiales, et ajout de données supplémentaires