Démarrage rapide : affichage des données de contact initiales, puis ajout de données (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 expliquer comment 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.
Remarque La carte de visite arrivera à expiration en quatre secondes. Si une mise à jour n’a pas lieu dans les quatre secondes, l’interface utilisateur de la carte de visite est finale, et ne peut plus être mise à jour. Dans notre exemple, nous allons forcer un retard de deux secondes pour simuler le téléchargement de données de contact supplémentaires à partir du réseau.
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 au Contact des données initiales.
// Create contact object with small set of initial data to display.
var contact = new ContactsNS.Contact();
contact.firstName = "Gail";
contact.lastName = "Wilson";
var email = new ContactsNS.ContactEmail();
email.address = "gail@contoso.com";
contact.emails.append(email);
Afficher les données de contact initiales dans une carte de visite
Appelez la méthode ContactManager.ShowDelayLoadedContactCard pour afficher les données de contact initiales dans une carte de visite. ShowDelayLoadedContactCard retourne un objet ContactCardDelayedDataLoader utilisé pour mettre à jour la carte de visite de façon différée.
// 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 };
var delayedDataLoader = ContactsNS.ContactManager.showDelayLoadedContactCard(
contact,
selectionRect,
Windows.UI.Popups.Placement.below // The contact card placement can change when it is updated with more data. For improved user experience, specify placement
// of the card so that it has space to grow and will not need to be repositioned. In this case, default placement first places
// the card above the button because the card is small, but after the card is updated with more data, the operating system moves
// the card below the button to fit the card's expanded size. Specifying that the contact card is placed below at the beginning
// avoids this repositioning.
);
var message = "ContactManager.showDelayLoadedContactCard() was called.\r\n";
WinJS.log && WinJS.log(message, "sample", "status");
Mettre à jour la carte de visite en différé avec des données de contact supplémentaires
Ajoutez des données supplémentaires au contact, puis appelez ContactCardDelayedDataLoader.SetData pour mettre à jour la carte de visite avec ces données.
// Simulate downloading more data from the network for the contact.
message += "Downloading data ...\r\n";
WinJS.log && WinJS.log(message, "sample", "status");
downLoadContactDataAsync(contact).then(
function complete(result) {
if (result.hasMoreData) {
// We get more data - update the contact card with the full set of contact data.
delayedDataLoader.setData(result.fullContact);
message += "ContactCardDelayedDataLoader.setData() was called.\r\n";
WinJS.log && WinJS.log(message, "sample", "status");
}
else {
// No more data to show - just close the data loader to tell the contact card UI all data has been set.
delayedDataLoader.close();
}
},
function error(e) {
WinJS.log && WinJS.log(e.message, "sample", "error");
});
function downLoadContactDataAsync(contact) {
return new WinJS.Promise(function (comp) {
// Simulate the download latency by delaying the execution by 2 seconds.
setTimeout(function () {
// Add more data to the contact object.
var workEmail = new ContactsNS.ContactEmail();
workEmail.address = "gail@adatum.com";
workEmail.kind = ContactsNS.ContactEmailKind.work;
contact.emails.append(workEmail);
var homePhone = new ContactsNS.ContactPhone();
homePhone.number = "(555) 555-0100";
homePhone.kind = ContactsNS.ContactPhoneKind.home;
contact.phones.append(homePhone);
var workPhone = new ContactsNS.ContactPhone();
workPhone.number = "(555) 555-0111";
workPhone.kind = ContactsNS.ContactPhoneKind.work;
contact.phones.append(workPhone);
var mobilePhone = new ContactsNS.ContactPhone();
mobilePhone.number = "(555) 555-0112";
mobilePhone.kind = ContactsNS.ContactPhoneKind.mobile;
contact.phones.append(mobilePhone);
var address = new ContactsNS.ContactAddress();
address.streetAddress = "One Microsoft Way";
address.locality = "Redmond";
address.region = "WA";
address.country = "USA";
address.postalCode = "23456";
address.kind = ContactsNS.ContactAddressKind.home;
contact.addresses.append(address);
comp({ fullContact: contact, hasMoreData: true });
},
2000);
});
}
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/ScenarioShowContactCardDelayLoad.html", {
ready: function (element, options) {
// Use element.querySelector() instead of document.getElementById() to ensure that the correct default.html page is targeted.
element.querySelector("#buttonShowContactCardDelayLoad").addEventListener("click", ShowContactCardDelayLoad, false);
}
});
function downLoadContactDataAsync(contact) {
return new WinJS.Promise(function (comp) {
// Simulate the download latency by delaying the execution by 2 seconds.
setTimeout(function () {
// Add more data to the contact object.
var workEmail = new ContactsNS.ContactEmail();
workEmail.address = "gail@adatum.com";
workEmail.kind = ContactsNS.ContactEmailKind.work;
contact.emails.append(workEmail);
var homePhone = new ContactsNS.ContactPhone();
homePhone.number = "(555) 555-0100";
homePhone.kind = ContactsNS.ContactPhoneKind.home;
contact.phones.append(homePhone);
var workPhone = new ContactsNS.ContactPhone();
workPhone.number = "(555) 555-0111";
workPhone.kind = ContactsNS.ContactPhoneKind.work;
contact.phones.append(workPhone);
var mobilePhone = new ContactsNS.ContactPhone();
mobilePhone.number = "(555) 555-0112";
mobilePhone.kind = ContactsNS.ContactPhoneKind.mobile;
contact.phones.append(mobilePhone);
var address = new ContactsNS.ContactAddress();
address.streetAddress = "One Microsoft Way";
address.locality = "Redmond";
address.region = "WA";
address.country = "USA";
address.postalCode = "23456";
address.kind = ContactsNS.ContactAddressKind.home;
contact.addresses.append(address);
comp({ fullContact: contact, hasMoreData: true });
},
2000);
});
}
function ShowContactCardDelayLoad(evt) {
// Create contact object with small set of initial data to display.
var contact = new ContactsNS.Contact();
contact.firstName = "Gail";
contact.lastName = "Wilson";
var email = new ContactsNS.ContactEmail();
email.address = "gail@contoso.com";
contact.emails.append(email);
// 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 };
var delayedDataLoader = ContactsNS.ContactManager.showDelayLoadedContactCard(
contact,
selectionRect,
Windows.UI.Popups.Placement.below // The contact card placement can change when it is updated with more data. For improved user experience, specify placement
// of the card so that it has space to grow and will not need to be repositioned. In this case, default placement first places
// the card above the button because the card is small, but after the card is updated with more data, the operating system moves
// the card below the button to fit the card's expanded size. Specifying that the contact card is placed below at the beginning
// avoids this repositioning.
);
var message = "ContactManager.showDelayLoadedContactCard() was called.\r\n";
WinJS.log && WinJS.log(message, "sample", "status");
// Simulate downloading more data from the network for the contact.
message += "Downloading data ...\r\n";
WinJS.log && WinJS.log(message, "sample", "status");
downLoadContactDataAsync(contact).then(
function complete(result) {
if (result.hasMoreData) {
// We get more data - update the contact card with the full set of contact data.
delayedDataLoader.setData(result.fullContact);
message += "ContactCardDelayedDataLoader.setData() was called.\r\n";
WinJS.log && WinJS.log(message, "sample", "status");
}
else {
// No more data to show - just close the data loader to tell the contact card UI all data has been set.
delayedDataLoader.close();
}
},
function error(e) {
WinJS.log && WinJS.log(e.message, "sample", "error");
});
}
})();
Récapitulatif
Nous avons créé un contact, lui avons ajouté des données initiales, avons affiché ces données initiales dans une carte de visite, puis mis à jour cette carte de visite en différé avec des données supplémentaires.
Vous disposez désormais des connaissances de base pour afficher des données de contacts dans une carte de visite en différé. 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.