Wednesday, January 21, 2009

The Property List

Before I can go any further in the development of the SQL Explorer device application, I must make sure that I have some components ready for use. These will include (but will not be limited to):

  • A tree component to display the database schema;
  • A property list control to edit/display object properties such as connection, table and column properties;
  • A grid or table-like display for table and query results;
  • A splitter control for compound views;
  • A decent file open dialog box.

It surely would be easy to just use the controls that Windows Mobile has in store for us: the tree view and the list view. These are undoubtedly the most used controls but are somewhat déja-vu and are arguably hard to use (especially the list view). I decided to (guess what) write these controls from scratch using something the WTL CTouchWindow class that I published here a some months ago.

This class is a nice candidate to be a base class for the new tree, grid and property list controls because it enables a touch-like interface. My first approach was to implement the property list control taking some of my previous work as a model: A list-based form for Windows Mobile. There are two nagging issues with this code: it uses MFC and subclasses the list view control. As I've learned by implementing the WTL version I'm presenting here, subclassing and custom-painting the list view is more work than you need to implement the control.

The property list is shown here contains a list of editable items and groups. Groups are shown as collapsed (the + sign indicates that the item can be expanded) and, like the original MFC implementation, each group can contain only editable items, not other goups (I may change this later on).

A group should be used as a means to group related data items and to ease the list navigation. When clicked the group expands to display the contained editable items. By clicking again, the group collapses and hides the contained items. This is the same principle that you can see at work with a tree, so extending this concept to a "touch tree" should not be very difficult.

Each editable item may be in either of two states: focused or activated. An item gets the focus when it is clicked and when either the up or down keys are used to change the selection. A focused item shows the focus rectangle around it. When the enter key is pressed (or when the user clicks the item) it is activated (note that activating implies setting the focus). The notable exception to this rule is the text editor item that activates itself when it receives the focus.

When an item is activated, it generally creates a Windows control to perform the editing. The exceptions to this rule are the check box (changes its state) and the group item (expands / collapses the contained items).

As of this implementation, the supported data item types are:

  • Text editor
  • Date time editor
  • Check box
  • Combo box
Here is the expanding property list:



The scroll bar to the right is custom-painted and is not yet the final version (I'm still thinking about allowing the use of old style scroll bars). The advantage of this type of scroll bar is its transparency - you can actually read what's beneath it so you do get a few more pixels of screen real estate.

I will make lots of changes and additions to this code but, in the meantime, please do take a look at it and be so kind as to use it and criticize it.

Sample code: PropList.zip (45 KB)

8 comments:

Joaquim Pais said...

olá João,

É possivel utilizar este Código em c#, de que maneira?

Os seus artigos são excelentes, mas são todos programados a baixo nivel.

CPS,
Quim

João Paulo Figueira said...

Estou a pensar em reescrever este código em C# e publicá-lo num outro blog que já criei só para código managed. A verdade é que este blog é mesmo para código de baixo nível...

Este código poderia ser usado a partir do C# usando algumas técnicas de interop, mas se calhar faz mais sentido escrever tudo como um controlo em C# para ilustrar o código. (Se calhar faço as duas coisas... lol)

vincent said...

Hi,

First thanks onece again for this great piece of code.
i would have some suggestions :

1) Add #define _SECURE_ATL 1 in stdafx.h for people using VS2008 and wtl

2) Navigation is ciculary, it means when you are at the bottom of the list and you want to go down
Focus is put back at the top, It should be configurable

3) In debug I have lots of assert from atlwin.h. When I click ignore it seems to work but it's very annoying

4) I should be able to choose if a field can be editable or not. I know that a property list is used to change settings but sometimes you just want to display read-only field.

vincent said...

Since now atltouch seems to handle keys could it work on smartphone, maybe you could replace COmbobox by CSelectionBox something like that :

#ifdef WIN32_PLATFORM_WFSP


class CMyListBox : public CWindowImpl !CMyListBox, CListBox!
{
public:
DECLARE_WND_SUPERCLASS(L"MyListBox", CListBox::GetWndClassName());

CMyListBox(HWND hWnd = NULL)
{
ATLASSERT(hWnd == NULL);
}

BEGIN_MSG_MAP(CMyListBox)
MESSAGE_HANDLER(LB_ADDSTRING, OnAddString)
END_MSG_MAP()

LRESULT OnAddString(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& /*bHandled*/)
{
CString str((LPCTSTR)lParam);
str.MakeUpper();
return DefWindowProc(uMsg, wParam, (LPARAM)str.GetBuffer(0));
}
};

class CSelectionBox : public CSpinned!CMyListBox, false!
{
public:
BOOL SubclassWindow(HWND hWnd)
{
ATLASSERT(m_hWnd == NULL);
BOOL bRes = CMyListBox::SubclassWindow(hWnd);
if (bRes)
AttachOrCreateSpinCtrl();
return bRes;
}
};

//typedef CSpinned!CMyListBox, false! CSelectionBox;

#else

class CSelectionBox : public CWindowImpl!CSelectionBox, CComboBox!
{
public:
BEGIN_MSG_MAP(CSelectionBox)
END_MSG_MAP()

};

//typedef CxComboBox CSelectionBox;

#endif //WIN32_PLATFORM_WFSP

Regards

PS : < and > are not allowed, replaced by !

João Paulo Figueira said...

Hi Vincent,

Thank you for your comments. I will add the #define in point 1. The project is written entirely in VS 2005 because I got reader complaints about using VS 2008 and the difficulty on "downgrading" a project. It surely should be esaier to upgrade from 2005 to 2008. Anyway, next time I will try to include a 2008 solution.

Concerning point 2, you are right of course. As I said, this is not complete yet and there's lots of room for improvement.

I did not get the asserts you complain about in point 3. Can you please let me know where you are getting these? Is it possible that by compiling with VS 2008 you get different results? Once again, I will try 2008 with this solution.

Comment 4 is right on the mark again! This was implemented on the MFC version and I have yet to put it here. Not forgotten, just incomplete...

Your second message is also very interesting. I did not try the code on the smartphone yet, but the next version will include your suggestion.

Thank you!

vincent said...

Last comment , I see that wit touch List 2 there was a atltouch.h and with this new control you release a new version but not compatible with the first one.
Maybe it's a bad idea to let a file with the sme file but incompatible features.
I try to use atltouch from Property List in the ouch List bur for now it cannot work.

vincent said...
This comment has been removed by the author.
vincent said...

Hum I swear this is my last comment for today , personnaly I am using VS2008 but I am always delivering at least two projects vs2005 and vs2008.To do so I am using a tool called project converter found here :
http://www.emmet-gray.com/Articles/ProjectConverter.htm

I am using the C# and no issues for now.

Video showing Assert :
http://www.smartmobili.com/Downloads/proplist.zip