Partilhar via


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

Tópicos relacionados

Exemplo da API do Gerenciador de Contatos