Working with Microsoft's Mobile Internet Toolkit, Page 3
Creating the User Interface
Based on the current advancement of small mobile devices we have to be cognizant of the modest amount of screen space we have on various devices. For example, a WAP phone generally has a much smaller screen than a handheld. If we are creating an interface for both devices then we may want to create a simpler design for the smallest device or create a specific version of each page for various device types.
The significant benefit here is that we can use a rapid application design approach for the GUI with MIT for mobile applications, sharing a common code base. In keeping with tradition, Figure 4 shows a simple Mobile Page with a Label, TextBox, and Command button painted on the Form.
Figure 4: You can paint a graphical user interface for Mobile Web Forms just as you have become accustomed to doing for ASP.NET and Windows Forms.
The next step is to write some code-behind. If this is your first foray into .NET then code-behind is simply the code associated with a Mobile Web Page. (Think of the code-behind the same way that you would think of the code for a Windows Forms-based application: it is the code that makes the GUI work.)
Writing the Code Behind
Adding code to a Mobile Web Page is just like adding code to an ASP.NET Web Page or Windows Form. Double-click on the control in the designer to create the default event or switch to the code editor to pick the control and event that you want to write code for. Of course, the code-behind is just a class, which means that you can add other methods, properties, fields, events, and delegates just as you would for any other kind of class.
To add some code behind for our application I double-clicked on the Command button containing the text "Click Me!" and added the statement on line 28. To demonstrate that if you know how to write Visual Basic .NET code and understand objects then you could write the code for Mobile Web Pages, I included all of the code from the sample program in listing 1.
Listing 1: The code for a simple Mobile Web Page.
1: Public Class MobileWebForm1 2: Inherits System.Web.UI.MobileControls.MobilePage 3: Protected WithEvents TextBox2 As System.Web.UI.MobileControls.TextBox 4: Protected WithEvents Command1 As System.Web.UI.MobileControls.Command 5: Protected WithEvents Label1 As System.Web.UI.MobileControls.Label 6: Protected WithEvents Form1 As System.Web.UI.MobileControls.Form 7: 8: #Region " Web Form Designer Generated Code " 9: 10: 'This call is required by the Web Form Designer. 11:
_ 12: Private Sub InitializeComponent() 13: 14: End Sub 15: 16: Private Sub Page_Init(ByVal sender As System.Object, _ 17: ByVal e As System.EventArgs) Handles MyBase.Init 18: 'CODEGEN: This method call is required by the 'Web Form Designer 19: 'Do not modify it using the code editor. 20: InitializeComponent() 21: End Sub 22: 23: #End Region 24: 25: Private Sub Command1_Click(ByVal sender As System.Object, _ 26: ByVal e As System.EventArgs) Handles Command1.Click 27: 28: TextBox2.Text = "Hello " & TextBox2.Text 29: 30: End Sub 31: End Class
The only code I added is the code on line 28. The Mobile Internet Toolkit designer generated the rest of the code based on my interactions with the visual designer.
Testing and Debugging Your Mobile Application
You can test and debug your mobile applications in Visual Studio .NET and Internet Explorer. (Recall that I said that MMIT will render CHTML, HTML, or WML depending on the target device.) When you test your application in Internet Explorer the target device is a PC; hence MMIT renders the code as HTML. The added benefit is that all of the skill you have acquired in using Visual Studio .NET for testing and debugging can be employed to test your mobile applications as you are building them. Figure 5 shows the mobile HelloWorld.sln stopped at a breakpoint in Visual Studio .NET.
Figure 5: You can leverage all of your skills with Visual Studio .NET for mobile application development too.
Of course you will want to test your mobile applications in a wide variety of devices, too. A first means of doing so is to download emulators from the various vendors. You can try www.motorola.com and www.nokia.com to obtain some web-enabled phone emulators. (Check with other vendors for additional emulators.)
Finally, when you have developed and tested your mobile applications you will want to deploy them for testing on physical devices. Configuring various servers for cell phones, handhelds, and pagers represents problems particular to the physical device.
Microsoft's Mobile Internet Toolkit is a quantum leap forward in software development for mobile application developers. You can take the same database and business objects and build one set of GUIs that run on a wide selection of mobile devices. An excellent example of this in action can be explored on the IBUYSPY portal application from Microsoft; the source for the IBUYSPY portal is available for download from www.asp.net.
The future is here. No longer do developers have to use several different kinds of tools and languages to build and deploy applications for proprietary hardware devices. Use Visual Basic .NET for your object-oriented code and the .NET framework to design user interfaces. With the Mobile Internet Toolkit, if your Mobile Page is rendered in a desktop browser then you get HTML; if the Mobile Page is rendered in a Web-enabled phone then you get WML. This sort of convenience will make it possible to build applications for a wide variety of devices more cost efficiently than ever before.
About the Author
Paul Kimmel is a freelance writer for Developer.com and CodeGuru.com. Look for his recent book "Advanced C# Programming" from McGraw-Hill/Osborne on Amazon.com. Paul will be a keynote speaker in "Great Debate: .NET or .NOT?" at the Fall 2002 Comdex in Las Vegas, Nevada. Paul Kimmel is available to help design and build your .NET solutions and can be contacted at email@example.com.
# # #