B4J Question Combo Box B4XComboBox Color

[rgarnett1955]

Hi,

I am building an app that has database input with many text fields and combo boxes. I validate user entry and color the background of the test boxes with yellow for dirty and red for error.

I wish to set the combo boxes with yellow for dirty, but I cannot find a way of doing it in B4j. It seems you can do it in B4a with the following code:

private Sub SetColorCombo(Combo As B4XComboBox)
    Dim M As List
    M.Initialize
    Dim F As Int
    Dim IdSel As Int
    IdSel = Combo.SelectedIndex

    For f = 0 To Combo.Size-1
        M.Add(Combo.GetItem(F))
    Next
    
    Dim Col As Int
    If IdSel = 0 Then
        Col = Colors.White
    Else
        Col = Colors.Cyan
    End If

    Combo.cmbBox.TextColor = Col
    Combo.mBase.Color = Colors.Black
    Combo.cmbBox.Invalidate
    
    Sleep(50)
    
    Combo.SetItems(M)
    Combo.SelectedIndex = IdSel
 
End Sub

In B4j the TextColor and Color methods aren't available. This seems strange as I thought the idea of B4XViews was for use across the different platforms.


Does anyone know how I can set the colors in a the standard B4XView combo box or some other way around the problem?

Regards
Rob

 

[PaulMeuris]

You can try it with CSS styles:

Private fx As JFX
cbx1.cmbBox.Style = "-fx-background-color: #CCC8F9;-fx-border-color: #000000;-fx-border-width: 2;-fx-border-radius: 3;"

And you can also use a stylesheet:

MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "styles.css"))

.button {
    -fx-background-color: #A199F7;
    -fx-border-color: #000000;
    -fx-border-width: 2;
    -fx-border-radius: 2;
}
.button:hover {
    -fx-background-color: #94FFFA;
}
.button:pressed {
    -fx-background-color: #CCC8F9;
}

 

[rgarnett1955]

Thanks Paul, I will give it a try.

 

[rgarnett1955]

You can try it with CSS styles:

Private fx As JFX
cbx1.cmbBox.Style = "-fx-background-color: #CCC8F9;-fx-border-color: #000000;-fx-border-width: 2;-fx-border-radius: 3;"

And you can also use a stylesheet:

MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "styles.css"))

.button {
    -fx-background-color: #A199F7;
    -fx-border-color: #000000;
    -fx-border-width: 2;
    -fx-border-radius: 2;
}
.button:hover {
    -fx-background-color: #94FFFA;
}
.button:pressed {
    -fx-background-color: #CCC8F9;
}

Hi Paul

I gave it a try.

'============================================================================================
Public Sub checkCombo(cmb As B4XComboBox, parent As String, f As Form) As Boolean
    Private comboTag As comboTag_T
    comboTag.Initialize
    comboTag = cmb.Tag
   
    If comboTag.cmbIndex <> cmb.SelectedIndex Then
        comboTag.dirty = True
        comboTag.cmbIndex = cmb.SelectedIndex
    End If
   
    cmb.cmbBox.Style = "-fx-background-color: #FFF6FF74;-fx-border-color: #FF939393;-fx-border-width: 1;-fx-border-radius: 1;"
   
    Return comboTag.dirty
End Sub

It did change the ComboBox slightly:

But it didn't do what I expected.

I then tried changing the background color in the designer. The color change was ignored. Changing the font to Italic did work using the stylesheet:

cmb.cmbBox.Style = "-fx-font-style: italic;"

Ir's not ideal, but it is better than nothing, so I guess I will just have to use that. I could change the label of the ComboBox, but then I have to tie the label to the state of the combo, very messy.

Best regards
Rob

 

[PaulMeuris]

cbx1.cmbBox.Style = "-fx-background-color: #FFF6FF74;-fx-border-color: #FF939393;-fx-border-width: 1;-fx-border-radius: 1;"

This code produces this result:

cbx1.cmbBox.Style = "-fx-background-color: #CCC8F9;-fx-border-color: #000000;-fx-border-width: 2;-fx-border-radius: 3;"

This code produces this result:

cbx1.cmbBox.Style = "-fx-background-color: #FFFF00;-fx-border-color: #000000;-fx-border-width: 2;-fx-border-radius: 3;"

This code produces this result:

So change the color settings to get the wanted result.
Note: don't use the alpha value (the first FF), just R,G,B values.

 

[rgarnett1955]

Thanks for that.

I included the alpha's may be that was the problem. I will have another go.

 

[rgarnett1955]

cbx1.cmbBox.Style = "-fx-background-color: #FFF6FF74;-fx-border-color: #FF939393;-fx-border-width: 1;-fx-border-radius: 1;"

This code produces this result:
View attachment 151748

cbx1.cmbBox.Style = "-fx-background-color: #CCC8F9;-fx-border-color: #000000;-fx-border-width: 2;-fx-border-radius: 3;"

This code produces this result:
View attachment 151749

cbx1.cmbBox.Style = "-fx-background-color: #FFFF00;-fx-border-color: #000000;-fx-border-width: 2;-fx-border-radius: 3;"

This code produces this result:
View attachment 151750
So change the color settings to get the wanted result.
Note: don't use the alpha value (the first FF), just R,G,B values.

Yep its the Alpha. Now it works.