B4J Question [SOLVED][ABMaterial] How prevent refresh the page automatically?

Jones Hone

Active Member
Licensed User
Longtime User
I use ABMaterial framework to write web pages.
How to prevent, The android chrome webpage from being pulled down when it is at the top and refresh the page automatically.
ask01.jpg
++
 

Jones Hone

Active Member
Licensed User
Longtime User
Thank you for taking the time to answer in the busy recording.
But, I still reload after adding.
I use Android 8.0 Chrome browser. ANMaterial 4.30, B4J V7.32
B4X:
public Sub BuildPage()
    ' initialize the theme
    BuildTheme
    ' initialize this page using our theme
    page.InitializeWithTheme(Name, "/ws/" & ABMShared.AppName & "/" & Name, False, ABMShared.SessionMaxInactiveIntervalSeconds, theme)
    page.ShowLoader=True
    page.ShowLoaderType=ABM.LOADER_TYPE_MANUAL ' NEW
    page.SetLoaderDEVICESWITCH
    page.PageTitle = "ABMCheckbox"
    page.PageDescription = "The checkbox component "   
    page.PageHTMLName = "abmaterial-checkbox.html"
    page.PageKeywords = "ABMaterial, material design, B4X, B4J, SEO, framework, search engine optimization"
    page.PageSiteMapPriority = "0.50"
    page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_MONTHLY
    'page.UseGoogleAnalytics(ABMShared.TrackingID, Null) ' IMPORTANT Change this to your own TrackingID !!!!!!!
    page.DisablePageReloadOnSwipeDown = True
    ABMShared.BuildNavigationBar(page, "{C:#00BEA1}ABM{/C}Checkbox", "../images/logo." & ABMShared.AssetsVersion & ".png", "", "Controls", "ABMCheckbox")
    ' create the page grid
    page.AddRows(10,True,"").AddCells12(1,"")
    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    ' because we use an ABMCodeLabel, but it is not defined in this class but in ABMShared, we have to tell it manually to the page
    'page.NeedsCodeLabel = True   
    ABMShared.BuildFooterFixed(page)
End Sub
 
Upvote 0

Jones Hone

Active Member
Licensed User
Longtime User
I took another phone reset to factory default then test.
It still reloaded. Oddly!
I will try again.
Or, Can you make a small program for me to test?
Thank you!

What I think is different from what you think.
So I recorded a video and put it in the attached file
 

Attachments

  • ABMTestVideo.zip
    292.9 KB · Views: 195
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
That is exactly what it is supposed to block. The only difference is that I'm using ABM 4.51, but I don't think that should make a difference as that is rather old code that is in it for a very long time.

All this parameter does is running this javascript code:
B4X:
var maybePreventPullToRefresh = false;
var lastTouchY = 0;
var touchstartHandler = function(e) {
    if (e.touches.length != 1) return;
    lastTouchY = e.touches[0].clientY;
    maybePreventPullToRefresh = (window.pageYOffset == 0);
};
var touchmoveHandler = function(e) {
    var touchY = e.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
    if (maybePreventPullToRefresh) {
        maybePreventPullToRefresh = false;
        if (touchYDelta > 0) {
            e.preventDefault();
            return;
        }
    }               
};
document.addEventListener('touchstart', touchstartHandler, false);
document.addEventListener('touchmove', touchmoveHandler, false);

Alwaysbusy
 
Upvote 0

Jones Hone

Active Member
Licensed User
Longtime User
The above javascript code is found in the compiled code.
But, Will still reload.
Let me study study....
Thank you!
 
Upvote 0

Jones Hone

Active Member
Licensed User
Longtime User
After two days of testing, it alwaysreload (not alwaysbusy :) )
I have made a test project(Because the file is too big, so I only compress the source code).
can you please check whether it is normal in your computer environment.
I think maybe there is a problem with my computer environment. Or is my ABMaterial version problem.
Ask another question: As shown in the picture below. Thank very much.
abm01.jpg
 

Attachments

  • ABM_myApp.zip
    30.4 KB · Views: 204
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
It looks like Chrome has disabled the trick I used in JavaScript for some time. It is an annoying feature everyone is struggling with, but no one has found a good solution yet.
The reason it works in our apps is because I forced it with CSS:

In ConnectPage(), AFTER page.RestoreNavigationBarPosition, add this (in ABM 4.51+ this is property page.NeverShowVerticalScrollBar = True):
B4X:
page.ws.Eval($"$('#print-body').css('overflow', 'hidden');"$, Null)
page.ws.Flush

NOTE: if you use this, your page can NEVER be larger than 100% of the height!!! (in portrait mode this is rather small)

As for the disappearing buttons, this is because you set the visibility to 'True', which is translated to 'hide on small and medium' sizes. You must use the ABM.VISIBILITY... constants for another behaviour:

e.g.
B4X:
page.NavigationBar.AddTopItem("exit","","mdi-action-exit-to-app","",ABM.VISIBILITY_ALL)

Alwaysbusy
 
Upvote 0

Jones Hone

Active Member
Licensed User
Longtime User
First question is solved. Thank you!
But "page can NEVER be larger than 100% of the height!!" This is really too small.

Second question is solved,too.

Thank you very much for your help.
I want to donate, Is there a minimum amount limit?

I am a beginner, about the properties/methods of ABMaterial...I am not very familiar with the usage.
Where can I find the detailed documentation of ABMaterial?
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
page can NEVER be larger than 100% of the height!!" This is really too small.
This is build-in in Chrome. There is no known alternative unfortunately. You can try adding everything in an ABMContainer. Maybe this would enlarge it (not tested, as our apps are designed not to take more than a full screen)

I want to donate, Is there a minimum amount limit?
Whatever you feel comfortable with, but really, there is no need!

Where can I find the detailed documentation of ABMaterial?
Time does not permit me to write the documentation I would like to. This forum has some great tutorials (like the for Dummies). Best is just to ask a question if you can't find anything in the forum. I'm on it a lot and there are some experts around that can help if I'm not around. I think there is a tool around the forum that can read the .xml file to show all the properties/methods but I can't recall where I saw this.

Alwaysbusy
 
Upvote 0

Philip Chatzigeorgiadis

Active Member
Licensed User
Longtime User
I think there is a tool around the forum that can read the .xml file to show all the properties/methods but I can't recall where I saw this.
Perhaps this:
 
Upvote 0

Jones Hone

Active Member
Licensed User
Longtime User
B4X Object Browser is good tool.
But, Only know properties/methods/events lists.
There are too many blanks in the description field.
So still can’t understand the detailed usage of the attribute,method & event.

Sincerely hope that one day in the future, Alwaysbusy will not always busy.
Take the time to help everyone write detailed documents of ABMaterial.
 
Upvote 0
Top