Difference between revisions of "Creating our first button in VB.NET"

From Ribbon Commander Documentation
Jump to: navigation, search
(Subscribing to the button's events)
Line 84: Line 84:
 
* Update the class as follows.
 
* Update the class as follows.
 
<syntaxhighlight lang="vb" line>
 
<syntaxhighlight lang="vb" line>
 +
Public Class MyCustomUI2
 +
    Private _customUI As rxCustomUI
 +
    Private WithEvents _myButton As rxButton
 +
 +
    Public Sub New()
 +
        ' Instantiate a new rxCustomUI in context 'my_vb_context'
 +
        _customUI = rxCustomUI.create("my_vb_context", "My VB.NET context!")
 +
 +
        With _customUI
 +
            ' Clear old state in the context
 +
            .clear()
 +
 +
            ' Add a new tab and label it
 +
            With .ribbon.tabs.add(New rxTab())
 +
                .label = "My VB Tab"
 +
 +
                ' Add a new group and label it
 +
                With .groups.add(New rxGroup())
 +
                    .label = "My VB Group"
 +
 +
                    'Add a new button an label it
 +
                    _myButton = .buttons.add(New rxButton)
 +
                    With _myButton
 +
                        .label = "My VB Button"
 +
                    End With
 +
                End With
 +
            End With
 +
 +
            ' Render the UI
 +
            .refresh()
 +
        End With
 +
 +
    End Sub
 +
 +
End Class
 
</syntaxhighlight>
 
</syntaxhighlight>
 
* Notice that we need to make the button a member of our class in order to subscribe to its events
 
* Notice that we need to make the button a member of our class in order to subscribe to its events

Revision as of 18:27, 15 March 2013

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 need to make the button a member of our class in order to subscribe to its events
  • The .NET framework makes it easy to insert event stubs:
    1. type _myButton.OnActionEvent +=
    2. intellisense picks up and prompts you to press tab to insert the stub:
      InsertingEventStubCS.png
    3. Press tab twice to insert the delegate stub and change it to display the message box as above
  • If everything went according to plan the button will now display the following message when clicked:
    FristButtonCSMsgBox.png