Mobile UX for Windows Mobile

1. 오픈소스를 이용한 윈도우 폰 UX애플리케이션 개발 서진호 차장 (Jinho.Seo@microsoft.com) 모바일/임베디드 디벨로퍼 에반젤리스트 한국 마이크로소프트 블로그: http://blogs.msdn.com/jinhoseo 커뮤니티: http://www.winmodev.net 트위터: @synabreu

2. Agenda 윈도우 모바일 6.5 UX 아키텍처 개발자들을 위한 요구 사항 윈도우 모바일 6.5 DTK에 포함된 터치 및 제스처 오픈 소스 프레임워크를 이용한 Apps 개발 Fruid Touch Control Silvermoon for OPEG GL ES 윈도우 모바일 UX 애플리케이션 개발 최적화

3. 세계는 지금 모바일 UX 전쟁? 모바일 UX의 스마트폰 얼굴이기 때문에! 하드웨어보다는 소프트웨어 차별화 시대로!

4. CES’2010 에서 본 윈도우 모바일 UX 출처: WMPowerUser

5. 왜 폰에서 사용자 경험이 중요한가? 더 뛰어난 그래픽 사용자 경험 직관적인/생산적인 Phone UI 더 나은 인터넷 브라우징 (모바일/데스크톱) 끊김없는 연결성 더 나은 멀티미디어 경험 오피스 도구와의 통합

6. Design Concept - Interaction Home Start Internet Explorer Mobile 6 6

7. Demo Windows Mobile 6.5

8. 윈도우폰 애플리케이션 개발 방법 Smart Device project Platform Builder C#, VB.NET C/C++ Hardware Software Application Win32, MFC, ATL OS

9. 윈도우 모바일 6.5 DTK 에뮬레이터 이미지, 터치 제스처 및 위젯 API 반드시 Windows Mobile 6 SDK 필요

10. 터치 제스처 DTK 에서는 C/C++만, 코드 갤러리에 C#용 http://code.msdn.microsoft.com/gestureswm 동작원리 제스처는 마우스 메시지가 아니다. WM_GESTURE 메시지 (GESTUREINFO 구조체 포함) 기본 제스처 Pan, Scroll (Inertia), Select (Tap), Double-select, Hold 컨트롤에서의 터치 제스처 지원 ListView및 ListBox (콤보 박스 포함) WebView및 TreeView, Tab (왼쪽에서 오른쪽으로 스크롤링) Managed Wrapper GestureRecognizer PhysicsEngine AutoGestureContext

11. 터치 제스처 동작원리 GESTUREINFO GF_INERTIA GF_BEGIN 종류에 따라 (Gesture IDs) GF_END GID_BEGIN = 1 GID_END = 2 GID_PAN = 4 GID_SCROLL = 8 GID_HOLD = 9 GID_SELECT = 10 GID_DOUBLESELECT = 11 GID_LAST = 11

12. Managed Wrapper GestureRecognizer http://code.msdn.microsoft.com/gestureswm PhysicsEngine 자연스러운 스크롤링을 할 수 있음 스크롤링시 rubber-band 효과 제공 Animation point 의 스트림 생성 AutoGestureContext 자동적인 제스처 핸들링 및OwnerAnimate이벤트 핸들러 var g = new GestureRecognizer(); g.TargetControl= panel1; g.Select += (sender, GestureEventArgs e) => … g.DoubleSelect += (sender, GestureEventArgs e) => … g.Hold += (sender, GestureEventArgs e) => … g.Pan += (sender, GestureEventArgs e) => … g.Scroll += (sender, GestureScrollEventArgs e) => …

13. Demo 관리형 제스처 샘플

14. 왜 오픈 소스 프레임워크인가? 창조적인 아이디어를 빠르게 구현하기 위해!! 개발한 소스를 재활용 하기 위해!! 멀티 장치 디스플레이에도 동일하게 동작하기 위해 글로벌 언어 및 리소스를 편리하게 관리

15. Touch UI Chris 가 개발한 Touch UI for Windows Mobile 6.1/6.5 http://touchui.codeplex.com/ http://blog.wmdev.net/

16. Touch UI(1) private void MainForm_Load(object sender, EventArgs e) { dialogStack = new List<Dialog>(); MainDialogmainDialog = new MainDialog(Common.Instance.ScreenFactor, Common.Instance.ClientRectangle); mainDialog.Selected += new EventHandler(dialogSelected); dialogStack.Add(mainDialog); navigate(); timer = new Timer(); timer.Interval = 80; // 12.5 fps timer.Tick += new EventHandler(timer_Tick); timer.Enabled = true; loaded = true; } private void MainForm_Activated(object sender, EventArgs e) { if(loaded) timer.Enabled= true; } private void MainForm_Deactivate(object sender, EventArgs e) { if(loaded) timer.Enabled = false; }

17. Touch UI(2) – Scroll Up/Down private void MainForm_MouseUp(object sender, MouseEventArgs e) { dialogStack.Last().MouseUp(new Point(e.X, e.Y)); } ….. private void MainForm_KeyDown(object sender, KeyEventArgs e) { dialogStack.Last().KeyDown(e); } …. private void navigateForward() { if(dialogStack.Last() is MainDialog) { MainDialogmainDialog = (MainDialog)dialogStack.Last(); DetailDialogdetailDialog = new DetailDialog(Common.Instance.ScreenFactor, Common.Instance.ClientRectangle, mainDialog.SelectedLine + 1); dialogStack.Add(detailDialog); navigate(); } }

18. Touch UI(3) protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); if(!loaded) return; dialogStack.Last().Paint(Common.Instance.PaintGraphics); Rectangle r = Common.Instance.ClientRectangle; if(animationLeft != 0) { e.Graphics.DrawImage(Common.Instance.PaintCopyBitmap, new Rectangle(animationLeft - r.Width * animationLeft.CompareTo(0), 0, r.Width, r.Height), r, GraphicsUnit.Pixel); e.Graphics.DrawImage(Common.Instance.PaintBitmap, new Rectangle(animationLeft, 0, r.Width, r.Height), r, GraphicsUnit.Pixel); animationLeft -= animationOffset; if(Math.Abs(animationLeft) < Math.Abs(animationOffset)) animationLeft = 0; } else e.Graphics.DrawImage(Common.Instance.PaintBitmap, r, r, GraphicsUnit.Pixel); }

19. Demo 오픈 소스 프레임워크

20. 오픈소스(1) Fluid – Windows Mobile 6.x Touch Controls http://fluid.codeplex.com/ http://www.codeproject.com/KB/mobile/MobilePasswordSafe.aspx

21. 오픈소스(2) - iPhone UI 21 http://iphoneui.codeplex.com/ http://www.codeproject.com/KB/mobile/IPhoneUI.aspx

22. 오픈소스(3) - Alpha Mobile Controls AlphaBlend() - Alpha Blending 과 Alpha Channel 이용 http://blogs.msdn.com/chrislorton/archive/2006/04/07/570649.aspx http://www.codeproject.com/KB/mobile/Windows_Mobile_UI.aspx

23. 오픈소스(4) - Silvermoon OpenGL ES 2.0을 이용한 UX 프레임워크 http://silvermoon.codeplex.com/

24. 결론 윈도우 모바일 UX의 기본적인 디자인 철학과 컨셉트를 이해하라! 윈도우 모바일 UX 애플리케이션은 다양한 오픈 소스 프레임워크로 개발 할 수 있다! 먼저 윈도우 모바일 UX에 맞게 디자인 설계한 다음 프로토타입을 테스트하라! 한 화면에 모든 것을 표현하지 말라! 배터리가 없어지거나 전화가 오거나 알람이 울릴 때 등 다양한 이벤트 환경을 고려하여 디자인하라!