Help With A Popup Menu Control

, ,
1

Can any one give me a detailed explanation or point me to a tutorial on how to setup/configure the Popup Menu Control?

I have read the documentation for Popup Menu Control in the “CAF Development Help” documentation but it doesn’t explain on how to set one up so it works.

Thanks.

2

Are you using this inside a portlet? If so, then I think the “Panel > Popup Panel” would be a better fit.

The “Popup Menu Control” wasn’t intended to be used inside of a portlet.

For example, copy + paste this fragment into your page for a context menu with the caf-popup-* CSS styling on the popup menu items:

<control component-type='javax.faces.HtmlPanelGroup' renderer-type='com.webmethods.caf.faces.panel.BlockPanel'>
  <property name='id' value='demoPanel' />
  <control component-type='javax.faces.HtmlPanelGroup' renderer-type='com.webmethods.caf.faces.panel.BlockPanel'>
    <property name='id' value='contextTarget1' />
    <property name='style' value='background-color: blue; color: white; padding: 10px;' />
    <control component-type='javax.faces.HtmlOutputText' renderer-type='javax.faces.Text'>
      <property name='id' value='htmlOutputText4' />
      <property name='raw' value='true' />
      <property name='value' value='Click in Here to open the context menu' />
    </control>
  </control>
  <control component-type='com.webmethods.caf.faces.panel.PopupPanel' renderer-type='com.webmethods.caf.faces.panel.PopupPanel'>
    <property name='for' value='contextTarget1' />
    <property name='id' value='popupPanel' />
    <property name='position' value='mouse' />
    <property name='styleClass' value='caf-popup-menu' />
    <control component-type='javax.faces.HtmlPanelGroup' renderer-type='com.webmethods.caf.faces.panel.BlockPanel'>
      <property name='id' value='blockPanel' />
      <property name='styleClass' value='caf-popup-menu-item' />
      <control component-type='javax.faces.HtmlOutputLink' renderer-type='javax.faces.Link'>
        <property name='id' value='htmlOutputLink' />
        <property name='label' value='Item One' />
        <property name='onclick' value='alert(&quot;item1 clicked&quot;);return false;' />
      </control>
    </control>
    <control component-type='javax.faces.HtmlPanelGroup' renderer-type='com.webmethods.caf.faces.panel.BlockPanel'>
      <property name='id' value='blockPanel3' />
      <property name='styleClass' value='caf-popup-menu-item' />
      <control component-type='javax.faces.HtmlOutputLink' renderer-type='javax.faces.Link'>
        <property name='id' value='htmlOutputLink1' />
        <property name='label' value='Item Two' />
        <property name='onclick' value='alert(&quot;item2 clicked&quot;);return false;' />
      </control>
    </control>
  </control>
</control>
3

In this particular case yes but I will also be doing a Web based application using CAF and the “Popup Menu Control” is in the header.html view that was included when I created a new Web based project. For that control I looked at the available properties but it just isn’t obvious to me how to set this control up.

BTW the example using the panel control for my portlet works better than the other solution I came up with.

4

Ok.

Each of the “AppNav” controls (Breadcrumbs/Popup Menus/Static Menus/Toggle Menus) are driven by the navigation taxonomy that you have defined in the WebContent/WEB-INF/app-nav.xml file. If you open that file in the provided editor, you can define the structure of your navigation options.