[Silverlight 3][월간 Web. 2010.02] 실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)
ㅁ Flickr API 키 발급 받자.
플리커(Flickr) API를 받는 방법은 간단하다. 기본적으로 우선 플리커에 가입을 해야 하며, 로그인후 API관련 페이지로 이동해서 키 발급을 신청하면 된다. (http://api.flickr.com/services/api)
[그림1] 플리커(Flickr) API 관련 페이지
위 그림은 플리커 API관련 페이지이다. App제작 링크를 클릭해서 넘어가면 API키를 발급 받을 수 있는 링크가 나올 것인데, 그 링크를 클릭해서 키 발급 절차에 따라 내용을 작성하면 정상적으로 플리커 API키를 발급 받을 수 있을 것이다. (App 제작 >> API 키 요청 >> 항목 작성)
ㅁ 프로젝트 구성 및 UI구성
- 프로젝트 구성
키 발급이 끝났다면 이제 VS2008(VisualStudio2008)를 이용해서 실버라이트 프로젝트를 하나 만들자. 프로젝트 이름은 마음대로 짖도록 한다. (필자는 Flickr.MyPhotoGallery로 프로젝트를 만들었다) 그런 다음 위에서 설명했던 휴즈플로우(HugeFlow) CommandPattern 어셈블리(.dll)파일을 추가 해주어야 한다. 그리고 플리커 로그인은 로그인(인증)관련 파라미터(Parameter)를 넘겨줄 때 MD5로 암호화해서 보내줘야 하기 때문에 이를 위한 어셈블리파일을 추가해 주어야 한다. 어셈블리 파일은 아래 주소를 통해서 다운로드 받을 수 있을 것이다.
(http://cid-22bbf65162c68537.skydrive.live.com/self.aspx/.Public/Assemblies.zip 또는 위 블로그 주소 참고)
[그림 2] 프로젝트 구조
위 [그림 2]는 프로젝트 파일구조를 보여주는 모습이다. 위에서 참조파일을 다운받았다면 위 그림에 References폴더와 같이 참조파일을 추가해 주자. 그리고 나머지 파일들은 이름만 봐도 대충 어떤 내용인지 짐작 할 수 있을 것이라 생각이 든다. 일단, 이렇게 구성이 되어 있구나 하고 봐주길 바란다.
- UI구성
간단하게 UI디자인 해보자. 물론, 만들고 싶은 데로 디자인해도 상관없다. 필자는 개발자라 디자인 감각이 조금 떨어진다. 이상하더라도 이해해 주길 바란다!!
위 [그림 2]에서 View폴더가 있을 것이다. 그 안에 MainView.xaml 파일이 보일 것인데, 그 파일에 디자인 내용을 넣도록 하자. (디자인은 블렌드(blend)를 이용하면 편할 것이다.)
[그림 3] 디자인모습
위 [그림 3]는 간단하게 디자인해 본 모습이다. 정말 간단하게 디자인 되어 있기 때문에 [그림 3]과 같이 디자인하기는 어렵지 않을 것이라고 생각이 든다.
ㅁ 커맨드(Command)연결
위에서 우측을 보면 로그인 버튼이 있을 것이다. 이제 이를 클릭하면 해당 커맨드가 발생 하도록 해보자. 먼저 MainView를 만들었으므로 ViewModel도 만들도록 하자. 위 [그림 2]를 보면 View폴더에 MainViewModel.cs 클래스(Class)파일과 ViewModelBase.cs 클래스파일이 있는 것을 봤을 것이다. ViewModelBase 클래스는 ViewModel에서 있어야 하는 기본적인 코드는 넣어두고, 자식클래스에서 상속받아서 사용 할 수 있도록 하기 위해 만든 클래스이다.
|
namespace Flickr.MyPhotoGallery { public class ViewModelBase : INotifyPropertyChanged { public ViewModelBase() { }
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } |
[코드 1] ViewModelBase 클래스(Class)
ViewModelBase 클래스에서 간단하게 INotifyPropertyChanged 인터페이스(Interface)를 상속받아서 OnPropertyChanged 메소드(Method)를 만들어 주었다. 이는 프로퍼티(Property)가 변경이 되면 바인딩요소가 변경이 될 수 있도록 알려주기 위해 이벤트를 발생시키는 메소드인 것 이다.
|
namespace Flickr.MyPhotoGallery { public class MainViewModel : ViewModelBase { /// <summary> /// 로그인 Command를 반환 합니다 /// </summary> public InstantCommand<object> LoginCommand { get; private set; } /// <summary> /// 생성자 /// </summary>
public MainViewModel() { } } } |
[코드 2] MainViewModel 클래스(Class)
[코드 2]는 MainViewModel 클래스를 정의한 것이다. ViewModelBase클래스를 상속 받아서 OnPropertyChanged를 호출할 수 가 있다.
[코드 2]에서 보면 LoginCommand가 정의되어 있을 것이다. 이는 휴즈플로우 커맨드 패턴을 참조했기때문에 사용할수 있는 것인데, 휴즈플로우 커맨드에서 주로 StaticCommand와 InstantCommand를 사용할 수가 있다. StaticCommand는 이름 그대로 전역에서 이벤트를 받아야 할 때 사용하면 될 것이고, InstantCommand는 인스턴스가 생성이 되었을때만 사용할 것이면 InstantCommand를 사용하면 될 것이다. MainViewModel 클래스는 생성 될 때, 그리고 MainView에서만 커맨드를 받을 것 이기 때문에 InstantCommand를 사용했다.
이렇게 코드가 짜여졌다면 뷰와 뷰모델을 바인딩을 엮여주자.
|
<UserControl 중간 코드 생략... > <UserControl.Resources> <local:MainViewModel x:Key="MainViewModelDataSource" d:IsDataSource="True"/> </UserControl.Resources> <UserControl.DataContext> <Binding Mode="OneWay" Source="{StaticResource MainViewModelDataSource}"/> </UserControl.DataContext> 중간 코드 생략… </UserControl> |
[코드 4] MainView.xaml
[코드 4]는 MainView XAML 코드이다. DataContext를 보면 MainViewModel이 바인딩 되어 있는 것을 알 수 있을 것이다. 이렇게 함으로서 뷰와 뷰모델이 바인딩 처리가 되었다. 이제 뷰모델에서 선언했던 LoginCommand를 이벤트 연결을 하도록 해보자.(블렌드를 이용하면 편리하다.)
[그림 4-1] Command 등록
커맨드 연결하는 것은 비헤이비어 연결하듯 드래그해서 해당 객체에 붙어 주기만하면 된다.
[그림 4-2] 커맨스(Command) 속성 설정
커맨드 속성 설정도 비헤이비어와 비슷하다. 먼저, SourceName과 EventName은 로그인 버튼을 선택하고, 어떤 이벤트가 일어났을 때 커맨드를 발생 시킬 것 인지를 지정하는 것이다. 그리고 Command를 현재 DataContext로 바인딩되어 이는 뷰모델에서 LoginCommand를 선택해주면 된다. 이렇게 하면 버튼 클릭했을 경우 해당 뷰모델로 이벤트가 들어 올 것인데, 그럼 그 이벤트를 받아서 로그인 관련 코드를 짜주면 되는 것이다.
|
※ 로그인 관련 코드 내용을 따로 설명하지 않겠다. 몇 가지 설정이 필요하긴 한데, 이를 다 설명하기에는 너무 내용이 길어 질 것 같아 생략하도록 하겠다. www.flickr.com/services/api/ 페이지에서 사용자 인증 |