📄 listbasedform.html
字号:
<!--------------------------------------------------------------------------->
<!-- INTRODUCTION
The Code Project article submission template (HTML version)
Using this template will help us post your article sooner. To use, just
follow the 3 easy steps below:
1. Fill in the article description details
2. Add links to your images and downloads
3. Include the main article text
That's all there is to it! All formatting will be done by our submission
scripts and style sheets.
-->
<!--------------------------------------------------------------------------->
<!-- IGNORE THIS SECTION -->
<html>
<head>
<title>The Code Project</title>
<Style>
BODY, P, TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt }
H2,H3,H4,H5 { color: #ff9900; font-weight: bold; }
H2 { font-size: 13pt; }
H3 { font-size: 12pt; }
H4 { font-size: 10pt; color: black; }
PRE { BACKGROUND-COLOR: #FBEDBB; FONT-FAMILY: "Courier New", Courier, mono; WHITE-SPACE: pre; }
CODE { COLOR: #990000; FONT-FAMILY: "Courier New", Courier, mono; }
</style>
<link rel="stylesheet" type=text/css href="http://www.codeproject.com/styles/global.css">
</head>
<body bgcolor="#FFFFFF" color=#000000>
<!--------------------------------------------------------------------------->
<!------------------------------- STEP 1 --------------------------->
<!-- Fill in the details (CodeProject will reformat this section for you) -->
<pre>
Title: A list-based form for Windows Mobile
Author: Jo鉶 Paulo Figueira
Email: joao.figueira@primeworks-mobile.com
Member ID: 47486
Language: C++
Platform: Windows Mobile 2003, Windows Mobile 5
Technology: MFC
Level: Intermediate
Description: Implementing a Pocket Outlook-like list-based form with a few extras
Section PDA and Embedded Device programming
SubSection Controls
</pre>
<!------------------------------- STEP 2 --------------------------->
<!-- Include download and sample image information. -->
<ul class=download>
<li><a href="Article_demo.zip">Download demo project - XXX Kb </a></li>
<li><a href="Article_src.zip">Download source - XXX Kb</a></li>
</ul>
<p><img src="Article.gif" alt="Sample Image - maximum width is 600 pixels" width=400 height=200></p>
<!------------------------------- STEP 3 --------------------------->
<!-- Add the article text. Please use simple formatting (<h2>, <p> etc) -->
<h2>Introduction</h2>
<p>
This article presents an MFC implementation of the list-based data input form found
on the Windows Mobile Pocket Outlook applications.
</p>
<h2>Background</h2>
<p>
Data input on a Windows Mobile device tends to be one of the pain points both for
the user and the developer. While user requires that the input to be clear and easily
accessible, the developer requires easy development and maintenance of the input
code. I fitst met this challenge in the 2002-2003 time frame when developing database
applications for the Pocket PC 2002 meant using C++ with MFC and the now defunct
ADOCE 3.1 for database access. Application data input was essentially achieved through
dialogs and the design tool was the limited eVC3 / eVC4 dialog editor. Using MFC's
dialog data exchange somewhat helped in the dialog development, but this is a two-part
process: developing the dialog template and adding the control code. Things would
get hairy when the maintenance cycles would start, especially when you needed to
add an extra field to an already crowded dialog.
</p>
<p>
Back then, I found two ways to give some extra room to a dialog: I could either
convert it to a property sheet with multiple pages, or by implement scrollbars (these
were not yet supported by the shell). The property sheet approach wasn't very well
suited to extend a dialog because you needed to find a logical way to split the
dialog into pages and the final result was sometimes not very intuitive to use.
Also, it required the user to flip through the sometimes numerous pages to get to
the data he or she wanted. My approach to a scrollable dialog box was not vey convincing
due to the visible screen flicker when scrolling. Also, this approach required that
all dialog child controls be created at the same time which was a slowing factor
for MFC-based applications which keep all the managed window handles in a map.
</p>
<p>
Interestingly, Microsoft had solved this problem using a list-based form control
on the Pocket Outlook applications for data input. This type of control had the
big advantage of being intuitive and easy to use, but the big disadvantage of not
having a published API. After a somewhat flawed first attempt, I wrote the set of
classes that I present here to implement the <code>CFormListCtrl</code> MFC control.
This code was originally developed on the eVC3 compiler in 2004 and was adapted
for Visual Studio 2005 for this article. Among the adaptations I wrote are screen
resolution and orientation awareness, keyboard support and the item selection mode.
</p>
<h2>Implemented user interface</h2>
<p>
The control user interface is organized in rows, each containing an item. Row items come in two types: groups and data items.
A group item is identified by a tree-like plus / minus button that is used to expand and collapse all the contained items.
Note that this implementation does not support recursive groups (a group cannot contain another group). The other type of row
item is the data item. Each data item contains a text label and a data area that will display the data to be edited and the control
to edit that data. A string data item displays the string value in the data area and an edit control when the item is in edit mode.</p>
<p>
Only one item can be in edit mode at any time. An item enters the edit mode when the user clicks it or when the item is selected
using the keyboard (up and down arrow) and the user presses the enter key. Exiting edit mode will dapend on the displayed edit
control. In the sample code, all numeric values are edited through a calculator-like dialog and exiting the edit mode on these
items requires that the user either clicks the OK or the Cancel buttons. On the other hand, string items leave exit mode when
the user navigates away from the item using the navigation up or down keys.</p>
<p>
Group items are used the same way as a regular edit item. The user can navigate to a group item using the up and down arrow
keys and the group can be expanded or collapsed by pressing the enter key. Clicking a group item has the same effect.</p>
<p>
Data item captions can be resized with the keyboard or the stylus. The left and right navigation keys will resize the caption size
two pixels to the left or to the right for each key press. The user can also click the area between the caption and the data to
resize the caption. When a vertical gray line is shown, the user can drag it left or right to set the new caption width.</p>
<p>
Data items can have an options setting that is generally implemented as a context
menu on the caption. Items with options are graphically identified with a down arrowhead
at the left of the caption text. This feature is activated by the user by clicking
the caption.</p>
<h2>Using the code</h2>
<p>
I designed the code to have a very simple usage pattern. First you must decide where the list control will be hosted. This can
either be a dialog or a property sheet. You can create the container either from the dialog editor or use the enclosed
<code>CDialogTemplate</code> class to create a dynamic in-memory dialog template, so you can actually use
this code as a component without any resources involved. When using this technique, make
sure you create the list control template with the following styles: <code>LVS_REPORT | LVS_SINGLESEL | LVS_ALIGNLEFT | LVS_NOCOLUMNHEADER | WS_TABSTOP</code>.<p>
Before we create our first form, a brief description of the involved classes is required:
</p>
<p>
<table border="1" cellpadding="1" cellspacing="1" id="TABLE1">
<tbody align="left">
<tr>
<th>Class</th>
<th>Description</th>
</tr>
<tr>
<td>
<code>CBaseListCtrl</code></td>
<td>
Base class for the form list control. Handles a few of MFC's idiossincrasies.</td>
</tr>
<tr>
<td>
<code>CFormListCtrl</code></td>
<td>
The form list control. Derive your forms from this class.</td>
</tr>
<tr>
<td>
<code>CFormItem</code>
</td>
<td>
Base class for data all items. Use it as a base class for your custom data items.</td>
</tr>
<tr>
<td>
<code>CFormItemGroup</code>
</td>
<td>
Groups <code>CFormItem</code> objects in a collapsible container.
</td>
</tr>
<tr>
<td>
<code>CFormItemCheck</code>
</td>
<td>
Displays a check box.
</td>
</tr>
<tr>
<td>
<code>CFormItemCombo</code>
</td>
<td>
Displays a combo box to select from a set of strings.
</td>
</tr>
<tr>
<td>
<code>CFormItemDateTime</code>
</td>
<td>
Displays a date or time picker control. Allows to edit date or time but not both.
</td>
</tr>
<tr>
<td>
<code>CFormItemNumber</code>
</td>
<td>
Numeric data item supporting integer, general number and currency formats. Values are edited
using a calculator-like dialog.
</td>
</tr>
<tr>
<td>
<code>CFormItemString</code>
</td>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -