빠른 시작: 보조 타일 고정(HTML)

  • 아티클

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

참고  JavaScript를 사용하지 않는 경우 빠른 시작: 보조 타일 고정(XAML)을 참조하세요.

 

이 항목에서는 앱의 보조 타일을 만들고 시작 화면에 고정하는 단계를 안내합니다.

사전 요구 사항

이 항목을 이해하기 위해 필요한 항목은 다음과 같습니다.

  • 보조 타일 용어와 개념에 대한 기본 지식. 자세한 내용은 보조 타일 개요를 참조하세요.
  • Windows 런타임 API를 사용하여 JavaScript로 기본 Windows 스토어 앱을 만들 수 있는 능력 자세한 내용은 JavaScript를 사용하는 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
  • Microsoft Visual Basic을 사용하여 HTML 기반 Windows 스토어 앱의 코드를 만드는 방법에 대한 이해.

중요  전체 샘플에서 사용된 이 항목의 코드를 보려면 보조 타일 샘플을 참조하세요. 샘플은 JavaScript, C#, C++ 및 Visual Basic 버전으로 제공됩니다.

 

지침

1. 고정/고정 해제 단추가 있는 앱 바 추가

Windows에서는 일반적으로 앱 바의 시작 화면에 고정 단추를 통해 사용자에게 고정 기회를 제공합니다. 앱 바를 만드는 방법에 대한 자세한 내용은 빠른 시작: 명령이 포함된 앱 바 추가를 참조하세요.

참고  Windows Phone 스토어 앱에서는 일반적으로 앱 바의 단추가 아니라 상황에 맞는 메뉴를 통해 고정합니다.

다음 예제에서는 단추가 있는 앱 바를 선언합니다. 이 코드는 이 항목의 나머지 코드가 적용되는 프로젝트의 .html 페이지에 추가됩니다.


<div id="pinUnpinFromAppbar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button 
        data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{id:'commandButton',section:'global'}">
    </button>
</div>

2. 보조 타일에 고유 ID 제공


var appbarTileId = "MySecondaryTile";

3. 단추를 고정 또는 고정 해제로 설정하는 함수 만들기

고정 단추의 동작은 보조 타일 고정과 고정 해제를 전환합니다. 이 예제에서는 다른 앱과 일관된 모양을 위해 시스템 제공 아이콘을 사용하여 단추를 적절하게 설정하는 함수를 만듭니다. 이 함수는 앱 바를 열 때마다 및 성공적인 고정/고정 해제 작업 후 즉시 앱 초기화 코드의 일부로 호출됩니다.

이 함수의 최종 줄에서는 앱 바의 WinJS.UI.sticky 속성을 false로 설정하여 앱 바가 해제될 수 있도록 합니다.


function setAppbarButton() {
    var commandButton = appBar.getCommandById("commandButton").winControl;

    if (Windows.UI.StartScreen.SecondaryTile.exists(appbarTileId)) {
        commandButton.label = "Unpin from Start";
        commandButton.icon = "unpin";
    } else {
        commandButton.label = "Pin to Start";
        commandButton.icon = "pin";
    }

    document.getElementById("pinUnpinFromAppbar").winControl.sticky = false;
}

4. 적절한 단추 표시 및 단추 click 처리기 할당

이 예제에서는 앱 초기화의 일부로 마지막 단계의 setAppbarButton 함수를 사용하여 보조 타일이 이미 고정되었는지 확인하고 그에 따라 단추 텍스트를 설정합니다.

그런 다음 고정 단추의 click 이벤트에 appbarButtonClicked 처리기를 할당합니다. 다음 단계에서는 이벤트 처리기를 구현하는 방법을 살펴보겠습니다.

이 단계의 코드는 사용자가 수행해야 하는 다른 초기화 작업과 함께 앱을 시작할 때마다 앱 초기화 코드의 일부로 호출됩니다.


document.getElementById("pinUnpinFromAppbar").disabled = false;
setAppbarButton();

id("commandButton").addEventListener("click", appbarButtonClicked, false);

5. 단추의 이벤트 처리기에서 보조 타일 만들기 및 고정

이 예제에서는 고정 단추의 click 이벤트 처리기에서 호출될 수 있는 단일 함수를 구현합니다. 이 함수는 고정 요청을 초래하는 여러 단계를 수집합니다.

  • 보조 타일 생성에 필요한 속성 값 할당
  • 보조 타일 개체 만들기
  • 보조 타일의 추가 속성 지정
  • 확인 플라이아웃을 표시하는 데 사용되는 화면 좌표 가져오기(Windows만 해당)

보조 타일의 일부 속성을 먼저 설정해야 타일을 고정할 수 있습니다. 이러한 속성을 하나 이상 포함하지 않고 보조 타일을 고정하려고 하면 실패합니다. 필수 속성은 다음과 같습니다.

  • 타일의 고유 ID
  • 짧은 이름(Windows 8.0만 해당)
  • 표시 이름
  • 보조 타일을 활성화할 때 부모 응용 프로그램에 전달되는 인수 문자열
  • 로고 이미지
  • 타일 옵션(Windows 8.0만 해당)

이 샘플은 보조 타일이 시작 화면에 고정된 시간을 예제 인수 문자열로 전달합니다.

참고  Windows Phone 8.1에서는 표시 이름이 중간 크기(150x150) 보조 타일에 표시되지 않습니다. 또한 모든 휴대폰 타일은 처음에 중간 크기 타일로 고정되므로 휴대폰에서 newTileDesiredSize 매개 변수가 무시됩니다.

참고  기존 보조 타일의 ID와 동일한 ID를 제공하면 기존 보조 타일을 덮어씁니다.

 


var currentTime = new Date();
var appbarTileId = "SecondaryTile.AppBar";
var newTileDisplayName = "Secondary tile pinned through app bar";                       
var TileActivationArguments = appbarTileId + " was pinned at " + currentTime;                        
var square150x150Logo = new Windows.Foundation.Uri("ms-appx:///Images/square150x150Tile-sdk.png");
var newTileDesiredSize = Windows.UI.StartScreen.TileSize.square150x150;

다음에는 보조 타일 개체를 만듭니다. 이 생성자 버전에서는 중간 크기 타일을 만듭니다. 보조 타일이 알림을 받는 경우 모든 타일 크기를 선언하는 것이 좋습니다. SecondaryTileVisualElements 클래스를 통해 로고 이미지를 제공하면 됩니다.


var tile = new Windows.UI.StartScreen.SecondaryTile(appbarTileId,
                                                    newTileDisplayName,
                                                    TileActivationArguments,
                                                    square150x150Logo,
                                                    newTileDesiredSize);

이제 보조 타일 개체가 있으므로 생성자를 통해 설정되지 않은 보조 타일 속성을 지정할 수 있습니다. 이 예제에서는 전경 텍스트 색과 작은 로고를 지정하고 표시 이름이 타일에 나타나도록 지정합니다.

참고  Windows Phone 8.1에서는 작은 로고와 표시 이름이 중간 크기(150x150) 보조 타일에 표시되지 않으며 전경 텍스트 색을 지정할 수도 없으므로 이 예제에서 설정한 속성이 휴대폰에서 무시됩니다.


tile.visualElements.showNameOnSquare150x150Logo = true;                        
tile.visualElements.foregroundText = Windows.UI.StartScreen.ForegroundText.light;
tile.visualElements.square30x30Logo = new Windows.Foundation.Uri("ms-appx:///Images/square30x30Tile-sdk.png");

Windows에서는 보조 타일이 고정되기 전에 사용자가 확인해야 합니다. 사용자는 확인 대화 상자에서 타일의 표시 이름을 재정의하고 다양한 타일 크기 중에서 고정할 크기를 선택할 수 있습니다. 확인 플라이아웃은 고정 요청을 호출한 단추 근처에 표시되어야 합니다. 이 예제에서는 고정 단추의 경계 사각형을 검색하고 확인 대화 상자가 단추 위에 표시되도록 지정합니다.

참고  Windows Phone 8.1에서는 사용자에게 확인 대화 상자가 표시되지 않습니다. 타일이 표시 이름 없이 중간 크기 타일로 시작 화면에 고정됩니다. 여기에 표시된 코드는 무시됩니다.


var element = document.getElementById("commandButton");
var selectionRect = element.getBoundingClientRect();
var buttonCoordinates = { x: selectionRect.left, y: selectionRect.top, width: selectionRect.width, height: selectionRect.height };
var placement = Windows.UI.Popups.Placement.above;

그런 다음 함수가 보조 타일이 고정되도록 요청합니다.

  • Windows Phone 8.1에서는 이 호출을 통해 타일을 고정하고 앱을 일시 중단하며 사용자를 시작 화면으로 이동합니다.
  • Windows에서는 이 호출을 통해 사용자에게 타일을 고정할 수 있는 권한을 요청하는 확인 플라이아웃을 표시합니다. 이 예제에서는 고정 단추의 경계 사각형을 사용하여 확인 플라이아웃을 해당 좌표 위에 표시합니다. 사용자가 승인하면 Windows에서 보조 타일을 만들고 시작 화면에 배치합니다. 사용자는 앱에 그대로 있습니다.

return new WinJS.Promise(function (complete, error, progress) {
    tile.requestCreateForSelectionAsync(buttonCoordinates, placement).done(function (isCreated) {
        if (isCreated) {
            complete(true);
        } else {
            complete(false);
        }
    });
});

참고  Windows Phone 8.1에서는 RequestCreateAsync 또는 RequestCreateForSelectionAsync 호출을 통해 앱을 종료하고 사용자를 시작 화면으로 이동합니다. 이 때문에 RequestCreateAsync 또는 RequestCreateForSelectionAsync 호출 뒤에 있는 코드는 실행되지 않습니다. 따라서 Windows Phone 8.1 프로젝트에서는 앱이 종료되기 전에 앱 상태 저장 등의 필요한 작업을 수행할 수 있도록 Suspending 이벤트를 수신 대기해야 합니다.

아래에는 보조 타일 샘플의 전체 appbarButtonClicked 및 pinByElementAsync 함수가 나와 있습니다.


function appbarButtonClicked() {
    document.getElementById("pinUnpinFromAppbar").winControl.sticky = true;

    if (WinJS.UI.AppBarIcon.unpin === document.getElementById("commandButton").winControl.icon) {
        unpinByElementAsync(document.getElementById("commandButton"), appbarTileId).done(function (isDeleted) {
            if (isDeleted) {
                WinJS.log && WinJS.log("Secondary tile was successfully unpinned.", "sample", "status");
                setAppbarButton();
            } else {
                WinJS.log && WinJS.log("Secondary tile was not unpinned.", "sample", "error");
                setAppbarButton();
            }
        });
    } else {
        pinByElementAsync(document.getElementById("commandButton"), appbarTileId, "Appbar pinned secondary tile").done(function (isCreated) {
            if (isCreated) {
                WinJS.log && WinJS.log("Secondary tile was successfully pinned.", "sample", "status");
                setAppbarButton();
            } else {
                WinJS.log && WinJS.log("Secondary tile was not pinned.", "sample", "error");
                setAppbarButton();
            }
        });
    }
}                        
                        
function pinByElementAsync(element, newTileID, newTileDisplayName) {

    var square150x150Logo = new Windows.Foundation.Uri("ms-appx:///Images/square150x150Tile-sdk.png");
    var square30x30Logo = new Windows.Foundation.Uri("ms-appx:///Images/square30x30Tile-sdk.png");

    var currentTime = new Date();
    var TileActivationArguments = newTileID + " was pinned at=" + currentTime;

    var tile = new Windows.UI.StartScreen.SecondaryTile(newTileID,
                                                        newTileDisplayName,
                                                        TileActivationArguments,
                                                        square150x150Logo,
                                                        Windows.UI.StartScreen.TileSize.square150x150);
                                                        
    tile.visualElements.foregroundText = Windows.UI.StartScreen.ForegroundText.light;
    tile.visualElements.square30x30Logo = square30x30Logo;
    tile.visualElements.showNameOnSquare150x150Logo = true;

    var selectionRect = element.getBoundingClientRect();

    return new WinJS.Promise(function (complete, error, progress) {
        tile.requestCreateForSelectionAsync({ x: selectionRect.left, y: selectionRect.top, width: selectionRect.width, height: selectionRect.height }, Windows.UI.Popups.Placement.above).done(function (isCreated) {
            if (isCreated) {
                complete(true);
            } else {
                complete(false);
            }
        });
    });
}

6. 고정 해제 함수 만들기

보조 타일이 이미 고정된 경우 고정 단추는 고정 해제 단추가 되며 단추의 클릭 이벤트 처리기에서 타일을 고정 해제합니다. 이 예제에서는 처리기가 타일을 고정 해제하기 위해 호출하는 함수를 제공합니다. 이 함수는 확인 플라이아웃과 보조 타일의 고유 ID를 배치하기 위해 고정 단추 개체를 매개 변수로 사용합니다. 고정 함수와 마찬가지로 고정 해제 호출은 Promise 개체를 반환합니다.

참고  시작 화면 앱 바에서 보조 타일을 제거할 수도 있습니다. 이 방법으로 고정 해제할 수 있으며, 이 경우 고정 해제 기능을 구현하거나 고정 해제 단추를 제공할 필요가 없습니다.

 

참고  Windows Phone 8.1에서는 사용자에게 보조 타일 고정 해제를 확인하는 메시지가 표시되지 않습니다. 휴대폰에서 보조 타일 제거는 다른 타일의 제거와 같습니다. 여기에 표시된 코드는 무시됩니다.


function unpinByElementAsync(element, unwantedTileID) {

    var selectionRect = element.getBoundingClientRect();
    var buttonCoordinates = { x: selectionRect.left, y: selectionRect.top, width: selectionRect.width, height: selectionRect.height };
    var placement = Windows.UI.Popups.Placement.above;

    var tileToDelete = new Windows.UI.StartScreen.SecondaryTile(unwantedTileID);
    
    return new WinJS.Promise(function (complete, error, progress) {
        tileToGetDeleted.requestDeleteForSelectionAsync(buttonCoordinates, placement).done(function (isDeleted) {
            if (isDeleted) {
                complete(true);
            } else {
                complete(false);
            }
        });
    });
}

7. 단추의 이벤트 처리기 구현

사용자가 앱 바에서 단추를 선택하면 확인을 요청하는 플라이아웃이 나타납니다. 플라이아웃이 표시되는 동안 앱 바가 해제되지 않도록 하려면 앱 바의 WinJS.UI.sticky 속성을 설정해야 합니다. 또한 플라이아웃의 부모가 올바르게 할당되었는지 확인합니다. 이 예제에서는 이전 단계에서 정의한 setAppbarButton, pinByElementAsync 및 unpinByElementAsync 함수를 호출합니다.

처리기는 고정 및 고정 해제 작업의 성공 및 실패 사례에 대해 모두 setAppbarButton을 호출합니다. 작업이 성공하면 단추가 고정과 고정 해제를 전환합니다. 작업이 실패하면 단추가 현재 상태대로 유지됩니다. 두 경우 모두, 앱 바를 해제할 수 있도록 이 함수를 호출하여 WinJS.UI.sticky 속성을 false로 되돌려야 합니다.


function appbarButtonClicked() {
    document.getElementById("pinUnpinFromAppbar").winControl.sticky = true;

    if (WinJS.UI.AppBarIcon.unpin === document.getElementById("commandButton").winControl.icon) {
        unpinByElementAsync(document.getElementById("commandButton"), appbarTileId).done(function (isDeleted) {
            if (isDeleted) {
                WinJS.log && WinJS.log("Secondary tile was successfully unpinned.", "sample", "status");
                setAppbarButton();
            } else {
                WinJS.log && WinJS.log("Secondary tile was not unpinned.", "sample", "error");
                setAppbarButton();
            }
        });
    } else {
        pinByElementAsync(document.getElementById("commandButton"), appbarTileId, "App bar pinned secondary tile", "A secondary tile that was pinned by the user from the app bar").done(function (isCreated) {
            if (isCreated) {
                WinJS.log && WinJS.log("Secondary tile was successfully pinned.", "sample", "status");
                setAppbarButton();
            } else {
                WinJS.log && WinJS.log("Secondary tile was not pinned.", "sample", "error");
                setAppbarButton();
            }
        });
    }
}

요약 및 다음 단계

이 빠른 시작에서는 사용자가 보조 타일을 고정하거나 고정 해제할 수 있는 앱 바의 단추를 정의했습니다. 보조 타일을 만들고, 많은 속성을 정의하고, 사용자에게 확인 대화 상자를 표시했습니다. 사용자가 승인하면 보조 타일이 시작 화면에 최종적으로 추가됩니다.

보조 타일이 고정되면 부모 앱 타일은 보조 타일과 통신할 수 있도록 채널 URI(Uniform Resource Identifier)를 만듭니다. 자세한 내용은 빠른 시작: 보조 타일에 알림 보내기를 참조하세요.

관련 항목

보조 타일 샘플

보조 타일 개요

빠른 시작: 보조 타일에 알림 보내기

보조 타일에 대한 지침 및 검사 목록

SecondaryTile class