Guia de início rápido: mostrando dados de contato em um cartão de contato (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
Aqui, mostraremos como criar um contato, aplicar dados a ele e depois exibir esses dados em um cartão de contato.
Pré-requisitos
- Recomendamos que você se familiarize com o Microsoft Visual Studio e com os modelos a ele associados.
- Recomendamos que você se familiarize com o desenvolvimento em JavaScript.
Criar um contato e aplicar dados a ele
Crie uma instância de um Windows.ApplicationModel.Contacts.Contact e a atribua a uma variável. Em seguida, aplique a Contact o endereço de email e/ou o número de telefone que foram fornecidos na interface do usuário por um usuário.
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;
}
}
Mostrar os dados de contato em um cartão de contato
Chame o método ContactManager.ShowContactCard(Contact, Rect, Placement) para mostrar os dados de contato anteriormente fornecidos em um cartão de contato.
// 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");
}
Usar o cartão de contato
Você pode usar o cartão de contato para realizar operações, como adicionar o contato ao aplicativo Pessoas, obter detalhes sobre o contato, se ele já estiver no aplicativo Pessoas, ou chamar um número de telefone associado a esse contato.
Exemplo completo
Este exemplo usa Contact e ContactManager para criar um contato e mostrar seus dados em um cartão de contato.
(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");
}
}
})();
Resumo e próximas etapas
Criamos um contato, aplicamos dados a ele e depois exibimos esses dados em um cartão de contato.
Agora, você já conhece as noções básicas de como mostrar dados de contato em um cartão de contato. Baixe o Exemplo da API do Gerenciador de Contatos na galeria de códigos para ver o exemplo completo de como usar contatos e o gerenciador de contatos.
Em seguida, criaremos um contato, aplicaremos dados iniciais a ele, mostraremos esses dados em um cartão de contato e depois atualizaremos o cartão de contato com atraso usando mais dados de contato.
Mostrando dados de contato iniciais e, mais tarde, aplicando mais dados de contato