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

thongkorn

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

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


เมนู Project --> Components ...

Design Time ...

เราจำเป็นต้องใช้ Component 3 ตัว ประกอบด้วย ...
- CommandBar ตัวนี้ช่วยทำเรื่องเมนู ทูลบาร์
- SkinFramework ตัวนี้ก็ตามชื่อเลย คือเรื่อง Skin
- ImageManager ตัวนี้จะใช้คู่กับ CommandBar เพื่อนำรูปกราฟิคประเภท PNG เข้ามาใช้งานให้สวยงาม

เรียงลำดับขั้นตอนการทำทูลบาร์

เลือก ImageManager --> Custom


เลือกปุ่มสร้าง Icon


ตั้งค่า ID ให้เป็นค่าตัวเลข และเลือกขนาดไอคอน = 32 x 32 Pixel.


เรียบร้อย ... ต่อไปเป็นจะเป็นการเลือก Import ภาพกราฟิคเข้ามา โดยไปที่ Import and Export


เลือก Import From Bitmap ...


Browse เลือกไฟล์ PNG


ต้องเอาเมาส์จิ้มลงในรูปไอคอนก่อน มันถึงจะปรากฏ ID ขึ้นมาให้เราเลือก ... กด Import


หากต้องการแก้ไข (รูปดินสอ) หรือ ลบ (รูปกรรไกร) เราต้องเอาเมาส์เข้าไปจิ้มรูปไอคอนสักอันก่อน ปุ่มต่างๆถึงจะขึ้นมาทำงาน ... จากนั้นก็วนรอบกลับไปเพิ่มรายการเข้ามาใหม่เหมือนเดิม แต่อย่าลืมเปลี่ยนค่า ID ด้วย

สร้างโมดูล หรือไฟล์ที่มีนามสกุล Bas ตัวอย่างคือ Resource.bas

1. '// กำหนดค่าคงที่ให้กับปุ่ม
   
2. Public Const ID_USER_TOOLS_1 = 801
   
3. Public Const ID_USER_TOOLS_2 = 802
   
4. Public Const ID_USER_TOOLS_3 = 803
   
5. Public Const ID_USER_TOOLS_4 = 804
   
6. Public Const ID_USER_TOOLS_5 = 805
   
7. 
   
8. '// Constant from CodeJock, don't change.
   
9. Public Const ID_INDICATOR_CAPS = 59137
   
10. Public Const ID_INDICATOR_NUM = 59138
    
11. Public Const ID_INDICATOR_SCRL = 59139
    
12. '//
    
13. 'Public Const FSHIFT = 4
    
14. 'Public Const FCONTROL = 8
    
15. 'Public Const FALT = 16

คัดลอกไปที่คลิปบอร์ด

เป็นการนำค่าคงที่มาเก็บไว้ที่นี่ เพื่อใช้อ้างถึงเวลาใช้งานในโค้ดหลัก ... แต่จะมีค่าบางตัวที่ถูกกำหนดเอาไว้จาก CodeJock แล้ว ต้องเปิดคู่มือด้วยล่ะกันครับ

โค้ดเรียกใช้งานจากฟอร์มหลัก ... คำอธิบายอยู่ในนี้ทั้งหมดแล้วครับ

1. ' / ---------------------------------------------------------------------------------------
   
2. ' / Developer : Mr.Surapon Yodsanga (Thongkorn Tubtimkrob)
   
3. ' / eMail : thongkorn@hotmail.com
   
4. ' / URL: http://www.g2gnet.com (Khon Kaen - Thailand)
   
5. ' / Facebook: https://www.facebook.com/g2gnet (For Thailand)
   
6. ' / Facebook: https://www.facebook.com/commonindy (Worldwide)
   
7. ' / Purpose: Sample to make toolbar from CodeJock ActiveX.
   
8. ' / Microsoft Visual Basic 6.0 (SP6)
   
9. ' / ---------------------------------------------------------------------------------------
   
10. Option Explicit
    
11. 
    
12. Private Declare Function InitCommonControls Lib "Comctl32.dll" () As Long
    
13. '// การสร้าง TabToolBar
    
14. Private WithEvents TabToolBar As XtremeCommandBars.TabToolBar
    
15. '// การสร้าง StatusBar
    
16. Dim WithEvents StatusBar As XtremeCommandBars.StatusBar
    
17. 
    
18. Private Sub MDIForm_Initialize()
    
19.     Call InitCommonControls
    
20. End Sub
    
21. 
    
22. Private Sub MDIForm_Activate()
    
23.     frmMain.Caption = "CodeJock ToolBars - Version " & App.Major & "." & App.Minor & " - coDe bY: Thongkorn Tubtimkrob"
    
24.     StatusBar.IdleText = "Developer : thongkorn@hotmail.com [www.g2gnet.com] - www.facebook.com/g2gnet"
    
25. End Sub
    
26. 
    
27. Private Sub MDIForm_Load()
    
28.     ' / ---------------------------------------------------------------------------------------
    
29.     '// CommandBarsGlobalSettings มี Properties ให้ใช้งานได้หลากหลายมากครับ เช่น ทำโปรแกรมหลายภาษา
    
30.     '// ตัวอย่าง ...  CommandBarsGlobalSettings.ResourceFile = "XTPResourceArSa.dll"
    
31.     CommandBarsGlobalSettings.App = App
    
32.      
    
33.     '// Center Screen
    
34.     Me.Move (Screen.Width - Width) \ 2, (Screen.Height - Height) \ 2
    
35. 
    
36.     '/ ไม่ต้องการให้เมนูเคลื่อนที่ได้ (Stretched)
    
37.     CommandBars1.ActiveMenuBar.EnableDocking xtpFlagStretched
    
38.     CommandBars1.Options.KeyboardCuesShow = xtpKeyboardCuesShowWindowsDefault
    
39.     CommandBars1.EnableCustomization False
    
40.    
    
41.     ' / ---------------------------------------------------------------------------------------
    
42.     '/ แสดง Theme ... อยากได้ตัวไหนก็เลือกตามสบายครับ
    
43.     'SkinFramework.LoadSkin App.Path + "\Styles\Office2007.cjstyles", "NORMALBLUE.ini"
    
44.     'SkinFramework.LoadSkin App.Path + "\Styles\Office2007.cjstyles", "NORMALSILVER.ini"
    
45.     SkinFramework1.LoadSkin App.Path + "\Styles\Vista.cjstyles", "NORMALBLUE.INI"
    
46.     'SkinFramework.LoadSkin App.Path + "\Styles\Vista.cjstyles", "NORMALBLACK.INI"
    
47.     'SkinFramework.LoadSkin App.Path + "\Styles\Vista.cjstyles", "NORMALSILVER.INI"
    
48.     ' / ---------------------------------------------------------------------------------------
    
49.     'SkinFramework.LoadSkin App.Path + "\Styles\WinXP.Royale.cjstyles", "NORMALBLUE.INI"
    
50.    
    
51.     SkinFramework1.ApplyWindow (Me.hWnd)
    
52.     SkinFramework1.ApplyOptions = SkinFramework1.ApplyOptions Or xtpSkinApplyMetrics
    
53.     CommandBars1.PaintManager.RefreshMetrics
    
54.     CommandBars1.RecalcLayout
    
55.     ' / ---------------------------------------------------------------------------------------
    
56.    
    
57.     '/ เพิ่มรายการ Tabbed ToolBar
    
58.     Set TabToolBar = CommandBars1.AddTabToolBar("Main ToolBar")
    
59.     '/ ไม่อนุญาตให้เพิ่ม/ลบ (Add or Remove Buttons) ที่มันจะอยู่ทางด้านขวามือสุดของ TabToolBar
    
60.     TabToolBar.ShowExpandButton = False
    
61. 
    
62.     '// เริ่มต้นการเพิ่มปุ่ม Control เข้ามายัง Tabbed ToolBar
    
63.     '// ตัวแปร Control ในการสร้างกลุ่มของ ToolBar
    
64.     Dim Control As CommandBarControl
    
65.     With TabToolBar
    
66.         Dim iCount As Integer
    
67.         '/ สร้างรายการ ToolBar ขึ้นมา
    
68.         '/ ค่าคงที่ ID_USER_TOOLS แต่ละตัว เราไปกำหนดล่วงหน้าเอาเองที่ Resource.bas
    
69.         For iCount = ID_USER_TOOLS_1 To ID_USER_TOOLS_5
    
70.             Select Case iCount
    
71.                 Case 801: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 1")
    
72.                 Case 802: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 2")
    
73.                 Case 803: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 3")
    
74.                 Case 804: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 4")
    
75.                 Case 805: Set Control = .Controls.Add(xtpControlButton, iCount, "รายการตัวที่ 5")
    
76.             End Select
    
77.             Control.Category = "User Tools"
    
78.         Next
    
79.     End With
    
80.    
    
81.     '/ ประกาศตัวแปร Array ตามจำนวน ToolBar ที่ต้องการสร้างขึ้นมา เพื่อแสดงรูป Icon
    
82.     '/ ในตัวอย่างมี 5 ตัว โดยเริ่มต้นจาก 0 ถึง 4
    
83.     Dim icoIconArray(0 To 4) As Long
    
84.     icoIconArray(0) = ID_USER_TOOLS_1
    
85.     icoIconArray(1) = ID_USER_TOOLS_2
    
86.     icoIconArray(2) = ID_USER_TOOLS_3
    
87.     icoIconArray(3) = ID_USER_TOOLS_4
    
88.     icoIconArray(4) = ID_USER_TOOLS_5
    
89.    
    
90.     '/ ส่งให้กับ CommandBars อีกที เพื่อให้ ToolBar แสดงภาพ Icon ได้
    
91.     CommandBars1.Icons = ImageManager1.Icons
    
92.     '/ ปรับขนาดฟอนต์ให้ ToolBar
    
93.     CommandBars1.Options.Font.Size = 10
    
94.     'CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched
    
95.    
    
96.     '/ ตั้งค่าขนาด Icon ตามที่เราออกแบบเอาไว้ แต่ละตัวจะมีขนาด 32x32 Pixel
    
97.     TabToolBar.SetIconSize 32, 32
    
98.     TabToolBar.ShowTextBelowIcons = True
    
99.     '/ ไม่ให้เกิดการเคลื่อนที่ของ ToolBar ได้
    
100.     TabToolBar.EnableDocking xtpFlagStretched
     
101.     TabToolBar.Closeable = False
     
102.     TabToolBar.Customizable = False
     
103.    
     
104.     ' ======================= ToolTips ==========================
     
105.     Dim ToolTipContext As ToolTipContext
     
106.     Set ToolTipContext = CommandBars1.ToolTipContext
     
107.     ToolTipContext.Style = xtpToolTipOffice2007
     
108.     ToolTipContext.ShowTitleAndDescription True, xtpToolTipIconNone
     
109.     '/ ตั้งค่าตำแหน่งของ ToolTip
     
110.     ToolTipContext.SetMargin 2, 2, 2, 2
     
111.     ToolTipContext.MaxTipWidth = 180
     
112.     ToolTipContext.ShowShadow = True
     
113.     ' ======================= ToolTips ==========================
     
114.    
     
115.     '// การสร้าง StatusBar ที่อยู่ด้านล่างของฟอร์ม
     
116.     Set StatusBar = CommandBars1.StatusBar
     
117.     StatusBar.Visible = True
     
118.     StatusBar.Font.Size = 9
     
119.    
     
120.     StatusBar.AddPane 0
     
121.     '// ค่าคงที่ๆกำหนดไว้ใน Resource.bas และเป็นค่าสงวนที่เปลี่ยนแปลงไม่ได้
     
122.     '// ปุ่ม CAPS LOCK, NUM OAD และ SCROLL LOCK
     
123.     StatusBar.AddPane ID_INDICATOR_CAPS
     
124.     StatusBar.AddPane ID_INDICATOR_NUM
     
125.     StatusBar.AddPane ID_INDICATOR_SCRL
     
126.     StatusBar.IdleText = "Developer : thongkorn@hotmail.com [www.g2gnet.com] - www.facebook.com/g2gnet"
     
127. End Sub
     
128. 
     
129. ' / ---------------------------------------------------------------------------------------
     
130. ' / เหตุการณ์ในการกดคลิ๊กเมาส์เพื่อเลือกToolBars แต่ละตัว
     
131. Private Sub CommandBars1_Execute(ByVal Control As XtremeCommandBars.ICommandBarControl)
     
132. ' / ---------------------------------------------------------------------------------------
     
133.     On Error Resume Next
     
134.     '// โดยเลือกจากค่าคงที่ หรือ ID ที่เราสร้างไว้ใน Resource.bas
     
135.     Select Case Control.Id
     
136.         Case ID_USER_TOOLS_1:
     
137.             MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 1"
     
138.         Case ID_USER_TOOLS_2:
     
139.             MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 2"
     
140.         Case ID_USER_TOOLS_3:
     
141.             MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 3"
     
142.         Case ID_USER_TOOLS_4:
     
143.             MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 4"
     
144.         Case ID_USER_TOOLS_5:
     
145.             MsgBox "คุณเลือกรายการ ToolBar ตัวที่ 5 และกำลังจะจบโปรแกรม"
     
146.             End
     
147.     End Select
     
148. End Sub

คัดลอกไปที่คลิปบอร์ด

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

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

m997

สุดยอดมากเลยครับอาจารย์  อยากเลี้ยงเร้ด นี่ทำไง ครับอยู่ไกลกันมีโอกาสอยากแวะไปหาอาจารย์จัง สักชุด!!