DX: Full Screen GUI Development 2

Full Screen GUI Development
Pt 2 ?More Controls & Text
By Jim (Machaira) Perry

Welcome back! If you抮e saying 揌uh?!?then you probably haven抰 read the first part of this tutorial. Please read it before continuing because we抣l be building on it.

Download this tutorial (in Word format) and the sample projects in a zip file (40 KB)

First Up

Let抯 build on our base window by adding the standard Minimize, Maximize/Restore, and Close buttons (see WindowSample3 project).

We抳e added enums for the new buttons:

CloseBtn
MinBtn
MaxBtn
RestoreBtn

created bitmaps for them (close.bmp, minimize.bmp, maximize.bmp, and restore.bmp), and added instances of the clsWindow class in the modDirectDraw module to create them:

Public WithEvents CloseButton As New clsWindow
Public WithEvents MinButton As New clsWindow
Public WithEvents MaxButton As New clsWindow
Public WithEvents RestoreButton As New clsWindow

Notice that we抳e added WithEvents to the declarations. This will allow us to do things outside of the class when the control is clicked. We抣l go over this a little later.

New controls mean that we have to add them as child controls to the base window object. We抳e done this in the CreateWindowObjects function, setting the necessary properties for them:

With frmMain.CloseButton
.ObjectType = CloseBtn
.ParentHeight = frmMain.Window.Height
.ParentWidth = frmMain.Window.Width
.ParentX = frmMain.Window.X
.ParentY = frmMain.Window.Y
.ObjectSurface = objDD.CreateSurfaceFromFile(App.Path & "/close.bmp", ddsdSurf4)
.WindowName = "CloseBtn"
End With
frmMain.Window.AddChild frmMain.CloseButton

With frmMain.MinimizeButton
.ObjectType = MinBtn
.ParentHeight = frmMain.Window.Height
.ParentWidth = frmMain.Window.Width
.ParentX = frmMain.Window.X
.ParentY = frmMain.Window.Y
.ObjectSurface = objDD.CreateSurfaceFromFile(App.Path & "/minimize.bmp", ddsdSurf4)
.WindowName = "MinBtn"
End With
frmMain.Window.AddChild frmMain.MinimizeButton

With frmMain.MaximizeButton
.ObjectType = MaxBtn
.ParentHeight = frmMain.Window.Height
.ParentWidth = frmMain.Window.Width
.ParentX = frmMain.Window.X
.ParentY = frmMain.Window.Y
.ObjectSurface = objDD.CreateSurfaceFromFile(App.Path & "/maximize.bmp", ddsdSurf4)
.WindowName = "MaxBtn"
End With
frmMain.Window.AddChild frmMain.MaximizeButton

With frmMain.RestoreButton
.ObjectType = RestoreBtn
.ParentHeight = frmMain.Window.Height
.ParentWidth = frmMain.Window.Width
.ParentX = frmMain.Window.X
.ParentY = frmMain.Window.Y
.ObjectSurface = objDD.CreateSurfaceFromFile(App.Path & "/restore.bmp", ddsdSurf4)
.WindowName = "RestoreBtn"
End With
frmMain.Window.AddChild frmMain.RestoreButton

This is code that used to be in the InitDD function, but has been moved out for a good reason, as you抣l see soon. It allows us to recreate the base window object and all children whenever we want. Notice also that we抳e changed the code to use the With匛ndWIth statements. It抯 saves our poor little fingers from having to type as much and speeds up the code a bit (not that it抣l be noticeable unless you timed it.

If you compare this chunk of code with the code to create the OK button, you抣l notice that we抮e not setting any X and Y or ObjectState properties for the buttons. That抯 because you can抰. The buttons only go in one place, the standard position on the window they抮e attached to. The properties are set in the ObjectSurface Property Set method:

Case MinBtn
iHeight = ddsd.lHeight / 2
iX = iParentWidth + iParentX - iWidth - 40
iY = iParentY + 7
iObjectState = iEnabled
Case MaxBtn
iHeight = ddsd.lHeight / 2
iX = iParentWidth + iParentX - iWidth - 24
iY = iParentY + 7
iObjectState = iEnabled
Case CloseBtn
iHeight = ddsd.lHeight / 2
iX = iParentWidth + iParentX - iWidth - 6
iY = iParentY + 7
iObjectState = iEnabled
Case RestoreBtn
iHeight = ddsd.lHeight / 2
iX = iParentWidth + iParentX - iWidth - 24
iY = iParentY + 7
iObjectState = iEnabled

The DrawObject function is also modified to handle drawing the new controls:

Case MinBtn, MaxBtn, CloseBtn, RestoreBtn

rectObject.Left = 0
rectObject.Right = iWidth

Select Case iObjectState
Case iEnabled
rectObject.Top = 0
rectObject.Bottom = iHeight
Case iPressed
rectObject.Top = iHeight
rectObject.Bottom = iHeight * 2
End Select

If you run the app, you抣l see the new buttons in the upper right hand corner of the window. You抣l also notice that we抳e added a caption for the window. This is held by the sCaption member of the clsWindow class. If you look at the declarations section for the class you抣l also see two other new members:

Private iCaptionX As Integer
Private iCaptionY As Integer

These will be used to draw the caption where it is needed for the specific control type. If you look at the DrawObject function in the class you抣l see we抳e added the code necessary to handle the caption:

Case BaseWindow
'Nothing needed here since we use the base rectangle
If Len(sCaption) > 0 Then
iCaptionX = iX + 10
iCaptionY = iY + 5
bDrawCaption = True
Else
bDrawCaption = False
End If

?/SPAN>

If bDrawCaption Then
lOldColor = objSurface.GetForeColor
objSurface.SetForeColor RGB(255, 255, 255)
objSurface.DrawText iCaptionX, iCaptionY, sCaption, False
objSurface.SetForeColor lOldColor
End If

The setup of the base window object has been changed to add the caption:

With frmMain.Window
.ObjectSurface = objDD.CreateSurfaceFromFile(App.Path & "/window.bmp", ddsdSurf2)
.ParentX = 0
.ParentY = 0
.ParentHeight = 600
.ParentWidth = 800
.CenterX = True
.CenterY = True
.WindowName = "Base"
.Caption = "Test Window"
End With

The next thing that has been added is the event raising. Take a look at the MouseUp function in the clsWindow class:

Public Function MouseUp(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single) As Boolean

Dim iLp As Integer
Dim bRetVal As Boolean

MouseUp = False

If X >= iX And X <= iX + iWidth And Y >= iY And Y <= iY + iHeight Then
For iLp = 1 To colChildren.Count
'If a child handles the event no need to do anything else
bRetVal = colChildren(iLp).MouseUp(Button, Shift, X, Y)
If bRetVal Then Exit Function
Next iLp

If iObjectType >= CloseBtn Then
iObjectState = iEnabled
If iObjectType = CloseBtn Then
RaiseEvent Clicked
End If
Else
If Not (iObjectState = iDisabled) Then
If iObjectState = iPressed And iObjectType = Btn Then
iObjectState = iEnabled
RaiseEvent Clicked
End If
End If

End If
MouseUp = True

End If

End Function

If the control has been clicked we use RaiseEvent to notify the app that this is so. The app can then decide what to do based on which control has been clicked. In our case we do two things ?destroy the window and close the app:

Private Sub CloseButton_Clicked()
Window.RemoveChildren
Set Window = Nothing
End Sub

Private Sub OKButton_Clicked()
gbRun = False
End Sub

You can recreate the window by pressing the F1 key. Try it and see. I抣l wait while you do. J

Got all that? Good, then lets more on to more cool stuff.

Next Up

Open up the WindowSample4 project and take a look at the modMain module. You抣l see we抳e added RadioBtn and FrameWnd enums. Also not the constant cFrameGrey. We抣l be using this a little later on to help draw the FrameWnd control.

Next take a look at the frmMain code. We抳e added declarations for the new frame and radio button objects. Notice the two sets of radio buttons ?WindowRadio1,2, and 3 and Radio1, 2, and 3. The WindowRadio controls will go on the base window and the Radio controls will be contained by the Frame control. You抣l see that you can change a control in one group without affecting the other, just as you can in VB. This is due to the Parent/Child relationship of the clsWindow objects. We抳e also added the code to support the RaiseEvent call in the class for each of the objects. We merely set two controls that weren抰 clicked to be unchecked.

Not much has changed in the modDirectDraw module. The only thing of significance is in setting up the radio buttons that are contained by the Frame control:

With frmMain.Radio1
.ObjectType = RadioBtn
.ObjectState = iUnchecked
.ParentHeight = frmMain.Frame1.Height
.ParentWidth = frmMain.Frame1.Width
.ParentX = frmMain.Frame1.X
.ParentY = frmMain.Frame1.Y
.X = 100 + .ParentX
.Y = 100 + .ParentY
.ObjectSurface = objDD.CreateSurfaceFromFile(App.Path & "/radio.bmp", ddsdSurf6)
.WindowName = "Radio1"
.Caption = "Radio 1"
End With
'Add to frame not base window
frmMain.Frame1.AddChild frmMain.Radio1

With frmMain.Radio2
.ObjectType = RadioBtn
.ObjectState = iUnchecked
.ParentHeight = frmMain.Frame1.Height
.ParentWidth = frmMain.Frame1.Width
.ParentX = frmMain.Frame1.X
.ParentY = frmMain.Frame1.Y
.X = 100 + .ParentX
.Y = 115 + .ParentY
.ObjectSurface = objDD.CreateSurfaceFromFile(App.Path & "/Radio.bmp", ddsdSurf6)
.WindowName = "Radio2"
.Caption = "Radio 2"
End With
'Add to frame not base window
frmMain.Frame1.AddChild frmMain.Radio2

With frmMain.Radio3
.ObjectType = RadioBtn
.ObjectState = iUnchecked
.ParentHeight = frmMain.Frame1.Height
.ParentWidth = frmMain.Frame1.Width
.ParentX = frmMain.Frame1.X
.ParentY = frmMain.Frame1.Y
.X = 100 + .ParentX
.Y = 130 + .ParentY
.ObjectSurface = objDD.CreateSurfaceFromFile(App.Path & "/Radio.bmp", ddsdSurf6)
.WindowName = "Radio3"
.Caption = "Radio 3"
End With
'Add to frame not base window
frmMain.Frame1.AddChild frmMain.Radio3

Notice that we抮e calling AddChild for the Frame1 control, not the Window control.

The clsWindow class has changed a bit as you probably expected. We抳e exposed the Width and Height members of the clsWindow class in order to set up the Frame control:

With frmMain.Frame1
.ObjectType = FrameWnd
.ObjectState = iEnabled
.ParentHeight = frmMain.Window.Height
.ParentWidth = frmMain.Window.Width
.ParentX = frmMain.Window.X
.ParentY = frmMain.Window.Y
.X = 75
.Y = 75
.Width = 200
.Height = 200
.WindowName = "Frame1"
.Caption = "Test Frame"
End With
frmMain.Window.AddChild frmMain.Frame1

The Property Let ObjectSurface and MouseDown function have had the RadioBtn added to the cases for the ChkBox:

Public Property Let ObjectSurface(ByVal objSurface As DirectDrawSurface7)

?/SPAN>

Case ChkBox, RadioBtn
iHeight = ddsd.lHeight / 4

?/SPAN>

End Property

Public Function DrawObject(objSurface As DirectDrawSurface7)

Dim clsWindow As clsWindow
Dim iLp As Integer
Dim ddsd As DDSURFACEDESC2
Dim rectBitmap As RECT
Dim rectObject As RECT
Dim lRet As Long
Dim bDrawCaption As Boolean
Dim lOldColor As Long
Dim lBltFlags As Long

On Error GoTo DrawObjectErr

rectBitmap.Left = iX
rectBitmap.Right = iX + iWidth
rectBitmap.Top = iY
rectBitmap.Bottom = iY + iHeight

Select Case iObjectType
Case Btn

rectObject.Left = 0
rectObject.Right = iWidth

Select Case iObjectState
Case iEnabled
rectObject.Top = 0
rectObject.Bottom = iHeight
Case iDisabled
rectObject.Top = iHeight * 2
rectObject.Bottom = iHeight * 3
Case iPressed
rectObject.Top = iHeight
rectObject.Bottom = iHeight * 2
End Select

Case ChkBox, RadioBtn

rectObject.Left = 0
rectObject.Right = iWidth

Select Case iObjectState
Case iUnchecked
rectObject.Top = 0
rectObject.Bottom = iHeight
Case iDisabled
rectObject.Top = iHeight * 2
rectObject.Bottom = iHeight * 3
Case iChecked
rectObject.Top = iHeight
rectObject.Bottom = iHeight * 2
Case iChecked_iDisabled
rectObject.Top = iHeight * 3
rectObject.Bottom = iHeight * 4
End Select

If Len(sCaption) > 0 Then
iCaptionX = iX + 15
iCaptionY = iY
bDrawCaption = True
Else
bDrawCaption = False
End If

Case MinBtn, MaxBtn, CloseBtn, RestoreBtn

rectObject.Left = 0
rectObject.Right = iWidth

Select Case iObjectState
Case iEnabled
rectObject.Top = 0
rectObject.Bottom = iHeight
Case iPressed
rectObject.Top = iHeight
rectObject.Bottom = iHeight * 2
End Select

Case FrameWnd

'see framesample.bmp for how this should look as a normal VB control
lOldColor = objSurface.GetFillColor

objSurface.SetForeColor cFrameGrey

objSurface.DrawLine iX + iParentX, iY + iParentY, iX + iParentX + iWidth, iY + iParentY
objSurface.DrawLine iX + iParentX, iY + iParentY, iX + iParentX, iY + iParentY + iHeight
objSurface.DrawLine iX + iParentX, iY + iParentY + iHeight, iX + iParentX + iWidth, iY + iParentY + iHeight
objSurface.DrawLine iX + iParentX + iWidth, iY + iParentY, iX + iParentX + iWidth, iY + iParentY + iHeight

objSurface.SetForeColor vbWhite

objSurface.DrawLine iX + iParentX + 1, iY + iParentY + 1, iX + iParentX + iWidth - 1, iY + iParentY + 1
objSurface.DrawLine iX + iParentX + 1, iY + iParentY + 1, iX + iParentX + 1, iY + iParentY + iHeight - 1
objSurface.DrawLine iX + iParentX, iY + iParentY + iHeight + 1, iX + iParentX + iWidth + 1, iY + iParentY + iHeight + 1
objSurface.DrawLine iX + iParentX + iWidth + 1, iY + iParentY, iX + iParentX + iWidth + 1, iY + iParentY + iHeight + 1

objSurface.SetForeColor lOldColor

If Len(sCaption) > 0 Then
iCaptionX = iX + iParentX + 10
iCaptionY = iY + ParentY - 8
bDrawCaption = True
Else
bDrawCaption = False
End If

Case BaseWindow
'Nothing needed here since we use the base rectangle

If Len(sCaption) > 0 Then
iCaptionX = iX + 10
iCaptionY = iY + 5
bDrawCaption = True
Else
bDrawCaption = False
End If
End Select

lBltFlags = DDBLT_WAIT
'Need to use transparency if it's a radio button
If iObjectType = RadioBtn Then
lBltFlags = DDBLT_WAIT Or DDBLT_KEYSRC
End If

'Don't blit if it a frame control
If iObjectType <> FrameWnd Then lRet = objSurface.Blt(rectBitmap, objBitmap, rectObject, lBltFlags)

If bDrawCaption Then
lOldColor = objSurface.GetForeColor
objSurface.SetForeColor RGB(255, 255, 255)
objSurface.DrawText iCaptionX, iCaptionY, sCaption, False
objSurface.SetForeColor lOldColor
End If

For iLp = 1 To colChildren.Count
colChildren(iLp).DrawObject objSurface
Next iLp

Exit Function

DrawObjectErr:
objErr.WriteLine "Error drawing " & sName & " - " & Err.Description

Exit Function
End Function

As you can see the changes are pretty extensive. The function now has to handle the two new controls and the new Caption member. The RadioBtn is fairly simple since it pretty much acts like the ChkBox inside the class. If you looked at the files included with this project you抣l notice that there抯 no bitmap for the frame object. That抯 because it uses DirectDraw抯 DrawLine function to draw the outline of the frame. Open the framesample.bmp file and zoom in to see how it抯 actually drawn.

We抳e added a function in the class to return a child object. This is necessary to change the RadioBtn抯 ObjectState member when one radio button in a group is clicked:

Public Function GetChild(ByVal sKey As String) As clsWindow
Set GetChild = colChildren(sKey)
End Function

The AddChild method was changed to specify a key when adding a child in order to support this function:

Public Sub AddChild(clsChild As clsWindow)
colChildren.Add clsChild, clsChild.WindowName
End Sub

Take a minute to run the app and play with the new controls. There are a couple of things that could be changed to make the class better but I抣l leave them up to you. Some things could be:

Add members to allow the font type, size and color to be changed.
Add a Style member to allow the ChkBox and RadioBtn objects to be graphical similar to the way the VB controls act.
Change the frame drawing to not draw under the caption.
Adapt the class to add a LabelWnd object type. This would just use the Caption property

That抯 it for this lesson. I hope it抯 been fun and interesting. The next lesson will attempt to cover listboxes and comboboxes. Hope to see you there.