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

[Cableguy]

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

But then I decided to also set the background color… and the result is NOT what I was expecting...

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

 

[alwaysbusy]

Can you give me a snippet that makes such a card and the theme parts you use? I'll have a look.

 

[Cableguy]

Yes, later today I will.

 

[Cableguy]

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

 

[Cableguy]

As promised...

all this is in ABMShared

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

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

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]

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:

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

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

MenuItemImage.SetExtraStyle("margin-left: .75rem")

Result:

Alwaysbusy

 

[Cableguy]

I was sure I was missing something obvious!
Thanks Alain!

 

[Cableguy]

MenuItemImage.SetExtraStyle("margin-left: .75rem")

Seems like this is not (yet?) available in version 4.51!?

 

[alwaysbusy]

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

in Buildtheme()

page.AddExtraCSSString($".imgmargin {margin-left: .75rem}"$)

In BuildMainMenuItem()

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]

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