DX: Full Screen GUI Development 2 (轉)

DX: Full Screen GUI Development 2 (轉)[@more@]

Full Screen GUI Development

Pt 2 ?More Controls & Text

By to:jperry@breakawaygames.com">Jim (Machaira) Perry

 

 

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

 

this tutorial (in format) and the sample projects in a zfile (40 KB)

 

First Up

 

Let抯 build on our base window by adding the standard Minimize, Maximize/Restore, and Close buttons (see ample3 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 outs 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 . 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

 

  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 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 = DLT_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.