Displaying a Menu

In this Lesson

You will see the sample menus provided by Soiree which serve as a pattern for displaying menus in your solution.

Concepts

Soiree makes it easy to embed menus into your solution

  1. Menu Manager
    Soiree provides a menu manager which performs the heavy lifting needed to embed menus into your solution.
  2. Sample Menu Scene
    Soiree provides a sample scene which demonstrates the use of the menu services. These can be used as a pattern to create the menus for your solution.

The lessons following this one will go into more detail about the menu manager and how you can embed menus into your solution in multiple ways.

In this lesson let’s begin by showing you how the sample menus operate.

Add the Sample Menus to the Party Pool

In this exercise you will add the sample menus to the Party Pool solution. We will use the samples as they are delivered instead of attempting to copy and customize them. We leave that as an exercise for the reader (the steps would be similar to those used to copy the sign on scene and agent).

The samples are delivered by the Soiree project configurator. If you have not already installed them from a previous lesson please do that now

The samples get installed in the com.seronix.soiree.navigation package



  1. Add the sample menu scene to the PartyPool solution
    1. Open the PartyPool solution
    2. Expand the Solution Scene Names section
    3. Add the SampleMenu scene to the list of allowed scenes for the solution



  2. Make the SampleMenu the solution’s home scene



  3. Create a Primary Menu that looks like this. (refer to the Creating a Menu lesson if needed)



  4. Save the solution

Granting Access to the Menu Scene

If we want all users to have access to the menu the simplest way would be use a public group for the solution.

  1. Open the PublicGroup which was created in a previous lesson (create the group if you do not already have it in your workspace)



  2. Ensure full access is disabled and then grant access to the SampleMenu scene



  3. Save the group
  4. Open the PartySolution and configure the solution’s public access group as shown here



  5. Save the solution

Use the Sample Menu

  1. Start the PartyPool solution and sign on as with the editor account for tenant 0. (password = editor)



  2. You will see the flat menu sample. We call it flat because it only shows one sub-menu at a time instead of the entire menu hierarchy.



  3. Selecting a sub-menu will traverse down the menu hierarchy and display the selected sub-menu



  4. Notice the flat menu is showing only one scene in the Party Scenes menu – and yet the menu definition has a second scene. The editor user’s security profile does not provide access to the Party Splash scene so it has been removed from the user’s menu.



  5. Grant the Party Splash scene to the editor user.
    1. Start the server console and sign on as admin for tenant 0 (password = admin)



    2. Select the User Provisioning scene and then find the user named Editor Doe. Notice they belong to only one group – the Edit Party group.



    3. We have two choices

      1. Add the Party Splash to the Edit Party group
      2. Create a new group that contains Party Splash and assign it to the user.
      3. We will use option 1

    4. Return to the server console menu and select Manage Security Groups



    5. Find the Edit Party group and select the Edit Scenes link



    6. Add the PartySplash scene to the group and press OK



  6. In the Party Pool client – Navigate back up to the root menu



  7. Now when you select the Party Scenes sub-menu you will see the Party Splash scene



Moving between menu and scene

We will now show what happens when you move from a menu to a scene and back to the menu.

First we must prepare one of the scenes so that it can be closed.

  1. Open the PartySplash scene definition and add a button that will close the scene



  2. Configure the button to close the scene’s layers



  3. Save the scene

Now let’s test the navigation

  1. Select the Party Splash scene from the menu



  2. Now close the Party Splash scene



  3. When a scene running in the center session closes and the solution has a home scene the home scene will be restarted. When the menu scene is restarted it remembers the last selected sub-menu and displays it.



    Notice
    Soiree menu services keep track of the ‘current’ menu (Primary Menu), and sub-menu (Party Scenes).

Customizing the Root

Root is the default name of the top node in the menu structure and not something we want to display to the user.



Let’s change the word from ‘root’ to Party Pool’

  1. Open the PartyPool solution
  2. Double click on the root node in the Primary Menu and change its name as shown here



  3. Save the solution and allow the server to restart
  4. Select the Party Scenes menu in the Soiree client



  5. Now navigate back up to the parent menu



    The top level menu name is now more appropriate



You could also remove the ‘parent’ menu name from the scene entirely by changing the scene design.

The Tree Menu

The second presentation style in the sample menu is an expandable tree.

  1. Select the Party Scenes menu in the Soiree client



  2. Select the Tree Menu button on the Flat menu



  3. You will be transitioned to a tree view of the menu



    Notice
    Soiree’s menu manager keeps track of the menu that was last selected and reflects it in the menu presentation.
  4. Selecting the Party Splash item will open the scene



  5. Close the scene



    You will be returned to the flat menu presentation because the sample scene was not designed to keep track of which type of presentation has been selected. It always opens the flat presentation when the scene is started.



  6. Tip
    The menu scene could keep track of the selected presentation style by using session storage. See Sharing Information Among Agents for more information.

Hiding the Tree Root

The tree element used to display the menu has an option which allows you to hide the root of the tree.

  1. Open the SampleMenu scene



  2. Right click the tree element in layer 2



  3. Change the tree’s property which controls root node visibility



  4. Save the scene and allow the server to restart
  5. Now the tree menu looks like this



That concludes this lesson.