B4J Library Replacement TitleBar

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

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:​

​

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

Spoiler: Example css for dark mode

.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.

 

[BPak]

Ran your example program on desktop Mac OS. Ran Ok. Images of 3 windows attached.
On Maximize it places top of maximized window under the Mac Menu Bar which is at the top of Desktop screen. Easily move window down to fit ok.

 

[stevel05]

On Maximize it places top of maximized window under the Mac Menu Bar

That's strange, as it calls a java API routine to Maximize. Does it do the same with the comparison form? That's just a standard form.

 

[BPak]

Comparison Form works correct. Both the other Forms put the top of the window under the Menu Bar at top of Desktop Display

 

[behnam_tr]

Close Transparent Form Problem

hi i have a problem with closing transparent form and myown titlebar with pane when i open "frm2" > two or many time only close form that opened first and i cant close others i'm using this class for titlebar : https://www.b4x.com/android/forum/threads/replacement-titlebar.84586/ example...

www.b4x.com

i cant close forms when i opened one form(like form2) for two time

sub mainform start()
mainform.show

sleep(1000)
form2.show  'its can close'

sleep(1000)
form2.show  'i can not close this'

endsub

this problem only when i use titlebar
thats ok in decorated or ..... style

 

[stevel05]

See the replies in your original post.

 

[walterf25]

How do I change the title bar color to a different color, I don't see a function anywhere that does that.

Walter

 

[stevel05]

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

In the Titlebar layout. If you want different colors for different windows, you can add a method to the TitlebarCV.

 

[stevel05]

Upgrade to V1.0

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

 

[behnam_tr]

thanks
how change maximized size?
when form maxmized windows taskbar going to back how bring to front and show taskbar when??

sorry for bad english.

 

[stevel05]

Is this on Mac as in post #2? The Maximized size is controlled by the Operating system. I don't have a Mac to try it on. It would be fairly straight forward to allow override of the maximize functionality, but knowing the appropriate size would be difficult. And would it be the same on all sized screens?

 

[behnam_tr]

Is this on Mac as in post #2? The Maximized size is controlled by the Operating system. I don't have a Mac to try it on. It would be fairly straight forward to allow override of the maximize functionality, but knowing the appropriate size would be difficult. And would it be the same on all sized screens?

yse i test in windows 7,8.1 and different sizes

when i set form style to Decorated mode and defualt titlebar its ok and taskbar is showing and form height is ok

with "replacment titlebar" i have to set height manualy

 

[behnam_tr]

in FormUtils class

'Sets the value of the property maximized.
Public Sub SetMaximized(F As Form, Value As Boolean)
    Dim TJo As JavaObject = GetStage(F)
    TJo.RunMethod("setMaximized",Array As Object(Value))
    
    Dim ps As Screen = fx.PrimaryScreen
    f.WindowHeight = ps.MaxY - ps.MinY
    
End Sub

its ok on different sizes screen

 

[stevel05]

Do you get the same problem if you used the window snapping to the left or right?

 

[behnam_tr]

Do you get the same problem if you used the window snapping to the left or right?

yes i tested new version and same problem when snapping to top center or normal maximize with click or double click
but its ok when snapping to right or left

every things is ok on Comparison form

 

[stevel05]

Try this one, you need to call OverrideMaximizedLayout on the Titlebar with the appropriate amendments.

Added to update V1.1 see first post.

 

[behnam_tr]

Try this one, you need to call OverrideMaximizedLayout on the Titlebar with the appropriate amendments.

thanks
result ::

 

[stevel05]

Update to V1.1 (see first post)

As you can probably tell, I've been using this a fair bit lately, so have added some functions that I feel are important. I hope you like them.

 

[stevel05]

@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.

 

[stevel05]

Silent update to fix bug with dropshadow form.