thongkorn โพสต์ 2018-7-31 19:07:02

[VB6] การทำทูลบาร์ (ToolBar) ด้วย CodeJock ระดับมืออาชีพ

http://www.g2gnet.com/webboard/images/vb6/codejock/CodeJOckToolBar2018.png

การใช้งาน CodeJock ActiveX ค่อนข้างที่จะใช้งานยากเอามากๆ หากลำพังแค่จับลากมาวางมันก็จะยังไม่ทำงานตามรูปแบบที่เราต้องการ เพราะจะต้องเขียนโค้ด (ขั้นสูงอีก) แต่มันเป็น ActiveX มหัศจรรย์ คือ ทำลายขีดจำกัดในเรื่องไฟล์ประเภท GIF, BMP หรือ ICO ที่ใช้งานร่วมกับ Visual Studio 98 มาอย่างยาวนาน ลงได้อย่างราบคาบ ทำให้ GUI มีสีสันที่สวยงาม น่าใช้งานโปรแกรมมากขึ้น ... บทความนี้จะเป็นการทำ ToolBar โดยจะเล่นกับ ImageManager และใช้โค้ดคำสั่งเข้าช่วย ...

ดาวน์โหลด CodeJock Suite Pro for ActiveX/COM ได้ที่นี่ (เฉพาะสมาชิกเท่านั้น)

http://www.g2gnet.com/webboard/images/vb6/codejock/CodejockComponent.png
เมนู Project --> Components ...

Design Time ...
http://www.g2gnet.com/webboard/images/vb6/codejock/CodeJockDesign.png
เราจำเป็นต้องใช้ Component 3 ตัว ประกอบด้วย ...
- CommandBar ตัวนี้ช่วยทำเรื่องเมนู ทูลบาร์
- SkinFramework ตัวนี้ก็ตามชื่อเลย คือเรื่อง Skin
- ImageManager ตัวนี้จะใช้คู่กับ CommandBar เพื่อนำรูปกราฟิคประเภท PNG เข้ามาใช้งานให้สวยงาม

เรียงลำดับขั้นตอนการทำทูลบาร์
http://www.g2gnet.com/webboard/images/vb6/codejock/ImageManager.png
เลือก ImageManager --> Custom

http://www.g2gnet.com/webboard/images/vb6/codejock/IconAdd.png
เลือกปุ่มสร้าง Icon

http://www.g2gnet.com/webboard/images/vb6/codejock/IconID.png
ตั้งค่า ID ให้เป็นค่าตัวเลข และเลือกขนาดไอคอน = 32 x 32 Pixel.

http://www.g2gnet.com/webboard/images/vb6/codejock/IconID1.png
เรียบร้อย ... ต่อไปเป็นจะเป็นการเลือก Import ภาพกราฟิคเข้ามา โดยไปที่ Import and Export

http://www.g2gnet.com/webboard/images/vb6/codejock/IconImport.png
เลือก Import From Bitmap ...

http://www.g2gnet.com/webboard/images/vb6/codejock/IconBrowse.png
Browse เลือกไฟล์ PNG

http://www.g2gnet.com/webboard/images/vb6/codejock/IconSelect.png
ต้องเอาเมาส์จิ้มลงในรูปไอคอนก่อน มันถึงจะปรากฏ ID ขึ้นมาให้เราเลือก ... กด Import

http://www.g2gnet.com/webboard/images/vb6/codejock/IconFinish.png
หากต้องการแก้ไข (รูปดินสอ) หรือ ลบ (รูปกรรไกร) เราต้องเอาเมาส์เข้าไปจิ้มรูปไอคอนสักอันก่อน ปุ่มต่างๆถึงจะขึ้นมาทำงาน ... จากนั้นก็วนรอบกลับไปเพิ่มรายการเข้ามาใหม่เหมือนเดิม แต่อย่าลืมเปลี่ยนค่า ID ด้วย

สร้างโมดูล หรือไฟล์ที่มีนามสกุล Bas ตัวอย่างคือ Resource.bas
'// กำหนดค่าคงที่ให้กับปุ่ม
Public Const ID_USER_TOOLS_1 = 801
Public Const ID_USER_TOOLS_2 = 802
Public Const ID_USER_TOOLS_3 = 803
Public Const ID_USER_TOOLS_4 = 804
Public Const ID_USER_TOOLS_5 = 805

'// Constant from CodeJock, don't change.
Public Const ID_INDICATOR_CAPS = 59137
Public Const ID_INDICATOR_NUM = 59138
Public Const ID_INDICATOR_SCRL = 59139
'//
'Public Const FSHIFT = 4
'Public Const FCONTROL = 8
'Public Const FALT = 16เป็นการนำค่าคงที่มาเก็บไว้ที่นี่ เพื่อใช้อ้างถึงเวลาใช้งานในโค้ดหลัก ... แต่จะมีค่าบางตัวที่ถูกกำหนดเอาไว้จาก CodeJock แล้ว ต้องเปิดคู่มือด้วยล่ะกันครับ

โค้ดเรียกใช้งานจากฟอร์มหลัก ... คำอธิบายอยู่ในนี้ทั้งหมดแล้วครับ
' / ---------------------------------------------------------------------------------------
' / Developer : Mr.Surapon Yodsanga (Thongkorn Tubtimkrob)
' / eMail : thongkorn@hotmail.com
' / URL: http://www.g2gnet.com (Khon Kaen - Thailand)
' / Facebook: https://www.facebook.com/g2gnet (For Thailand)
' / Facebook: https://www.facebook.com/commonindy (Worldwide)
' / Purpose: Sample to make toolbar from CodeJock ActiveX.
' / Microsoft Visual Basic 6.0 (SP6)
' / ---------------------------------------------------------------------------------------
Option Explicit

Private Declare Function InitCommonControls Lib "Comctl32.dll" () As Long
'// การสร้าง TabToolBar
Private WithEvents TabToolBar As XtremeCommandBars.TabToolBar
'// การสร้าง StatusBar
Dim WithEvents StatusBar As XtremeCommandBars.StatusBar

Private Sub MDIForm_Initialize()
    Call InitCommonControls
End Sub

Private Sub MDIForm_Activate()
    frmMain.Caption = "CodeJock ToolBars - Version " & App.Major & "." & App.Minor & " - coDe bY: Thongkorn Tubtimkrob"
    StatusBar.IdleText = "Developer : thongkorn@hotmail.com - www.facebook.com/g2gnet"
End Sub

Private Sub MDIForm_Load()
    ' / ---------------------------------------------------------------------------------------
    '// CommandBarsGlobalSettings มี Properties ให้ใช้งานได้หลากหลายมากครับ เช่น ทำโปรแกรมหลายภาษา
    '// ตัวอย่าง ...CommandBarsGlobalSettings.ResourceFile = "XTPResourceArSa.dll"
    CommandBarsGlobalSettings.App = App
   
    '// Center Screen
    Me.Move (Screen.Width - Width) \ 2, (Screen.Height - Height) \ 2

    '/ ไม่ต้องการให้เมนูเคลื่อนที่ได้ (Stretched)
    CommandBars1.ActiveMenuBar.EnableDocking xtpFlagStretched
    CommandBars1.Options.KeyboardCuesShow = xtpKeyboardCuesShowWindowsDefault
    CommandBars1.EnableCustomization False
   
    ' / ---------------------------------------------------------------------------------------
    '/ แสดง Theme ... อยากได้ตัวไหนก็เลือกตามสบายครับ
    'SkinFramework.LoadSkin App.Path + "\Styles\Office2007.cjstyles", "NORMALBLUE.ini"
    'SkinFramework.LoadSkin App.Path + "\Styles\Office2007.cjstyles", "NORMALSILVER.ini"
    SkinFramework1.LoadSkin App.Path + "\Styles\Vista.cjstyles", "NORMALBLUE.INI"
    'SkinFramework.LoadSkin App.Path + "\Styles\Vista.cjstyles", "NORMALBLACK.INI"
    'SkinFramework.LoadSkin App.Path + "\Styles\Vista.cjstyles", "NORMALSILVER.INI"
    ' / ---------------------------------------------------------------------------------------
    'SkinFramework.LoadSkin App.Path + "\Styles\WinXP.Royale.cjstyles", "NORMALBLUE.INI"
   
    SkinFramework1.ApplyWindow (Me.hWnd)
    SkinFramework1.ApplyOptions = SkinFramework1.ApplyOptions Or xtpSkinApplyMetrics
    CommandBars1.PaintManager.RefreshMetrics
    CommandBars1.RecalcLayout
    ' / ---------------------------------------------------------------------------------------
   
    '/ เพิ่มรายการ Tabbed ToolBar
    Set TabToolBar = CommandBars1.AddTabToolBar("Main ToolBar")
    '/ ไม่อนุญาตให้เพิ่ม/ลบ (Add or Remove Buttons) ที่มันจะอยู่ทางด้านขวามือสุดของ TabToolBar
    TabToolBar.ShowExpandButton = False

    '// เริ่มต้นการเพิ่มปุ่ม Control เข้ามายัง Tabbed ToolBar
    '// ตัวแปร Control ในการสร้างกลุ่มของ ToolBar
    Dim Control As CommandBarControl
    With TabToolBar
      Dim iCount As Integer
      '/ สร้างรายการ ToolBar ขึ้นมา
      '/ ค่าคงที่ ID_USER_TOOLS แต่ละตัว เราไปกำหนดล่วงหน้าเอาเองที่ Resource.bas
      For iCount = ID_USER_TOOLS_1 To ID_USER_TOOLS_5
            Select Case iCount
                Case 801: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 1")
                Case 802: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 2")
                Case 803: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 3")
                Case 804: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 4")
                Case 805: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 5")
            End Select
            Control.Category = "User Tools"
      Next
    End With
   
    '/ ประกาศตัวแปร Array ตามจำนวน ToolBar ที่ต้องการสร้างขึ้นมา เพื่อแสดงรูป Icon
    '/ ในตัวอย่างมี 5 ตัว โดยเริ่มต้นจาก 0 ถึง 4
    Dim icoIconArray(0 To 4) As Long
    icoIconArray(0) = ID_USER_TOOLS_1
    icoIconArray(1) = ID_USER_TOOLS_2
    icoIconArray(2) = ID_USER_TOOLS_3
    icoIconArray(3) = ID_USER_TOOLS_4
    icoIconArray(4) = ID_USER_TOOLS_5
   
    '/ ส่งให้กับ CommandBars อีกที เพื่อให้ ToolBar แสดงภาพ Icon ได้
    CommandBars1.Icons = ImageManager1.Icons
    '/ ปรับขนาดฟอนต์ให้ ToolBar
    CommandBars1.Options.Font.Size = 10
    'CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched
   
    '/ ตั้งค่าขนาด Icon ตามที่เราออกแบบเอาไว้ แต่ละตัวจะมีขนาด 32x32 Pixel
    TabToolBar.SetIconSize 32, 32
    TabToolBar.ShowTextBelowIcons = True
    '/ ไม่ให้เกิดการเคลื่อนที่ของ ToolBar ได้
    TabToolBar.EnableDocking xtpFlagStretched
    TabToolBar.Closeable = False
    TabToolBar.Customizable = False
   
    ' ======================= ToolTips ==========================
    Dim ToolTipContext As ToolTipContext
    Set ToolTipContext = CommandBars1.ToolTipContext
    ToolTipContext.Style = xtpToolTipOffice2007
    ToolTipContext.ShowTitleAndDescription True, xtpToolTipIconNone
    '/ ตั้งค่าตำแหน่งของ ToolTip
    ToolTipContext.SetMargin 2, 2, 2, 2
    ToolTipContext.MaxTipWidth = 180
    ToolTipContext.ShowShadow = True
    ' ======================= ToolTips ==========================
   
    '// การสร้าง StatusBar ที่อยู่ด้านล่างของฟอร์ม
    Set StatusBar = CommandBars1.StatusBar
    StatusBar.Visible = True
    StatusBar.Font.Size = 9
   
    StatusBar.AddPane 0
    '// ค่าคงที่ๆกำหนดไว้ใน Resource.bas และเป็นค่าสงวนที่เปลี่ยนแปลงไม่ได้
    '// ปุ่ม CAPS LOCK, NUM OAD และ SCROLL LOCK
    StatusBar.AddPane ID_INDICATOR_CAPS
    StatusBar.AddPane ID_INDICATOR_NUM
    StatusBar.AddPane ID_INDICATOR_SCRL
    StatusBar.IdleText = "Developer : thongkorn@hotmail.com - www.facebook.com/g2gnet"
End Sub

' / ---------------------------------------------------------------------------------------
' / เหตุการณ์ในการกดคลิ๊กเมาส์เพื่อเลือกToolBars แต่ละตัว
Private Sub CommandBars1_Execute(ByVal Control As XtremeCommandBars.ICommandBarControl)
' / ---------------------------------------------------------------------------------------
    On Error Resume Next
    '// โดยเลือกจากค่าคงที่ หรือ ID ที่เราสร้างไว้ใน Resource.bas
    Select Case Control.Id
      Case ID_USER_TOOLS_1:
            MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 1"
      Case ID_USER_TOOLS_2:
            MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 2"
      Case ID_USER_TOOLS_3:
            MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 3"
      Case ID_USER_TOOLS_4:
            MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 4"
      Case ID_USER_TOOLS_5:
            MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 5 และกำลังจะจบโปรแกรม"
            End
    End Select
End Sub
ดาวน์โหลด CodeJock Suite Pro for ActiveX/COM ได้ที่นี่ (เฉพาะสมาชิกเท่านั้น)

ดาวน์โหลดโค้ดต้นฉบับเต็ม VB6 ได้ที่นี่

m997 โพสต์ 2018-7-31 20:57:43

สุดยอดมากเลยครับอาจารย์อยากเลี้ยงเร้ด นี่ทำไง ครับอยู่ไกลกันมีโอกาสอยากแวะไปหาอาจารย์จัง สักชุด!!
หน้า: [1]
ดูในรูปแบบกติ: [VB6] การทำทูลบาร์ (ToolBar) ด้วย CodeJock ระดับมืออาชีพ