전세계가 올림픽의 열기로 뜨겁습니다! (앗뜨거!! -_- ㅈㅅ) 이번 시간에는 아래 그림과 같이 쉽게 올림픽의 현황을 알아 볼 수 있는 Ranking Board를 만들어 보도록 하겠습니다.
이번 시간에는 지금까지와는 다르게 한가지 준비물이 필요합니다. 메달 및 현재 순위를 제공받을 수 있는 URL이 필요한데요. Google에서 마침 관련 서비스를 제공 해주고 있었습니다.
(언제나 그랬듯이 Google은 역시나 심플합니다 ㅎㅎ)
실제 랭킹 서비스를 제공해주는 URL을 알아내기 위한 여러 번의 삽질 끝에 실제 Google에서 제공하는 랭킹 서비스의 URL을 찾았습니다. 주소는 http://www.gmodules.com/ig/images/olympics/medals.js 이구요. 접속 해보시면 아시겠지만, 아래와 같은 데이터 포맷의 데이터를 구할 수 있습니다.
이제 이 데이터들을 Parsing해서 간단한 Ranking Board를 구현해보겠습니다. 먼저 각 나라별로 공통적으로 포함하는 정보인 나라 이름, 금메달 수, 은메달 수 , 동메달 수, 순위, 전체 메달 수를 저장하기 위한 Medal Class를 아래와 같이 구현했습니다.
|
public class Medal { public string IOC { get; set; } public int Gold { get; set; } public int Silver { get; set; } public int Bronze { get; set; } public int Rank { get; set; } public int Total { get; set; } public static Medal Parse(string RawString) { Medal Medal = new Medal(); RawString = RawString.Replace(((char)34).ToString(), ""); char[] Separator = ",".ToCharArray(); string[] SplitData = RawString.Split(Separator); Medal.IOC = SplitData[0].Substring(4); Medal.Gold = int.Parse(SplitData[1].Substring(5)); Medal.Silver = int.Parse(SplitData[2].Substring(7)); Medal.Bronze = int.Parse(SplitData[3].Substring(7)); if (SplitData.Length == 6) { Medal.Rank = int.Parse(SplitData[4].Substring(5)); Medal.Total = int.Parse(SplitData[5].Substring(6)); } else Medal.Total = int.Parse(SplitData[4].Substring(6)); return Medal; } } |
Parse함수는 각 나라별 데이터를 Parsing하기 위한 부분입니다. 그리고 실제 서비스 URL에서 데이터를 가져오기 위한 Medals Class를 아래와 같이 구현 했습니다. 추후 ListBox의 Itemsource에 적용하기 위해서 Medals Class는 Medal Class를 갖는 ObserverCollection으로 구현 했습니다.
|
public class Medals : ObservableCollection<Medal> { public const string MEDALURL = "http://www.gmodules.com/ig/images/olympics/medals.js"; public Medals() { System.Net.WebClient Downloader = new System.Net.WebClient(); String MedalString = Downloader.DownloadString(MEDALURL); int StartPos = 0; int EndPos = 0; string RawData = ""; do { StartPos = MedalString.IndexOf("ioc")-1; if (StartPos < 0) break; EndPos = MedalString.IndexOf("}",StartPos); RawData = MedalString.Substring(StartPos, EndPos - StartPos); Medal Medal = Medal.Parse(RawData); this.Add(Medal); MedalString = MedalString.Substring(EndPos); } while (true); } } |
WebClient Class를 사용하여 서비스 URL을 다운로드 받고, 각 나라별 데이터를 분리한 뒤 Medal Class의 Parse함수를 호출하여 Medal Class를 생성합니다. 그 다음 Collection에 등록합니다. 계속해서 UI와 관련된 부분을 구현해 보도록 하겠습니다. (본 예제에서 사용한 전체 소스코드와 이미지는 첨부파일에서 다운로드 하실 수 있습니다.)
|
<Grid Background="{StaticResource Background}" Width="320" Height="400"> <Grid.Resources> <ImageBrush ImageSource="Background.jpg" x:Key="Background" /> <o:Medals x:Key="OlympicMedalList"/> </Grid.Resources> <ListBox ItemsSource="{StaticResource OlympicMedalList}" Margin="42,152,20,110" BorderBrush="Transparent" Background="Transparent" BorderThickness="0"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Rank}" Width="40" /> <TextBlock Text="{Binding IOC}" Width="48" /> <TextBlock Text="{Binding Gold}" Width="36"/> <TextBlock Text="{Binding Silver}" Width="43"/> <TextBlock Text="{Binding Bronze}" Width="42"/> <TextBlock Text="{Binding Total}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> |
ItemTemplate에 위에서 생성했던 Medal Class의 멤버들을 Binding시키고 ListBox의 ItemSource를 Medals 객체로 지정했습니다. 간단하죠? 추가로 Binding시 ValueConvert등의 기능을 활용하면 보다 다양하게 연출 하실 수 있습니다.
