Orbeon Search

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity
How-to guides‎ > ‎XForms View‎ > ‎

Create contextual menus

Contents

  1. 1 The problem
  2. 2 The solution
  3. 3 Run it and get the source

The problem

You want to create a contextual menu, which shows either:
  • When users click on a link.
  • When the position the mouse over a certain area.
You also want to be able to react to users selecting an entry from the menu, either by:
  • Setting the value of a node in an instance.
  • Running an action.
Using a dialog Using a menu 

The solution

There are two ways of creating contextual menus:
  1. Using a dialog
  2. Using a menu


ResultStepsBenefitsDrawbacks
Using a dialog

  1. Define an xxforms:dialog.
  2. Use the attribute appearance="minimal" so the dialog doesn't get a title bar.
  3. With xxforms:show, show the dialog when users click on the link and specify the id of the trigger in the neighbor attribute, so the dialog is positioned next to the trigger.
  4. In the dialog, when users make a selection, either store a value in an instance or run the desired actions.
You can fully control the content of the dialog. In this example the dialog contains only links, but it could contain a more sophisticated UI.If you just want a simple list, using a dialog makes your code more complicated. Also it requires one more click, as they need to click on the link to show the dialog.
Using a menu

  1. Use xforms:select1 as if you wanted to create a drop-down, with the list of items specified with an xforms:itemset.
  2. Use appearance="xxforms:menu" on the xforms:select1 to have the control rendered as a menu. 
The appearance="xxforms:menu" is designed to create menus similar to those you have in desktop applications. Those in general have multiple top-level items (File, Edit, View...). In this case, you want to have just one top-level item; in this example: "Select state". Your itemset needs to contain that top-level item, and it needs to be defined in node that is parent of the node corresponding to the other items, as in:

<xforms:instance id="state-itemset">
    <states 
     label="Select state"
     value="">
        <state value="ca"
         label="California"/>
        <state value="md"
         label="Maryland"/>
        <state value="va"
         label="Virginia"/>
    </states>
</xforms:instance>

Your code is simple, the interface has a "modern" look, and is efficient as users only need one click to make a selection.With a menu, the content of the menu is a list and can't be as sophisticated as what you can do with a dialog.


Run it and get the source