빠른 시작: 등급 추가(HTML)

아티클
03/04/2016

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

Rating 컨트롤을 사용하면 사용자가 등급을 나타내는 아이콘을 클릭하여 항목을 평가할 수 있습니다. 여기서는 JavaScript를 사용하는 Windows 스토어 앱에 등급 컨트롤을 추가하는 방법을 보여줍니다.

사전 요구 사항

여기서는 WinJS 컨트롤을 사용하는 JavaScript로 작성된 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다. WinJS 컨트롤 시작에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

rating 컨트롤 만들기

Rating 컨트롤을 만들려면 div 요소를 만들고 data-win-control 속성을 "WinJS.UI.Rating"으로 설정합니다. 다음은 기본적인 등급 컨트롤을 만드는 방법을 보여 주는 예제입니다.

<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>

참고 컨트롤을 인스턴스화하려면 페이지에 WinJS JavaScript 파일을 포함하고 코드 숨김에서 WinJS.UI.processAll 함수를 호출해야 합니다. 자세한 내용은 빠른 시작: WinJs 컨트롤 및 스타일 추가를 참조하세요.

평균 등급 및 최대 등급 설정

averageRating 속성은 평가되는 항목의 평균 등급을 지정합니다. 항목의 평균 등급을 결정하는 방식은 개발자의 재량입니다. averageRating 속성을 설정하면 사용자가 고유 등급을 선택할 때까지 Rating 컨트롤이 이 속성을 표시합니다. 다음 예제에서는 averageRating을 3.4로 설정합니다.

<div id="ratingControl" data-win-control="WinJS.UI.Rating"
    data-win-options="{averageRating : 3.4}"></div>

maxRating 속성은 사용 가능한 최대 등급을 지정합니다. 기본값은 5입니다. 다음 예제에서는 컨트롤이 표시될 때 maxRating을 7로 설정하며 5개 대신 별 7개를 표시합니다.

<div id="ratingControl" data-win-control="WinJS.UI.Rating"
    data-win-options="{averageRating : 3.4, maxRating : 7}"></div>

사용자 등급 가져오기

사용자가 등급을 선택하면 change 이벤트가 트리거됩니다. userRating 속성의 값을 읽어서 사용자 등급을 가져올 수 있습니다.

다음 예제에서는 시작 페이지의 활성화된 이벤트 처리기를 사용하여 change 이벤트 처리기를 Rating 컨트롤에 추가합니다. 이벤트를 연결할 적절한 위치에 대한 자세한 내용은 빠른 시작: 컨트롤 추가 및 이벤트 처리를 참조하세요.

(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll()
            .done(function () {

                // Get the rating control
                var ratingControl = document.getElementById("ratingControl").winControl;

                ratingControl.addEventListener("change", changeRating);
            });
        }
    };

    app.start();
})();

다음 예제에서는 이벤트 처리기 함수 changeRating이 사용자 등급을 검색하여 저장합니다.

    function changeRating(ev) {
        var ratingControl = ev.target.winControl;
        if (ratingControl) {

            if (ratingControl.userRating != 0) {

                // Put your code here to save user rating and re-calculate average rating.
                WinJS.Application.sessionState.userRating = ratingControl.userRating;

                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Write a setting
                roamingValues.insert("userRating", ratingControl.userRating);
            } else {

                // Put your code here to delete user rating.
            }
        }
    }

다음 예제에서는 저장된 사용자 등급을 검색한 후 이 등급을 사용하여 Rating 컨트롤을 설정하도록 앞에 표시된 활성화된 이벤트 처리기를 수정합니다.

(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll()
            .done(function () {

                // Get the rating control
                var ratingControl = document.getElementById("ratingControl").winControl;

                // Retrieve stored state info 
                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Read a setting
                var currentRating = parseFloat(roamingValues.lookup("userRating"));

                if (currentRating > 0) {
                    ratingControl.userRating = currentRating;
                }

                ratingControl.addEventListener("change", changeRating);
            });
        }
    };

    function changeRating(ev) {
        var ratingControl = ev.target.winControl;
        if (ratingControl) {

            if (ratingControl.userRating != 0) {

                // Put your code here to save user rating and re-calculate average rating.
                WinJS.Application.sessionState.userRating = ratingControl.userRating;

                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Write a setting
                roamingValues.insert("userRating", ratingControl.userRating);
            } else {

                // Put your code here to delete user rating.
            }
        }
    }

    app.start();
})();

요약 및 다음 단계

Rating 컨트롤을 만드는 방법과 해당 userRating을 저장 및 검색하는 방법을 배웠습니다. 다음에는 등급 컨트롤에 대한 지침 및 검사 목록을 읽고 등급 컨트롤을 가장 효과적으로 사용하는 방법에 대해 알아보시기 바랍니다.

Share via