Adding to Ribbon Interface

Once an app is developed, it is best to add it to a ribbon page for convenience. In the figure, we see 3 pages, namely "Home", "Workbook" and "Apps". At the "Apps" page, there are 2 panels, namely "Process Engineering" and "Statistics" and each panel has a number of buttons.

 

Addition of a new page or editing an existing one is done through the manifest.xml file. The main idea is that clicking on a button executes a function which shows an app. Therefore, first of all we need to make a button and then assign a function to the button.

 

The button itself can be either directly added to a panel or become part of a dropdown. A dropdown button, namely "t-test, is shown in the figure. Clicking on a dropdown button shows a menu with entries, where each entry is considered as a button. Therefore, conceptually a dropdown button is a container for buttons.

 

Now that it is understood that it is possible to have many pages, which can have many panels, which can have many buttons, let's see how we can create using manifest.xml file. Currently, the XML file have the following tags (note the conceptual difference between the words, make and add):

  1. RIBBON: The root of the XML.
  2. PAGE: Adds a new page. It has only 1 attribute, namely the TITLE.
  3. BUTTON: Makes a button. It has two attributes, namely, NAME and TITLE. NAME attribute is similar to a variable and all your buttons must have a unique name, whereas TITLE is what is shown as a text on the button. BUTTON can have two child elements:
    1. FUNCTION: Exact name of the function with its location relative to global table.
    2. IMAGE: Exact location of the image relative to the Apps folder. The image must be 32x32 pixels.
  4. DROPBUTTON: Makes a dropdown button. It has two attributes, namely NAME and TITLE, which functions exactly the same way as the BUTTON element. It can have only 1 child element as IMAGE and many child elements as ADD.
    1. IMAGE: Exact location of the image relative to the Apps folder. The image must be 32x32 pixels.
    2. ADD: Name of the button to be added to the DROPBUTTON.
  5. PANEL: Adds a panel to the PAGE. It has only 1 attribute namely TITLE and can have many child elements with the tag ADD, which adds a dropbutton and a button.

 

To be able to add a dropbutton similar to the one shown in the above figure (with only two entries) to the "Apps" page and to the "Statistics" panel, we would use the following XML structure:

<RIBBON>
    <PAGE TITLE="Apps">

    <BUTTON NAME="ttest1sample" TITLE="1 sample t-test">
        <FUNCTION>std.app.TTest1Sample</FUNCTION>
        <IMAGE>images/t_test1sample.png</IMAGE>
    </BUTTON>

    <BUTTON NAME="ttest2sample" TITLE="2 sample t-test">
        <FUNCTION>std.app.TTest2Sample</FUNCTION>
        <IMAGE>images/t_test2sample.png</IMAGE>
    </BUTTON>

    <DROPBUTTON NAME="ttest" TITLE="t-test">
        <IMAGE>images/t_test.png</IMAGE>
        <ADD>ttest1sample</ADD>
        <ADD>ttest2sample</ADD>
    </DROPBUTTON>

    <PANEL TITLE="Statistics">
        <ADD>ttest</ADD>
    </PANEL>

    </PAGE>
</RIBBON>