B4J Question [ABMaterial] Row With Background Color and Rounded Border

Cableguy

Expert
Licensed User
Hi Alain...

Not sure if I should post this as a BUG or if it is just Something that has not been fully implemented...

I'm using a menu "card" by creating a 3 x 3 grid, and Inside each cell I create a and set a container to compose my card.
I set the container Border to be rounded using the BorderEx method… and the result is as expected, although I once wondered if the border was being applied to the page grid cell, instead of the Container row… but since it rendered as I expected it, I thought of it no more...
upload_2019-6-4_22-4-47.png


But then I decided to also set the background color… and the result is NOT what I was expecting...
upload_2019-6-4_22-6-5.png


Is there Something I can do to solve this? Is it a bug or a "not yet implemented" thing?
 

Cableguy

Expert
Licensed User
Yesterday I went browsing the feedback and saw a "to be implemented" setExtraStyle for both Row and Cell... That would solve it, no?
 

Cableguy

Expert
Licensed User
As promised...

all this is in ABMShared

B4X:
Sub BuildMainMenuItem( page As ABMPage, id As String, BorderColor As String, BorderStyle As String,  MenuItemTitle As String, MenuItemDescription As String, FilePath As String, ThemeName As String) As ABMContainer
    LogError(id & " Theme is : " & ThemeName)
    Dim MainMenuItemContainer As ABMContainer
    MainMenuItemContainer.Initialize(page, id & "MainMenuItemContainer","")
    MainMenuItemContainer.SetFixedHeight("84px")
    MainMenuItemContainer.AddRowsM(1,False,0,0,"").AddCellsOSMP(1,0,0,0,3,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0,9,9,9,0,0,0,0,"")
    MainMenuItemContainer.BuildGrid ' IMPORTANT!
    MainMenuItemContainer.SetBorderEx(BorderColor, ABM.INTENSITY_LIGHTEN4, 2, BorderStyle, "100px")
    MainMenuItemContainer.Row(1).UseTheme(ThemeName & "Container")

    Dim MainMenuItemSubContainer As ABMContainer
    MainMenuItemSubContainer.Initialize(page, "MainMenuItemSubContainer","")
    MainMenuItemSubContainer.AddRowsM(1,False,0,0,"").AddCells12(2,"")
    MainMenuItemSubContainer.BuildGrid ' IMPORTANT!
    
    MainMenuItemContainer.Cell(1,2).AddComponent(MainMenuItemSubContainer)
    
    Dim MenuItemTitleLabel As ABMLabel
    MenuItemTitleLabel.Initialize(page, id & "Title", MenuItemTitle, ABM.SIZE_H5, False, "")
    MainMenuItemSubContainer.Cell(1,1).AddComponent(MenuItemTitleLabel)
    MenuItemTitleLabel.UseTheme( ThemeName & "Title")
    
    Dim MenuItemDescriptionLabel As ABMLabel
    MenuItemDescriptionLabel.Initialize(page, id & "Description", MenuItemDescription, ABM.SIZE_SMALL, False, "")
    MainMenuItemSubContainer.Cell(1,2).AddComponent(MenuItemDescriptionLabel)
    MenuItemDescriptionLabel.UseTheme( ThemeName & "Description")
    
    Dim MenuItemImage As ABMImage
    MenuItemImage.Initialize(page, id, FilePath, 1.0)
    MenuItemImage.SetFixedSize(80,80)
    MenuItemImage.IsCircular = True
    MainMenuItemContainer.Cell(1,1).AddComponent(MenuItemImage)
    
    Return MainMenuItemContainer
End Sub
The Theme...
B4X:
    'MenuItem
    MyTheme.AddRowTheme("MenuItemContainer")
    MyTheme.Row("MenuItemContainer").VerticalAlign = True
    MyTheme.row("MenuItemContainer").BackColor = "red"
    MyTheme.Row("MenuItemContainer").Clickable = True
and it gets called like this...
B4X:
page.Cell(1,1).AddComponent(ABMShared.BuildMainMenuItem(page, "MenuItem1", ABMShared.ThemeMainColor, ABM.BORDER_INSET,"This is the Title", "And this is the Title's description", "../images/defaul_profile_image.png","MenuItem"))
 

alwaysbusy

Expert
Licensed User
You are mixing two things: the row and the container.

The theme you created makes the row red, not the container.

So just make this as the theme:
B4X:
' row make clickable
theme.AddRowTheme("MenuItemRow")
theme.Row("MenuItemRow").VerticalAlign = True
theme.Row("MenuItemRow").Clickable = True

' container make background red   
theme.AddContainerTheme("MenuItemContainer")
theme.Container("MenuItemContainer").BackColor = ABM.COLOR_RED
And in ABMShared:
B4X:
Sub BuildMainMenuItem( page As ABMPage, id As String, BorderColor As String, BorderStyle As String,  MenuItemTitle As String, MenuItemDescription As String, FilePath As String, ThemeName As String) As ABMContainer
   LogError(id & " Theme is : " & ThemeName)
   Dim MainMenuItemContainer As ABMContainer
   MainMenuItemContainer.Initialize(page, id & "MainMenuItemContainer",ThemeName & "Container") '<--- the container theme to make it red
   MainMenuItemContainer.SetFixedHeight("84px")
   MainMenuItemContainer.AddRowsM(1,False,0,0,"").AddCellsOSMP(1,0,0,0,3,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0,9,9,9,0,0,0,0,"")
   MainMenuItemContainer.BuildGrid ' IMPORTANT!
   MainMenuItemContainer.SetBorderEx(BorderColor, ABM.INTENSITY_LIGHTEN4, 2, BorderStyle, "100px")

   MainMenuItemContainer.Row(1).UseTheme(ThemeName & "Row") '<--- the row theme to make it clickable
   ...
Just an extra thing you can do (not related to the background color):

To align the image (for compensation of the row margin, which is set to -.75rem by the Materialize CSS framework):
B4X:
MenuItemImage.SetExtraStyle("margin-left: .75rem")
Result:
upload_2019-6-6_9-30-24.png


Alwaysbusy
 

alwaysbusy

Expert
Licensed User
That is possible. You can solve it like this then:

in Buildtheme()
B4X:
page.AddExtraCSSString($".imgmargin {margin-left: .75rem}"$)
In BuildMainMenuItem()
B4X:
Dim MenuItemImage As ABMImage
MenuItemImage.Initialize(page, id, FilePath, 1.0)
MenuItemImage.SetFixedSize(80,80)
MenuItemImage.IsCircular = True
MenuItemImage.HTMLAddClass("imgmargin")
MainMenuItemContainer.Cell(1,1).AddComponent(MenuItemImage)
It is acutally probably a better solution, as a class is mostly better than directly setting the style.
 

Harris

Expert
Licensed User
It is acutally probably a better solution, as a class is mostly better than directly setting the style.
So many tips and tricks. It shall make for an interesting read...
 
Top