B4J Question ABMaterial - backgroundimage in header of modalsheet

[codie01]

Hi All, I am trying to place a backgroundimage in a modalsheet header and it does not appear to work. The following is sample of my code in the modalsheet

Sub BuildAccountModalSheet() As ABMModalSheet
    Dim myModalAccount As ABMModalSheet
    myModalAccount.Initialize(page, "myModalAccount", True, ABM.MODALSHEET_SIZE_FULL, "")
    myModalAccount.Header.UseTheme("modalheader")
    myModalAccount.Header.SetBackgroundImage(ABM.COLOR_BLUE,ABM.INTENSITY_DARKEN4,"../images/pagebackground.png",ABM.CONTAINERIMAGE_REPEAT_REPEAT,ABM.CONTAINERIMAGE_POSITION_CENTERCENTER)
    myModalAccount.Content.UseTheme("sectionContainerTheme0")
    myModalAccount.Footer.UseTheme("modalfooter")
    myModalAccount.Size = ABM.MODALSHEET_SIZE_FULL
    myModalAccount.IsDismissible = False

....

 

[alwaysbusy]

Are you sure the image exists? Maybe the filenames case is incorrect (if on linux)?

In Chrome, press F12 and go to the console and network tabs to see if an error occurred.

I had never tried this before, but did it now in one of my apps to test, and seems to work:

Alwaysbusy

 

[codie01]

Hi Alian,

Thanks for your response. The image works fine in a normal page as a background image. The name convention is correct. It does not work however in the modalsheet. Any tips please, IE: turn of the header theme, etc.

Thanks Phil

 

[codie01]

Also I can offer you a free server to host your support pages. I can even set it up for you!, All fre, you have given the b4x community great commitment. I would like to help you for once

 

[alwaysbusy]

It does not work however in the modalsheet

The image above from me is a modalsheet, full size so it fills the whole page (like your setting myModalAccount.Size = ABM.MODALSHEET_SIZE_FULL).
I did indeed not use a theme, but I would be surprised if this would be it.

1. Does it work if you comment out the UseTheme lines?
2. Do you see errors in the Chrome browser (network or console tab)? If so, they may give me a clue.

can offer you a free server to host your support pages

Thank you for your kind offer! I may take you up on it later ? I first will see if I can still fix it here.

Alwaysbusy

 

[codie01]

Hi Alian,

Could you please show your sample code, thanks!

Phil

 

[codie01]

No Errors in the chrome browser!
Does not work if i remove the header theme!

 

[alwaysbusy]

The code is a snippet from a much bigger project I'm making. all I added was the .header.SetBackgroundImage() to it.

public Sub ConnectPage()
   ...
   page.AddModalSheetTemplate(ABMShared.BuildForModalPrint(page, "", Config.JG(authLang & "/close", "")))
   ...
   page.Refresh ' IMPORTANT
   page.FinishedLoading 'IMPORTANT
   page.RestoreNavigationBarPosition
End sub

public Sub BuildForModalPrint(page As ABMPage, title As String, CloseButton As String) As ABMModalSheet    
    Dim Modal As ABMModalSheet
    Modal.Initialize(page, "ModalPrintLayout", False, ABM.MODALSHEET_TYPE_NORMAL, "onetwobc")
    Modal.IsDismissible = True
    Modal.Header.SetBackgroundImage(ABM.COLOR_BLUE,ABM.INTENSITY_DARKEN4,"../images/OneTwoLogo.png",ABM.CONTAINERIMAGE_REPEAT_REPEAT,ABM.CONTAINERIMAGE_POSITION_CENTERCENTER)
    Modal.Size = ABM.MODALSHEET_SIZE_FULL
    
    
    ' Build the content grid
    Modal.Content.AddRowsM(1, True,0,0, "").AddCells12(1, "")
    Modal.Content.BuildGrid  'IMPORTANT once you loaded the complete grid AND before you start adding components
    
    ' Build the header grid
    Modal.header.AddRowsM(1,True,0,0, "").AddCellsOS(1,6,9,9,6,3,3,"right")
    Modal.header.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

    Modal.Header.Row(1).PaddingTop = "10px"
    Modal.Header.Row(1).PaddingBottom = "10px"

    ' create the buttons for the header
    Dim Cancel As ABMButton
    Cancel.InitializeFlat(page, "BarcodesCancel", "fa fa-times", ABM.ICONALIGN_CENTER, "", "transparent")
    Modal.header.Cell(1,1).AddComponent(Cancel)
    
    Dim Print As ABMButton
    Print.InitializeFlat(page, "BarcodesPrint", "fa fa-print", ABM.ICONALIGN_CENTER, "", "transparent")
    Modal.header.Cell(1,1).AddComponent( Print)
    
    Return Modal
End Sub

And somewhere in my code in a button I have:

page.ShowModalSheet("ModalPrintLayout")

When de modalsheet is loaded:

Sub Page_ModalSheetReady(ModalSheetName As String)
    If ModalSheetName.ToLowerCase = "modalprintlayout" Then
        BuildPrint
    End If    
End Sub

Sub buildPrint()   
    Dim Modal As ABMModalSheet = page.ModalSheet("ModalPrintLayout")
    
    Dim outerCont As ABMContainer
    outerCont.Initialize(page, "bcout", "")
    
    Dim SQL As SQL = DBM.GetSQL
    Dim founds As List = DBMApp.SELECTGroups(Table1.WHEREClause,"LIMIT 500","ORDER BY grpDescription", Table1.WHEREVars)
    DBM.CloseSQL(SQL)
    
    If founds.Size = 0 Then Return
    
    outerCont.AddRowsM(1,False,0,0,"").AddCellsOSMP(1,0,0,0,0,2,2,0,0,0,0,"left").AddCellsOSMP(1,0,0,0,0,4,6,0,0,0,0,"left").AddCellsOSMP(1,0,0,0,12,6,4,0,0,0,0,"center")
    outerCont.AddRowsM(1,False,0,0,"").AddCellsOSMP(1,0,0,0,12,6,4,0,0,0,0,"center")
    outerCont.addrowsM(1,False,0,0,"").AddCellsOSMP(founds.Size,0,0,0,12,6,4,0,0,0,0,"centerclick")
    outerCont.BuildGrid
    
    outerCont.Row(1).SetExtraStyle("border-bottom: 1px dotted gray;margin-bottom: 10px")

    ...
   
    Modal.Content.Cell(1,1).AddComponent(outerCont)
    Modal.Refresh
    ...
   ' adding stuff to the outer container
    ...

   outerCont.Refresh
End Sub

Alwaysbusy