Professional Microsoft Smartphone Programming phần 3 ppsx

Start a new Windows Mobile 5.0–based device application and name the project menuBehavior. From the Form Designer, add two Labels to the form and rename them lbCntTitle and lbCnt, respectively. Set the Location of lbCntTitle to (0,40), Size to (80,22), and the Text to ‘Counter =’. Then set the Location of lbCnt to (90,40), Size to (80,22), and the Text to an empty string. Next, add menu items to the main menu. Table 4-2 lists the order in which MenuItems are added to the form and summarizes the settings of each MenuItem added to the example application. Table 4-2 MenuItems in the menuBehavior Example Name Parent Text mnuDone mainMenu1 Done mnuOptions mainMenu1 Options mnuR1 mnuOptions R1 mnuR2 mnuOptions Counter mnuSep mnuOptions - mnuR3 mnuOptions R3 mnuR4 mnuOptions Remove R5 mnuR5 mnuOptions R5 mnuCntInc mnuR2 Inc mnuCntDec mnuR2 Dec Figure 14-13 presents the graphic layout of the UI and menu items. If you examine the code generated by Visual Studio 2005 in the file Form1.Designer.cs, then you will see that the hierarchy of the menu items is achieved by adding each menu item to the MenuItems collec- tion of its parent. For example, mnuCntInc and its parents and grandparents are constructed as follows: this.mainMenu1.MenuItems.Add(this.mnuOptions); this.mnuOptions.MenuItems.Add(this.mnuR2); this.mnuR2.MenuItems.Add(this.mnuCntInc); As you can see, the top-right menu mnuOptions is added to mainMenu1, and it contains mnuR2, which in turn contains mnuCntInc. In the example, the function of mnuSep is to create a separator between menu items. This is easily achieved by setting the Text property of mnuSep to Next, you will learn how to dynamically change menu items at runtime. For example, when users select mnuR4, mnuR5 is removed and mnuR4 will there- fore be disabled. 80 Chapter 4 09_762935 ch04.qxp 11/20/06 7:54 AM Page 80 Figure 4-13 From the Form Designer, click mnuOptions to show the MenuItems directly attached to it. Then double- click mnuR4. Visual Studio 2005 will then automatically generate a stub of the event handler in the file Form1.cs for mnuR4 when it is chosen at runtime: private void mnuR4_Click(object sender, EventArgs e) { } Visual Studio 2005 will also register an event handler to the System.EventHandler in the InitializeComponent method in the file Form1.Designer.cs: this.mnuR4.Click += new System.EventHandler(this.mnuR4_Click); To delete a MenuItem control at runtime, first remove it from the MenuItems collection of its parent, and then call the Dispose() method to release the resources. To disable a menu item, you can simply set the Enabled property to false. The following code shows the event handler for the Click event of mnuR4: private void mnuR4_Click(object sender, EventArgs e) { this.mnuOptions.MenuItems.Remove(this.mnuR5); this.mnuR5.Dispose(); this.mnuR4.Enabled = false; } 81 User Interface and Input 09_762935 ch04.qxp 11/20/06 7:54 AM Page 81 The sample code also displays the value of an integer counter on the screen. This can be achieved by passing the string representation of the counter to the Text property of lbCnt, as follows: private int counter; public Form1() { InitializeComponent(); //Reset counter and send the string representation to the text of lbCnt this.counter = 0; this.lbCnt.Text = counter.ToString(); } When mnuCntInc is selected, the counter will be increased by one. To do so, double-click the mnuCntInc from the Form Designer to create an event handler to respond to the Click event of mnuCntInc. In the event handler, increase the value of the counter and pass the information to lbCnt, as follows: //Increase counter by one private void mnuCntInc_Click(object sender, EventArgs e) { this.counter++; this.lbCnt.Text = this.counter.ToString(); } Then add an event handler for mnuCntDec by double-clicking mnuCntDec from the Form Designer. Inside the event handler, decrease the value of counter by one: //Decrease counter by one private void mnuCntDec_Click(object sender, EventArgs e) { this.counter ; this.lbCnt.Text = this.counter.ToString(); } Finally, an event handler is necessary to terminate the application when users press mnuDone. Double- click mnuDone from the Form Designer and add the following line to the click event handler of mnuDone to quit the application: Application.Exit(); The following shows the full listing of the code in the file Form1.cs: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace menu 82 Chapter 4 09_762935 ch04.qxp 11/20/06 7:54 AM Page 82 { public partial class Form1 : Form { private int counter; public Form1() { InitializeComponent(); //Reset counter and send the string representation to the text of lbCnt this.counter = 0; this.lbCnt.Text = counter.ToString(); } //Remove MenuItem mnuR5 private void mnuR4_Click(object sender, EventArgs e) { this.mnuOptions.MenuItems.Remove(this.mnuR5); this.mnuR5.Dispose(); this.mnuR4.Enabled = false; } //Terminate the application private void mnuDone_Click(object sender, EventArgs e) { Application.Exit(); } //Increase counter by one private void mnuCntInc_Click(object sender, EventArgs e) { this.counter++; this.lbCnt.Text = this.counter.ToString(); } //Decrease counter by one private void mnuCntDec_Click(object sender, EventArgs e) { this.counter ; this.lbCnt.Text = this.counter.ToString(); } } } Build the sample application by pressing F6, and then launch it by pressing Ctrl+F5. Figure 4-14 shows the menu items when a user presses the right soft key. After Remove R5 is selected, R5 disappears from the menu list and Remove R5 is grayed out, which indicates the menu item is disabled. Figure 4-15 illustrates how the menu looks after users choose Remove R5. 83 User Interface and Input 09_762935 ch04.qxp 11/20/06 7:54 AM Page 83 Figure 4-14 Focus Behavior for ListView, TreeView, and Panel The nature of a Smartphone device’s small screen size determines how you want to use container con- trols such as ListView, TreeView, and Panel. In full .NET applications, you can resize those controls as you like and use tab keys to navigate in and out of them. Things are a little different for Smartphone applications. The ListView, TreeView, and Panel controls are expected to expand to fill the entire screen, and users can use tab keys to navigate the child controls inside those containers, but not between those container controls. To make a container control expand to the size of the form, set the Bounds property of that control to the ClientRectangle property of the form, as follows: listView1.Bounds = this.ClientRectangle; 84 Chapter 4 09_762935 ch04.qxp 11/20/06 7:54 AM Page 84 Figure 4-15 Smartphone UI Design You need to consider several issues when designing a UI. A user-friendly UI is simple, clear, and consis- tent, and is normally optimized for performance. This section first introduces several Smartphone- specific issues that affect UI design. A typical UI flow for a Smartphone application is then explained, followed by a multi-form sample application to illustrate how this can be achieved programmatically. Microsoft provides detailed design guidelines on MSDN. It is not our intention to illustrate all the UI details in this book. For further information, please refer to the website at http://msdn.microsoft .com/library/default.asp?url=/library/en-us/uiguidesp/html/SPUser_ Interface_Guidelines_SKLK.asp . 85 User Interface and Input 09_762935 ch04.qxp 11/20/06 7:54 AM Page 85 Soft Keys The Smartphone-specific features that most affect the UI design are likely the two soft keys: The top- level menu items are invoked only by the pressing the soft keys. As a direct result, a MessageBox control for Smartphone applications supports only two buttons; there are simply no additional soft keys to respond to a third button. For instance, the following code will create a message box with three buttons (Yes, No, and Cancel) in the full .NET Framework and the Windows Mobile 5.0–based Pocket PC: MessageBox.Show (“Do you really want to quit?”, “Important”, MessageBoxButtons.YesNoCancel, MessageBoxIcon.Question, MessageBoxDefaultButton.Button1 ); In a Windows Mobile 5.0–based Smartphone, even though the preceding code can still pass the compile and build stages, an error indicating that the value is out of the range will be thrown during runtime. The fact that a Smartphone has only two soft keys also dictates that only two top-level menus are sup- ported. The following are the UI design guidelines for the soft keys: ❑ The left soft key: ❑ Should always display the most likely user task ❑ Normally is the Done soft key that closes the window ❑ The right soft key: ❑ Is blank if it is not needed ❑ Should display the second most likely user task if there is no menu ❑ Displays the Menu soft key when there is a menu The Home and Back Keys Besides the soft keys, two other keys are special in Smartphone devices: Home and Back. As its name implies, the Home key returns users to the Home screen from anywhere at any time. The Back key per- forms different functions depending on the state of the application. It is generally designed to return users to the previous screen, with the following exceptions: ❑ Applications use a hierarchical structure with regard to the Back key. For example, if a user nav- igates to a child form from a main form, pressing the Back key should take the user back to the parent form before quitting the application. ❑ The Back key performs a global back function, navigating out of the current application. ❑ When a user visits one screen several times in one session, only one instance of the screen is saved. Duplicates should be removed from the back stack. 86 Chapter 4 09_762935 ch04.qxp 11/20/06 7:54 AM Page 86 ❑ If a menu is open, the Back key should close the menu. ❑ Pressing the Back key in an edit control performs a backspace. For text boxes on edit screens with one or more lines, pressing and holding the Back key clears an entire box. For full-screen edits, pressing and holding the Back key performs repeated backspaces. ❑ Pressing the Back key when viewing a message box closes the message box and cancels the action. General UI Flow of Smartphone Applications A Smartphone application may require more than one form. How, then, do different forms relate to each other, and how does UI flow from one form to another form? A good example that demonstrates UI flow is the Smartphone native Contacts application. As shown in Figure 4-16, the Contacts program begins with a list of all the contacts, which is referred to as list view. Figure 4-16 When users select an item, detailed information will be shown on the next screen, which is referred to as card view. For example, in Figure 4-17, when a contact is selected, detailed information about that contact is displayed, such as a picture, a work phone number, an e-mail address, a work address, and other information. Figure 4-17 87 User Interface and Input 09_762935 ch04.qxp 11/20/06 7:54 AM Page 87 From the card view, users can also choose the edit option from the menu to further edit the detailed information of a contact. Figure 4-18 shows the edit view for the Contacts program. Figure 4-18 Depending on the needs of an application, you do not have to design the list view, card view, and edit view. For instance, the list view can go directly to the edit view without showing the card view. It is also possible for an application to start from a card view and flow to an edit view. Creating an Application with Multiple Forms One of the questions you may have at this point is how to programmatically control the UI flow from one view to another view. In the next example, you will learn how to add more forms to an application and how to the control the flow of the forms. The example is a fairly simply one. When users click the left soft key, a second form with a combo box will appear to enable users to modify certain data. When users finish editing and press the Done key, the selected item will be printed on the first form and the second form will be closed. Of course, using two forms for this simple application is overkill, but the concept presented in this application is important. Start a new Windows Mobile 5.0 Smartphone application and name it MultiForm. Add two labels to the main form Form1 and rename the Labels lbTitle and lbSname, respectively. Change the Text property of lbTitle to ‘Main: Chose a School’, and clear the Text property of lbSname. Then add a top-left menu item to Form1 and rename the menu item to mnuDone. Next, add a top-right menu item to Form1 and rename it mnuEdit. Figure 4-19 shows the simple UI of main form Form1. To add a new form in Visual Studio 2005, choose Project ➪Add Windows Form. Name the new form subForm and add a combo box named comboBox1. Then add a MenuItem mnuDone to the top-left of the menu and a MenuItem mnuCancel to the top-right of the menu, as shown in Figure 4-20. You can edit the items in a combo box during design time. From the Properties window, choose comboBox1 from the drop-down list and then go to the Items property and click the ellipsis ( ) button (see Figure 4-21). This will open the String Collection Editor for comboBox1. Figure 4-22 shows four pub- lic universities in Indiana added to the Items collection of comboBox1. 88 Chapter 4 09_762935 ch04.qxp 11/20/06 7:54 AM Page 88 Figure 4-19 Figure 4-20 89 User Interface and Input 09_762935 ch04.qxp 11/20/06 7:54 AM Page 89 [...]... targeting only conventional Smartphone device platforms For Windows Mobile 5.0 Smartphones, an additional AutoScaleMode property is available for the Windows Forms class You can set this property to DPI mode so that applications designed for regular Smartphone devices can still be displayed nicely on a higher-resolution device 102 09_762 935 ch04.qxp 11/20/06 7:54 AM Page 1 03 User Interface and Input... in the Smartphone NET platform are a trimmed-down version of the NET Compact Framework It is very important to understand how those constraints change the way you program on thin-client mobile devices 1 03 09_762 935 ch04.qxp 11/20/06 7:54 AM Page 104 Chapter 4 You should always design a simple UI that follows the Smartphone conventions It is highly recommended that you go through the native Smartphone. .. menu to enable users to call off any changes DPI and QVGA Issues Traditionally, Smartphone devices have a resolution of 176 × 220 pixels and a DPI (dots per inch) value of 96 With the advances of display technology, QVGA (Quarter VGA) mode is now available in newer Smartphone devices whose screen can hold 240 × 32 0 pixels Some Smartphone devices can now even support VGA mode, which has a resolution of... name of the school set to Ball State, as illustrated in Figure 4-25 94 09_762 935 ch04.qxp 11/20/06 7:54 AM Page 95 User Interface and Input Figure 4- 23 Figure 4-24 95 09_762 935 ch04.qxp 11/20/06 7:54 AM Page 96 Chapter 4 Figure 4-25 Keyboard Input and Input Mode In the previous section you learned how to design a UI for Smartphone applications One important aspect of dealing with the UI is responding... users a lot of time sending text messages It should be noted, however, that the T9 input method is not supported on many models of Smartphone devices on today’s market, nor does it work on Smartphone 20 03 and Windows Mobile 5.0 emulators The default input behavior for a Smartphone device application uses mixed alphabetic characters and numeric characters This is not desirable for some applications,... 10_762 935 ch05.qxp 11/20/06 7:55 AM Page 105 Data Storage and File I/O Unlike desktop PCs, for which battery life is not an issue, Smartphone devices prefer hardware and software designs that consume less power The constraints that led to the data storage architecture of the Smartphone devices are fundamentally different from that of PCs This chapter examines how data is stored in a Windows Mobile Smartphone. .. WaitforChangedResult structure Creating a File Director y Browser Unlike the Windows Mobile 5.0 Pocket PC SDK, the Smartphone SDK does not support the File Open or Directory Open dialog functions, nor is a file explorer shipped to any mobile devices running Microsoft Smartphone This is probably because Smartphone devices have limited computing power and a fairly small amount of physical memory This section... Windows Mobile Smartphone device application and name the project dirBrowse The UI design is relatively straightforward First, rename the form to BrowseFm and change the caption of the form to View Directory Then drag and drop a TreeView control to the form and make it occupy the entire client area Then add a menu item Quit to the left soft key, as illustrated in Figure 5 -3 1 13 10_762 935 ch05.qxp 11/20/06... The 72-hour rule enables users to recharge the device without losing data Smartphone devices, conversely, take a different approach and are designed to work with persistent storage-based filesystems The concept of the object store is non-existent in the context of a Smartphone device By adopting a persistent storage architecture, Smartphone devices, therefore, require less RAM, and less RAM entails a... directly punch in the corresponding numbers one at a time (4, 3, 5, 5, 6), whereas the conventional multi-tap input would require a user to press the 4 key twice, the 3 key twice, the 5 key three times, and then another 5 key three times, followed by the 6 key three times The T9 input, however, does not guarantee that the key combinations 96 09_762 935 ch04.qxp 11/20/06 7:54 AM Page 97 User Interface and . users choose Remove R5. 83 User Interface and Input 09_762 935 ch04.qxp 11/20/06 7:54 AM Page 83 Figure 4-14 Focus Behavior for ListView, TreeView, and Panel The nature of a Smartphone device’s small. supported on many models of Smartphone devices on today’s market, nor does it work on Smartphone 20 03 and Windows Mobile 5.0 emulators. The default input behavior for a Smartphone device application. Form1 parentForm; //Set the parentForm property from constructor 93 User Interface and Input 09_762 935 ch04.qxp 11/20/06 7:54 AM Page 93 public subForm(Form1 parentForm) { InitializeComponent(); this.parentForm