Resco DetailView 2.0 Control for .NET CF [Archive]

Jimmy Dodd

03-26-2004, 06:00 PM

<img src="http://www.pocketpcthoughts.com/images/web/2003/dodd-mar04-detailview-5.gif" /> Product Category: Development Tool Manufacturer: <a href="http://resco-net.com/developer/detailview/">Resco, Ltd</a> Where to Buy: DetailView 2.0 can be purchased directly from <a href="http://www.resco-net.com/developer/detailview/pricinglicense.asp">Resco</a>. Price: Standard Edition $99.95 USD, Professional Edition $299.95 USD, Professional Edition Site License $899.95 USD. System Requirements: DetailView works with the .NET CF and integrates with Microsoft Visual Studio 2003. The control itself uses 124k of memory when deployed. Pros:<li>Completely integrates with Visual Studio 2003; <li>Easy design time use; <li>Strong support for Data Binding; <li>Support for XML templates.Cons:<li>Multi-line textboxes don't have a visual indicator when they contain more lines than are visible. In fact there doesn't seem to be a way to scroll down past the last visible line unless you use the arrows on the SIP keyboard; <li>There are no built-in radio button items; <li>The Link item doesn't activate by tapping on the text, only by tapping on the ellipsis button. This would be a nice addition as you could create items that appear to be hypertext links within the DetailView. Summary: Resco's DetailView 2.0 is a control designed for use with the .NET Compact Framework. Its purpose is to provide an alternative and easy method for developing detail forms for user input. Read on for the full review!<!> <PAGEBREAK> Overview If you look at Microsoft's Pocket Task edit form you will see exactly the kind of user interface the DetailView control was designed to handle. Long lists of label/control pairs running down a form can be tedious and error-prone to develop, and they can often be even worse to modify. The drag-and-drop provided by Visual Studio .NET can ease the design time headache, but the result is still difficult to modify during run-time, and a large number of controls on a tabbed form can be slow to load. Even worse, the ability to provide configurable forms can add greatly to development time, especially when an application uses several of these detail forms. Resco attempts to ease this burden on the developer by providing a control which handles much of the common control list layout without putting too much restriction on what a form can display. <PAGEBREAK> Installation Installing the control is relatively straightforward. Unzipping the downloaded file results in a Microsoft Windows Installer file (detailview.msi) which can then simply be double-clicked to start the install process. By default, the installer creates a sub-folder called Resco DetailView Professional in the Program Files folder where it installs all of the files. It also adds some shortcuts to the Start menu including a shortcut to a readme.txt file which details the proper placement of the library files, just in case something goes wrong with the install process. The readme.txt file also details the proper steps for uninstalling the control, the steps to install the control to the Visual Studio .NET toolbox, and a log of changes made to the control for version 2.0. My installation went smoothly and was fast except for the integration of the help files into Visual Studio .NET's Help files. A dialog box during the install process warns that this could take some time and to not stop the process once it began. With this warning in mind the 2-3 minutes of waiting while the install appeared to have stopped during the integration time didn't alarm me and I was quickly up and running. The only manual intervention that was required was to add the control to my toolbox. The steps for this are clearly detailed in the ReadMe.txt file and are easily accomplished from with Visual Studio .NET. <img src="http://www.pocketpcthoughts.com/images/web/2003/dod-mar04-detailview-1.gif" /> Figure 1: The DetailView Control installed in the Toolbox. <PAGEBREAK> Items Dragging your first DetailView control to a form is somewhat anti-climatic as it appears as a simple, empty rectangle. At this point you can begin adding "items" to the control. This is accomplished by either opening the collection editor for the Items property, or by clicking the Design link beneath the properties list. The Design Link opens Resco's custom designer for the DetailView control and is much more feature rich than the standard collection editor, so we'll look at it. <img src="http://www.pocketpcthoughts.com/images/web/2003/dodd-mar04-detailview-3.gif" /> Figure 2: The DetailView Designer The DetailView Designer has two tabs: an edit tab and a preview tab. The edit tab displays an image of the control, a tree view of the hierarchy of the controls items, and a property editor. From the image, the control can be sized, and right clicking the control pops up a context menu that lets you add pages and items to the control. The Treeview window also provides this functionality but also makes it easier to see exactly where you are adding items once you have more than one page in the DetailView. The preview tab allows the developer to interact with the control within the designer environment. While in preview mode the items act as they do within an application: comboboxes drop down and allow selection, text boxes allow edits, etc. Items that can be added to the control are TextBox, ComboBox, CheckBox, DateTimePicker, Numeric, Link, and BlankItem. The first four are self-explanatory, while the Numeric item is basically a numbers-only text box with a spin control, and the Link item is a button-like control. BlankItem simply displays a label and a blank line and can be used as a spacing mechanism for layering other controls amid the DetailView items. Despite the multitude of items that can be added to a DetailView, it is still only one control. Therefore, interacting with the items fires events on the control itself, not on the items. These events are custom events with an argument that can be used to determine the index of the item that caused the event, so code can be written to react differently for each item. Each item type generates different events that make sense for the item type. For example, TextBoxes, DateTimePicker, CheckBox, and Numeric items generate ItemValidating and ItemChanged events, while Link items only generate ItemClick events. All items (except the BlankItem) generate ItemGotFocus and ItemLostFocus events. These events are in addition to the Control class events of Click, GotFocus, etc. that operate on the DetailView control as a whole. <img src="http://www.pocketpcthoughts.com/images/web/2003/dodd-mar04-detailview-4.gif" /> Figure 3: Design View showing each item type. <PAGEBREAK> Pages An eighth type of Item that can be added to the DetailView is the Page or PageBreak item. As its name implies, this item serves as a break between pages in the control so that long lists of scrolled items can be logically broken into pages. The DetailView automatically displays a navigation bar (called the "PagingItem") at the bottom of the control that can be configured in two different styles. In its most familiar mode ("TabStrip") the DetailView displays items as if they were on different tabbed pages. Note that this doesn't use a standard tab control to achieve this, it merely appears that way. Setting the DetailView's PagingStyle parameter to "Arrows" results in a paging method that uses arrow buttons to move back and forth through the pages. The label for the current page appears on the left, while the right shows the navigation arrows and the current page number and the total number of pages. The page index and page count can be set to various permutations (none, current index only, and current index and total count). Like the other items, the page label, text fonts, and colors can be independently configured to make for some interesting interfaces. <img src="http://www.pocketpcthoughts.com/images/web/2003/dodd-mar04-detailview-6.gif" /> Figure 4: Paging with Tabstrip style. <img src="http://www.pocketpcthoughts.com/images/web/2003/dodd-mar04-detailview-5.gif" /> Figure 5: Paging with Arrow style. When the current page is changed the DetailView fires PageChanging and PageChanged events. Taking advantage of these events can be used to validate an entire page or to save changes made on a page to a persistant store. One handy use of the PageChanged event is to use its handler to set the visible property of a sibling control so that it is only visible when a particular page is current. Making use of this method along with judicious use of the BlankItem control has the result of making the control appear to be part of a specific DetailView page. In this way the DetailView can be used along with any available control. <img src="http://www.pocketpcthoughts.com/images/web/2003/dodd-mar04-detailview-7.gif" /> Figure 6: "Embedding" a Picturebox in the DetailView. <PAGEBREAK> Data Binding Binding the DetailView control to a DataTable or DataView is an easy, two-level process. Given a valid data adapter you simply set the DataSource member of the DetailView control to a valid DataTable or DataView object. Then, for each item you set the DataMember property to the appropriate column name. This requires each item to bind with the same table or view and keeps all items synchronized when navigating through rows. XML A handy feature that Resco has included in the DetailView control is a Load method that consumes an XML file and reconfigures the control. Thus the following code: StreamReader stream = new StreamReader(@"\Program Files\RescoTests\MyXml.xml"); XmlTextReader reader = new XmlTextReader(stream); detailView1.LoadXml(reader); reads in an XML file named MyXML.xml in the given folder and redisplays the DetailView control. Changes can be made to the control itself, to the items within the control, even adding and deleting items. Where do you get the XML file? The DetailView Designer has two handy buttons labeled Save and Load. As expected, Save takes the current control properties and saves them to a specified file in XML format. Likewise, Load allows you to read the properties from an XML file at design time. Dynamically loading the control's properties can allow for variations and updates in the field without having to rebuild and redistribute the entire application. An application can simply check for the existence of an xml file on startup, using it to override the default values if it is present. Because the data binding properties for the DetailView are included in the XML file, a developer can completely change which columns are displayed in the form by swapping out a single XML file. <PAGEBREAK> Conclusions Overall, Resco's DetailView 2.0 control provides an efficient tool for presenting a large number of user-input controls in an organized manner. It loads fast at runtime, and the design-time facilities make for easy development work. The paging facilities allow for quick design changes and for a tabbed dialog appearance without the overhead of the Tab control. The data binding capabilities coupled with the handy XML load and save facilities make for a flexible data interface that continues after your application has shipped. In short, Resco's DetailView control provides a superior method of laying out vertical lists of controls than the traditional individual Label/Control pairing.