Main Menu - UISeparator

[nobrega]

Hi,

We can add separators to popup menus using:

popupMenu1.add(new UISeparator(), ...

Is there any way to add separators to the main menu using visionx tool?

Additionally, separators on web seem to be implemented using

<span>...<span/>

Can you please consider changing this to

<span><hr/><span/>


The end result seems to be much better:

menu with HR

MENU_SEPARATOR.png (4.75 KiB) Viewed 24205 times

Regards.

[Support@SIB]

Styling of separator is not tricky. Simply add margins and padding with css, e.g.:

Code: Select all

.jvx_valo .topmenubarpopup
{
  padding: 10px;
}

.jvx_valo .topmenubarpopup .v-menubar-separator
{
  margin-top: 5px;
  margin-bottom: 5px;
}

[Support@SIB]

The application API supports separators, but not VisionX right now. Menu items are added with following function:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

protected void addMenuItem(Menu pMenu, String pId, String pAction, String pActionCommand,
                           String pGroup, String pGroupImage, String pShortcut,
                           String pItemText, String pItemImage, boolean pUseSeparator,
                           String pSideBarText, String pSideBarImage,
                           String pQuickBarText, String pQuickBarImage, boolean pToggle)
 

The parameter pUseSeparator is an option.

[nobrega]

Hi,

Thanks for the tips. We managed to code a simple way to add separators with something similar to:

Code: Select all

protected void addMenuItem(Menu pMenu, String pId, ..., boolean pUseSeparator, ...)

ClassLoader loader = this.getWorkScreenClassLoader(this);

pUseSeparator = Class.forName(pId, false, loader).getDeclaredAnnotation(WorkScreenWithMenuSeparator.class) != null;


Code: Select all

@WorkScreenWithMenuSeparator
public class MyWorkScreen extends ...


This way we just need to add the annotation to the work screens we want to have a separator before.

To "fix" the separator HTML, we included this css in our css file:

Code: Select all

.jvx_valo .topmenubarpopup .v-menubar-separator span
{
  display: none;
}

.jvx_valo .topmenubarpopup .v-menubar-separator:after {
  content: '<hr/>';
}


[Support@SIB]

Nice!

Also possible for the separator: Add a --- to the end of the title. Remove the --- and use separator parameter. This doesn't need class loading and makes it possible to use VisionX as usual....