B4J Question [ABMaterial] How to detect Client Browser resize event

[Anser]

Hi,

Is there any way that I can understand/detect that the browser is resized. I am looking for a solution to call a page.refresh after the user has resized the browser after the page is loaded.

I have found that the Footer of the page is not drawn correctly if things happens in the following sequence

After the page is loaded

1. Browser is resized (ie reduced the browser size, may be from desktop size to mobile size, height lesser as possible). The contents of the page are re-aligned perfectly as expected.
   
2. User clicked refresh page. The contents of the page are re-aligned perfectly as expected.
3. User maximized the browser window size. Now the Footer is not fixed at the bottom, instead it is painted as per the previous size of the browser. ( To reproduce this issue, there should be very less contents below the Navigation Bar. If there are enough contents on the page to fill the entire height of the browser, then this issue is not there. )
   
4. Now a refresh is to be called to draw the footer at the bottom of the page

I do not know whether this is the expected behaviour or not. So to overcome this issue, if I can know whenever the browser is resized, I can call a page.refresh which would draw the footer correctly at the right position.

Here is the screen snapshot of the Demo application. I just eliminated/reduced the contents in the page just below the Navigation bar, so that this issue can be reproduced. Please note the position of the footer

 

[alwaysbusy]

Does this also happen with EnablePassiveEventListeners = false? (because nothing has changed for months, if not years on the footer system)

 

[Anser]

Does this also happen with EnablePassiveEventListeners = false? (because nothing has changed for months, if not years on the footer system)

Yes.
EnablePassiveEventListeners = false in the app

I have noticed this issue in ABMaterial 3.75 too

You can reproduce the same in the demo app AboutPage. I have just commented out few contents so that the page does not have full length (vertical) contents.

public Sub ConnectPage()
    'NEW
    ABMShared.ConnectNavigationBar(page)
 
'    ' add header
    page.Cell(1,1).AddComponent(ABMShared.BuildHeader(page, "hdr1", "Welcome to ABMaterial!"))
'    ' add paragraph
    page.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "par1", "ABMaterial is a framework ")) 'Reduced the write up here.
 
'    ' create slider
'    Dim slider As ABMImageSlider
'    slider.Initialize(page, "slider", "myslider")
'
'    ' add images
'    slider.AddSlideImage("../images/about1.png",  "No knowledge of HTML or CSS required","Over 35 Material controls!", ABM.IMAGESLIDER_RIGHT)
'    slider.AddSlideImage("../images/about2.png", "All controlable with pure B4J code","Over 35 Material controls!", ABM.IMAGESLIDER_RIGHT)
'    slider.AddSlideImage("../images/about3.png", "Controls are animated","Over 35 Material controls!", ABM.IMAGESLIDER_RIGHT)
'    slider.AddSlideImage("../images/about4.png", "Interact with the controls","Over 35 Material controls!", ABM.IMAGESLIDER_CENTER)
'    slider.AddSlideImage("../images/about5.png", "Helpers create effects like Parallax","Over 35 Material controls!", ABM.IMAGESLIDER_RIGHT)
'    slider.AddSlideImage("../images/about6.png", "Modern looking controls","Over 35 Material controls!", ABM.IMAGESLIDER_RIGHT)
'    slider.AddSlideImage("../images/about7.png", "Advanced easy to implement upload files","Over 35 Material controls!", ABM.IMAGESLIDER_RIGHT)
'    slider.AddSlideImage("../images/about8.png", "Create you own controls with the canvas","Over 35 Material controls!", ABM.IMAGESLIDER_CENTER)
'
'    page.Cell(2,1).AddComponent(slider)
'    
'    ' add paragraph
'    page.Cell(3,1).AddComponent(ABMShared.BuildParagraph(page, "par2", "{B}{I}This site you are now exploring is written completely in B4J without having to write a single line of HTML, CSS or Javascript code!{/I}{/B} All this code is automatically generated while you can program your WebApp in an object oriented way like you are used to in the other Anywhere products like B4A, B4i and B4J.  ABMaterial controls can be themed and have events you can use in B4J to manipulate the app. Using jQueryelement in ABMaterial, you do not have to worry about Futures etc, as all is taken care of in the library. "))
'    ' add paragraph
'    page.Cell(3,1).AddComponent(ABMShared.BuildParagraph(page, "par3", "ABMaterial WebApps are Desktop, Tablet and Phone aware. Depending on the size of the screen, your app can appear different.  For example when you resize this site on a desktop, you'll notice the SideBar on the left will disappear and a 'hamburger' button will appear in the TopBar.  See layouts for more information on how to do this. Click on the images for a larger view."))
'
'    ' add the images
'    page.Cell(4,1).AddComponent(ABMShared.BuildImage(page, "img1", "../images/Desktop.jpg",1, "ABMaterial in a desktop webbrowser" ))
'    page.Cell(4,2).AddComponent(ABMShared.BuildImage(page, "img2", "../images/Tablet.png",1, "ABMaterial on a tablet"))
'    page.Cell(4,3).AddComponent(ABMShared.BuildImage(page, "img3", "../images/Phone.png",1, "ABMaterial on a phone" ))
'
'    ' add header
'    page.Cell(5,1).AddComponent(ABMShared.BuildHeader(page, "hdr2", "So how does it work?" ))
'    ' add paragraph
'    page.Cell(5,1).AddComponent(ABMShared.BuildParagraph(page, "par4", "ABMaterial is split into two parts: Grids/Components and Themes. Grids/Components define the structure and components within your page.  Themes can be used to define the look of the components in your app."))
'    ' add paragraph
'    page.Cell(5,1).AddComponent(ABMShared.BuildParagraph(page, "par5", "A good place to start is reading the Getting started section." ))
'    ' add paragraph
'    page.Cell(5,1).AddComponent(ABMShared.BuildParagraph(page,"par13","I hope you'll enjoy programming with ABMaterial.  Check out the {AL}https://www.b4x.com/android/forum/{AT}{C:#00B183}B4J forum{/C}{/AL} for questions, bugs or suggestions. I spend a lot of time in there..."))
'
'    Dim img As ABMImage
'    img.Initialize(page, "img", "../images/alainbailleul." & ABMShared.AssetsVersion & ".png", 1)
'    page.Cell(6,1).AddComponent(img)
'
'    Dim donButton As DonateButton
'    donButton.Initialize(page, "donButton")
'    page.Cell(6,1).AddComponent(donButton.ABMComp)
             
    ' also add the components to the footer
    ABMShared.ConnectFooterFixed(page)
     
    page.Refresh ' IMPORTANT!
     
    ' NEW, because we use ShowLoaderType=ABM.LOADER_TYPE_MANUAL
    page.FinishedLoading 'IMPORTANT
 
    myToastId = myToastId + 1
    page.ShowToast("toast" & myToastId, "toastorange", "ABMaterial " & ABM.Version & " (" & ABM.versionName & ")!", 5000, False)
 
    page.RestoreNavigationBarPosition
 

End Sub

 

[alwaysbusy]

I've added it to the feedback app (case #654) with a link to this post.