Notice»

Recent Post»

Recent Comment»

Recent Trackback»

Archive»

« 2024/4 »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

 
 

 

 

 

:

 12년 12월 20일 ~ 21일(16시간)

 

 

 

 

:

Windows8 PushNotification & Azure Mobile Service 교육

12년 12월 17일

한국디지털미디어고등학교

 

Windows8 PushNotification

Azure Mobile Service

 

 

 

:

Windows8 MAAP Program 

LGCNS

9월 10일~10월 25일

 

1차 윈도우8 기업적용 시나리오 및 개발 관련

30명 참여

 

2차 윈도우8 기획, 개발, 디자인적용한 앱 개발

LGCNS 참여 인원 5명(개발 및 디자인)

 

한국MS, LG CNS 윈도우8 도입사례 소개…"기존 인프라 활용 비용절감 효과"

http://m.news.naver.com/read.nhn?mode=LSD&mid=sec&sid1=105&oid=029&aid=0002139360

:

윈도우8 네트워크 정보

프로그래밍/Windows 10 | 2013. 6. 19. 09:11 | Posted by 99%

1. 네트워크 정보

 

윈도우8앱에서 네트워크를 사용할 경우에는 연결된 네트워크 상태를 확인할 필요가 있다. 데이터가 큰 경우나 실시간으로 데이터를 주고 받을 때는 Background Task를 사용하겠지만 사용한다고 해도 실제 앱에서 체크하여 사용자에게 상태를 알려주거나 관련 처리를 해야 할 경우가 있다. 또한 윈도우8앱은 기본적으로 윈도우 스토어에서 배포하게 되는데 윈도우 스토어  뿐만 아니라 사용자에게 서비스되는 거의 모든 스토어에서는 네트워크를 사용하는 앱에서 사용자에게 네트워크 정보 및 상태를 알리게 가이드 하고 있다.

네트워크 관련 정보에는 현재 연결된 네트워크 정보(Wi-Fi, 3G), 사용시간 정보, 네트워크 장비 정보, 사용 요금 등이 있으며 윈도우8에서는 관련 정보를 Windows.NetworkInformation을 통해 제공한다. 연결된 네트워크 정보는ConnectionProfile을 통해 알 수 있다.

 

[예제 1] 네트워크 정보

private void BtnInternetConnection_Click(object sender, RoutedEventArgs e)

{

    string connectionProfileInfo = string.Empty;

    try

    {

        ConnectionProfile InternetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();

 

        if (InternetConnectionProfile == null)

        {

            txtNetProfile.Text = "인터넷에 연결되지 않음.\n";

        }

        else

        {

            txtNetProfile.Text = GetConnectionProfile(InternetConnectionProfile);

        }

    }

    catch (Exception ex)

    {

        txtNetProfile.Text = "예외 발생: " + ex.ToString();

    }

}

 

private void BtnConnections_Click(object sender, RoutedEventArgs e)

{

    string connectionProfileList = string.Empty;

    try

    {

        IReadOnlyList<ConnectionProfile> ConnectionProfiles = NetworkInformation.GetConnectionProfiles();

        foreach (ConnectionProfile connectionProfile in ConnectionProfiles)

        {

            connectionProfileList += GetConnectionProfile(connectionProfile);

            connectionProfileList += "-----------------------------------------------------\n\n";

        }

        txtNetProfile.Text = connectionProfileList;

    }

    catch (Exception ex)

    {

        txtNetProfile.Text = "예외 발생: " + ex.ToString();

    }

}

 

string GetConnectionProfile(ConnectionProfile connectionProfile)

{

    string connectionProfileInfo = string.Empty;

    if (connectionProfile != null)

    {

        connectionProfileInfo = "Profile Name : " + connectionProfile.ProfileName + "\n";

 

        switch (connectionProfile.GetNetworkConnectivityLevel())

        {

            case NetworkConnectivityLevel.None:

                connectionProfileInfo += "Connectivity Level : None\n";

                break;

            case NetworkConnectivityLevel.LocalAccess:

                connectionProfileInfo += "Connectivity Level : Local Access\n";

                break;

            case NetworkConnectivityLevel.ConstrainedInternetAccess:

                connectionProfileInfo += "Connectivity Level : Constrained Internet Access\n";

                break;

            case NetworkConnectivityLevel.InternetAccess:

                connectionProfileInfo += "Connectivity Level : Internet Access\n";

                break;

        }

    }

    return connectionProfileInfo;

}

 

예제 1는 현재 사용중인 대표 네트워크 정보와 모든 네트워크 정보를 가져오는 두개의 버튼이 추가되어 있으며 현재 인터넷을 사용중인 네트워크 정보를 NetworkInformation.GetInternetConnectionProfile를 통해ConnectionProfile로 얻어 왔다.

리턴된 값이 null이면 연결된 네트워크 정보가 없으며 null이 아니면 ConnectionProfileGetConnectionProfile라는 함수를 통해 정보를 출력해주고 있다. 정보에는ProfileName이라는 네트워크 프로필 이름이 있으며 무선 네트워크 이름과 같고 GetNetworkConnectivityLevel를 통해 현재 사용중인 네트워크의 인터넷 엑세스 정보를 알 수 있다. 그 리턴 값은NetworkConnectivityLevel 열거형으로 되어 있으며InternetAccess은 인터넷 엑세스가 가능하고 LocalAccess은 인터넷이 안되는 로컬망이고ConstrainedInternetAccess은 제한적인 인터넷 엑세스를 나타낸다.

 

<그림1> GetInternetConnectionProfile 결과

 

 <그림2> GetConnectionProfiles 결과

 

NetworkInformation.GetInternetConnectionProfile는 현재 사용중인 대표적인 네트워크 정보만을 나타내므로 한 개의 네트워크 정보만을 반환하지만NetworkInformation.GetConnectionProfiles를 이용하면 모든 네트워크 정보를 IReadOnlyList<ConnectionProfile>로 반환해준다. 이전 사용했던 무선 네트워크 정보도 포함되며 다수의 정보가 포함됐을 뿐 각각의 정보는ConnectionProfile을 통해 제공되므로 사용법은 같다.

 

ConnectionProfile에는 네트워크 사용량 및 데이터 요금제 상태 정보도 포함되어 있으며 관련  정보는 아래와 같다.

 

< 1> 네트워크 사용량 및 데이터 요금제 상태 정보

데이터

제공 요소

설명

연결 비용

ConnectionCost

데이터 제한 및 로밍 정보를 포함하여 연결 비용 정보에 대한 자세한 정보

비용 유형

NetworkCostType

현재 사용하는 네트워크의 비용 유형

데이터 요금제 상태 및 사용량

DataPlanStatus,
DataPlanUsage

데이터 요금제에 대한 사용량 정보

데이터 사용량

DataUsage

데이터 사용량 정보

네트워크 어댑터

NetworkAdapter

네트워크 어댑터를 식별

 

연결 비용은 ConnectionProfileGetConnectionCost를 통해 얻을 수 있고 NetworkCostType을 통해 비용 유형을 알 수 있다. 데이터 요금제 상태 및 네트워크 사용량은 GetDataPlanStatusGetLocalUsage를 통해 확인 할 수 있다. 또한 NetworkAdapter로 네트워크 어댑터정보를 얻어 올 수 있다.

 

윈도우8은 태블릿에서 이동통신망도 사용하므로 앱에서 사용된 데이터 사용량을 확인 할 필요가 있다. 예제를 통해 알아보자.

 

[예제 2] 네트워크 사용량

string localDataUsage = string.Empty;

 DateTime CurrTime = DateTime.Now;

 TimeSpan TimeDiff = new TimeSpan(1, 0, 0);

 

 try

 {

     ConnectionProfile InternetConnectionProfile = NetworkInformation.GetInternetConnectionProfile();

 

     if (InternetConnectionProfile == null)

     {

         txtNetProfile.Text = "인터넷에 연결되지 않음.\n";

     }

     else

     {

         DataUsage LocalUsage = InternetConnectionProfile.GetLocalUsage(CurrTime.Subtract(TimeDiff), me);

 

         localDataUsage = "Local Data Usage:\n";

         localDataUsage += " Bytes Sent     : " + LocalUsage.BytesSent + "\n";

         localDataUsage += " Bytes Received : " + LocalUsage.BytesReceived + "\n";

         txtNetProfile.Text = localDataUsage;

     }

 }

 catch (Exception ex)

 {

     txtNetProfile.Text = "예외 발생: " + ex.ToString();

 }

 

현재 사용중인 네트워크 정보인 ConnectionProfileGetLocalUsage를 통해 DataUsage를 얻어왔다. GetLocalUsage로 데이터를 얻어 올 때 1시간전까지의 데이터를 가져왔으며 BytesSentBytesReceived로 네트워크의 사용량을 확인 할 수 있다.

위 예제들을 이용하면 현재 네트워크의 접속 유무 및 접속된 네트워크의 정보를 가져올 수 있지만 실시간으로 정보를 전달 받기 위해서는NetworkInformation.NetworkStatusChanged를 이용해서 이벤트 핸들러를 등록하면 된다.

 

[예제 3] 네트워크 상태 확인

public static bool registeredNetworkStatusNotif = false;

string internetProfileInfo = string.Empty;

NetworkStatusChangedEventHandler networkStatusCallback = null;

private CoreDispatcher _cd = Window.Current.CoreWindow.Dispatcher;

 

private void BtnNetStatus_Click(object sender, RoutedEventArgs e)

{

    try

    {

        networkStatusCallback = new NetworkStatusChangedEventHandler(OnNetworkStatusChange);

        if (!registeredNetworkStatusNotif)

        {

            NetworkInformation.NetworkStatusChanged += networkStatusCallback;

            registeredNetworkStatusNotif = true;

        }

        if (internetProfileInfo == "")

        {

            txtNetProfile.Text = "네트워크 상태 변경 사항 없음.";

        }

        else

        {

            txtNetProfile.Text = internetProfileInfo;

        }

    }

    catch (Exception ex)

    {

        txtNetProfile.Text = "예외 발생: " + ex.ToString();

    }

}

 

async void OnNetworkStatusChange(object sender)

{

    string connectionProfileInfo = string.Empty;

 

    internetProfileInfo = "네트워크 상태가 변경됨.: \n\r";

 

    try

    {          

        ConnectionProfile InternetConnectionProfile = workInformation.GetInternetConnectionProfile();

 

        if (InternetConnectionProfile == null)

        {

            await _cd.RunAsync(CoreDispatcherPriority.Normal, () =>

            {

                txtNetProfile.Text = "인터넷에 연결되지 않음.\n";

            });

        }

        else

        {

            connectionProfileInfo = GetConnectionProfile(InternetConnectionProfile);

            await _cd.RunAsync(CoreDispatcherPriority.Normal, () =>

            {

                txtNetProfile.Text = connectionProfileInfo;

            });

        }

        internetProfileInfo = "";

    }

    catch (Exception ex)

    {

        txtNetProfile.Text = ("예외 발생: " + ex.ToString());

    }

}

 

void UnRegisterForNetworkStatusChangeNotif()

{

    NetworkInformation.NetworkStatusChanged -= networkStatusCallback;

    internetProfileInfo = "";

    registeredNetworkStatusNotif = false;

}

 

NetworkInformation.NetworkStatusChanged에 이벤트 핸들러를 등록하여 변화된 상태를 전달 받으며ConnectionProfile를 이용해 상태값을 확인한다. 네트워크 상태 확인을 완료하고 싶거나 앱 종료시는UnRegisterForNetworkStatusChangeNotif와 같이 등록된 핸들러를 제거해주면 된다.

 

:

5 NotificationsExtensions 소개

 

앞에서 타일 알림과 배지, 토스트를 통해 템플릿을 사용하는 방법을 배웠다. 알림에 공통된 XML 구조를 사용하여 푸쉬 알림에서도 공통된 구조를 사용한 부분은 추후에 확장성까지 고려한 부분이라 설계가 잘되어 있다고 볼 수 있다. 하지만 XML 코드를 추가, 수정하기 위해 XML라이브러리를 이용하고 문자열을 편집하는 방법은 좀 불편한 게 사실이다. 다행히 MSDN에 있는 타일 관련 샘플 예제에 NotificationsExtensions 라이브러리가 포함되어 있는데 이 라이브러리에는 각 템플릿 별로 클래스가 잘 만들어져 있어 XML 코드를 입력할 필요가 없다. 이장의 샘플 예제를 통해 앞서 소개 했던 예제들을 기본 XML 코드를 이용하는 방법과 NotificationsExtensions을 이용하는 코드로 정리해 놓았으므로 적극 활용하면 될 것 같다. 이 라이브러리가 다음 버전에서는 API로 정리가 되서 좀 더 편리하게 사용될 것이라고 생각한다.

 

위의 알림 예제들을 NotificationsExtensions로 변경한 예제이다.

 

[예제 11] NotificationsExtensions 사용

// [예제 2] 타일 템플릿 사용

private void SendTile_Click(object sender, RoutedEventArgs e)

{

    // 정사각형 타일만 적용

    ITileSquareText03 tileContent = TileContentFactory.CreateTileSquareText03();

    tileContent.TextBody1.Text = "타일 업데이트";

     TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

}

 

// [예제 3] 정사각형과 와이드 타일 업데이트

private void SendAllTile_Click(object sender, RoutedEventArgs e)

{

    ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

    tileContent.Image.Src = "ms-appx:///images/blueWide.png";

    tileContent.Image.Alt = "BlueWide image";

 

    ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();

    squareContent.Image.Src = "ms-appx:///images/blueSquare.png";

    squareContent.Image.Alt = "BlueSqure image";

    tileContent.SquareContent = squareContent;

 

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

}

 

// [예제 5] 배지 템플릿 구조 사용

private void SendBadge_Click(object sender, RoutedEventArgs e)

{

    BadgeGlyphNotificationContent badgeContent = new BadgeGlyphNotificationContent((GlyphValue)6);

  BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());

}

 

// [예제 7] 보조 타일 생성

private async void PinLiveTile_Click(object sender, RoutedEventArgs e)

{

    SecondaryTile secondaryTile = new SecondaryTile(TileId,

                                 "보조 타일",

                                 "보조 타일 샘플",

                                 DateTime.Now.ToLocalTime().ToString(),

                                 TileOptions.ShowNameOnLogo | TileOptions.ShowNameOnWideLogo,

                                 new Uri("ms-appx:///images/redSquare.png"),

                                 new Uri("ms-appx:///images/redWide.png"));

 

    secondaryTile.ForegroundText = ForegroundText.Light;

 

    // 보조 타일 추가 확인

    bool isPinned = await secondaryTile.RequestCreateForSelectionAsync(GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Below);

 

    if (isPinned)

    {

        // 보조 타일 추가 성공

    }

    else

    {

        // 보조 타일 추가 실패

    }

}

 

// [예제 8] 보조 타일 알림

private void SendTileNotification_Click(object sender, RoutedEventArgs e)

{

    if (SecondaryTile.Exists(TileId))

    {

        ITileWideText04 tileContent = TileContentFactory.CreateTileWideText04();

        tileContent.TextBodyWrap.Text = "보조 타일 업데이트";

 

        ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();

        squareContent.TextBodyWrap.Text = "보조 타일 업데이트";

        tileContent.SquareContent = squareContent;

        TileUpdateManager.CreateTileUpdaterForSecondaryTile(TileId).Update(tileContent.CreateNotification());

    }

}

 

// [예제 8] 보조 타일 알림

private void SendBadgeNotification_Click(object sender, RoutedEventArgs e)

{

    if (SecondaryTile.Exists(TileId))

    {

        BadgeNumericNotificationContent badgeContent = new BadgeNumericNotificationContent(6);

        BadgeUpdateManager.CreateBadgeUpdaterForSecondaryTile(TileId).Update(badgeContent.CreateNotification());

    }

}

 

// [예제 9] 토스트 알림

private void SendToast_Click(object sender, RoutedEventArgs e)

{

    IToastText01 templateContent = ToastContentFactory.CreateToastText01();

    templateContent.TextBodyWrap.Text = "토스트 알림";

    IToastNotificationContent toastContent = templateContent;

 

    ToastNotification toast = toastContent.CreateNotification();

    ToastNotificationManager.CreateToastNotifier().Show(toast);

}

 

// [예제 10] 장기 알림 반복 오디오

private void SendLongToastLoopingAudio_Click(object sender, RoutedEventArgs e)

{

    IToastText02 toastContent = ToastContentFactory.CreateToastText02();

    toastContent.Duration = ToastDuration.Long;

    toastContent.TextHeading.Text = "장기 알림";

    toastContent.Audio.Loop = true;

    toastContent.Audio.Content = ToastAudioContent.LoopingAlarm;

    toastContent.TextBodyWrap.Text = "반복 오디오";

 

    ToastNotification toast = toastContent.CreateNotification();

    ToastNotificationManager.CreateToastNotifier().Show(toast);

}

 

 

 

 

:

4. 토스트(Toast) 알림

 

토스트 알림은 정보를 사용자에게 제공해주는 알림 메시지이며 타 모바일 플랫폼에서도 같은 명칭으로 사용되고 있다. 기존 윈도우에서 메시지 박스와 비슷한 역할을 하며 푸쉬 알림과도 연동이 되므로 인스턴트 메시지 및 뉴스, 알람, 일정 관리 등의 앱에서 정보를 표시해줄 때 사용할 수 있다. 토스트는 일반적으로 윈도우8의 오른쪽 상단에 표시되며(PC의 설정에 따라 왼쪽에 보일 수 있음) 윈도우8의 잠금 화면을 비롯한 어떤 화면에서도 표시된다.

앱에서 토스트 알림을 사용하기 위해서는 앱 매니페스트 파일의 Application UI 탭에서 Toast capable Yes로 설정해야 된다. 설정이 안되어 있으면 토스트 API를 호출 해도 화면에 표시 되지 않는다. 기본 타일에서 설명했던 Foreground text Background color 설정도 토스트의 색상에 영향을 미친다. 또한 Small logo에 설정했던 이미지가 토스트의 오른쪽 아래에 표시된다.

 

 

 <그림8> 토스트 알림

 

토스트도 타일과 같이 템플릿을 이용해서 알림을 제공하며 텍스트, 이미지를 표시 가능하다. 버튼 과 같은 기능은 추가 할 수 없다.

 

[예제 9] 토스트 알림

string toastXmlString = "<toast>"

                        + "<visual version='1'>"

                        + "<binding template='ToastText01'>"

                        + "<text id='1'>토스트 알림</text>"

                        + "</binding>"

                        + "</visual>"

                        + "</toast>";

 

Windows.Data.Xml.Dom.XmlDocument toastDOM = new Windows.Data.Xml.Dom.XmlDocument();

toastDOM.LoadXml(toastXmlString);

           

ToastNotification toast = new ToastNotification(toastDOM);

ToastNotificationManager.CreateToastNotifier().Show(toast);

 

예제 9의 토스트 알림 코드를 보면 토스트 템플릿 구조도 tile toast로 바꿨을 뿐이며 실제 객체에 업데이트 시도 ToastNotification ToastNotificationManager로 타일 알림과 비슷함을 알 수 있다.

 

타일 알림과 달리 토스트에서는 오디오가 재생될 수 있으며 화면에 표시되는 시간을 좀더 오래 표시되도록 할 수 있다.

[예제 10] 장기 알림 및 반복 오디오

string toastXmlString = "<toast duration='long'>"

                        + "<visual version='1'>"

                        + "<binding template='ToastText02'>"

                        + "<text id='1'>장기 알림</text>"

                        + "<text id='2'>반복 오디오</text>"

                        + "</binding>"

                        + "</visual>"

                        + "<audio loop='true' src='ms-winsoundevent:Notification.Looping.Alarm'/>"

                        + "</toast>";

 

Windows.Data.Xml.Dom.XmlDocument toastDOM = new Windows.Data.Xml.Dom.XmlDocument();

toastDOM.LoadXml(toastXmlString);

 

ToastNotification toast = new ToastNotification(toastDOM);

ToastNotificationManager.CreateToastNotifier().Show(toast);

 

일반적인 토스트의 알림 시간은 7초이며 toast 태그의 duration 속성에 long을 적용하면 25초 동안 화면에 표시된다. short duration 태그를 생략하면 기존 7초로 적용된다.

토스트 알림과 함께 오디오를 출력할 수가 있는데 예제 10와 같이 토스트의 visual 요소 밑에 audio를 추가해서 소리를 출력할 수 있다. src를 통해 시스템에 등록된 오디오를 입력해주고 loop true 또는 false를 입력해서 토스트가 표시되는 동안 반복되게 할 수 있다. 또한 silent 속성에true 또는 false를 입력해서 오디오 재생 유무를 설정할 수도 있다. 장기 알림과 반복 오디오 출력은 voip나 인스턴트 메시지 앱의 메시지를 알리는 유무로 사용하면 된다.

 

:

3. 타일 알림(Tile Notification)

알림 관련 API는 대부분은 Windows.UI.Notifications 네임스페이스에 있다.

로컬 타일 알림은 다른 알림 전달방법과 달리 자동으로 알림이 만료되지 않으며 만료 시간은 지정 할 수 있다. 로컬에서 타일을 업데이트 하면 다시 업데이트 되기 전까지는 계속 같은 정보가 표시된다는 의미다. 오래되거나 유효하지 않은 정보를 사용자에게 지속적으로 표시해주기 보다는 타일에 표시하는 정보의 만료 시간 또한 지정하는 것이 좋겠다.

 

3.1 타일 템플릿(Tile template)

정적인 앱의 대표 이미지인 기본 타일에 추가로 앱에서 실시간으로 타일에 정보를 업데이트 하기 위해서는 타일 템플릿을 사용해야 하며 xml 구조를 사용하고 있다. 이전 윈도우폰7에서는 타일을 업데이트 하기 위한 몇 가지 요소와 배경 이미지만이 API로 존재하였고 푸쉬 알림(Push Notification)에서만 xml을 사용하였으나 윈도우8에서는 타일을 업데이트하기 위해 xml 구조를 사용하여 공통된 템플릿을 제공한다.

 

[예제 1] 타일 템플릿 구조

<tile>

  <visual lang=”ko-KR”>

    <binding template="TileWideImageAndText01" branding=”logo”>

      <image id="1" src="image1.png"/>

     

      <text id="1">Text Field 1</text>

     

    </binding> 

  </visual>

</tile>

 

타일 템플릿의 기본 요소는 tile, visual, binding, text, image가 있으며 구조는 예제 1과 같이 사용되고 미리 사용 할 템플릿을 선택 후 binding template에 명시하면 된다. 주로 사용되는 추가 속성으로 언어를 명시하는 lang이 있으며 visual, binding, text 태그의 속성으로 사용된다. branding 속성으로는 타일의 왼쪽 밑에 이름 또는 로고를 표시 해 줄 수 있다. binding visual 태그 안에서 요소를 여러 개 추가 할 수 있다.

image text binding 태그 안에서 템플릿에 따라 여러 개가 쓰일 수 있으므로 구분 할 수 있는 값으로 id 태그를 사용하고 있으며 1부터 시작한다.

Image src는 이미지 파일의 URI를 나타내며 파일의 위치에 따라 아래 형식을 먼저 써준다.

·         http:// 또는 https://
웹 기반 이미지

·         ms-appx:///
앱 배포시 패키지에 포함된 이미지

·         ms-appdata:///local/
로컬 저장소에 저장된 이미지(Windows.Storage.ApplicationData.Current.LocalFolder
)

웹에 이미지가 있을 경우는 src=”http://image.png와 같이 써주면 된다.

 

--------------------------------------------------------------------------------------------------------------

타일의 템플릿의 전체 속성은 msdn Tile schema(http://msdn.microsoft.com/ko-kr/library/windows/apps/br212859.aspx) 페이지를 참고하기 바란다.

--------------------------------------------------------------------------------------------------------------

 

템플릿은 현재 46가지가 있으며 TileTemplateType에 정의 되어 있고TileUpdateManager.GetTemplateContent를 통해 원하는 템플릿의 XML을 얻어 올 수 있다.

 

 [예제 2] 타일 템플릿 사용

TileTemplateType tileTemplate = Windows.UI.Notifications.TileTemplateType.TileSquareText03;

XmlDocument tileXml = Windows.UI.Notifications.TileUpdateManager.GetTemplateContent(tileTemplate);

 

// tileXml 속성 변경

XmlNodeList tileTextAttributes= tileXml.GetElementsByTagName("text");

tileTextAttributes[0].AppendChild(tileXml.CreateTextNode("타일 업데이트"));

 

TileNotification tileNotification = new Windows.UI.Notifications.TileNotification(tileXml);

TileUpdater tileUpdater = Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForApplication();

tileUpdater.Update(tileNotification);

 

예제 2와 같이 템플릿 XML의 값을 변경하여 그 값으로 TileNotification 객체를 생성할 수 있으며 생성된 객체 XML 값은 Content 속성을 사용해서 확인 할 수 있다. 실제 업데이트 되는 시간을 변경하고 싶으면 TileNotificationExpirationTime 속성을 변경하면 되고 생성된 TileNotification으로 앱의 기본 타일을 업데이트 하기 위해서는 TileUpdateManager.CreateTileUpdaterForApplication 함수를 이용해서 TileUpdater 객체를 얻어온다. 이렇게 얻어온 TileUpdater 객체를 이용하면 타일을 업데이트 및 알림 지움, 설정 등 실제 컨트롤 할 수 있으며 그 중 Update를 이용하면 타일에 반영되어 시작 화면에서 확인 할 수 있다.

 

코드에서는 TileSquareText03 템플릿을 이용해 XML 코드를 가져와 속성 값을 변경하고 앱의 기본 정사각형 타일을 업데이트 하였다. 코드에서와 같이 기본 타일을 업데이트 하기 위해서는 TileUpdateManagerGetTemplateContent CreateTileUpdaterForApplication을 사용하면 된다.

예제 2의 결과는 그림 4와 같다. 배경색은 앱 매니페스트에서 지정한 Background color이다.

 <그림4> 타일 업데이트

 

두가지 크기의 타일을 모두 지원 하는 앱에서 타일을 업데이트 하는 방법은 예제 3과 같다.

[예제 3] 정사각형과 와이드 타일 업데이트

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);

 

// tileXml, squareTileXml 속성 변경

XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");

((XmlElement)tileImageAttributes[0]).SetAttribute("src", "ms-appx:///images/blueWide.png");

XmlNodeList squareTileImageAttributes = squareTileXml.GetElementsByTagName("image");

((XmlElement)squareTileImageAttributes[0]).SetAttribute("src"," ms-appx:///images/blueSquare.png");

 

// XML 코드 합치기

IXmlNode node = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true);

tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node);

 

TileNotification tileNotification = new Windows.UI.Notifications.TileNotification(tileXml);

Windows.UI.Notifications.TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

 

// 생성된 실제 XML 코드

<tile>

    <visual>

        <binding template="TileSquareImage">

            <image id="1" src="ms-appx:///images/blueSquare.png"/>

        </binding>

        <binding template="TileWideImageAndText01">

            <image id="1" src="ms-appx:///images/blueWide.png"/>

        </binding>

    </visual>

</tile

 

GetTemplateContent를 이용해 정사각형과 와이드 타일 템플릿을 얻어와 두 XML 값을 변경한 후 visual 태그 밑에 binding 태그는 중복이 가능하므로 한곳의 binding 요소를 다른 곳의 visual 태그 밑에 추가해서 하나의 XML 코드로 타일을 업데이트하면 된다. 복잡해 보일 수 있으나 XML라이브러리를 이용해서 두개의 XML을 합쳤을 뿐이다.

예제 3의 결과는 그림 5와 같다. 파란색 배경인 blueSquare.pngblueWide.png를 사용하였으며 와이드 타일의 아래 배경색은 앱 매니페스트에서 지정한 Background color이다.

 

 <그림5> 정사각형과 와이드 타일 업데이트

 

업데이트 된 타일 알림은 TileUpdateManager Clear 함수를 호출하면 앱의 기본 타일로 초기화 된다. 또한 TileUpdateManager Setting 속성으로 NotificationSetting 객체를 얻어오면 타일의 업데이트 가능 여부를 확인 할 수 있다.

로컬이 아닌 푸쉬 및 정기 알림으로 원격에서는 업데이트만 되며 업데이트된 내용을 삭제는 안 된다.

 

3.2 타일 알림 큐(Cycling tile notifications)

윈도우8의 타일은 최대 5개까지 타일 알림을 자동으로 순환 가능하다. 아래 예제를 통해 알아보자.

[예제 4] 타일 알림 큐 사용

// 알림 큐 사용

TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

 

// 타일 템플릿 얻어오기 및 값 변경

TileNotification tileNotification = new TileNotification(tileXml);

tileNotification.Tag = "TagName";

 

// 타일 업데이트 작업

 

알림 큐는 사용하기 전에 TileUpdateManagerEnableNotificationQueue true로 호출하면 되고 반대로 사용하지 않을 경우는 false로 호출하면 된다. 타일 알림 큐는 최근 추가한 5개까지 타일 알림이 자동으로 순환되서 타일에 표시되고 각 타일을 구분하는 방법은 TileNotification 객체의 Tag 속성이며 이 값이 이전 타일 알림의 Tag와 같으면 업데이트 되고 값이 다르면 추가 된다. Tag 16자 이하의 문자열을 입력해주면 된다. 타일 알림 큐는 뉴스 같은 앱에서 타일 알림 앱을 계속 추가해서 최신 뉴스 항목을 실시간으로 표시 해줄 때 사용하면 된다.


3.3 배지(Badge)

배지는 타일의 오른쪽에 표시되고 숫자(Numeric)나 시스템에 미리 정해진 문자(Glyph)를 보여줄 수 있다. 숫자는 1-99까지 표시 가능하고 99가 넘을 경우는 99로 표시된다. 문자 배지는 시스템에 정의된 상형 문자만 표시가 가능하고 주로 앱의 상태를 표시하는데 사용한다.

< 3> 문자 배지 종류

상태

문자 모양

none

미표시

activity

alert

avaiable

away

busy

newMessage

paused

playing

unavailable

error

attention

 

[예제 5] 배지 템플릿 구조 및 사용

// 템플릿 구조

<badge value="activity"/>

 

XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);

 

// badgeXml 속성 변경

XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");

badgeElement.SetAttribute("value", "newMessage");

 

BadgeNotification badge = new BadgeNotification(badgeXml);

BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);

 

예제 5는 문자 배지를 newMessage로 변경하여 업데이트 하였으며 결과는 그림 6와 같다.

 <그림6> 배지 업데이트

 

배지 템플릿도 타일 알림과 비슷한 구조로 업데이트되며 타일에 사용된 이름들에서 Tile Badge로 바꿔서 BadgeNotification, BadgeUpdateManager 객체를 통해 업데이트가 된다. 배지가 업데이트 되면 정사각형과 와이드 타일에 모두 반영되고 배지를 지우는 방법 또한 타일과 같이 BadgeUpdateManager Clear 함수를 호출하면 된다.

타일과 거의 비슷하게 사용하지만 타일의 일부가 아니며 타일을 업데이트해도 영향을 받지 않는다. 타일 알림과는 독립적으로 업데이트가 되며 로컬 및 푸쉬, 정기 알림 등의 원격에서도 업데이트 및 업데이트 내용을 삭제가 가능하다.

배지는 타 모바일 플랫폼에서도 동일한 명칭으로 사용되고 있으며 숫자만 사용가능 한 것에 비해 윈도우8에서는 미리 정의된 문자를 통해 상태 값도 표현 가능하고 타일 알림과 함께 사용하면 좀더 많은 정보를 사용자에게 표시 해 줄 수 있다.


 

3.4 보조 타일(Secondary tile)

보조 타일은 앱의 컨텐츠에 따라 타일을 여러 개 추가해서 각 타일에 특정 컨텐츠를 실시간 표시하고 관련 페이지로 직접 실행하게 해준다. 뉴스의 특정 카테고리를 시작화면에 추가하여 카테고리의 최근 뉴스를 타일을 통해 서비스 한다거나 소셜 앱에서 특정 친구의 최근 글을 타일을 통해 보고 실행하여 친구의 페이지를 확인할 수 있다.

보조 타일의 API는 보통 알림 관련 기능들과 달리 Windows.UI.StartScreen 네임스페이스에 포함되어 있으며 SecondaryTile 클래스를 이용하여 관리 한다. 앱 배포시 기본으로 시작화면에 표시되는 앱 타일과 달리 보조 타일은 사용자에 의해서만 동적으로 추가되므로 앱의 프로젝트에서 기본 타일에 설정하였던 사항들을 SecondaryTile 객체를 통해 생성하고 타일 추가 시 전달한 ID값으로 타일을 구분한다. 앱 타일과 같이 타일 알림과 배지 알림도 사용 가능하다.

 

[예제 6] SecondaryTile 생성자

public SecondaryTile(

  string tileId,

  string shortName,

  string displayName,

  string arguments,

  TileOptions tileOptions,

  Uri logoReference

)

 

보조 타일의 생성은 SecondaryTile 클래스를 이용한다. tileId는 타일의 고유 아이디를 나타내며 보조 타일의 수정 및 삭제에 사용된다. shortName은 기본 타일에 설정했던 짧은 이름과 같고 보조타일에 표시되는 이름이다. displayName은 전체 프로그램 목록 등에서 작은 타일로 표시될 때 툴팁(tooltip)으로 제공되며 길이 제한은 없다. arguments는 보조 타일 생성 후 사용자가 보조 타일을 통해 앱을 실행했을 때 앱에 전달되는 인자값(OnLaunched 이벤트의 args.Arguments 인자)이며 2048개의 문자를 사용 가능하다. tileOptionsTileOptions 열거형을 통해 기본 타일에서 정의했던 로고의 표시 유무를 설정한다. 마지막으로 logoReference는 정사각형 타일의 이미지를 설정한다. 이외에도 와이드 타일의 이미지를 추가로 지정 가능한 생성자도 있으며 tileId만 전달하거나 인자가 없는 생성자도 있으나 기본적으로 예제 6 생성자의 인자값은 전달해줘야 생성이 된다. 기본 타일에 있던 Foreground text등의 설정은 생성된 객체의 속성을 통해 지정 한다.

 

[예제 7] 보조 타일 생성

SecondaryTile secondaryTile = new SecondaryTile(TileId,

                                                "보조 타일",

                                                "보조 타일 샘플",

                                                .ToLocalTime().ToString(),

                                                TileOptions.ShowNameOnLogo | ShowNameOnWideLogo,

                                                new Uri("ms-es/redSquare.png"),

                                                new Uri("ms-es/redWide.png"));

secondaryTile.ForegroundText = ForegroundText.Light;

 

// 보조 타일 추가 확인

bool isPinned = await e.RequestCreateForSelectionAsync(GetElementRect((FrameworkElement)sender), opups.Placement.Below);

 

if (isPinned)

{

    // 보조 타일 추가 성공

}

else

{

    // 보조 타일 추가 실패

}

 

예제 7과 같이 SecondaryTile 객체를 통해 보조 타일 생성을 위한 값을 지정한 후 실제 생성은RequestCreateForSelectionAsync 함수를 이용하며 호출 시 사용자에게 타일 추가 요청 창이 뜬다.함수의 종류에는 Point Rect 값을 이용해서 추가 요청 창이 뜨는 위치를 지정할 있는 함수가 포함되어 있으며 리턴값인 bool값을 통해 호출 성공여부를 알 수 있다.

예제 7을 실행하면 그림 7과 같이 사용자에게 보조 타일 고정을 알리는 창이 뜨며 사용자가 고정 버튼(Pin to Start)을 누르면 화면에 보이는 이미지와 같이 타일이 생성된다.

 

 <그림7> 보조 타일 고정

 

보조 타일의 알림은 앱 타일 알림의 몇 가지 함수에서 SecondaryTile이라는 이름을 사용할 뿐 사용법이 거의 비슷하며 아래 예제를 통해 알아보자.

 

[예제 8] 보조 타일 알림

// 보조 타일 업데이트

string tileXmlString = "<tile>"

                     + "<visual>"

                     + "<binding template='TileWideText04'>"

                     + "<text id='1'>보조 타일 업데이트</text>"

                     + "</binding>"

                     + "<binding template='TileSquareText04'>"

                     + "<text id='1'>보조 타일 업데이트</text>"

                     + "</binding>"

                     + "</visual>"

                     + "</tile>";

 

Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument();

tileDOM.LoadXml(tileXmlString);

TileNotification tile = new TileNotification(tileDOM);

 

TileUpdateManager.CreateTileUpdaterForSecondaryTile(TileId).Update(tile);

 

// 보조 타일 배지 업데이트

string badgeXmlString = "<badge value='6'/>";

Windows.Data.Xml.Dom.XmlDocument badgeDOM = new Windows.Data.Xml.Dom.XmlDocument();

badgeDOM.LoadXml(badgeXmlString);

BadgeNotification badge = new BadgeNotification(badgeDOM);

 

BadgeUpdateManager.CreateBadgeUpdaterForSecondaryTile(TileId).Update(badge);

 

예제에서는 타일 템플릿을 문자열로 XML코드를 만들었으며 TileWideText04 TileSquareText04 템플릿을 각각 와이드와 정사각형 타일에 텍스트와 함께 적용하였다. 타일 알림에서 사용했던 타일 템플릿을 사용하여 TileNotification 객체를 생성한 부분 까지는 앱 타일 알림 사용법과 같고TileUpdateManager를 통해 업데이트 시 CreateTileUpdaterForSecondaryTileSecondaryTile 생성시 전달했던 아이디값을 전달해주고 Update를 호출하면 된다. 배지 업데이트 또한 BadgeUpdateManager CreateBadgeUpdaterForSecondaryTile 보조 타일 아이디를 전달해서 업데이트 한다.

CreateTileUpdaterForApplicationCreateTileUpdaterForSecondaryTileCreateBadgeUpdaterForApplicationCreateBadgeUpdaterForSecondaryTile 바꿔서 보조 타일 을 구분할 수 있는 아이디를 전달 했을 타일의 알림 사용법과 같음을 있다.

 

:

2. 알림(Notification)의 종류

알림은 앱의 사용자에게 정보를 전달해 주는 것을 말하며 기존 윈도우에서 메시지 박스 또한 알림의 한 형태라고 볼 수 있다.

 

윈도우8에서 화면에 표시되는 알림(Notification)의 종류는 아래와 같다.

·         타일(Tile)

·         배지(Badge)

·         토스트(Toast)

·         잠금 화면(Lock screen) 알림

타일과 배지는 타일의 구성요소에서 설명하였으며 토스트는 윈도우8에서 사용되는 알림 메시지다. 잠금 화면의 알림은 타일과 배지 값을 이용해서 업데이트 되는 알림이다.

 

2.1 알림 전달 방법

윈도우8의 앱에서 알림을 전달하는 방법은 4가지가 있으며 앱의 컨텐츠에 따라 선택해서 사용하면 된다. 한가지만을 선택 할 수 있는 것은 아니며 중복해서 사용 가능하다.

전달 방법

사용 대상

로컬(Local)

타일, 배지, 토스트

예약(Scheduled)

타일, 토스트

정기(Periodic)

타일, 배지

푸쉬(Push)

타일, 배지, 토스트, 로우(Raw)

 

로컬(Local) 알림은 기존의 사용되던 로컬이란 개념과 같으며 앱이 실행 중에 API로 타일, 배지, 토스트를 이용해서 사용자에게 정보를 알릴 수 있고 클라우드 서비스가 필요 없이 사용자에게 정보를 제공할 필요가 있을 때 곧바로 적용하면 된다. 윈도우폰은 7.5업데이트에서 로컬을 지원했으나 윈도우8은 출시와 함께 지원하고 있다. 로컬 알림은 자동으로 만료되지 않지만 명시적인 만료 시간을 설정하는 것이 좋다.

예약(Scheduled) 알림은 타일과 토스트에 미리 알림 시간을 예약하는 알림이며 시간을 지정하는 점을 제외하고는 로컬 알림과 동일하다. 알람 또는 일정 관리 앱 등에서 사용될 수 있으며 기본적으로 예약 알림은 전달된 시간으로부터 3일 내에 만료된다. 필요한 경우 명시적인 만료 시간으로 이 기본값을 변경할 수 있다.

정기(Periodic) 알림은 클라우드 서비스에서 정보를 주기적으로 받아와 업데이트 하는 알림이며 날씨 앱 등에서 사용될 수 있다. 로컬이나 예약과 달리 원격에서 데이터를 받아 와서 표시 해줄 때 사용한다. 앱에서 클라우드 서버로 폴링하는 간격과 XML이 있는 URL을 지정하면 주기적으로 시스템이 XML을 다운로드 하여 타일 및 배지에 업데이트 해준다. 토스트로는 사용할 수 없으며 일정 간격으로 타일과 배지에 정보를 업데이트해야 될 때 사용하면 된다. 정기 알림은 폴링이 발생하는 시간으로부터 3일 내에 만료된다. 필요한 경우 명시적인 만료 시간으로 이 기본값을 변경할 수 있다.

푸쉬(Push) 알림은 클라우드 서비스에서 데이터가 발생시 보내주는 알림으로 뉴스, 인스턴트 메시지나 소셜 등의 앱에 사용될 수 있다. 푸쉬 알림은 타 모바일 플랫폼에서도 사용되고 있는 서비스로 윈도우8에서는 개발사에서 클라우드 서비스를 구축하여 WNS(Windows Push Notification Service)와 연계해서 사용하면 된다. 푸쉬 알림은 WNS에서 받은 시간으로부터 3일 내에 만료된다. 필요한 경우 명시적인 만료 시간으로 이 기본값을 변경할 수 있다. 윈도우폰에서는 7.0 출시 때부터 제공하였으며 MPNS(Microsoft Push Notification Service)라는 이름으로 사용되었다.

윈도우8에서는 윈도우폰과 달리 로컬과 푸쉬 알림에서 공통된 XML 값을 사용해서 타일과 배지, 토스트를 업데이트 한다.

 

--------------------------------------------------------------------------------------------------------------

이 책은RTM이 발표된 시점에 출시되어 아쉽게도 정기 알림 및 푸쉬 관련 정보 및 샘플이 부족하고 MSDN에도 일부 페이지가 오픈 되지 않아 로컬 알림 중심으로 쓰게 되었다. 기본 적인 알림 사용방법은 푸쉬 알림이어도 크게 달라지지 않을 것이며 푸쉬 알림이 필요할 경우 클라우드 서비스와의 연동만을 구축하면 된다.

--------------------------------------------------------------------------------------------------------------

 

 

:

1. 타일(Tile)

타일은 시작화면에 표시되는 앱의 얼굴이며 사용자가 앱을 실행 할 수 있는 시작 점이다. 타 모바일 플랫폼의 아이콘에는 배지라고 하는 숫자 정도만 표시 가능한 것에 비해 윈도우8의 타일에는 숫자 뿐 아니라 앱의 상태나 이미지, 텍스트 등의 정보를 사용자에게 서비스 할 수 있어 라이브 타일이라고 표현한다. 앱의 컨텐츠에 따라 타일을 여러 개 추가해서 정보를 실시간 표시하고 해당 페이지로 직접 실행할 수도 있다.

일의 크기별 종류에는 정사각형(Squre)과 와이드(Wide)가 있다. 앱에서 정사각형 타일은 기본으로 포함되어야 하며 와이드 타일은 옵션사항이다. 두 가지 타일 모두 라이브로 업데이트가 가능하다. 타일의 적용 가능한 이미지와 사이즈는 따로 정리하도록 하겠다.

 

 

 

 

 

<그림1> 정사각형

 <그림2> 와이드

 

< 1> 타일의 구성요소

요소

설명

이름(Name)

타일의 왼쪽 아래에 표시되며 그림 1와 같이 표시된다. 기본 타일(default tile)에는 앱 이름만 표시 할 수 있다. 길이는 13자 이하를 권장하고 있으며 이름이 길경우는 줄임 표시된다.

로고(Logo)

타일의 왼쪽 아래에 표시되며 그림 2와 같이 표시된다. 앱 실행 중에 앱 이름 또는 로고를 선택해서 표시 할 수 있다.

배지(Badge)

타일의 오른쪽 아래에 표시되며 그림 1과 같이 숫자(Numeric)를 표시하거나 그림 2와 같이 시스템에 미리 정해진 문자(Glyph)를 선택해서 표시할 수 있다.

텍스트와 이미지

템플릿 종류에 따라 여러 개의 텍스트와 이미지가 사용될 수 있다.

 

그림 1은 기본 타일에 숫자 배지가 표시되었으며 그림 2는 템플릿을 이용해서 이미지와 텍스트를 표시하고 왼쪽 아래에 로고, 오른쪽 아래에 문자 배지를 표시했다. 윈도우의 설정에 따라 배지의 위치가 왼쪽에 표시 될 수 있다.

 

1.1 기본 타일(default tile) 설정

앱에 기본으로 포함되는 타일 설정은 앱 매니페스트(package.appxmanifest) 파일의 Application UI 탭에서 한다. 기본 타일은 첫 번째 타일 알림을 통해 타일이 업데이트될 때까지 표시되며 표시할 알림이 없을 때마다 기본 타일이 표시된다.

 

  

 

 <그림3> 앱 매니페스트 파일의 기본 타일 설정

 

< 2> 기본 타일 설정

속성

설명

Logo

정사각형 기본 타일 이미지

Wide logo

와이드 기본 타일 이미지

Small logo

검색 및 앱 전체목록, 시작화면의 시멘틱 줌 상태에서 보이는 작은 이미지 등에 사용되며 타일의 왼쪽 아래에 표시되는 로고에서도 사용된다.

Short name

타일의 왼쪽 아래에 앱의 이름을 표시 할 수 있으나 앱의 이름이 길 경우는 짧은 이름을 명시하여 보여줄 수 있다.

Show name

기본 타일에 앱의 이름을 표시할 수 있는 설정이며 정사각형 또는 와이드 일때만 표시하거나 두 가지 모두에 표시 유무를 선택할 수 있다.

Foreground text

타일에 보여지는 앱 이름의 색상을 정하는 것으로 Dark Light를 선택할 수 있다.

Background color

타일의 배경색을 지정해 주는 것으로 타일 위의 로고나 이미지와 어울리는 색을 W3DC 색 문자열(:”#FFFFFF”)로 입력 한다. 배경색은 앱의 모든 대화 상자의 버튼 색과 윈도우 스토어의 앱 설명 페이지에도 반영되므로 다른 앱과의 차별화 요소로 쓰인다.

 

위 설정에서 Logo Small Logo는 필수 사항이고 Wide Logo는 선택사항이다. Wide Logo를 지정해야 와이드 타일을 시작화면에 표시할 수 있고 라이브로 업데이트가 가능하다. 또한 윈도우 스토어에서 앱을 설치 시 기본으로 와이드 타일이 보이고 사용자의 선택에 의해 정사각형 타일로 변경할 수 있는 기능들이 제공된다.

--------------------------------------------------------------------------------------------------------------

로고에 대한 추가 설명

기본 타일에서 로고라는 표현이 여러 곳에서 사용되는데 앱을 대표하는 브랜드로써 기존 윈도우에서 사용되던 아이콘과 같이 앱을 대표하는 이미지라는 표현으로 쓰인다. 프로젝트 설정에서 Logo, Wide logo가 각각 정사각형, 와이드 기본 타일에 사용되는 이미지 이다. 그리고 타일의 왼쪽 아래에 표시할 수 있는 로고에 Small logo 이미지가 표시된다. 기본 타일 외에 타일의 설명에서 나오는 로고는 대부분 왼쪽 아래에 표시되는 로고를 말한다.

--------------------------------------------------------------------------------------------------------------

 

 

: