B4J Tutorial Floating ContextMenu using jNativeHookB4j

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
 

Attachments

  • FloatingContextMenu-0-7.zip
    7.1 KB · Views: 478
  • cmenu.css.zip
    1 KB · Views: 472
  • FloatingContextMenu-0-8-6.zip
    10.3 KB · Views: 523
  • Test - cmenu.css.zip
    1 KB · Views: 445
  • FCMTest1.zip
    10.3 KB · Views: 450
Last edited:
Click to expand...
ThRuST

ThRuST

Well-Known Member
Licensed User
Longtime User
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 :p
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.

demostyle3.png


CSS
// ----------------------------------------------------------------------------------
// MINDCRAFT CSS THEME v0.9 (Duologic.se)
// ----------------------------------------------------------------------------------
// Theme name : DemoStyle CSS Theme
// Author : Roger 'ThRuST' Lindfors
// Created : 2017-01-10
// Email : [email protected]
// ----------------------------------------------------------------------------------
// -----------------------------------------------------------------
// 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;

}
Click to expand...
 
Last edited:
stevel05

stevel05

Expert
Licensed User
Longtime User
Very nice,

I've added it to v0.8.5
 
stevel05

stevel05

Expert
Licensed User
Longtime User
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

ThRuST

Well-Known Member
Licensed User
Longtime User
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.

mac1.jpg
 
ThRuST

ThRuST

Well-Known Member
Licensed User
Longtime User
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

stevel05

Expert
Licensed User
Longtime User
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

ThRuST

Well-Known Member
Licensed User
Longtime User
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

ThRuST

Well-Known Member
Licensed User
Longtime User
What about the MARKERS!! Those markers, don't leave them out, they're important in case there's any use for them, who knows :D
 
stevel05

stevel05

Expert
Licensed User
Longtime User
Oh do you mean the check marks on the checkmenuitem?
 
stevel05

stevel05

Expert
Licensed User
Longtime User
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;
}
 
stevel05

stevel05

Expert
Licensed User
Longtime User
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.

upload_2017-1-10_20-53-50.png
 
Last edited:
stevel05

stevel05

Expert
Licensed User
Longtime User
should I remove it?
Click to expand...

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

ThRuST

Well-Known Member
Licensed User
Longtime User
I've update the CSS theme to v0.9, grab it it's time to update again :eek:
 
ThRuST

ThRuST

Well-Known Member
Licensed User
Longtime User
please add in a screendump in your post at #75. This is starting to look like a pocket novel. Harlequin gold series :D lol
 
You must log in or register to reply here.

Similar Threads

ab3d
  • Question
B4J Question RunOnGuiThread isn't working in release mode!
Replies
0
Views
623
ab3d
ab3d
drgottjr
  • Question
B4J Question compiler error
Replies
14
Views
2K
drgottjr
drgottjr
R
  • Article
B4J Library [class] KeyComboListener
Replies
10
Views
4K
ThRuST
ThRuST
JakeBullet70
  • Article
Share My Creation [b4x] Add logging and try catch to your methods - Hot key
Replies
11
Views
4K
ThRuST
ThRuST
R
  • Article
B4J Library jNativeHookB4J for intercepting system input events
2 3 4
Replies
71
Views
20K
Douglas Farias
Douglas Farias
Top