Page 1 of 1

Main Menu - UISeparator

PostPosted: Thu Apr 16, 2020 11:36 am
by 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_SEPARATOR.png
menu with HR
MENU_SEPARATOR.png (4.75 KiB) Viewed 11748 times


Regards.

Re: Main Menu - UISeparator

PostPosted: Thu Apr 16, 2020 1:51 pm
by 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;
}

Re: Main Menu - UISeparator

PostPosted: Thu Apr 16, 2020 2:24 pm
by Support@SIB
The application API supports separators, but not VisionX right now. Menu items are added with following function:

Syntax: [ Download ] [ Hide ]
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.

Re: Main Menu - UISeparator

PostPosted: Thu Apr 16, 2020 4:38 pm
by 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/>';
}

Re: Main Menu - UISeparator

PostPosted: Thu Apr 16, 2020 4:52 pm
by 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....