B4J Question [ABMaterial] Why Navigationbar didn't show?

[incendio]

Hello guys,

Just tried to created web app with ABMaterial Framework using Template supplied with version 3.2.

Changed the codes in AMShared module into like these :

Sub BuildNavigationBar(page As ABMPage, Title As String, logo As String, ActiveTopReturnName As String, ActiveSideReturnName As String, ActiveSideSubReturnName As String)     'ignore   
    Dim sbtopimg As ABMImage
    sbtopimg.Initialize(page, "sbtopimg", logo, 1)
    sbtopimg.SetFixedSize(236, 49)   

    page.NavigationBar.Initialize(page, "nav1", ABM.SIDEBAR_MANUAL_ALWAYSHIDE, Title, True, True, 330, 48, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")
    page.NavigationBar.TopBarDropDownConstrainWidth = False
    page.NavigationBar.ActiveTopReturnName = ActiveTopReturnName
    page.NavigationBar.ActiveSideReturnName = ActiveSideReturnName
    page.NavigationBar.ActiveSideSubReturnName = ActiveSideSubReturnName
   
    page.NavigationBar.AddTopItem("About", "About", "", "", True)
    page.NavigationBar.AddSideBarDivider
    page.NavigationBar.AddSideBarItem("System", "System", "mdi-action-dashboard", "../AboutPage/abmaterial-about.html")
    page.NavigationBar.AddSideBarDivider
    page.NavigationBar.AddSideBarItem("Goods", "Goods", "mdi-editor-insert-comment", "../GettingStartedPage/abmaterial-getting-started.html")
    page.NavigationBar.AddSideBarDivider
End Sub

When preview in browser, navigation didn't show :

What was I missed?
Thanks in advance.

 

[alwaysbusy]

Is it possible you somewhere have a page.NavigationBar.Clear... method used in the ConnectNavigationBar()?

 

[incendio]

You were right, there is a page.NavigationBar.Clear in the ConnectNavigationBar(), but after removed it, only Top Menu showed. side bar menu still not showed

 

[alwaysbusy]

Can you attach your full ABMShared.bas file (zipped) to this post? Somehow there are mixups in your theme I would suspect (as ABMaterial is now blue, and the SideBarItems may be shown but using white text on a white background.

 

[incendio]

Thanks for your time & help.

Attached is ABShared.bas

 

[incendio]

Found it, at last...

I am using supplied Template for my first app. On this Template saw these codes on Sub BuildNavigationBar

page.NavigationBar.AddTopItem("DUMMY", "{NBSP}", "", "", False)
page.NavigationBar.AddSideBarItem("DUMMY", "{NBSP}", "", "")

So, I added top item & side bar item below that line, while on Sub ConnectNavigationBar added nothing. My MISTAKE, sorry

Moving codes for item & side bar to Sub ConnectNavigationBar & delete those 2 line from Sub
BuildNavigationBar, solved the problem.

Thanks again for your time & help.

 

[incendio]

Sorry Mr. Alain,

Seem there still a problem, these are the last my codes in ABShared module

Sub BuildNavigationBar(page As ABMPage, Title As String, logo As String, ActiveTopReturnName As String, ActiveSideReturnName As String, ActiveSideSubReturnName As String)     'ignore   
    Dim sbtopimg As ABMImage
    sbtopimg.Initialize(page, "sbtopimg", logo, 1)
    sbtopimg.SetFixedSize(200, 49)
    page.NavigationBar.Initialize( page, "nav1", ABM.SIDEBAR_MANUAL_HIDEMEDIUMSMALL, Title, True, True, 200, 49, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")

    page.NavigationBar.TopBarDropDownConstrainWidth = False
    page.NavigationBar.ActiveTopReturnName = ActiveTopReturnName
    page.NavigationBar.ActiveSideReturnName = ActiveSideReturnName
    page.NavigationBar.ActiveSideSubReturnName = ActiveSideSubReturnName
   
End Sub

Sub ConnectNavigationBar(page As ABMPage) 'ignore
    page.NavigationBar.AddTopItem( "Delete", "Delete", "mdi-action-highlight-remove", "", ABM.ICONALIGN_CENTER)
    page.NavigationBar.AddTopItem("Add", "Add", "mdi-content-add", "", ABM.ICONALIGN_CENTER)
    page.NavigationBar.AddTopItem("Unlock", "Unlock", "mdi-action-lock", "", ABM.ICONALIGN_CENTER)
    page.NavigationBar.AddTopItem("Save", "Save", "mdi-content-save", "", ABM.ICONALIGN_CENTER)

    page.NavigationBar.AddSideBarDivider
    page.NavigationBar.AddSideBarItem("System","System","","")
    page.NavigationBar.AddSideBarItem("Goods","Goods","","")
    page.NavigationBar.AddSideBarDivider
   
    page.NavigationBar.Refresh ' IMPORTANT
End Sub

Top Menu & Sidebar menu worked as expected, but unable to set Navigationbar width. I even wrote this to change NavigationBar width

page.NavigationBar.Initialize( page, "nav1", ABM.SIDEBAR_MANUAL_HIDEMEDIUMSMALL, Title, True, True, 0, 49, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")

But no effect in Navigationbar width. Did I miss something?

On my Log window there is a warning : You must set DebugConsoleEnable in BuildPage() first!
Could it be this is the caused?

For my curiosity, I changed ABShared.bas from my project with ABShared.bas from demo project (ver 3.2), unmodified & unchanged, and the display was exactly like post #3, which is ABMaterial is blue & no Sidebar Item showed.

When I looked codes of ABShared.bas from demo project, the codes to add top item & side bar item were put in Sub BuildNavigationBar(), but with demo project, it worked perfect, even changed NavigationBar width has no problem.

I am confused, same codes, worked OK with demo project, but gave different result in my App, where did I miss?

The whole project was uploaded in https://www.dropbox.com/s/b24euje0yzyvuu4/wRPA.zip?dl=0

Much appreciated for your help & thanks in advance.

 

[alwaysbusy]

I just changed the 0 width to 200 in your project and now it is 200 width.

I Added this at the end of BuildNavigationBar (NEEDED as the comments tell you!):

' you must add at least ONE dummy item if you want to add items to the topbar in ConnectNaviagationBar
page.NavigationBar.AddTopItem("DUMMY", "{NBSP}", "", "", ABM.VISIBILITY_ALL)
     
' you must add at least ONE dummy item if you want to add items to the sidebar
page.NavigationBar.AddSideBarItem("DUMMY", "{NBSP}", "", "")

And this at the start of ConnectNavigationBar to remove the two dummies:

page.NavigationBar.Clear ' removes the dummies

' add your real navigation bar items

Make sure your press CTRL+F5 when you test your code (to clear the cache in the browser) otherwise you can get weird results.

Also be very careful with just copying a module from one to another. Some examples demonstrate something specific and do not work in another project.

You can just remove this line to get rid of the log message (does not do any harm, it is sort of a warning).

page.DebugConsoleB4JStart

 

[incendio]

Thanks for your gentle help.

I think I found the caused of the problem. The problem is not in ABMShared module, but in the ABMApplication module.

Here are the codes in ABMApplication

Public Sub Initialize
    Pages.Initialize   
    PageNeedsUpload.Initialize
    ABM.AppVersion = ABMShared.AppVersion
    ABM.AppPublishedStartURL = ABMShared.AppPublishedStartURL
    ABMShared.AppName = "template"   '<-------------------------------------------------------- IMPORTANT

Since I build my project with the Template, I thought AppName is also "template", this is the problem that caused weird behaviour.
After changed AppName to wRPA, everthing worked as expected.

Thanks anyway for your help.

 

[alwaysbusy]

Since I build my project with the Template, I thought AppName is also "template"

This assumption is right. I suspect your problem will have been a cache problem then. Changing this to wRPA has the same effect as pressing CTRL+F5 (clearing the cache) as for the browser this web url was 'new'.