A 'hello world' CS program

Creating a tab

• 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;

5. namespace DynamicRibbonXAddin

6. {

8.     class MyCustomUI

9.     {

10.         private rxCustomUI _customUI;

12.         public MyCustomUI()

13.         {

14.             // Instantiate a new rxCustomUI in a new context with id 'my_test_cs_ctx'

15.             _customUI = rxCustomUI.create("my_test_cs_ctx", "Test C# Context");

17.             // Cache a reference to the custom UI's ribbon

18.             rxRibbon myRibbon = _customUI.ribbon;

20.             // Create a new tab and label it 'My Tab'

21.             rxTab myTab = new rxTab();

22.             myTab.label = "My First Tab";

24.             // Add the tab to myRibbon's tabs

25.             myRibbon.tabs.add(myTab);

27.             // Render the UI

28.             _customUI.refresh();

29.         }

31.     }

32. }

• Modify class ThisAddin in ThisAddin.cs as follows

1. namespace DynamicRibbonXAddin

2. {

3.     public partial class ThisAddIn

4.     {

5.         private MyCustomUI _myCustomUI;

7.         private void ThisAddIn_Startup(object sender, System.EventArgs e)

8.         {

9.             // Show the custom ribbon

10.             _myCustomUI = new MyCustomUI();

11.         }

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 First Tab' will appear when the application starts

  

Code Analysis

14. // Instantiate a new rxCustomUI in a new context with id 'my_test_cs_ctx'

15. _customUI = rxCustomUI.create("my_test_cs_ctx", "Test C# Context");

rxCustomUI is at the top of the object model hierarchy. Here we instantiate a new rxCustomUI object in a new context with id 'my_text_cs_ctx' and description 'Test C# Context'

17. // Cache a reference to the custom UI's ribbon

18. rxRibbon myRibbon = _customUI.ribbon;

Each rxCustomUI object owns a unique rxRibbon object. Here, we are caching a reference to the rxRibbon object of _customUI

20. // Create a new tab and label it 'My Tab'

21. rxTab myTab = new rxTab();

22. myTab.label = "My First Tab";

Here, we create a new rxTab object and give it a label

24. // Add the tab to myRibbon's tabs

25. myRibbon.tabs.add(myTab);

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

27. // Render the UI

28. _customUI.refresh();

To ensure optimal performance, UI updates always take place in two steps:

1. Update the target rxCustomUI state, which we have done above
2. Render the updated UI, which we are doing here

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 MyCustomUI

4.     {

5.         private rxCustomUI _customUI;

7.         public MyCustomUI()

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");

12.             // Clear existing state in this context

13.             _customUI.clear();

15.             // Add a new tab and label it

16.             _customUI.ribbon.tabs.add(new rxTab

17.             {

18.                 label = "My First Tab"

19.             });

21.             // Render the UI

22.             _customUI.refresh();

23.         }

24.     }

25. }