หากมีคำถาม ขอให้ไปโพสต์ลง เว็บบอร์ดจีทูจีเน็ตดอตคอม ตัวใหม่แทนน่ะครับ

หรือติดต่อเข้ามาทาง Inbox ที่ เฟซบุ๊ค ผมครับ

หน้าหลัก
ข่าวสาร - บทความ ทั้งหมด
VB 6/VB.Net
ASP/ASP.Net
จับฉ่ายคอมพิวเตอร์
เรียนรู้ผ่าน Flash Movie
บทความที่มีผู้ตอบล่าสุด  
 RSS Feeds
 ดาวน์โหลดโปรแกรม RSS Reader ได้ที่นี่ ...   Download โปรแกรม RSS Reader

Forum - www.g2gnet.com
Webmaster - www.g2gnet.com
Visitors - Session views
 4 7 6 3 5 9 1

7 ธันวาคม พ.ศ.2549
51 Users On-Line.
Visitors - Page views
 7 9 8 8 2 6 1
1 กุมภาพันธ์ พ.ศ.2551

Google   
เว็บ g2gnet.com
ขนาดตัวอักษร:  

การทำ ToolBar ด้วย Codejock Xtreme Suite Pro ActiveX

Category »  VB 6/VB.Net
โดย : Webmaster เมื่อ 2/12/2553   เวลา: 15:32
(อ่าน : 20160) 
อารัมภบทเล็กน้อยเกี่ยวกับ CodeJock ActiveX
CodeJock Web Siteมาตามคำเรียกร้องของพี่น้อง ที่อยากให้คนหน้าด้าน หน้ามึน (แบบผม) มาช่วยถ่ายทอดความรู้ ที่ไม่ค่อยมี Developer คนไหนเขาอยากจะปล่อยกันออกมานักหรอก คงเพราะกลัวบอกคนอื่นไปแล้ว ตัวเองจะเป็นโรคสมองเสื่อมกันมั้ง 55555+ ... ว่ากันถึงการใช้งาน CodeJock ActiveX ตัวนี้ ค่อนข้างที่จะใช้งานยากเอามากๆ หากลำพังแค่จับลากมาวางมันก็จะยังไม่ Work เพราะจะต้องเขียนโค้ด (ขั้นสูงอีก) เป็นหลัก นอกเหนือไปจากนี้ยังจะต้องมีความรู้ในเรื่องของ Graphic เข้ามาช่วยด้วยอีก (คงหาศึกษาเพิ่มเติมกันเองได้น่ะครับ) ... แต่ก็นั่นแหละ มันมีข้อดี คือ ทำลายขีดจำกัดในเรื่องไฟล์ประเภท GIF หรือ ICO ที่ใช้งานกับ Visual Studio 98 มาอย่างยาวนาน ลงได้อย่างราบคาบ ทำให้ GUI มีสีสันที่สวยงาม น่าใช้งานมากขึ้น ... บทความนี้จะเป็นการทำ ToolBar โดยใช้โค้ดคำสั่งที่ไม่ได้มากมายนักเลย จะได้เข้าใจกันได้ง่ายๆหน่อย และจะใช้ภาพ PNG (Portable Network Graphic) มาใช้งาน เพราะภาพ PNG สามารถบีบอัดภาพลง โดยที่คุณภาพของภาพไม่ได้ด้อยลงไป (มากนัก) ซึ่งจะดีกว่า GIF หรือ ICO มากมายก่ายกอง ... How To and Do It ... Now
ดาวน์โหลด !!!
Codejock Xtreme Suite Pro ActiveX (ต้องติดตั้งก่อนด้วยน่ะครับ)

 ดาวน์โหลด Source Code การทำ ToolBar ด้วย CodeJock ActiveX
ดาวน์โหลด Source Code การทำ CommandBars Designer ด้วย CodeJock ActiveX

 ดาวน์โหลด Source Code การทำ SkinFrameWork ด้วย CodeJock ActiveX
ข้อมูลเพิ่มเติม
รายละเอียดการทำ Skin ด้วย Codejock Xtreme Suite Pro ActiveX
การทำ Menu ด้วย Codejock Xtreme Suite Pro ActiveX - ภาค 1
การทำ Menu ด้วย Codejock Xtreme Suite Pro ActiveX - ภาค 2
การทำ Menu ด้วย Codejock Xtreme Suite Pro ActiveX - ภาค 3

การออกแบบ - Design Time ... เลือก Component ต่างๆตามที่เห็นในภาพมาด้วยล่ะครับ (หากทำเอง)


คำอธิบายสำหรับโฟลเดอร์ต่างๆของโปรเจค


ภาพต้นฉบับ (PSD) ที่ต้องนำมาใช้ทำเป็น ToolBar จะมีทั้งหมด 5 ภาพ ก็ 5 รายการ นั่นแหละครับ

การแก้ปัญหาในกรณีของไอคอนที่เมนูบาร์หายไป ...

พอเวลาสั่งรัน ไอคอนที่เมนูบาร์มันหายไป ... ซึ่งผมคิดว่ามันคงมีปัญหาระหว่าง CommandBars กับ ImageManager น่ะครับ ... เรามีทางแก้ไขครับพี่น้อง


โหลดไฟล์ xcb ... Xtreme Command Bars ที่เราทำเอาไว้เข้ามา
ต่อไปให้เลือก Edit เพื่อเข้าไปที่ Command Bars Designer ก่อน
หากไม่เข้าใจให้ไปดู การทำ Menu ด้วย Codejock Xtreme Suite Pro ActiveX - ภาค 3 ก่อนน่ะครับ


พอเราเปิด Command Bars Designer มันก็มีไอคอนปรากฏที่เมนูบาร์อยู่นี่นา แต่ไม่ทำงาน เหอๆๆๆๆ
ไปเลือก CommandBars --> Resource Symbols ...


สังเกตว่าเราจะต้องใช้ค่าคงที่ 1022, 1023 และ 1024 ในการคลิ๊กเลือกรายการในเมนูบาร์มาใช้งาน
ให้ Export และ ทำการ Save ไฟล์ออกไปเป็นนามสกุล BAS (หรือ Module นั่นแหละครับ)
เวลาคุณทำเอง อาจจะได้ค่าตัวเลขคงที่ไม่ตรงกันกับผมน่ะครับ แต่ขอให้ยึดจากเมนูจริงๆที่เราต้องใช้งานเท่านั้นเป็นพอ


ตามค่า Default เลยครับ ... บันทึกไฟล์เป็น Resource.bas
ซึ่งไฟล์ตัวนี้เราจะ Add Module เข้ามาใช้งานในโปรเจค หรือ Copy เฉพาะค่าคงที่เอามาใส่ไว้ใน modDefinitions.bas ก็ได้ (เลือกเอา)

ค่าคงที่ที่ได้จากไฟล์ Resource.bas
Public Const ID_FILE_MAIN = 1020
Public Const ID_FILE_MENU1 = 1022
Public Const ID_FILE_MENU2 = 1023
Public Const ID_PROGRAM_MAIN = 1021
Public Const ID_PROGRAM_MENU3 = 1024


คราวนี้มาที่ ImageManager คลิ๊กเมาส์ขวา เลือก Properties ... ได้เลย


คลิ๊กเมาส์ซ้ายที่ปุ่มเพิ่มใหม่


ใช้ค่าคงที่ๆเราเห็นจาก Resource Symbols นั่นแหละครับ คือ 1022, 1023 และ 1024


คลิ๊กเมาส์ซ้าย เลือกตัวแรกเข้ามาก่อน คือ 1022 เลือก Import and Export --> Import From Bitmap


เลือกไฟล์กราฟิคที่ต้องการ มีนามสกุล PNG ซึ่งจะมีคุณภาพของภาพที่ดีกว่า ICO หรือ GIF


ทำตามลำดับดับหมายเลขเลยครับ เพราะเราต้องคลิ๊กเลือกภาพเข้ามาก่อน ถึงจะเลือกค่าคงที่ๆต้องการได้


ผลลัพธ์ที่ได้ออกมา ... ต่อไปก็ทำซ้ำเหมือนเดิมจนกว่าจะครบทุกตัว


ที่เห็นรายการตัวที่ 1 ถึง รายการตัวที่ 5 นั่นแหละ เราเรียกว่า ToolBar ครับ

โดยเราต้องประกาศตัวแปรแบบคงที่เอาเองก่อนใน modDefinitions.bas ดังนี้ คือ
Option Explicit

' การประกาศตัวแปรแบบคงที่เพื่อทำ ToolBar 5 ตัว
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

' ค่าเลขจำนวนเต็มพวกนี้เป็นค่าที่สงวนไว้ ห้ามนำไปใช้ในงานอื่นๆ
Public Const ID_INDICATOR_CAPS = 59137
Public Const ID_INDICATOR_NUM = 59138
Public Const ID_INDICATOR_SCRL = 59139

มาดูโค้ดกันเถอะ ...

Option Explicit

Private Declare Function InitCommonControls Lib "Comctl32.dll" () As Long

' การสร้าง TabToolBar
Public WithEvents TabToolBar As XtremeCommandBars.TabToolBar
' หรือ แบบไม่ต้องเอามาเต็มยศฐาบรรดาศักดิ์ ... 55555+
'Public WithEvents TabToolBar As TabToolBar

' การสร้าง StatusBar
Dim WithEvents StatusBar As XtremeCommandBars.StatusBar

' ###############################################
' เหตุการณ์ในการคลิ๊กเลือก ToolBar หรือ MenuBar เพื่อสั่งให้ไปทำงานอย่างอื่น
' ###############################################
Private Sub CommandBars_Execute(ByVal Control As XtremeCommandBars.ICommandBarControl)
    On Error Resume Next
    
    Select Case Control.Id
        ' กลุ่มนี้ คือ TabToolBar ค่าคงที่ถูกกำหนดไว้ในไฟล์ modDefinitions.bas
        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
            
        ' กรณีของ MenuBar ก็เช่นเดียวกัน เรานำค่าคงที่จาก Resource.bas มาใช้งานได้เลย
        Case ID_FILE_MENU1:
            MsgBox "คุณเลือกรายการ MenuBar ตัวที่ 1"
        Case ID_FILE_MENU2:
            MsgBox "คุณเลือกรายการ MenuBar ตัวที่ 2"
        Case ID_PROGRAM_MENU3:
            MsgBox "คุณเลือกรายการ MenuBar ตัวที่ 3"
    End Select
    
End Sub

Private Sub MDIForm_Activate()
    frmMain.Caption = "ตัวอย่างการทำ ToolBar ด้วย Xtreame SuitePro ActiveX - www.g2gnet.com"
    StatusBar(0).Text = "ผู้พัฒนาโปรแกรม : นายสุรพล ยอดสง่า [email protected] [www.g2gnet.com]"
End Sub

Private Sub MDIForm_Initialize()
    InitCommonControls
End Sub

Private Sub MDIForm_Load()

    ' หากเปิดโปรแกรมนี้ซ้ำกัน จะไม่ให้ตัวใหม่ขึ้นมาทำงาน
    If App.PrevInstance Then End
    
    ' การตั้งค่าคุณสมบัติ เพื่อใช้ประโยชน์ในส่วนของพารามิเตอร์ภายในของ App
    ' เช่น App.Title, App.Path โดยใช้งานผ่าน CommandBars Control
    CommandBarsGlobalSettings.App = App
    ' CommandBarsGlobalSettings มี Properties ให้ใช้งานได้หลากหลายมากครับ เช่น ทำโปรแกรมหลายภาษา
    ' ตัวอย่าง ...  CommandBarsGlobalSettings.ResourceFile = "XTPResourceArSa.dll"
     
    ' ตัวแปร Control ในการสร้างกลุ่มของ ToolBar
    Dim Control As CommandBarControl
    
    Me.Move (Screen.Width - Width) \ 2, (Screen.Height - Height) \ 2

    ' โหลดตัว Designer เข้าสู่ CommandBars ... ก็การสร้างเมนูนั่นแหละครับ
    CommandBars.LoadDesignerBars
    
    ' ไม่ต้องการให้เมนูเคลื่อนที่ได้ (Stretched)
    CommandBars.ActiveMenuBar.EnableDocking xtpFlagStretched
    CommandBars.Options.KeyboardCuesShow = xtpKeyboardCuesShowWindowsDefault
    CommandBars.EnableCustomization False
    
    ' แสดง Theme ... เลือกเอามาใช้เลยครับ
    'SkinFramework.LoadSkin App.Path + "\Styles\Office2007.cjstyles", "NORMALBLUE.ini"
    'SkinFramework.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\Office2007.cjstyles", "NORMALBLUE.ini"
    SkinFramework.ApplyWindow (Me.hWnd)
    SkinFramework.ApplyOptions = SkinFramework.ApplyOptions Or xtpSkinApplyMetrics
    CommandBars.PaintManager.RefreshMetrics
    CommandBars.RecalcLayout

    ' เพิ่มรายการ ToolBar
    Set TabToolBar = CommandBars.AddTabToolBar("UserTools")
    ' ไม่อนุญาตให้เพิ่ม/ลบ (Add or Remove Buttons) ที่มันจะอยู่ทางด้านขวามือสุดของ ToolBar
    TabToolBar.ShowExpandButton = False
    
    ' กำหนดความกว้างขั้นต่ำสุดของ ToolBar แต่ละตัว (หน่วยวัด Pixels)
    TabToolBar.MinimumWidth = 400
    
    ' เริ่มต้นการเพิ่มปุ่ม Control เข้ามายัง ToolBar
    With TabToolBar
        
        Dim iCount As Integer
        
        ' สร้างรายการ ToolBar ขึ้นมา โดยใช้ชื่อกลุ่ม "User Tools" มีทั้งหมด 5 ตัว
        ' ค่าคงที่ ID_USER_TOOLS แต่ละตัว เราไปกำหนดล่วงหน้าเอาเองที่ modDefinitions.bas
        For iCount = ID_USER_TOOLS_1 To ID_USER_TOOLS_5
            Select Case iCount
                Case 801: Set Control = .Control.Add(xtpControlButton, iCount, "รายการตัวที่ 1")
                Case 802: Set Control = .Control.Add(xtpControlButton, iCount, "รายการตัวที่ 2")
                Case 803: Set Control = .Control.Add(xtpControlButton, iCount, "รายการตัวที่ 3")
                Case 804: Set Control = .Control.Add(xtpControlButton, iCount, "รายการตัวที่ 4")
                Case 805: Set Control = .Control.Add(xtpControlButton, iCount, "รายการตัวที่ 5")
            End Select
        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
    
    ' โหลดภาพ PNG เข้ามาให้กับ ImageManager
    ImageManager.Icons.LoadBitmap App.Path & "\Icon\images.png", icoIconArray, xtpImageNormal
    
    ' ส่งให้กับ CommandBars อีกที เพื่อให้ ToolBar แสดงภาพ Icon ได้
    CommandBars.Icons = ImageManager.Icons
    
    ' ตั้งค่าขนาด 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 = CommandBars.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 = CommandBars.StatusBar
    StatusBar.Visible = True
    
    StatusBar.AddPane 0
    ' ค่าคงที่ๆกำหนดไว้ใน modDefinitions.bas และเป็นค่าสงวนที่เปลี่ยนแปลงไม่ได้
    StatusBar.AddPane ID_INDICATOR_CAPS
    StatusBar.AddPane ID_INDICATOR_NUM
    StatusBar.AddPane ID_INDICATOR_SCRL
    StatusBar.IdleText = "ผู้พัฒนาโปรแกรม : นายสุรพล ยอดสง่า [email protected] [www.g2gnet.com]"

End Sub
Conclusion:
โค้ดของการสร้าง ToolBar ตัวนี้ อยู่ที่ตัวอย่าง TabbedToolBar ใน Sample ของ CodeJock นั่นแหละครับ แต่ต้นฉบับเขาทำมามากล้นจนเกินไป ทำให้ผมล่ะเป็นงงอยู่ตั้งนานสองนาน กว่าจะหาช่องทางออกมาได้ โค้ดนี้ได้ถูกใช้งานจริงในโปรแกรมรหัสไปรษณีย์ทั่วไทย (G2GNet PostCode Thailand) และ โปรแกรมสำเร็จรูปที่ผมขายด้วย ... เพื่อยืนยันว่าผมมันหน้าด้าน หน้ามึน หน้าทน หน้าไม่อาย เพียงใด ที่เอาโค้ดใช้งานจริงๆมาแจกกันฟรีๆ ... 55555+ ... ทำไปได้น่ะทองก้อน


รอบหน้า ... จะทำให้เห็นว่า ToolBar มันมีเมนูย่อยได้อย่างไร ... โอ้ลัลล้า


จี ทู จี เน็ต ดอต คอม - g2gNet Dot Com
เลขทะเบียนพาณิชย์อิเล็กทรอนิกส์ 0407314800231
CopyLeft © 2004 - 2099 g2gNet.Com All rights reserved.
Email: [email protected] หรือ โทร. 08-6862-6560