Windows phone Xperia X1 Panels Design and Development

Jinho Seo (twitter: @synabreu)Mobile/Embedded Developer Evangelist

Microsoft Koreahttp://blogs.msdn.com/jinhoseo

2

Agenda

1. What is Xperia Panels?2. Installation of the Sony

Ericson SDK for Windows Mobile 6.1

3. A Types of Xperia Panels4. Creating and Deploying

Xperia Panels on Device Emulator

5. Debugging Xperia Panels on Device and Device Emulator

3

What is Xperia Panels?

• What are Xperia Panels?Extension plug-in DLL that implements a specific Panel API that allows it to be configured and launched from within the Xperia Panel Interface.

• A Types of Xperia Panels– Xperia Native Panel– Xperia HTML Panel– Xperia OpenGL Panel

4

Install Sony Ericsson SDK for Windows Mobile 6.1

• Step by Step Guide http://blogs.msdn.com/jinhoseo/archive/2008/12/23/0-t.aspx• Final Step : Install Sony Ericsson SDK for Windows Mobile 6.1

Download URL: http://developer.sonyericsson.com/site/global/docstools/windowsmobile/p_windowsmobile.jsp

• Configuring Xperia Device Emulator in Visual Studio 2008

5

Configuring Xperia Device Emulator (1)

• Open Tools menu and choose Options

Click icon to add picture

• Rename XPERIA X1 of Windows Mobile 6 Professional VGA Emulator

6

Configuring Xperia Device Emulator (2)

• Choose Emulator Options

• Rename Skin FilesC:\Program Files\Windows Mobile 6 SDK\PocketPC\Deviceemulation\Pocket_PC_X1\Pocket_PC_X1.xml

7

Xperia Panels Architecture

HTML Panel Native Panel

Windows phone

Xpanel Resource

HTML Panels Native Panels OpenGL Panels

8

Xperia HTML Panel (1)• Panel API and JavaScript to define its interface and functionality• Program Files\Panels\DemoPanel• File System View : Adding index.html, HTMLPanel.dll,

HtmlPanel.dll.<LCID>.MUI and image resources

9

Xperia HTML Panel (2)• Customize HTML, style.css and images• Adding HTMLPanel.dll

– C:\Program Files\Sony Ericsson\SDK WM6\SEMC_VS_DEV\LIB

10

Xperia HTML Panel (3)• Customize HTML, style.css and images• Adding HTMLPanel.dll

– C:\Program Files\Sony Ericsson\SDK WM6\SEMC_VS_DEV\LIB

11

Xperia HTML Panel (4)

• View->Registry• Installation Key

HKEY_LOCAL_MACHINE/Software/SonyEricsson/Panels/HTML Demo Panel

• Mandatory ValuesDLL, Landscape, LargeLandscape, Portrait, LargePortrait, Name, DisableWait(1), RequiredVersion(100), Desc

12

Xperia HTML Panel (5)• Mandatory values in the HtmlPanelSettings Key

1) Url – The Url that HTML Panel will load at startup2) Timeout – HTML page loading timeout in milliseconds. Millisecond Value is 10000 3) Snapshot – 1 (Landscape, LargeLandscape, Portrait and LargeStrait)

• BrowserRestrictions Key1) AllowUrlMask - *, all of pages2) DenyUrlMask – Restricted domain

A Tutorial of HTML Panel

Demo

14

Xperia Native Panel

• C/C++ Programming Model• Using Visual Studio 2008

1) New -> Project2) Select Xperia Panel Project

Click icon to add picture

• Enter your name and Select a Class Name

A Tutorial of Native Panel

Demo

16

Xperia OpenGL ES Panel (1)

• Support to OpenGL ES 1.1 library• Injecting OpenGL code into a Native Panel

1) Source code for the DLL that implements the Panel2) Deployment of the DLL and accompany resource and registry settings

• Linking to the Open GL ES Library

17

Xperia OpenGL ES Panel (2)• Creating the OpenGLESPanel DLL

1) Included OpenGLES header files2) Define Fixed Point Constants3) Include EGL Constants: g_Display, g_EGLSurface and g_EGLContext• Adding WndProc for your draw function• Implementing interface funtions

1) InitializeCustomItem2) ReleaseCustomItem• Additional Methods

1) gluesPerspective2) drawCube• Calling the Drawing Routing – WM_PAINT

A Tutorial of Xperia Open GL Panel

Demo

19

Debugging Xperia X1 Device Emulator

• HKEY_LOCAL_MACHINE/Software/SonyEricsson/PanelManager• SLOT2 – HTML Demo

Panel• Add HTMLPanelLauncher

or NativePanelLauncher• Execute

HTMLPanelLancher or NativePanelLauncher

Click icon to add picture

20

Deploying Xperia X1 Device Emulator or Device

• Building and Deploying CAB Files• Device Emulator

1) Cradle to device emulator2) HTMLPanelLauncher or NativePanelLauncher

• Xperia X1 Device 1) Manually Copy and Install2) Click on Panel Button

• Test and Certification in your CAB Files

Just do it now!Conclusion

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the

date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.