Difference between revisions of "Creating our first button in CS"

From Ribbon Commander Documentation
Jump to: navigation, search
(→‎Creating a button)
(→‎Code Analysis)
Line 72: Line 72:
  
 
== Code Analysis ==
 
== Code Analysis ==
−
<syntaxhighlight lang="csharp" line start="14">
+
<syntaxhighlight lang="csharp" line start="22">
−
// Instantiate a new rxCustomUI in a new context with id 'my_test_cs_ctx'
+
// Add a new group to the tab and label it
−
_customUI = rxCustomUI.create("my_test_cs_ctx", "Test C# Context");
+
rxGroup myGroup = myTab.groups.add(new rxGroup());
 +
myGroup.label = "My C# Group";
 
</syntaxhighlight>
 
</syntaxhighlight>
−
[[rxCustomUI]] is at the top of the object model hierarchy. Here we [[Method create|instantiate]] a new [[rxCustomUI]] object in a new context with id 'my_text_cs_ctx' with description 'Test C# Context'
+
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 C# Group'
−
 
+
  
 
<syntaxhighlight lang="csharp" line start="17">
 
<syntaxhighlight lang="csharp" line start="17">
−
// Cache a reference to the custom UI's ribbon
 
−
rxRibbon myRibbon = _customUI.ribbon;
 
 
</syntaxhighlight>
 
</syntaxhighlight>
−
Each [[rxCustomUI]] object owns a  unique [[rxRibbon]] object. Here, we are caching a reference to the [[rxRibbon]] object of _customUI
 
−
 
−
 
−
<syntaxhighlight lang="csharp" line start="20">
 
−
// Create a new tab and label it 'My Tab'
 
−
rxTab myTab = new rxTab();
 
−
myTab.label = "My First Tab";
 
−
</syntaxhighlight>
 
−
Here, we create a new [[rxTab]] object and give it a label
 
−
 
−
 
−
<syntaxhighlight lang="csharp" line start="24">
 
−
// Add the tab to myRibbon's tabs
 
−
myRibbon.tabs.add(myTab);
 
−
</syntaxhighlight>
 
−
Each [[rxRibbon]] object has a {{collection}} of [[rxTab]] objects (accessible through its ''tabs'' property). Here we add the tab we created above to our ribbon's tabs
 
−
 
−
<syntaxhighlight lang="csharp" line start="27">
 
−
// Render the UI
 
−
_customUI.refresh();
 
−
</syntaxhighlight>
 
−
To ensure optimal performance, UI updates always take place in two steps:
 
−
# Update the target [[rxCustomUI]] state, which we have done above
 
−
# Render the updated UI, which we are doing here
 
−
 
  
 
== Remarks ==
 
== Remarks ==

Revision as of 13:15, 15 March 2013


Prerequisites

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


Creating a button

  • Add a new class to your project and name it MyCustomUI.
  • Add the following code to your class
  1. // Namespaces of the two Dynamic RibbonX assemblies 
  2. using LogismiX.Interop.DynamicRibbonX;
  3. using LogismiX.DynamicRibbonX.Core;
  4.  
  5. namespace DynamicRibbonXAddin
  6. {
  7.     class MyCustomUI2
  8.     {
  9.         private rxCustomUI _customUI;
  10.  
  11.         public MyCustomUI2()
  12.         {
  13.             // Instantiate a new rxCustomUI in a new context with id 'my_test_cs_ctx'
  14.             _customUI = rxCustomUI.create("my_test_cs_ctx", "Test C# Context");
  15.  
  16.             _customUI.clear();
  17.  
  18.             // Add a new tab and label it
  19.             rxTab myTab = _customUI.ribbon.tabs.add(new rxTab());
  20.             myTab.label = "My C# Tab";
  21.  
  22.             // Add a new group to the tab and label it
  23.             rxGroup myGroup = myTab.groups.add(new rxGroup());
  24.             myGroup.label = "My C# Group";
  25.  
  26.             // Add a new button to the group and label it
  27.             rxButton myButton = myGroup.buttons.add(new rxButton());
  28.             myButton.label = "Click Me!";
  29.  
  30.             // Render the UI
  31.             _customUI.refresh();
  32.  
  33.         }
  34.     }
  35. }
  • Modify class ThisAddin in ThisAddin.cs as follows
  1. namespace DynamicRibbonXAddin
  2. {
  3.     public partial class ThisAddIn
  4.     {
  5.         private MyCustomUI2 _myCustomUI;
  6.  
  7.         private void ThisAddIn_Startup(object sender, System.EventArgs e)
  8.         {
  9.             // Show the custom ribbon
  10.             _myCustomUI2 = new MyCustomUI();
  11.         }
  12.  
  13.         private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
  14.         {
  15.         }
  16.     }
  17. }
  • Run the add-in. If everything went according to plan a new tab labeled 'My C# Tab' will appear when the application starts and it will contain a button labeled 'Click Me!' in a group labeled 'My C# Group':
    CSFirstButton.png

Code Analysis

  1. // Add a new group to the tab and label it
  2. rxGroup myGroup = myTab.groups.add(new rxGroup());
  3. myGroup.label = "My C# 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 C# Group' 

  1.  

Remarks

  • rxCustomUI contexts are identified by their unique context ids (e.g. 'my_test_cs_ctx' above). When an rxCustomUI is created with a contextId that doesn't correspond to an existing context, the context gets created. Otherwise the rxCustomUI joins the context and shares its state with other rxCustomUIs in it.
  • You can use rxCustomUI.clear to clear a context's state


Making our code more compact

The Dynamic RibbonX API is composable, which we can take advantage to make our code more compact: 

  1. namespace DynamicRibbonXAddin
  2. {
  3.     class MyCustomUI2
  4.     {
  5.         private rxCustomUI _customUI;
  6.  
  7.         public MyCustomUI2()
  8.         {
  9.             // Instantiate a new rxCustomUI in a new context with id 'my_test_cs_ctx'
  10.             _customUI = rxCustomUI.create("my_test_cs_ctx", "Test C# Context");
  11.  
  12.             // Add a new tab and label it
  13.             _customUI.ribbon.tabs.add(new rxTab
  14.             {
  15.                 label = "My First Tab"
  16.             });
  17.  
  18.             // Render the UI
  19.             _customUI.refresh();
  20.         }
  21.     }
  22. }
Retrieved from ‘https://documentation.ribboncommander.com/index.php?title=Creating_our_first_button_in_CS&oldid=2117’