B4J Question [ABMaterial] How to reload (refresh) hole pages?

[johnerikson]

I use the [ABMaterial] in a new Webapp
I work with imaging and I want to use the same page for different functions. By changing different function parameters to change the presentation of the page, gives no result. I've tried using page. refresh but does not work.

What shall I do?

 

[Harris]

You may need to use page.row(x).refresh.
Try it in the Page_Ready() method... Please define which version of ABM you are using...
AB can provide more instruction.

A sample of your code always helps to see what you are trying to do (commented).

 

[johnerikson]

Thanks!
I using version ABM 1.05.
I have tried page.row (x). refresh in a for-loop for all activated rows, but this does not remove all.
Check-controls remain, as well as Cards-controls only the images are cleared.

If there is a new version released where can I download it?

 

[Cableguy]

1.05 is the latest release.

I haven't had much time to properly explore the framework but as a matter of logic, calling the page again (open?) Should result in a refresher

 

[johnerikson]

Thanks!
I do not understand the hint (open), but I fix it with workaround for the time being, I duplicate pages and apply them with different functions!

 

[alwaysbusy]

Yes, please share some code so I can try and replicate the problem. I'm a couple of days away from releasing v1.06 so if there is a problem with refresh, we'll better get it out of the way now.

 

[johnerikson]

I try to explain what I'm into.....


On one page I build up a ‘treeview’ (Treeview.PNG) for selecting categories of images. On the same page I have buttons for selecting between <Slideshow>, <Show Images> (ShowImages.PNG) and <Editing> (Editing.PNG).

( <Show Images> and <Editing> ) performs Redirect to the same Site, but with different functions. The main function for all choises is to display selected images from a directory.

What I want to do is:
If <Editing> selected from the treeview site then check-controls activates under each picture as well as buttons for the selection of several different functions. If <Show Images> selected only the images displays.

The idea is to put a value on a global variable for selections the user made to display the new page with the right content. The problem is that drawing of the page is only right once directly after start. After that I can't create code to clear the page completely and I do not know where I call the cleanup sub in the code flow. If I apparently succeed in clearing the page with page.row (x). refresh the next redirect to the page display nothing.

Hope you can understand the content with regard to my poor grammatical skills!

public Sub BuildPage()
    ' initialize the theme
  
    BuildTheme
    Log ("BuildPage()")
    ' initialize this page using our theme
    page.InitializeWithTheme(Name, "/ws/" & AppName & "/" & Name, False, theme)
    page.ShowLoader=True
    page.PageHTMLName = "EasyImages.html"
    page.PageTitle = "Bildhantering"
    page.PageDescription = "Editering"
    page.PageKeywords = ""
    page.PageSiteMapPriority = "0.50"
    page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_YEARLY
      
    ' adding a navigation bar
    ABMShared.BuildNavigationBar(page,  "Bildhantering","../images/gisiqon_logo.jpg", "",  "EasyImages", "")

    page.AddRows(1,True, "").AddCells12(1,"")  
    page.AddRowsM(3,True,0,0, "").AddCellsOS(4,0,0,0,3,3,3,"")
    page.AddRowsM(1,True,0,0,"").AddCellsOS(1,0,0,0,12,12,12,"")
    page.AddRowsM(20,True,0,0, "").AddCellsOS(4,0,0,0,3,3,3,"")
  
'    page.AddRowsM(20, True, 0, 0, "").AddCellsOS(4,0,0,0, 3,3,3,"")
    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

    Dim btn2 As ABMButton
    btn2.InitializeRaised(page, "btn2", "", "", "Remove all Markers", "bluegrey")
    page.Cell(2,2).AddComponent(btn2)
    page.CellR(1,1).AddComponent(ABMShared.BuildParagraph(page,"par1","                                                               ") )

    Dim lDir As List
    Dim sImg As String
    Dim iLen As Int
    Dim sID As String  
    Dim j As Int
    Dim iOffs As Int
 
   'load images in a list
    lDir.Initialize
    lDir = WebUtils.PopImagesInList("Standard", Main.PG_sAppPath & "\EasyImages\images")
    iLen = lDir.Size
   
    Dim Images(iLen) As ABMImage
    Dim iRow As Int = 2
    If Main.PG_bChks Then ' Is true if Editing is selected
        Dim chk1(iLen) As ABMCheckbox
    End If
    j = 1
    iOffs = 4
    Log ("Main.PG_bChks " & Main.PG_bChks)
    For i = 0 To iLen - 1
        sImg = lDir.Get(i)
        If sImg.StartsWith("20") Then
            sID = jStrings.ChangeToShortImageID(sImg, 2)
            Images(i).Initialize(page, sID, "../EasyImages/images/" & sImg, 1)
            Images(i).IsResponsive=True
            Images(i).SetFixedSize(300, 200)
            Images(i).IsMaterialBoxed = True
            Images(i).SetTooltip(Images(i).ID, "", 300)
            If j > 4 Then
                j = 1
                iRow = iRow + 1
            End If
            page.Cell(iRow + iOffs, j).AddComponent(Images(i))

            If Main.PG_bChks Then ' Is true if Editing is selected   
                chk1(i).Initialize(page, "chk" & i, "Markera", False, "")
                page.Cell(iRow + iOffs, j).AddComponent(chk1(i))
            End If
            j = j + 1
        End If
    Next
End Sub

Sub PageClear
    If Main.PG_bChks Then      ' Is true if Editing is selected 
        For i = 1 To 20
            Try
                page.Row(i).refresh
            Catch
            End Try
        Next  
        Log ("Cleared")
    End If  
End Sub

 

[alwaysbusy]

Thanks! I do not see in your code where you remove the checkboxes, but I suspect that will be a loop in the btn_click event, right? I'll look into it and report back. Just for this scenario, wouldn't it be better to hide/show the checkboxes with chk(i).visibility=ABM.VISIBILITY_HIDE_ALL & ABM.VISIBILITY_SHOW_ALL?

 

[johnerikson]

Thanks, but the check-boxes is not responding chk1 (i). visibility = ABM. VISIBILITY_HIDE_ALL
I thought that 'page. Row (i).refresh' even cleaner the Check-boxes.

I have begun to consider whether it would be the best to load the options in different pages.
The only disadvantage of multiple pages with the same code, is maintained, but I think in this case I will save our time!
I think you have more important things to deal with!

Thanks a lot. I like and beleave on your framework!

 

[johnerikson]

I have a more serious problem, probably related to past problems

It looks like a page is statically loaded on startup of the application and may not be used dynamically in future!

This means that I can’t change the contents of a directory of images and view them. The loaded images in the start is the only one that will be shown in future. The only way to change content is to restart the server application with the new Images on directory you want to show.

It may have something with my problem to clean lines from the page which we write about earlier??

I think it need page.clear(?) to do before a new content loaded or page.reload(?) after the new content added which means the same routines as when the application starts.

If it’s something important I did not understand which puts me in this situation and that important can solve this problem, I am probably not going ahead with the development. I understand that the idea is that pages work dynamically, but how.

So what to do?

If you think it would help you with example code from me to look into it, I can build a part from the app, but it's a lot of work.
I read all the data from a database. So I'll fake it somehow.
But it is worth it if you give the green light and intresting to do samething to solve it?

 

[alwaysbusy]

Pages are dynamic. The BuildPage is only used to create the initial structure of the page. Email me your project (export zip in b4j). Don't bother with the database, I just would read your code tomorrow and see why it does not work for you. (Or what I missed)

Also check out de source code of ABMFeedback. It's all dynamic pages in there.

 

[codie01]

Hi Guys,

Alain "alwaysbusy" worked hard a couple of weeks ago and gave up a weekend to help me, mate you Rock. The long and short of it I promised to write a manual so I have started and attach the first few pages here. At this point its just smashing in case it helps some here. I have my webpage working well and it rocks, directly off my B4J desktop apps and b4x mobile apps.

Cheers all.

 

[Cableguy]

Hi Guys,

Alain "alwaysbusy" worked hard a couple of weeks ago and gave up a weekend to help me, mate you Rock. The long and short of it I promised to write a manual so I have started and attach the first few pages here. At this point its just smashing in case it helps some here. I have my webpage working well and it rocks, directly off my B4J desktop apps and b4x mobile apps.

Cheers all.

Have an URL to share, it would be interesting to see and showcase webapp created with the framework

 

[alwaysbusy]

@codie01 Thank you for starting to write a manual. Will be helpful in the future for a lot of people!

 

[alwaysbusy]

Just for info for people who have a problem described by @johnerikson

The life cycle of an ABMaterial WebApp:

1. The server starts: BuildPage() runs and saves all what is in this method to disk.
2. A user connects, Runs the BuildPage() to load the structure. (handy for SEO). If it is a static page, you're done
3. If it is a dynamic page, you'll have to make the specific changes in the WebSocket_Connected mentod. Easiest is create a method called LoadMyPage()
In LoadMyPage() remove, add, change components specific for this user.
4. The user leaves your page: WebSocket_Disconnected is called, class is destroyed

 

[alwaysbusy]

@codie01 about this in the manual:

Components can be also added into the SubBuildPage(),however they to are also static and cannot be changed or refreshed.

This is not entirely true. Those components can be changed or refreshed, just NOT IN BuildPage(). You can change them e.g. in the WebSocket_Connected() or any other method like a button_Clicked. Just grab the component you created in BuildPage() and change it:

e.g.

in BuildPage():

' create the input fields
Dim inp2 As ABMInput
inp2.Initialize(page, "inp2", ABM.INPUT_TEXT, "Volledig adres", False, "orange")
inp2.IconName = "mdi-maps-local-attraction"
inp2.Visibility = ABM.VISIBILITY_HIDE_ALL
page.CellR(0,1).AddComponent(inp2)

and in myButton_Clicked(Target as String):

Dim inp2 As ABMInput = page.Component("inp2")
inp2.IconName="mdi-another-icon"
inp2.refresh

 

[alwaysbusy]

This was the last part I had to know before releasing version 1.06. So expect it somewhere tomorrow!

 

[Harris]

@codie01 Great job so far on the manual! Very impressive.
Perhaps you could embed a picture of the browser with final results.
I am also glad to hear you stuck with this excellent framework - and now help all of us to understand how to use it effectively.

 

[alwaysbusy]

@codie01 Waw, looks great! Just a hint:

Make use of the responsive power ABMaterial has: e.g. for the tool cards, make the cells something like AddCellOS(6, 0,0,0,12,4,2). This will result in somthing like the attachment on a phone (all 'cards' are under each other). Also, center the image using a cell theme with center alignment.

 

[Harris]

I have also attached a screen shot of the Desktop Version controlling the entire website, products etc on the website. It is a warehouse, CMS, ISO9001, Web, Desktop, Distribution and Marketing model, with a customer mobile app. All B4J, finally after 40 years of programming one language does it all.

The site Looks Great!
This was done soly with ABMaterial? Fantastic!