Schnellstart: Anzeigen von Kontaktdaten in einer Visitenkarte (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 wird erläutert, wie Sie einen Kontakt erstellen, Daten darauf anwenden und diese Daten dann in einer Visitenkarte anzeigen.
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 Daten
Erstellen Sie eine Instanz eines Windows.ApplicationModel.Contacts.Contact-Elements, und weisen Sie diese einer Variablen zu. Weisen Sie dem Contact-Element dann die E-Mail-Adresse, die Telefonnummer oder beides zu (von einem Benutzer über die UI bereitgestellt).
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;
}
}
Anzeigen von Kontaktdaten in einer Visitenkarte
Rufen Sie die ContactManager.ShowContactCard(Contact, Rect, Placement)-Methode auf, um die zuvor bereitgestellten Kontaktdaten in einer Visitenkarte anzuzeigen.
// 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");
}
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/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");
}
}
})();
Zusammenfassung und nächste Schritte
Wir haben einen Kontakt erstellt, Daten darauf angewendet und diese Daten dann in einer Visitenkarte angezeigt.
Sie verfügen jetzt über grundlegende Kenntnisse darüber, wie Sie Kontaktdaten in einer Visitenkarte 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.
Als Nächstes erstellen wir einen Kontakt, wenden erste Daten darauf an, zeigen die ersten Daten in einer Visitenkarte an und aktualisieren die Visitenkarte dann verzögert mit weiteren Kontaktdaten.
Anzeigen der ersten Kontaktdaten und späteres Anwenden weiterer Kontaktdaten