So far in this series I have introduced the basics of Smartphone development and how to get setup with the device emulators. Now that we’re ready to do some Smartphone development (or in general in mobile development) its time to crank up the IDE, familiarize yourself with the tools and start coding. So that’s what we’ll do in this post.
<FONT color=#009f00>*** In case you want to review my previous posts on this topic, I’ll include a list of the posts in this series at the bottom of each post.
<BLOCKQUOTE dir=ltr style=”MARGIN-RIGHT: 0px”> <P><FONT color=#ff0000>***</FONT> Before we kick in too far,you might want to grab the latest service pack (which came out a week ago) for the mobile development. You can grab the .NET Compact Framework 2.0 Service Pack 1 from this link here.</P></BLOCKQUOTE> <P> </P> <P>Creating a New Project – Hello World!</P> <P>Once you have the tools installed such as the CF, the Smartphone SDK and any emulators (see my previous posts in this series for the links if you need them) the next step is to create your first project. So we start by opening Visual Studio.NET 2005 and creating a new project. You’ll want to choose the language, then choose “Smart Device” and then select “Windows Mobile 5.0 Smartphone” from the project type list. Then select “Device Application” since we’ll be developing a simple interactive “Hello World” application. (If you do not see “Windows Mobile 5.0 Smartphone” in the project type list, you need to install the Smartphone SDK.)</P> <P><IMG alt=”” src=”/photos/jpapa/images/146814/425x309.aspx” border=0> </P> <P> </P> <P>The IDE </P> <P>The first thing you’ll probably notice is that the default form’s designer appears (Form1.cs) and it looks like a Smartphone device. While the designer may not look exactly like the Smartphone you might own, its got the basic Smartphone criteria: the left and right menu buttons (soft keys), the D-pad for navigation and the ability to enter alphanumeric characters. Just like standard WinForm development, these buttons have events that you can write code for. The form itself has a title which you will want to customize (I’ll make mine say “Hello World”) and you can throw controls on the form, too.</P> <P><IMG alt=”” src=”/photos/jpapa/images/146817/175x425.aspx” border=0></P> <P> </P> <P>The Toolbox</P> <P>The Toolbox has some familiar controls such as the combo box, label, and textbox. On a Smartphone the button control is not used that often. Rather, the conventional way to select, save, continue or perform other events normally associated with a button control are handled with the soft key menu buttons or by clicking the middle of the D-pad. (A general rule of thumb is to always allow the click of the D-pad to perform a “selection” or a “done” action appropriate for the current screen.) </P> <P> </P> <P>Menus</P> <P>The soft keys are generally associated with menus that you can build in the Smartphone, too. The right menu (or soft key) often opens a menu for the current form. The menu often is used to show options for the current form including properties, settings, options, etc. Menu best practices still hold true here … keep your menu’s to 1 or 2 deep at most. On a Smartphone, even 2 deep menus can get messy. Keep your menu labels short, too. Space is very limited. Common terms are:</P> <UL> <LI>Options <LI>Tools <LI>Properties <LI>Select <LI>Refresh <LI>Done <LI>Cancel <LI>Exit</LI></UL> <P> </P> <P>Other Tips</P> <P>Remember, we’re short of space. So keep the design of your forms small. Avoid the need to scroll if possible, but it is OK to scroll a little. Generally, I try to keep my screens clean with all controls visible but if i cannot, I make sure there are no more than double the height (meaning don’t add more than a few controls off screen). Another option is to use the soft key menu (usually the right one) to continue to the next page … similar to a (gulp) wizard.</P> <P>Make sure you include an Exit option in your application. Its a big pet peeve of mine when applications do not include an Exit menu option on a Smartphone. Leaving your application running with no friendly way to kill it is just wrong. </P> <P> </P> <P>The Hello World Application</P> <P>Well, I promised to keep each of these posts short and sweet. So I’ll save the Hello World application for the next post in this series. I hope this one gave you a quick and dirty run through of creating an application and getting familiar with the IDE.</P> <P> </P> <P> <TABLE cellSpacing=0 cellPadding=0 border=1> <TBODY> <TR bgColor=navy> <TD><FONT color=#ffffff>Smartphone Skills Series: </FONT></TD></TR> <TR> <TD> <UL> <LI>Part 01 – Introduction <LI>Part 02 – Setup and Device Emulators <LI>Part 03 – Development Environment </LI></UL></TD></TR></TBODY></TABLE></P>