快速入門：在連絡人卡片顯示連絡人資料 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
這裡，我們將說明如何建立連絡人、將資料套用到連絡人，然後在連絡人卡片顯示該資料。
先決條件
- 我們建議您熟悉 Microsoft Visual Studio 以及相關範本。
- 我們建議您先熟悉 JavaScript 開發。
建立連絡人並套用資料
建立 Windows.ApplicationModel.Contacts.Contact 的執行個體，並將它指派給一個變數。然後，在 Contact 套用使用者透過 UI 提供的電子郵件地址、電話號碼或兩者。
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;
}
}
在連絡人卡片顯示連絡人資料
呼叫 ContactManager.ShowContactCard(Contact, Rect, Placement) 方法，以顯示之前在連絡人卡片提供的連絡人資料。
// 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");
}
使用連絡人卡片
您可以使用連絡人卡片執行作業，例如將連絡人新增到連絡人應用程式、如果連絡人已在連絡人應用程式中，可取得連絡人的詳細資料，或者撥打與連絡人相關的電話號碼。
完整範例
這個範例使用 Contact 和 ContactManager 來建立連絡人，並在連絡人卡片顯示連絡人資料。
(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");
}
}
})();
摘要與後續步驟
我們建立好連絡人、將資料套用到連絡人，然後在連絡人卡片顯示該資料。
現在您對於如何顯示連絡人卡片中的連絡人資料已經有基本的了解。從程式碼庫下載連絡人管理員 API 範例，查看如何使用連絡人和連絡人管理員的完整範例。
接著，我們將建立連絡人、將初始資料套用到連絡人、在連絡人卡片顯示初始資料，然後以延遲的方式使用更多連絡人資料更新該連絡人卡片。