Creating our first button in VB.NET

From Ribbon Commander Documentation
Jump to: navigation, search

Prerequisites

We recommend you go through A 'hello world' VB.NET program before going into this example.

Creating a button

  • Add a new class to your project and name it MyCustomUI2
  • Add the following code to your class
  1. Imports LogismiX.Interop.DynamicRibbonX
  2. Imports LogismiX.DynamicRibbonX.Core
  3.  
  4. Public Class MyCustomUI2
  5.     Dim _customUI As rxCustomUI
  6.  
  7.     Public Sub New()
  8.         ' Instantiate a new rxCustomUI in context 'my_vb_context'
  9.         _customUI = rxCustomUI.create("my_vb_context", "My VB.NET context!")
  10.  
  11.         With _customUI
  12.             ' Clear old state in the context
  13.             .clear()
  14.  
  15.             ' Add a new tab and label it 
  16.             With .ribbon.tabs.add(New rxTab())
  17.                 .label = "My VB Tab"
  18.  
  19.                 ' Add a new group and label it
  20.                 With .groups.add(New rxGroup())
  21.                     .label = "My VB Group"
  22.  
  23.                     'Add a new button an label it
  24.                     With .buttons.add(New rxButton())
  25.                         .label = "My VB Button"
  26.                     End With
  27.  
  28.                 End With
  29.             End With
  30.  
  31.             ' Render the UI
  32.             .refresh()
  33.         End With
  34.     End Sub
  35.  
  36. End Class
  • Modify class ThisAddin in ThisAddin.vb as follows
  1. Public Class ThisAddIn
  2.  
  3.     Private _myCustomUI As MyCustomUI2
  4.  
  5.     Private Sub ThisAddIn_Startup() Handles Me.Startup
  6.         _myCustomUI = New MyCustomUI2()
  7.     End Sub
  8.  
  9.     Private Sub ThisAddIn_Shutdown() Handles Me.Shutdown
  10.  
  11.     End Sub
  12.  
  13. End Class
  • Run the add-in. If everything went according to plan a new tab labeled 'My VB Tab' will appear when the application starts and it will contain a button labeled 'My VB Button' in a group labeled 'My VB Group'
    MyFirstVBButton.png

Code Analysis I

  1. ' Add a new group and label it
  2. With .groups.add(New rxGroup())
  3.     .label = "My VB Group"

Each rxTab object has a collection of rxGroup objects (accessible through its groups property). Here we add a new group to our tab's groups and label it 'My VB Group'


  1. 'Add a new button an label it
  2. With .buttons.add(New rxButton())
  3.     .label = "My VB Button"

Each rxGroup object has a collection of rxButton objects (accessible through its buttons property). Here we add a new button to our group and label it 'My VB Button'

Subscribing to the button's events

At the moment the new button isn't of much use as it does nothing when clicked. In this section we will subscribe to the button's onAction event and display a message box when clicked.

  • Update the class as follows.
  1. Public Class MyCustomUI2
  2.     Private _customUI As rxCustomUI
  3.     Private WithEvents _myButton As rxButton
  4.  
  5.     Public Sub New()
  6.         ' Instantiate a new rxCustomUI in context 'my_vb_context'
  7.         _customUI = rxCustomUI.create("my_vb_context", "My VB.NET context!")
  8.  
  9.         With _customUI
  10.             ' Clear old state in the context
  11.             .clear()
  12.  
  13.             ' Add a new tab and label it 
  14.             With .ribbon.tabs.add(New rxTab())
  15.                 .label = "My VB Tab"
  16.  
  17.                 ' Add a new group and label it
  18.                 With .groups.add(New rxGroup())
  19.                     .label = "My VB Group"
  20.  
  21.                     'Add a new button an label it
  22.                     _myButton = .buttons.add(New rxButton)
  23.                     With _myButton
  24.                         .label = "My VB Button"
  25.                     End With
  26.                 End With
  27.             End With
  28.  
  29.             ' Render the UI
  30.             .refresh()
  31.         End With
  32.  
  33.     End Sub
  34.  
  35. End Class
  • Notice that we declare _myButton WithEvents in order to subscribe to its events
  • We use the standard means in VB.NET to insert event stubs:
    InsertingDelegateStubVB.png
  • The class now becomes (notice that we changed the event stub to display a message box)
  1. Public Class MyCustomUI2
  2.     Private _customUI As rxCustomUI
  3.     Private WithEvents _myButton As rxButton
  4.  
  5.     Public Sub New()
  6.         ' Instantiate a new rxCustomUI in context 'my_vb_context'
  7.         _customUI = rxCustomUI.create("my_vb_context", "My VB.NET context!")
  8.  
  9.         With _customUI
  10.             ' Clear old state in the context
  11.             .clear()
  12.  
  13.             ' Add a new tab and label it 
  14.             With .ribbon.tabs.add(New rxTab())
  15.                 .label = "My VB Tab"
  16.  
  17.                 ' Add a new group and label it
  18.                 With .groups.add(New rxGroup())
  19.                     .label = "My VB Group"
  20.  
  21.                     'Add a new button an label it
  22.                     _myButton = .buttons.add(New rxButton)
  23.                     With _myButton
  24.                         .label = "My VB Button"
  25.                     End With
  26.                 End With
  27.             End With
  28.  
  29.             ' Render the UI
  30.             .refresh()
  31.         End With
  32.  
  33.     End Sub
  34.  
  35.     ' The event stub
  36.     Private Sub _myButton_OnActionEvent(control As LogismiX.Interop.DynamicRibbonX.IRibbonControl) Handles _myButton.OnActionEvent
  37.         MessageBox.Show("Hello from VB.NET!")
  38.     End Sub
  39. End Class
  • Run the add-in. If everything went according to plan the button will now display the following message when clicked:
    FirstButtonVBMsgBox.png

Remarks