B4J Question ABMaterial Tab Control Load container when tab selected

[John Naylor]

I'm not sure if this is possible or I'm doing something terribly wrong but maybe someone can help clear this one up.

I have a page with an ABMTab control on it and everything works fine (apart from the issue outlined below) when I set up all the tabs in their relevant containers within the ConnectPage() sub.

Each tab displays data about a selected student which is retrieved from a database. To help save on SQL calls I load in each tabs data only when that tab is selected (data is loaded in by tabid in the tabs_clicked() sub).

Again this works perfectly well.

My issue is that I have 7 tabs which I've been writing the containers for one by one as I complete the code for each.

    tabs.AddTab("tab1", "General", BuildTabContainer("tab1", "{NBSP}General"),3,3,3,12,12,12,True,False, "mdi-action-dashboard", "")

    tabs.AddTab("tab2", "Login", BuildTabContainer("tab2", "{NBSP}Login"),3,3,3,12,12,12,True,False, "mdi-action-dashboard", "")

    tabs.AddTab("tab3", "Activities", BuildTabContainer("tab3", "{NBSP}Activities"),3,3,3,12,12,12,True,False, "mdi-action-account-circle", "")

    tabs.AddTab("tab4", "Employment", BuildTabContainer("tab4", "{NBSP}Employment"),3,3,3,12,12,12,True,False, "mdi-editor-insert-comment", "")

    tabs.AddTab("tab5", "Hours", BuildTabContainer("tab5", "{NBSP}Hours"),3,3,3,12,12,12,True,False, "mdi-editor-insert-comment", "")

    tabs.AddTab("tab6", "Comms", BuildTabContainer("tab6", "{NBSP}Comms"),3,3,3,12,12,12,True,False, "mdi-editor-insert-comment", "")

    tabs.AddTab("tab7", "Statistics", BuildTabContainer("tab7", "{NBSP}Statistics"),3,3,3,12,12,12,True,False, "mdi-editor-insert-comment", "")

As I've added controls to each tab container in ConnectPage() it takes longer and longer for the page to fully load. Of course this is to be expected as there's more to do. With all tabs populated with controls it takes a good 10 seconds before the Statistics tab is actually populated with controls and if I click on that tab in any less than that time it just displays a blank container which doesn't refresh even when the relevant page.refresh is reached.

So I am trying to create the controls on each TabContainer only when the relevant tab is selected (similar to how I'm loading in the data for that tab). I created a separate sub routine with the exact same code as I used in ConnectPage() and I am calling it via the tabs_clicked() event just before I load in any data. It now looks like this...

Sub tabs_clicked (tabname As String)

    Select tabname

        Case "tab1"
            PopulateTab("general")

        Case "tab2"
            PopulateTab("login")

        Case "tab3"
            PopulateTab("activities")

        Case "tab4"
            PopulateTab("employment")

        Case "tab6"
            PopulateTab("groups")

        Case "tab7"
            SetupStatsScreen           '<<<<<<<<<<<<<<<< Similar would be used for each tab *if* I can get this to work
            PopulateTab("stats")

    End Select

End Sub

The PopulateTab sub does a page.refresh before it exits.

Executed like this I get a blank screen whenever I select the Statistics tab (I've stepped through the code and all the containers are being picked up correctly via page.component("tabs").

However if I put the SetupStatsScreen call into the ConnectPage() sub (without changing anything else other than removing line 21 above and waiting long enough) everything displays correctly.

Any ideas or general thoughts? Am I barking up a very wrong tree here? I'd be happy just to display the spinner until all the pages have been set up but of course the page has actually loaded so that disappears before the controls have been activated in the containers. Or can I disable the tabs until they have been populated with controls (so a user cannot click a tab before the controls have been added)? If so how do I detect that has happened? I'd prefer to be able to populate each tab as it is selected simply because not every tab will be used every time the page is displayed.

I thought maybe to do similar to how ModalSheets are generated and build a container from within BuildPage() then add it to the tab control later on but this gives the same results as above so far. I've tried refreshing the page, the tab control itself and the container within the tab control but to no avail.

Am I just asking too much of the tab control? Should I look for a different way of navigating the users data screens?

Thanks for reading and apologies for the lengthy post.

 

[Harris]

Try using a tabs.refresh instead of page.refresh .
Try using a page.pause and page.resume in the populatetab and setupstatsscreen subs to prevent early entry into anything until process completes.
Without these two subs code, it is difficult to see what occurs during these processes...

 

[John Naylor]

Try using a tabs.refresh instead of page.refresh .
Try using a page.pause and page.resume in the populatetab and setupstatsscreen subs to prevent early entry into anything until process completes.
Without these two subs code, it is difficult to see what occurs during these processes...

Brilliant! Thank you so much @Harris page.pause / page.resume has certainly done the trick nicely.