- Controls_: browser in your app

After writing your first app using the Microsoft .NET Compact Framework 2.0 and deploying to a Windows Mobile 5.0 Pocket PC emulator (and tips on using the Windows Mobile emulators), you are now ready to write your second app.

One of the new conrols in netcf2 is the browser control. The example here shows you how to create a simple browser app for your Pocket PC.

1. First, start Visual Studio .NET 2005.
2. If you're using an emulator, ensure that it is connected to the network. There are 2 methods to do this. Click Tools-> Device Emulator Manager to start the Device Emulator Manager, right-click on Windows Mobile 5.0 Pocket PC Phone Emulator (or another WM5 emulator) and click Connect. The emulator will start up. Now, in the Device Emulator Manager again, right-click on the same item and click Cradle (see pic). This will connect the emulated PDA to your PC via ActiveSync. If it is the first time you're doing this, just go through the wizard on what to synchronize (I'd uncheck everything). Your emulator should now be connected to the network via your PC. The second method is to bind the network adaptor in the emulator to the networking in your PC. In the emulator program, click File-> Configure, under the Network tab, check the first checkbox to enable the network adapter.

3. Do a quick check by opening Internet Explorer in the emulator and browsing to a website such as www.google.com (yes, there's already a browser, so why are we writing another browser?!)
4. Next, as in previous examples, create a Windows Mobile 5.0 Device Application project. As usual, change the Minimize Box property of the form to False.
5. From the toolbox, drag the WebBrowser control to the form. By default, the WebBrowser control is docked to the form. This means that it fills up the entire form all the time, regardless of the form's orientation (portrait or landscape). This is a nice behavior, but we'll anchor the control instead. To do this, we first undock the control: with the control selected, you should see a little triangle. Click on it to open a "Smart Task menu", and select Undock in parent container.

6. Still with the WebBrowser control selected, go to the Properties panel (shortcut key: F4) and change its Anchor property such that the control is anchored Bottom, Left, Right to the form (see pic below). With anchoring, the control will always maintain the same distance from the sides of the form to which it is anchored (bottom, left & right in our case here).

7. Drag and resize the WebBrowser control such that it fills about two-thirds of the form, leaving a gap at the top. Right-click on the form (or on the little lock symbol) and select Rotate Right. You now see the landscape mode at design time! Notice that the WebBrowser control still maintains the same distance from bottom, left & right (if it fills up the form, you should decrease the height of the control). Rotate Left the form to revert to portrait mode.
8. Drag a TextBox control and a Button control to the form. Change the Text property of each to have this:

9. Finally, double-click on the Go! button and add this line of code to its click event handler:

Uri u = new Uri(textBox1.Text); webBrowser1.Navigate(u);

10. Click Ctrl-F5 to run. Enter a valid URL and click Go!. To see the anchoring in action, click on the calendar button in the emulator (circled in red in pic below) to change to landscape orientation.

Where do we go from here? Let's write something more complicated, like a Sudoku solver! And maybe check out the Dell Axim X51v.

Categories: [Controls_] Tags: [netcf2] [Compact Framework] [Windows Mobile]