B4J Library Replacement TitleBar

stevel05 · Oct 3, 2017

I've seen a few questions on the forums about changing the titlebar color. The answer is that you have to replace the title bar.

This gives the problem of then losing all of the form controls, resizing minimising, maximising and close buttons.

This is a customview, that does all of this. Just add the titlebarCV customview to the top of a layout and it will replace the existing titlebar with one defined int the titlebar layout.

The title color is controlled by the color selected for the background on the TitlebarBG pane. The font can be changed on the TitleLabel.

There are no methods available for the titlebar. Through listeners, the title and icon are updated when the title and icon are changed on the Form that the customview is added to.

There are three custom properties, 1 displays a dropshadow and another to choose the dropshadow color. The thirds allows turning off the minimize animation.

If you choose to add a drop shadow, the layout must be inset by 8 pixels all round. This is because the shadow is actually drawn on the form in it's transparent borders. See the layout in the demo for an example.

I've tried to recreate the look and behaviour of a Windows form, I don't have access to a Mac or linux box, so if you create a layout for either of these I would be grateful if you would share it.

The code is one class and a utility class (FormUtils) and is all in the attached project.

Update to V1.0

Reworked the drag logic
Added Emulation of windows snap to screen
Added more designer properties
Added method ResetMouseListeners

The added properties include options to turn off the windows snapping, icon state colours and specify a layout name.

The layout must include all of the views that are in the provided titlebar layout.

Emulated snap to screen does not integrate with the windows snap to screen, but is still quite useful and you can temporarily disable it by pressing the Ctrl key. Works with multiple screens.

Resizing is now done using additional panes added to the forms.rootpane. ~~If you add a lot of views in code, you may need to call ResetMouseListeners which will ensure that the listening panes are at the front.~~(Not required from v1.1) The listening panes are 5px wide, So you cannot capture mouseclicks within 5 px of the form edges, but they are transparent so you can see anything that is under them.

Depends on:
CssUtils
JavaObject

Update: v1.1

Added listener to getChildrenUnmodifiable to automatically call ResetMouseListeners as needed.
Made important Titlebar views public for styling.
Removed redundant code
Added CloseRequst(EventData as Event) Event to delegate to MainForm_CloseRequest(EventData as Event)
Set default icon so that it's click can be captured if required.
Stop the form closing on Right mouse button click
Added override for Maximize size, mainly for Mac users.

The Titlebar close request callback should be delegated directly to the Form CloseRequest sub

B4X:

Private Sub TitleBarCV1_CloseRequest (EventData As Event)
    'Delegate the call to MainForm_CloseRequest
    MainForm_CloseRequest(EventData)
End Sub

Private Sub MainForm_CloseRequest (EventData As Event)


End Sub

Using the Override Maximum size

If you change the left or top, you also need to make the opposite change to the width or height.

You could selectively implement this in case the app is running on a Mac with this code:

B4X:

If TB_Utils.isMac Then
    TitleBarCV1.OverrideMaximizedLayout(0,30,0,-30)
End If

I don't have a mac to try it on but I believe it should work.

Update V1.2

Implemented FullScreen Mode
Bug Fixes

Update V1.3

Added Snapping background and border colors to designer properties.
Fixed bug on Snapping background for multiple screens
improved Linux compatibility (see post#25)

Update V1.4

Fixed a bug that stopped the titlebar taking the full width of the window particularly when dropped in a corner of the screen.

Update V1.5 - 29-Sep-2023

Added option to designer UsingStylesheet to stop colors being updated in code.

Renamed class Popup to TB_Popup to minimize the risk of the same class being loaded in multiple libraries.

Added Class TB_DSE containing : ClearAllStyles & AddStyleClass

Added some styleclassnames to the views in the layouts

Changed default icon

Added width adjustment to layout to allow border all around the Rootpane

Added ResetScreen Sub for use as panic mode if the titlebar becomes inaccessible.

Added option to manage window position on shutdown / startup which maintains the Maximized property

299,299

.root {
-fx-base: rgba(60, 63, 65, 255); /* dark */

}
.title-bar-bg{
-fx-background-color: Black;
}
.title-bar-icon{
}
.title-bar-title-label{
-fx-text-fill:lightgray;
}
.title-bar-control-btn-pane{
}
.title-bar-minimize-icon{

}
.title-bar-minimize-icon-pressed,
.title-bar-maximize-icon-pressed{
-fx-background-color:rgba(205,205,205,0.55) ;
}
.title-bar-minimize-icon-hover,
.title-bar-maximize-icon-hover{
-fx-background-color: rgba(205,205,205,0.35);
}
.title-bar-maximize-icon{
}
.title-bar-close-icon{
}
.title-bar-close-icon-hover{
-fx-background-color:rgba(255,0,0,0.7);
}
.title-bar-close-icon-pressed{
-fx-background-color:#FF0000;
}

Let me know how you get on with it.

behnam_tr · Nov 21, 2020

stevel05 said:
@behnam_tr I've included the Override amendment in V1.1 with a couple of bug fixes. If you haven't tried it yet, download the latest version.

thanks man
but new problem in v1.1
titlebar is hidden and i cant click on min or max button or moving form

i changed this line

MainForm.WindowTop = CenterY - MainForm.WindowHeight + 25
now can see titlebar
but taskbar problem not solved yet
of course its ok when snapping to right or left
when maximized boooooooooooom !! taskbar going to back.
windows 7
1366*768 resolution

stevel05 · Nov 22, 2020

Ok so to recap, this is a problem on Windows 7. does your code in post #13 solve it?

If you want to hide the task bar, the screen needs to be set to FullScreen. (which I had not tested and needs some work)

stevel05 · Nov 24, 2020

Update V1.2

Implemented FullScreen Mode
Bug Fixes

See first post

stevel05 · Nov 27, 2020

Has anybody tried this on Linux? I've just installed Ubuntu in Virtualbox on Win 10 and I tried it as a test. Quite disappointing that maximize doesn't work. I wondered if it is because it's a virtual machine, or just not working on Linux/Ubuntu full stop.

stevel05 · Dec 3, 2020

Update V1.3

Added Snapping background and border colors to designer properties.
Fixed bug on Snapping background for multiple screens
improved Linux compatibility

I have tried everything I can think of to get Full screen to work on Linux, unfortunately the default windows manager with Ubuntu doesn't play well with JavaFX and has different behaviour to Microsoft windows. So much so that setting the window maximized doesn't work, and it is not possible to move transparent or undecorated windows out of the screen. I have got round the maximized issue by implementing maximized in code. Unfortunately I can't get fullscreen to work at all and am giving up for now but will check later to see if the situation improves.

If you want to use this for Linux, then it does everything except fullscreen. Also, the performance in debug causes a few issues, so if you look in the code, there are different delays set for debug and release. If this still doesn't work you can try lengthening the delays.

Results may differ with different Linux windows managers so if you want to test it on whichever version of linux you use, let me know the results. It would be nice to get this working for Windows, Linux and Mac (which I can't test so will be reliant on feedback).

behnam_tr · Jan 30, 2022

problem in right_to_left Forms !!

hi @stevel05

When the form orientation is Right_to_left, Resize of the form as well as the arrangement of the buttons is disrupted
arrangement of the buttons can fix with this code

B4X:

Dim jo As JavaObject = TitleBarBG
    jo.RunMethod("setNodeOrientation", Array("LEFT_TO_RIGHT"))

But resizing the form is still a problem

sample attached.

stevel05 · Jan 30, 2022

Needless to say, I hadn't even thought of Right_To_Left Orientation.

Try this one (Based on your version)

Attachment removed

behnam_tr · Jan 30, 2022

stevel05 said:
Needless to say, I hadn't even thought of Right_To_Left Orientation.

Try this one (Based on your version)

thanks its ok
but when is show minimize is true, still has a problem

stevel05 · Jan 30, 2022

Try removing the line:

NodeOrientation = "LEFT_TO_RIGHT":

from the set orientation sub, my mistake, it's not needed

stevel05 · Jan 30, 2022

Tidied up a bit and removed the above code. Sets the title orientation if needed

Attachment removed

stevel05 · Jan 30, 2022

@behnam_tr let me know if this stands up and I will release as a new version.

Thanks

behnam_tr · Jan 30, 2022

stevel05 said:
@behnam_tr let me know if this stands up and I will release as a new version.

Thanks

Yes, it is absolutely great
thank you
If possible, please add two options
To become more practical and complete

B4X:

#DesignerProperty: Key: ShowIcon, DisplayName: Show Icon, FieldType: Boolean, DefaultValue: False, Description: Show/hide the Form icon
#DesignerProperty: Key: ShowMaximize, DisplayName: Show Maximize, FieldType: Boolean, DefaultValue: False, Description: Show/hide the maximize button

stevel05 · Jan 30, 2022

OK, while your in test mode, try this one (Defaults are true)

Attachment removed

behnam_tr · Jan 30, 2022

stevel05 said:
OK, while your in test mode, try this one (Defaults are true)

problem in maxzimized(with double click on title)
problem in restored

showmaximaize = false
=====================
minimize is ok
show/hide icon is ok

stevel05 · Jan 30, 2022

behnam_tr said:
problem in maxzimized(with double click on title)
problem in restored

What problem are you seeing looks OK here, unless you want to disable double click as well?

behnam_tr · Jan 30, 2022

stevel05 said:
What problem are you seeing looks OK here, unless you want to disable double click as well?

minimize icon position when showmaximize is false and showminimize is true
check image again

stevel05 · Jan 30, 2022

Yep I see it, forgot a sleep statement.

Now happens when window is resized, will take a look

behnam_tr · Jan 30, 2022

stevel05 said:
Yep I see it, forgot a sleep statement.

Now happens when window is resized, will take a look

not solved yet !!

When maximize is false, the position of the minimize icon should be attached to the close icon and the space between the two should be removed.

stevel05 · Jan 30, 2022

Yes, will take a bit more work. I have to go out now, will look later.

stevel05 · Jan 30, 2022

Had an idea before I go out, try this one. If you are copying code into an existing project, you will need to copy the titlebar layout or turn off the Handle Resize Event option.

B4J Library Replacement TitleBar

Attachments

Active Member

Attachments

Expert

Expert

Expert

Expert

Active Member

Attachments

Expert

Active Member

Expert

Expert

Expert

Active Member

Expert

Active Member

Attachments

Expert

Active Member

Expert

Attachments

Active Member

Attachments

Expert

Expert

Attachments

Similar Threads

Privacy & Transparency

Privacy & Transparency