Dewsoft Frontpage Tutorials

Lesson 11: Building an ActiveX Control
11.4 - Creating a Better User Interface
Now that the basic functionality of the die-roll control is in place, it’s time to neaten it a little. It needs an icon, and it needs to display dots instead of a single digit. 11.4.1 A Bitmap Icon Because some die-roll control users might want to add this control to the Control Palette in Visual Basic or Visual C++, you should have an icon to represent it. AppWizard has already created one, but it is simply an MFC logo that doesn’t represent your control in particular. You can create a more specialized one with Developer Studio. Click the ResourceView tab of the Project Workspace window, click the + next to Bitmap, and double-click IDB_DIEROLL. You can now edit the bitmap 1 pixel at a time. Figure 11.8 shows an icon appropriate for a die. From now on, when you load the die-roll control into the test container, you will see your icon on the toolbar. 11.4.2 Displaying Dots The next step in building this die-roll control is to make the control look like a die. A nice 3D effect with parts of some of the other sides showing is beyond the reach of an illustrative unit like this one, but you can at least display a dot pattern. FIG. 11.8 The ResourceView of Visual C++ enables you to build your own icon to be added to the Control Palette in Visual Basic. The first step is to set up a switch statement in OnDraw(). Comment out the three drawing lines and then add the switch statement so that OnDraw() looks like Listing 11.10. Listing 11.10 DierollCtl.cpp—CDierollCtrl::OnDraw() void CDierollCtrl::OnDraw( CDC* pdc, const CRect& rcBounds, const CRect& rcInvalid) { pdc->FillRect(rcBounds, CBrush::FromHandle((HBRUSH) GetStockObject(WHITE_BRUSH))); // CString val; //character representation of the short value // val.Format("%i",m_number); // pdc->ExtTextOut( 0, 0, ETO_OPAQUE, rcBounds, val, NULL ); switch(m_number) { case 1: break; case 2: break; case 3: break; case 4: break; case 5: break; case 6: break; } } Now all that remains is adding code to the case 1: block that draws one dot, to the case 2: block that draws two dots, and so on. If you happen to have a real die handy, take a close look at it. The width of each dot is about one quarter of the width of the whole die’s face. Dots near the edge are about one-sixteenth of the die’s width from the edge. All the other rolls except 6 are contained within the layout for 5, anyway; for example, the single dot for 1 is in the same place as the central dot for 5. The second parameter of OnDraw(), rcBounds, is a CRect that describes the rectangle occupied by the control. It has member variables and functions that return the control’s upper-left coordinates, width, and height. The default code generated by AppWizard called CDC::Ellipse() to draw an ellipse within that rectangle. Your code will call Ellipse(), too, passing a small rectangle within the larger rectangle of the control. Your code will be easier to read (and will execute slightly faster) if you work in units that are one-sixteenth of the total width or height. Each dot will be four units wide or high. Add the following code before the switch statement: int Xunit = rcBounds.Width()/16; int Yunit = rcBounds.Height()/16; int Top = rcBounds.top; int Left = rcBounds.left; Before drawing a shape by calling Ellipse(), you need to select a tool with which to draw. Because your circles should be filled in, they should be drawn with a brush. This code creates a brush and tells the device context pdc to use it, while saving a pointer to the old brush so that it can be restored later: CBrush Black; Black.CreateSolidBrush(RGB(0x00,0x00,0x00)); //solid black brush CBrush* savebrush = pdc->SelectObject(&Black); After the switch statement, add this line to restore the old brush: pdc->SelectObject(savebrush); Now you’re ready to add lines to those case blocks to draw some dots. For example, rolls of 2, 3, 4, 5, or 6 all need a dot in the upper-left corner. This dot will be in a rectangular box that starts one unit to the right and down from the upper-left corner and extends five units right and down. The call to Ellipse looks like this: pdc->Ellipse(Left+Xunit, Top+Yunit, Left+5Xunit, Top + 5Yunit); The coordinates for the other dots are determined similarly. The switch statement ends up as show in Listing 11.11. Listing 11.11 DierollCtl.cpp—CDierollCtrl::OnDraw() switch(m_number) { case 1: pdc->Ellipse(Left+6Xunit, Top+6Yunit, Left+10Xunit, Top + 10Yunit); //center break; case 2: pdc->Ellipse(Left+Xunit, Top+Yunit, Left+5Xunit, Top + 5Yunit); //upper left pdc->Ellipse(Left+11Xunit, Top+11Yunit, Left+15Xunit, Top + 15Yunit); //lower right break; case 3: pdc->Ellipse(Left+Xunit, Top+Yunit, Left+5Xunit, Top + 5Yunit); //upper left pdc->Ellipse(Left+6Xunit, Top+6Yunit, Left+10Xunit, Top + 10Yunit); //center pdc->Ellipse(Left+11Xunit, Top+11Yunit, Left+15Xunit, Top + 15Yunit); //lower right break; case 4: pdc->Ellipse(Left+Xunit, Top+Yunit, Left+5Xunit, Top + 5Yunit); //upper left pdc->Ellipse(Left+11Xunit, Top+Yunit, Left+15Xunit, Top + 5Yunit); //upper right pdc->Ellipse(Left+Xunit, Top+11Yunit, Left+5Xunit, Top + 15Yunit); //lower left pdc->Ellipse(Left+11Xunit, Top+11Yunit, Left+15Xunit, Top + 15Yunit); //lower right break; case 5: pdc->Ellipse(Left+Xunit, Top+Yunit, Left+5Xunit, Top + 5Yunit); //upper left pdc->Ellipse(Left+11Xunit, Top+Yunit, Left+15Xunit, Top + 5Yunit); //upper right pdc->Ellipse(Left+6Xunit, Top+6Yunit, Left+10Xunit, Top + 10Yunit); //center pdc->Ellipse(Left+Xunit, Top+11Yunit, Left+5Xunit, Top + 15Yunit); //lower left pdc->Ellipse(Left+11Xunit, Top+11Yunit, Left+15Xunit, Top + 15Yunit); //lower right break; case 6: pdc->Ellipse(Left+Xunit, Top+Yunit, Left+5Xunit, Top + 5Yunit); //upper left pdc->Ellipse(Left+11Xunit, Top+Yunit, Left+15Xunit, Top + 5Yunit); //upper right pdc->Ellipse(Left+Xunit, Top+6Yunit, Left+5Xunit, Top + 10Yunit); //center left pdc->Ellipse(Left+11Xunit, Top+6Yunit, Left+15Xunit, Top + 10Yunit); //center right pdc->Ellipse(Left+Xunit, Top+11Yunit, Left+5Xunit, Top + 15Yunit); //lower left pdc->Ellipse(Left+11Xunit, Top+11Yunit, Left+15Xunit, Top + 15Yunit); //lower right break; } Build the OCX again and try it out in the test container. You will see something similar to Figure 11.9, which actually looks like a die! FIG. 11.9* Your rolling-die control now looks like a die.

	Next>>