The application architecture is actually very simple (as usual, I'm using WTL 8.0):
- A main frame window that contains the content views and any decorations
- A category view that shows the information categories in the safe
- A detail view showing the individual items in each category
- An item editing dialog
After creating your initial project, our first stop is to change the view window (see the source code):
class CCrypSafeView : public CTouchList<CCrypSafeView>, public CChildView<CCrypSafeView>
This means that our view will implement both a "touch list" and will also behave like a switchable child view. Next we need to remove the standard painting protocol and replace it with the touch list's:
virtual void DrawItem(HDC hDC, int iItem, CRect &rcItem);
Yes, we only need this because the list is painted item by item. Remove the OnPaint handler because it is not needed (it's implemented by the base class). I also added a default constructor where I placed the initial list of categories for the prototype:
AddItem(new CTouchListItem(L"Credit Cards"));
AddItem(new CTouchListItem(L"Debit Cards"));
AddItem(new CTouchListItem(L"Mail Accounts"));
AddItem(new CTouchListItem(L"SIM Cards"));
AddItem(new CTouchListItem(L"User Accounts"));
AddItem(new CTouchListItem(L"Web Sites"));
Note that these items are not explicitly delete anywhere in the code because their pointers are reference counted (internally). Finally, let's see how to paint the items:
void CCrypSafeView::DrawItem(HDC hDC, int iItem, CRect &rcItem)
PTouchListItem pItem = GetItem(iItem);
dc.DrawText(pItem->GetText(), -1, &rcItem, DT_LEFT);
Note that the PTouchListItem type is a typedef that denotes the reference-counted version of a pointer to a CTouchListItem object.
As you can see from the image, the result is less than satisfactory. The whole list is painted on an off-screen bitmap that is initialized to solid black (hence the black areas of the screen). The bottom of the list is automatically filled with the background color, but not the individual items - you must fill in the background for yourself. We also need to make the item font larger (possibly bold and with ClearType rendering for a better reading experience). As you can see each row has a height of 40 pixels (80 on high DPI machines) in order to accommodate a 32x32 (64x64 on high DPI machines) image. The text will have to be correctly formatted in order to better fill each row.
For the time being, you can take a peek at the first version of the code here.
P.S.: Anatoly, I have not included all of your changes yet.