Schnellstart: Anzeigen der ersten Kontaktdaten und späteres Anwenden weiterer Kontaktdaten (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Hier erfahren Sie, wie Sie einen Kontakt erstellen, erste Daten darauf anwenden, die ersten Daten in einer Visitenkarte anzeigen und die Visitenkarte dann verzögert mit weiteren Kontaktdaten aktualisieren.
Hinweis Der Timeout für die Visitenkarte erfolgt nach vier Sekunden. Wenn ein Update also nicht innerhalb von vier Sekunden durchgeführt wird, gilt die UI der Visitenkarte als endgültig, und es können keine weiteren Updates mehr angewendet werden. In unserem Beispiel erzwingen wir eine Verzögerung von zwei Sekunden, um für den Kontakt das Herunterladen weiterer Daten aus dem Netzwerk zu simulieren.
Voraussetzungen
- Wir empfehlen Ihnen, sich mit Microsoft Visual Studio und den zugehörigen Vorlagen vertraut zu machen.
- Außerdem ist es ratsam, sich mit der JavaScript-Entwicklung vertraut machen.
Erstellen eines Kontakts und Anwenden von ersten Daten
Erstellen Sie eine Instanz eines Windows.ApplicationModel.Contacts.Contact-Elements, und weisen Sie diese einer Variablen zu. Wenden Sie anschließend einige erste Daten auf das Contact-Element an.
// 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);
Anzeigen erster Kontaktdaten in einer Visitenkarte
Rufen Sie die ContactManager.ShowDelayLoadedContactCard-Methode auf, um die ersten Kontaktdaten in einer Visitenkarte anzuzeigen. Von ShowDelayLoadedContactCard wird ein ContactCardDelayedDataLoader-Objekt zurückgegeben, das zum Aktualisieren der Visitenkarte mit Verzögerung verwendet wird.
// 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");
Verzögertes Aktualisieren der Visitenkarte mit weiteren Kontaktdaten
Füllen Sie den Kontakt mit weiteren Daten auf, und rufen Sie dann ContactCardDelayedDataLoader.SetData auf, um die Visitenkarte mit diesen Daten zu aktualisieren.
// 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);
});
}
Verwenden der Visitenkarte
Sie können die Visitenkarte zum Durchführen von Vorgängen verwenden, z. B. zum Hinzufügen des Kontakts zur Kontakte-App, Abrufen von Details zum Kontakt, sofern er bereits in der Kontakte-App vorhanden ist, oder Anrufen einer Telefonnummer, die dem Kontakt zugeordnet ist.
Vollständiges Beispiel
In diesem Beispiel werden die Elemente Contact und ContactManager verwendet, um einen Kontakt zu erstellen und die Daten des Kontakts in einer Visitenkarte anzuzeigen.
(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");
});
}
})();
Zusammenfassung
Wie haben einen Kontakt erstellt, erste Daten darauf angewendet, die ersten Daten in einer Visitenkarte angezeigt und die Visitenkarte dann verzögert mit weiteren Kontaktdaten aktualisiert.
Sie verfügen jetzt über grundlegende Kenntnisse darüber, wie Sie Kontaktdaten auf einer Visitenkarte verzögert anzeigen. Laden Sie das Beispiel zur Kontakt-Manager-API aus der Codegalerie herunter, um das vollständige Beispiel zur Verwendung von Kontakten und des Kontakt-Managers zu erhalten.