Monday, August 30, 2010

My First WP7 App - Japanese Flash Card

I was reading the recent news about the Windows Phone 7 development and how Microsoft wanted to push their product to the market quickly. They promise that developing on the device prove to be not a problem for exisiting developers who has subtle knowledge on C# and Silverlight.

Since I am free for these few days, I decided to take up the challenge and began reading up developing apps for WP7.
Here are some of the links for those who might be interested in learning it.
WP7 Samples

I strongly recommend to people to watch these videos. It helps to understand the basic features and specs on how silverlight interact with the code-behind C# (sorry no VB.)
WP7 Jump Start Session

To begin developing on anything, one must have an objective and idea what to develop. What I think of is building a simple Japanese Flash Card app which has already exist on most platforms except for this one.

Silverlight tends to be a bit like ASP + XML 'mojo'. I personally find it more easier to code than in ASP.net. Overall I discover that it helps to reduce alot of client-side scripting. There is still much to learn for me as my current app, I put it more in code-behind.

Here are my 1st screenshots released for my first build.



It took me rather very short time about 3 days to learn and 4 days to build WP7 because I have some background knowledge on C# and XNA. (hey! I was once a game developer) So picking up WP7 is not a hurdle for me. My missing knowledge is just Silverlight. My app consist some of the libraries from XNA framework which I am using TouchPanel class to detect fingers touching on the panel. This was quite a challenge for me as I have no knowledge on developing touchscreen application and this was my first app. In XNA 4.0, they include the Gesture class but unfortunately it only works with the real device and not on the emulator. I hope to get a loan set from Microsoft to test that out. :)

Program logic wise is quite a challenge for me as my purpose of this app is to make it feel like you are holding a deck of cards on your hand.

I have programmatically inlcude the gesture for flicking left or right for the next character. This part was quite easy until I came into a problem flicking up and down to advance to the next sets of characters. I did a bit of research on other mobile platform and discover that there is no application doing it that way. (which might explain iphone photo gallery has only left and right gesture) There is no way you can determine if you are flicking up or left if you need to predict something behind that screen. (If there is please let me know which app)

Upon learning it, I decided to discard the flick up and down feature and replace it with double tap. If I tap twice on the upper screen, it will move according to the region I tapping which in this case up and down.

One thing unique about WP7 feature is that you can style your app based on the phone profile.
In this screenshot I just simply change the color theme and my app is automatically applied on that style.





Though the functionalities are almost completed. This app is still far from completion as there is still alot of features like additional syllabograms such as katagana and UI improvement not included in this build yet.

1 comment:

sujayarun said...

hi.. can u explain me how to create a flashcard in wp7 ? my mail id is sujayarun8@gmail.com