다음을 통해 공유


빠른 시작: 접촉 동작 처리(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

앱이 다수의 접촉 동작에 대해 활성화되면(Windows.ApplicationModel.Contacts.ContactLaunchActionVerbs) Windows.UI.WebUIWindows.ApplicationModel.Activation 네임스페이스를 통해 앱에 데이터를 제공할 수 있습니다. 여기서는 사용자가 연락처에 전화를 걸거나 메시지를 보내거나, 연락처의 주소에 대한 지도를 가져올 때 앱 활성화를 처리하는 방법을 보여 줍니다. 이러한 앱 활성화 동작은 Windows Search 환경이나 앱 내부에서 검색한 연락처 카드에서 발생할 수 있습니다. 연락처 카드는 ContactManager.ShowContactCardContactManager.ShowDelayLoadedContactCard 메서드를 사용하여 앱 내부에서 표시할 수 있습니다. 접촉 동작에 대한 앱 활성화 처리는 Windows 8.1부터 지원됩니다.

여기서는 접촉 동작 처리 샘플을 참조합니다. 이 샘플은 Windows 스토어 앱 내부에서 Windows.UI.WebUI 네임스페이스의 API를 통해 접촉 동작에 대해 앱 활성화를 처리하는 방법을 보여 줍니다.

샘플은 다음 세 가지 시나리오를 제공합니다.

  1. 전화 걸기 활성화 처리(ContactLaunchActionVerbs.call)
  2. 메시지 전송 활성화 처리(ContactLaunchActionVerbs.message)
  3. 주소 매핑 활성화 처리(ContactLaunchActionVerbs.map)

사전 요구 사항

  • Microsoft Visual Studio 및 관련 템플릿에 대해 잘 알고 있는 것이 좋습니다.
  • JavaScript 개발에 대해 잘 알고 있는 것이 좋습니다.

앱이 지원해야 하는 동작별로 매니페스트 등록 포함

AppxManifest.xml 또는 Package.appxmanifest 파일에서 패키지 요소를 업데이트하여 Windows 8.1 매니페스트 스키마를 허용하고 앱이 지원해야 하는 동작별로 매니페스트 등록을 포함합니다. 이 등록을 포함하면 임의의 접촉 동작이나 프로토콜 스키마가 발생할 때 앱이 시작될 수 있습니다.

<Package xmlns="https://schemas.microsoft.com/appx/2010/manifest" xmlns:m2="https://schemas.microsoft.com/appx/2013/manifest">
.
.
      <Extensions>
        <Extension Category="windows.protocol">
          <Protocol Name="tel"/>
        </Extension>        
        <m2:Extension Category="windows.contact">
          <m2:Contact>
            <m2:ContactLaunchActions>
              <m2:LaunchAction Verb="call">
                <m2:ServiceId>telephone</m2:ServiceId>
              </m2:LaunchAction>
              <m2:LaunchAction Verb="message">
                <m2:ServiceId>skype.com</m2:ServiceId>
              </m2:LaunchAction>            
              <m2:LaunchAction Verb="map"/>
            </m2:ContactLaunchActions>
          </m2:Contact>
        </m2:Extension>
      </Extensions>      

작업할 시나리오 결정

contact 또는 protocol Windows.ApplicationModel.Activation.ActivationKind 활성화 유형이 발생하면 앱이 시작됩니다.

작업할 시나리오는 수행되는 접촉 동작에 따라 결정됩니다. 예를 들어 사용자가 연락처의 전화 번호에서 통화를 클릭하는 경우 이벤트 작업은 ContactLaunchActionVerbs.call이 되고 작업할 시나리오는 S1-Call이 됩니다.

Windows.Contact.call 작업을 구현하는 앱이 tel: protocol에 대한 지원도 구현하도록 만드는 것이 좋기 때문에 protocol Windows.ApplicationModel.Activation.ActivationKind 감지 시 S1-Call 시나리오에 대해서도 조치를 취해야 합니다.

    function activated(eventObject) {
        var url = null;
        var arg = null;

        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.contact) {
            // If activated for a contact, launch the appropriate action handling scenario.
            arg = eventObject.detail;
            if (eventObject.detail.verb === Windows.ApplicationModel.Contacts.ContactLaunchActionVerbs.call) {
                url = scenarios[0].url;
            } else if (eventObject.detail.verb === Windows.ApplicationModel.Contacts.ContactLaunchActionVerbs.message) {
                url = scenarios[1].url;
            } else if (eventObject.detail.verb === Windows.ApplicationModel.Contacts.ContactLaunchActionVerbs.map) {
                url = scenarios[2].url;
            } else {
                WinJS.log && WinJS.log("This app can't handle the contact action verb it was activated for.", "sample", "error");
                return;
            }
        } else if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.protocol) {
            // If activated for a protocol, launch the call scenario
            arg = eventObject.detail;
            url = scenarios[0].url;
        } else if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Otherise, navigate to either the first scenario or to the last running scenario
            // before suspension or termination.
            url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
        }

        if (url !== null) {
            // Use setPromise to indicate to the system that the splash screen must not be torn down
            // until after processAll and navigate complete asynchronously.
            eventObject.setPromise(WinJS.UI.processAll().then(function () {
                return WinJS.Navigation.navigate(url, arg);
            }));
        }
    }

    WinJS.Navigation.addEventListener("navigated", function (eventObject) {
        var url = eventObject.detail.location;
        var host = document.getElementById("contentHost");
        // Call unload method on current scenario, if there is one
        host.winControl && host.winControl.unload && host.winControl.unload();
        WinJS.Utilities.empty(host);
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
            WinJS.Application.sessionState.lastUrl = url;
        }));
    });

호출로 앱이 활성화되면 앱에 데이터 제공

연락처 호출 이벤트 또는 tel: protocol 호출 이벤트를 받는지 결정합니다.

여기서 연락처 호출 이벤트에 대해 전달되는 데이터는 ServiceIdServiceUserId입니다. 샘플에서는 선택한 연락처의 전화 번호 및 출력을 사용합니다. "호출 활성화가 수신되었습니다. 호출할 전화 번호는 (555) 555-0100입니다."를 예로 들 수 있습니다.

여기서 tel: protocol 호출 이벤트에 대해 전달되는 데이터는 URI schemeNamepath입니다. 샘플에서는 선택한 연락처의 전화 번호 및 출력을 사용합니다. "전화 활성화가 수신되었습니다. 호출할 전화 번호는 (555) 555-0100입니다."를 예로 들 수 있습니다.

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/S1-Call.html", {
        processed: function (element, callArgs) {
            // callArgs is the parameter passed to navigation in the activated event handler.
            if (callArgs) {
                if (callArgs.serviceId) {
                    if (callArgs.serviceId === "telephone") {
                        WinJS.log && WinJS.log("Call activation was received. The phone number to call is " + callArgs.serviceUserId + ".", "sample", "status");
                    } else {
                        WinJS.log && WinJS.log("This app doesn't support calling by using the " + callArgs.serviceId + " service.", "sample", "error");
                    }
                } else if (callArgs.uri) {
                    if (callArgs.uri.schemeName === "tel") {
                        WinJS.log && WinJS.log("Tel: activation was received. The phone number to call is " + callArgs.uri.path + ".", "sample", "status");
                    } else {
                        WinJS.log && WinJS.log("This app doesn't support the " + callArgs.uri.schemeName + " protocol.", "sample", "error");
                    }
                }
            }
        },
        ready: function (element, options) {
        }
    });
})();

메시지 전송으로 앱이 활성화되면 앱에 데이터 제공

여기서 연락처 메시지 전송 이벤트에 대해 전달되는 데이터는 ServiceIdServiceUserId입니다. 샘플에서는 특정 서비스 및 출력에 연락처의 사용자 ID를 사용합니다. "메시지 전송 활성화가 수신되었습니다. 사용할 서비스는 contoso.com입니다. 메시지를 전송할 사용자 ID는 userid10입니다."를 예로 들 수 있습니다.

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/S2-Send-Message.html", {
        processed: function (element, messageArgs) {
            // messageArgs is the parameter passed to navigation in the activated event handler.
            if (messageArgs) {
                WinJS.log && WinJS.log("Send message activation was received. The service to use is " + messageArgs.serviceId + ". The user ID to message is " + 
                messageArgs.serviceUserId + ".", "sample", "status");
            }
        },
        ready: function (element, options) {
        }
    });
})();

지도 요청으로 앱이 활성화되면 앱에 데이터 제공

여기서 연락처 지도 요청 이벤트에 대해 전달되는 데이터는 ContactAddress입니다. 샘플에서는 연락처의 주소 및 출력을 사용합니다. "지도 주소 활성화가 수신되었습니다. 매핑할 주소는 One Microsoft Way입니다."를 예로 들 수 있습니다.

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/S3-Map-Address.html", {
        processed: function (element, mapArgs) {
            // mapArgs is the parameter passed to navigation in the activated event handler.
            if (mapArgs) {
                var address = mapArgs.address;
                WinJS.log && WinJS.log("Map address activation was received. The street address to map is " +
                    (address.streetAddress ? address.streetAddress : "unspecified") + ".", "sample", "status");
            }
        },
        ready: function (element, options) {
        }
    });
})();

요약 및 다음 단계

지금까지 접촉 동작에 대해 앱 활성화를 처리하는 방법을 간략히 살펴보았습니다. 접촉 동작에 대해 앱 활성화를 처리하는 방법의 전체 샘플을 보려면 코드 갤러리에서 접촉 동작 처리 샘플을 다운로드하세요.

관련 항목

접촉 동작 처리 샘플