B4J Tutorial Floating ContextMenu using jNativeHookB4j

stevel05 · Jan 3, 2017

This is an example of using @Roycefer 's jNativeHook to monitor all mouse events, even outside of the current app. It uses a ContextMenu to replicate the right click functionality. Default behaviour is overridden by the jNativeHook library and returning false from the relevant event sub.

It uses a dummy form to enable the context menu to be placed anywhere on the screen.

It's not been comprehensively tested and I can't guarantee it will work on Mac or Linux, but would be interested to know if it does.

Get the jNativehook files from here: https://www.b4x.com/android/forum/threads/jnativehookb4j-for-intercepting-system-input-events.55826/

Hope you enjoy it.

V 0.2 Update for Mac - see post #3
V 0.6 implements Tags, css styling of menu, checkmenuitem, submenus and a menutitle
V 0.7 Close all menus correctly
V 0.8 Added :

Ignore clicks on window (allows window to operate normally)
Multiple Floating Menus (Only one can be active at a time)

This update contains breaking code, MainForm has to be passed to the NativeHook initialization.

No version increment update fixed menu resize issue.
Demo only update to V0.8

V0.8.5 Added

ThRuST's latest css styles
Pause and Restart Mouse Listener

cmenu.css.zip contains the latest css.file
Tags : B4j Native Hook Floating Context Menu
12

stevel05 · Jan 10, 2017

No, I don't know CSS very well either, if you haven't already, you can get the default modena.css file from here. https://gist.github.com/maxd/63691840fc372f22f470

It shows the default values and elements that are available for each View.

ThRuST · Jan 10, 2017

Behold!! Here's 'Demostyle CSS theme' offical style template (v0.9) for Steves contextmenu and also for project Mindcraft I got a bit carried away as you can see.
Now people can start design their own style and either post here or email it to me directly. If it's good it will be included and part of the released beta version.
Designing this took alot of time but I wanted to tweak it to get it as good as possible. As you can see these designs are getting better and better.
I commented the CSS template to make it as easy as possible to make changes, it's really simple now so keep using this CSS template, you too Steve, please
Btw, I left a secret in this template.. unmark any one the -fx-shape under MenuItem Selector Color to see the hidden effects taken from the site Steve mentioned.
Please note: Markers color does not yet work.

CSS

// ----------------------------------------------------------------------------------
// MINDCRAFT CSS THEME v0.9 (Duologic.se)
// ----------------------------------------------------------------------------------
// Theme name : DemoStyle CSS Theme
// Author : Roger 'ThRuST' Lindfors
// Created : 2017-01-10
// Email : rogerlindfors@hotmail.com
// ----------------------------------------------------------------------------------
// -----------------------------------------------------------------
// Contextmenu Background
// -----------------------------------------------------------------
.context-menu {

-fx-background-color:
linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
linear-gradient(#020b02, #3a3a3a),
linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
-fx-background-insets: 0,1,4,5,6;
-fx-background-radius: 10,9,8,7,6;
-fx-padding: 10 4 10 4;
-fx-border-width: 0px;

-fx-font-family: "broadway";
-fx-font-weight: bold;
-fx-text-fill: white;

}

// -----------------------------------------------------------------
// Title Logo Bgr Color
// -----------------------------------------------------------------
.cmenu .title {

-fx-background-color: transparent;
-fx-pref-height: 20px;
-fx-font-weight: bold;
-fx-text-fill: transparent;

}

// Title menu headlines/font size/color
.cmenu .label {

-fx-font-size: 12px;
-fx-font-weight: bold;
-fx-text-fill: #d7d7d7;

}

// -----------------------------------------------------------------
// Title logo color
// -----------------------------------------------------------------
.cmenu .title .label {

-fx-text-fill: #b6b6b6;
-fx-font-weight: bold;
}

// -----------------------------------------------------------------
// Title Logo FontSize
// -----------------------------------------------------------------
.cmenu .title .label {

-fx-font-size: 22px;
-fx-background-color: transparent;
-fx-font-weight: bold;

}

// -----------------------------------------------------------------
// CheckMenuItem Markers Non Focused
// -----------------------------------------------------------------
.check-menu-item:checked > .left-container > .check {
-fx-background-color: LightGray;
}
//-fx-mark-color

// -----------------------------------------------------------------
// CheckMenuItem Markers Focused
// -----------------------------------------------------------------

.check-menu-item:focused:checked > .left-container > .check {
-fx-background-color: Lime;
}

// -----------------------------------------------------------------
// SubMenu Arrows
// -----------------------------------------------------------------

// Arrows Non Focused
.menu > .right-container > .arrow {
-fx-background-color: White;
}

// Arrows Focused
// Arrows - MenuItem Selection
.menu:focused > .right-container > .arrow {
-fx-background-color: Lime;
}

// -----------------------------------------------------------------
// Title Menu Labels
// -----------------------------------------------------------------
.menu-item .label {

-fx-font-weight: normal;

}

// -----------------------------------------------------------------
// MenuItem Text Selected Color
// -----------------------------------------------------------------
.menu-item: focused .label {

-fx-text-fill: Lime;

}

// -----------------------------------------------------------------
// MenuItem Selector Color
// -----------------------------------------------------------------
.menu-item: focused {

// -fx-shape: "M0,-4L4,0L0,4Z";
// -fx-shape: "M0 1 L1 1 L.5 0 Z";
//-fx-shape: "M0 1 L1 1 L.5 0 Z";

-fx-background-color: Black;

}

// -----------------------------------------------------------------
// Clicked Item
// -----------------------------------------------------------------
.menu-item: pressed {

-fx-background-color: Gray;

}

stevel05 · Jan 10, 2017

Very nice,

I've added it to v0.8.5

ThRuST · Jan 10, 2017

About to test it on my MacBook again...

stevel05 · Jan 10, 2017

For the markers try:

B4X:

.menu > .right-container > .arrow {
    -fx-background-color: Red;
}

.menu:focused > .right-container > .arrow {
    -fx-background-color: Pink;
}

I don't mean the colors, just a test to make it obvious

ThRuST · Jan 10, 2017

Here's what it looks like on my Mac. The menuitem selections CSS is not showing when the menu is not in focus, which happens when I click on the main form. Then it's showing correctly. The contextmenu still works as it should even when it's not in focus. This can help to make corrections to this and I will test it once updated.

ThRuST · Jan 10, 2017

Since the CSS script uses font broadway it seems to use font Helvetica on Mac. So I guess the correct font need to be provided in the installation if possible.
Maybe this is possible, so that the menu can look as fancy on all computers

stevel05 · Jan 10, 2017

To answer your second question first, to use it in CSS, I think you would have to load it in the CSS file If I remember correctly. And probably add the font file to your app's files folder. I don't know if the fonts are compatible, or if it would be allowed in the font's licence to load it on a Mac. You could put an alternate font in the CSS (I think you just spoecify two) in case one isn't available. If you can find one on the Mac that you like.

For your first question, have you used CSS with a javafx app on Mac before? Does it normally work as expected? There is nothing in the program that involves CSS (apart from adding the classes), so I would guess it's either a javafx/CSS issue on Mac, or just a Mac issue.

ThRuST · Jan 10, 2017

I have now updated the CSS theme to v0.8.5 which you can find i post #62. Paste the CSS theme over the current version and replace v0.8.5.
We're kinda busy today I'll look up the CSS stuff on Mac. I'm not sure how it works on a Mac but it would be nice to see it look the same. Oh about the CSS updated theme, it now shows red and pink arrows, you left your mark in my theme hehe

ThRuST · Jan 10, 2017

What about the MARKERS!! Those markers, don't leave them out, they're important in case there's any use for them, who knows

stevel05 · Jan 10, 2017

Oh do you mean the check marks on the checkmenuitem?

ThRuST · Jan 10, 2017

found an interesting page about Aqua for JavaFX on Mac. Take a look Here

stevel05 · Jan 10, 2017

This should be more in keeping:

B4X:

// -----------------------------------------------------------------
// CheckMenuItem marks
// -----------------------------------------------------------------
.check-menu-item:checked > .left-container > .check {
    -fx-background-color: LightGray;
}
//-fx-mark-color

.check-menu-item:focused:checked > .left-container > .check {
    -fx-background-color: Lime;
}
//-fx-focused-mark-color


// -----------------------------------------------------------------
// SubMenu Arrows
// -----------------------------------------------------------------

.menu > .right-container > .arrow {
    -fx-background-color: White;
}

.menu:focused > .right-container > .arrow {
    -fx-background-color: Lime;
}

ThRuST · Jan 10, 2017

About to update the CSS theme to v0.9, but first I want to ask what is this for, or should I remove it?

//-fx-mark-color

stevel05 · Jan 10, 2017

If you want to try the Aqua.css Download the Aquafx.jar from the site and copy it to your addl libs folder then create a new project and put this as Main:

B4X:

#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 400
    #AdditionalJar: aquafx-0.1
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
End Sub

Sub AppStart (Form1 As Form, Args() As String)

    Dim AJO As JavaObject
    AJO.InitializeStatic("com.aquafx_project.AquaFx")
    AJO.RunMethod("style",Null)


    MainForm = Form1
    'MainForm.RootPane.LoadLayout("1") 'Load the layout file.
    MainForm.Show
End Sub

Load a layout.

It looks a bit fuzzy on my PC, maybe better on a Mac.

stevel05 · Jan 10, 2017

should I remove it?

Yes, remove it. It was just to remind myself what was there in the first place.

ThRuST · Jan 10, 2017

I've update the CSS theme to v0.9, grab it it's time to update again

ThRuST · Jan 10, 2017

My life is a ContextMenu haha

ThRuST · Jan 10, 2017

please add in a screendump in your post at #75. This is starting to look like a pocket novel. Harlequin gold series lol

stevel05 · Jan 10, 2017

B4J Tutorial Floating ContextMenu using jNativeHookB4j

Attachments

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency