Developing for Mobile Devices Lab (Part 1 of 2)

Size: px

Start display at page:

Download "Developing for Mobile Devices Lab (Part 1 of 2)"

Beatrice Wells
5 years ago
Views:

1 Developing for Mobile Devices Lab (Part 1 of 2) Overview Through these two lab sessions you will learn how to create mobile applications for Windows Mobile phones and PDAs. As developing for Windows Mobile is extremely similar to developing desktop Windows applications, you will first learn how to create standard Windows console and GUI programs that can run on any Windows desktop or laptop. There are two labs. In this first lab you will learn the basics of Visual Studio, how to create desktop programs, and how to develop some very basic mobile applications. In the second lab you will develop more advanced mobile applications that make use of the unique capabilities of the mobile device (e.g and Bluetooth). For most of the mobile development in this lab you will use the mobile device emulator, rather than an actual device. However, at the end of the lab you can test the final program on a real mobile device, and we will be using the actual mobile device more in the next lab. For these labs we will be using C# as the language for all our development. This is for two important reasons. Firstly, C# is very similar to Java, which you should already be familiar with. Secondly, C# is the language Microsoft recommends for mobile device development, and as such has the greatest amount of support of all the Visual Studio languages for developing for mobiles. Creating a solution In Visual Studio all development is done within a solution. Solutions are workspaces that can contain a number of projects. Each project in a workspace can contain a program, library, or other code assembly. For example, if you were creating an instant messaging client you might create a solution called MyInstantMessanger. Within that solution you might have two projects, one with the code for the graphical interface of the client and one for the networking code used to send messages. Solutions are workspaces that can contain many individual projects. The first project we will create for these labs is a simple HelloWorld desktop application. When we create this first project we will also create and name the solution we will use throughout the labs. Start by selecting File->New->Project... from the Visual Studio menu. You will be presented with the New Project window. In this window select the language we will be using, Visual C#, from the Project types box and select Windows as the type of application we will be creating. In the Templates box select Console Application. Type ʻHelloWorldʼ in the box for the Name of the project. Finally, call the solution ʻHCI4Labʼ by typing it into the Solution Name box. Check that you have entered the correct information using figure 1, then click OK. Note that the only difference you should see is that you should select a Location in your own ʻMy Documentsʼ folder, or any other filespace you want to use.

This shows the name of the currently open solution (HCI4Lab) and all the projects within that solution.

2 Figure 1 Once you click OK a new console project will be created, and the code for it will be displayed in the main page. On the right of the screen is the solution explorer. This shows the name of the currently open solution (HCI4Lab) and all the projects within that solution. Just now there is only one project called HelloWorld (as shown in figure 2). Figure 2 Edit the main method to add the following code by simply clicking in the appropriate place and typing it in.

3 static void Main(string[] args) Console.WriteLine( Hello from C# ); Console.Read(); The first line you added will print the text to the console. The second line will stop the program from disappearing immediately by waiting on a character to be input before exiting the program. Test the program by selecting Debug->Start Without Debugging, which will run the program. You should see the text appear in a console. Exit the program by hitting the return key. A desktop GUI app Console applications are only really useful for very simple one off tasks, or tasks that will generally be run in the background without any user intervention. The vast majority of all applications on any platform involve a graphical user interface to allow users to interact with them. Create a new GUI desktop application by right-clicking on the HCI4Lab solution in the solution explorer on the right of the screen and selecting Add->New Project... from the pop-up menu (figure 3). Figure 3 You will again be presented with the Add New Project dialog. Select Windows in the Visual C# dialog again, but this time select Windows Application in the Template box on the right. Name the project HelloWorldGUI in the name box. Use figure 4 to make sure you have selected the right items, then click OK.

As we are now going to be working with the GUI version, rightclick the HelloWorldGUI project in the solution explorer and select ʻSet as Startup Projectʼ (figure 5).

4 Figure 4 This time when you click OK you will be presented with a GUI form designer, rather than the code view. In the solution explorer on the right you will now see that there are two projects in the solution. As we are now going to be working with the GUI version, rightclick the HelloWorldGUI project in the solution explorer and select ʻSet as Startup Projectʼ (figure 5). Figure 5 All this does is change the program that starts up when we click things like Start Without Debugging, so now our new GUI app will run when we do that instead of the console app. To edit the form that is now displayed we can use the toolbox and the widgets it contains. By default, the toolbox is docked to a tab on the very left of Visual Studio, click the toolbox to make it expand out. Once it is expanded out you can click the little pin icon to keep it pinned and displayed permanently (figure 6).

Use the same technique to set the buttonʼs text to Click Me, and the formʼs text to Hello (click anywhere on the form to select it). Your form should look something like figure 7 when you are done.

5 Figure 6 Drag a label widget off the common controls on the toolbox and onto your form. Then drag a button from the toolbox onto your form. Click once on the label and use the Properties window, at the bottom right underneath the Solution Explorer to set its text property to Hello World. Use the same technique to set the buttonʼs text to Click Me, and the formʼs text to Hello (click anywhere on the form to select it). Your form should look something like figure 7 when you are done... Figure 7 Next, double-click on the button on your form. This will take you to the code view, and your cursor will be located at the code that is executed when the user clicks the button. Edit this code so that it reads as follows... private void button1_click(object sender, EventArgs e) label1.text = VS + C# = easy development ;

6 Note that at any time you can switch between the code and GUI views for the application by selecting the appropriate form (Form1.cs in this case) from the solution explorer, and clicking either the code or GUI button at the top (figure 8). Figure 8 Now test your new GUI application by selecting Debug->Start Without Debugging from the menu. Note that if your console project starts up instead of the GUI app then you must have forgot to set the start-up project. When your GUI app runs you can click the button to change the label text. Note that the application behaves like a regular Windows application (because it is). You can minimize, maximize, and close it just like any regular application. If you use Windows Explorer and navigate to the directory you put your solution in you will find a regular Windows executable file that you can double-click to run your app in... YourFileSpace\HCI4Lab\HelloWorldGUI\bin\Debug\HelloWorldGUI.exe As you can see, the program you have created is a completely standard Windows application. Mobile HelloWorld Now that you know how to create normal Windows applications letʼs try doing exactly the same kind of program for a mobile device. To begin with weʼll develop your mobile application using a mobile device emulator, rather than a real mobile device. However, towards the end of the lab you can try your application on either a mobile phone or PDA. Add another project to your solution by again right-clicking the HCI4Lab solution in the solution explorer and selecting Add->New Project. This time when the Add New Project dialog appears select Visual C#->Smart Device->Windows Mobile 5.0 SmartPhone as the Project type on the left. Select Device Application for the type of project from the template box and name the project HelloWorldPhone. Again, use the screenshot in figure 9 to make sure you have entered the settings correctly, and then click OK.

Use the toolbox to drag a label onto the phone. Edit the label Text property so that it reads Hello Mobile World. Notice at the bottom of the screen you can see an icon labelled mainmenu1.

7 Figure 9 This time the editor that opens when you click okay will show a form inside an image of a phone. Before you begin editing, make sure you again change the startup project to this new one by right-clicking it in the solution explorer and selecting ʻSet as Startup Projectʼ. Use the toolbox to drag a label onto the phone. Edit the label Text property so that it reads Hello Mobile World. Notice at the bottom of the screen you can see an icon labelled mainmenu1. All mobile applications always contain a menu, and this icon is simply showing the menu and its name. The menu itself is actually located on the form (where you added the label); it is the light blue bar at the bottom of the form. Click on the left of this light blue strip and it will become highlighted. Type ʻExitʼ to add a menu entry. Now click on the right of the blue strip and type ʻClick Meʼ on this right menu entry. Your form should now look something like figure Figure 10 Double-click on the ʻExitʼ menu item and Visual Studio will take you to the code that executes when that button is clicked. When the user clicks exit we want the form to close, so simply add a call to the Close() method in the code so that the method reads as follows. private void menuitem1_click(object sender, EventArgs e) Close();

8 Return to the GUI view by clicking the GUI edit button at the top of the solution explorer (figure 11)... Figure 11 Now double-click the ʻClick Meʼ button. Edit the code for this method so that it reads... private void menuitem2_click(object sender, EventArgs e) label1.text = This runs on a phone ; Now test your application by selecting Debug->Start Without Debugging from the menu. This time when you select start a pop-up will appear asking where you want to run the device, on an emulator or on a real phone. Select the WM 5.0 Smartphone Emulator for just now and click deploy. You will see an emulator start up and your application will run on it. You can click the buttons on the fake phone to see how your application reacts. A useful thing to note is that any mobile device program you write can also run on your desktop machine. Remember that the.net Compact Framework for mobile devices is a cut-down version of the full.net Framework found on desktops. So obviously, the Full Framework will be able to run anything targeted for the Compact Framework. You can test this yourself by executing the program on your desktop. You can find it at... YourFileSpace\HCI4Lab\HelloWorldPhone\bin\Debug Mobile Mapping The final application we will create today is a phone application that is a little more complex than the HelloWorld one. This phone application will allow users to navigate a simple map. Once again, right-click the HCI4Lab solution in the solution explorer and select Add->New Project. When the Add New Project dialog appears select Visual C#, Smart Device, WM 5.0 Smartphone from the project types. Select Device Application from the Templates, and name the project ʻPhoneMapʼ. Once more, check the screenshot in figure 12 to ensure you select the right options.

Go back to the GUI view and make the right menu item read ʻChangeʼ. Donʼt add any code for it just now. For this project a DLL (Dynamic Link Library) that has been written earlier will be used.

9 Figure 12 After creating the project remember to right-click it and mark it as the startup project since weʼll be using this one from now on. Now in the form editor appears edit the menu for this application. Make the left menu item ʻExitʼ, double-click it, and add the code to call close in the method. Go back to the GUI view and make the right menu item read ʻChangeʼ. Donʼt add any code for it just now. For this project a DLL (Dynamic Link Library) that has been written earlier will be used. Using DLLs is useful because it allows developers to reuse existing code, allowing access to large libraries that support many different functions. The library we are going to use is one that supports mapping. Download the zip file containing the library from the following URL... Navigate to the following location and extract the contents of the zip to it... YourFileSpace/HCI4Lab/PhoneMap Back in Visual Studio, right-click the PhoneMap project and select Add->Existing Item from the popup menu (figure 13). Figure 13

In the file dialog that appears change the Files of type at the bottom to search for Image Files. Select the ʻmapʼ image file and click add. The file map.

10 In the file dialog that appears change the Files of type at the bottom to search for Image Files. Select the ʻmapʼ image file and click add. The file map.gif will be added to the PhoneMap project in the solution explorer. Select map.gif in the solution explorer and in the properties window below change the ʻCopy to Output Directoryʼ property to ʻCopy if newerʼ (figure 14). Figure 14 Changing this value means that the map.gif file will be copied to the mobile device when you deploy the application. We can then use it to get the image used for the map we are going to display. Now we will create the reference to the DLL we are going to use. Right-click the ʻReferencesʼ entry in the PhoneMap project and select ʻAdd Reference...ʼ (figure 15). Figure 15 In the dialog that appears select the mapping DLL we copied over, SmapsLibCF.dll, and click OK. The DLL is now linked into the project, and will be copied to the mobile device when we deploy the application. Select PhoneMapʼs Form.cs file and click the Code Editor button to view the code. To use the mapping DLL in our code we must specify that we are going to be using it at the top of the code. At the top of the code, after the other using statements, add one for the library. The code at the top should read... using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using SmapsLibCF; // this is the line that is to be added

11 The main component from the map DLL that we will use is a map viewer which is contained in a class called Viewer. Create a reference to an instance of this class by adding the following code just above the Form1 constructor. private Viewer myviewer; public Form1() Next myviewer must be initialised, added to the form, and its KeyPress event must be hooked into so that it can respond when the user presses keys. Do this initialising by changing the Form1 constructor so that it reads as follows (note, you donʼt have to copy the comments)... public Form1() InitializeComponent(); // initialise the instance of the viewer myviewer = new Viewer(); // tell the viewer not to use the default template, we will customise it instead myviewer.usetemplate = false; // create a rectangular viewport GeoRectangle rect = new GeoRectangle(0, 0, 100, 100); // create a map layer that displays the image we copied earlier using the viewport above ImageLayer maplayer = new ImageLayer( \\Program Files\\PhoneMap\\map.gif, rect); myviewer.addlayer(maplayer); // set the location of the viewer on the form to the very top-left myviewer.location = new Point(0, 0); // set the size of the viewer to be the same as the form itself myviewer.size = new Size(this.Width, this.height); // add the viewer to the form s controls Controls.Add(myViewer); After adding this code you can test the application by running it using Debug->Start Without Debugging. You should see that the application loads and the map appears, but you can not interact with it yet as no code has been added to respond to key presses. Add the following line to the bottom of the Form1() constructor... // hook in the viewer s keypress event so that it will respond to key presses // note that as soon as you type += here you can then press tab twice to auto-generate the method // that will be executed when a press key occurs myviewer.keypress += new KeyPressEventHandler(myViewer_KeyPress); Next, create (or edit if you auto-generated) the myviewer_keypress method so that it is as follows, again you can ignore the comments if you want...

12 void myviewer_keypress(object sender, KeyPressEventArgs e) int x = myviewer.location.x; int y = myviewer.location.y; int width = myviewer.size.width; int height = myviewer.size.height; switch (e.keychar) case '2': myviewer.location = new Point(x, y + 10); case '8': myviewer.location = new Point(x, y - 10); case '4': myviewer.location = new Point(x + 10, y); case '6': myviewer.location = new Point(x - 10, y); case '1': myviewer.size = new Size(width + 50, height + 50); case '3': myviewer.size = new Size(width - 50, height - 50); default: This code simply moves the map North, East, South or West depending if 2, 6, 8 or 4 is pressed. Additionally, if the user presses 1 or 3 the map will zoom in or out respectively. You can again test the application by running it, and it should now react correctly when you press the number keys. As the final step today is to test the application on an actual phone or PDA the last bit of code we will write will allow the map to be controlled on the PDA. Many PDAs do not have keypads, but they do have touchscreens, so the code we will add will make use of that input method instead. Go back to the GUI editor for the form and double-click the Change menu item you created earlier. In the method it takes you to add the following code, which allows the user to switch between panning and zooming using a touchscreen... private void menuitem2_click(object sender, EventArgs e) if (viewer.currenttool == "PanTool") viewer.settool("zoomtool"); else viewer.settool("pantool"); On the phone this code will have no affect, but without it the map could not be navigated on PDAs. It is often the case when developing for mobile devices that you must account for the many different input methods and hardware they support.

13 Now that you have finished the final application for today, ask for a phone or PDA to test your program on a real device. Conclusion Today you have had a very short introduction to Visual Studio and developing for mobile devices. Feel free to play around with Visual Studio to create your own desktop or mobile applications. Visual Studio can be used to create any Windows application at all - such as games, calculators, word processors, and instant messaging clients. Indeed, virtually every application you use in Windows on a daily basis was most likely created using Visual Studio. Remember, Visual Studio is by far the most popular development environment in use today, and experience in it is in extremely high demand by employers. Now that you have the knowledge to create basic mobile applications, in the next lab we will look at using a couple of more advanced mobile features. Namely, calling native code from mobile devices and accessing Bluetooth and hardware. Finished early? If you finish early then please use the extra time to explore Visual Studio more. Try creating more GUI applications that use the other graphical widgets available in the toolbox, such as the ProgressBar, PictureBox and ListView.

Developing for Mobile Devices Lab (Part 2 of 2)

Developing for Mobile Devices Lab (Part 2 of 2) Overview In the previous lab you learned how to create desktop and mobile applications using Visual Studio. Two important features that were not covered