윈폰용 텔레그램 앱의 UI 구조 살펴보기 #1

현재 참가 중인 앱 개발 모임에서 윈폰용 텔레그램 클라이언트인 Kilogram 오픈소스를 분석해 보고 있다. UI 부분의 분석을 맡기로 해서 간단히 살펴본 내용을 공유해 본다.

Entry point

우선 앱의 시작점은 Package.appxmanifest를 살펴보니, UI/Pages/StartPage.xaml로 되어 있다.

image

프로젝트의 UI 폴더와 Pages 폴더의 구성은 다음과 같다.

image
image

StartPage

StartPage.xaml에서 사용자 정의 Namespace를 살펴보면 다음과 같다.

image

이 중 controls의 경우는 DialogListControl과 UserListControl이 쓰이고 있다.

image

DialogListControl는 대화 목록이고, UserListControl은 연락처 리스트로 보인다.

image

그 밖에 프로젝트에서 사용하는 사용자 정의 컨트롤은 아래와 같다.

image

그 밖에 StartPage에는 앱바가 있는데, New, Search, Settings 등의 버튼이 있다. 각각 ChatCreate.xaml, SearchPage.xaml, Settings.xaml 페이지로 연결된다.

image

OnLoaded 이벤트에 아래와 같이 세션 인증이 됐는지를 따져서 안 된 경우 Intro.xaml을 보여준다.

image 

앞서 살펴본 2개의 리스트 컨트롤의 항목을 클릭했을 때에는 DialogPage로 보낸다.

image

단, 대화를 선택했을 때는 선택한 DialogModel 인스턴스를 TelegramSession.Instance.Dialogs.OpenedDialog에 넣고, 연락처를 선택했을 때는 userId를 페이지 인수로 전달한다.

참고로, UI폴더에 속한 Models 폴더의 클래스 구성은 단촐하다.(UI 폴더와 같은 레벨에 Models가 따로 있다.)

image

Intro & Signup

인트로 페이지에서 Signup 페이지로 전달되며, 여기서 Telegram.UI.Flows.Login을 이용해서 로그인을 한다.

image image

image

Login() 메서드에는 flow의 이벤트 처리 핸들러들이 정의되어 있고 마지막에 flow.Start()를 호출한다

image

Telegram.UI.Flows에는 Login 클래스만 존재한다.

image

로그인이 끝나면 다시 StartPage로 돌아간다.

ChatCreate

image

검색창, new group과 new secret chat이 있고, 연락처에 쓰인 UserListControl이 있다. 검색을 할 경우, UserControl에서 검색을 처리한다.

image

new group 버튼은 NewGroup.xaml 페이지로 보내고, new secret chat은 NewSecretChat.xaml로 보내며, UserList를 클릭한 경우는 StartPage와 마찬가지로 UserId를 껴서 DialogPage.xaml로 보낸다.

NewGroup과 NewSecretChat은 모두 UserListControl을 사용하고 있으며, NewGroup의 경우 그룹 이름과 멤버를 입력하는데 FormLatterEditPhoneControl을 사용한다.

image

image

두 페이지는 대화방 생성이 끝나면 StartPage로 보낸다. 아마 이렇게 생성된 그룹이나 대화방은 DialogList에 추가가 되는 것으로 보인다. 각각 TelegramSession.Instance.Api.messages_createChat(…)와 TelegramSession.Instance.EncryptedChats.CreateChatRequest(…)를 호출하여 대화방을 생성한다.

DialogPage

계속…

Advertisements

One comment

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중