B4J Question [ABMaterial] how to create a fixed header

[Cableguy]

Hi guys...

I'm trying to conceptualize my first ABMaterial webapp, which will, for simplicity and learning purposes, is to be a single page, in which I plan to have a Fixed header with an image, a title and 3 icons (like a topnavbar, except the later does not accept an image unless I set a nevigation menu, which I do not want to), a ChronologyList component, and a fixed Footer with perhaps a label and extra button...

As simple as this sketch may be, I'm hitting a wall exactly on the first item, the header...
ABM does not have a "Header" component with the specs to suite my needs... or does it?

Any insight on how to accomplish this are welcomed

sample of what I want to accomplish:

 

[Mashiane]

@Cableguy , at the moment, one cannot use their own icons on the header. I ask asked about it also. Perhaps in future versions this might be possible I'm not sure.

 

[Cableguy]

I would prefer a "real" header instead of the top navbar...

 

[alwaysbusy]

in 2.02 you will be able to 'mimic' what you want with a floating container. Of course, you will need to take care of a lot of stuff NavigationBar does now for you (sizing behaviour for one). The keyword in ABMaterial is it follows the Google Material Design guidelines. That is why it is not called ABWhateverWebYouWantToDo

Code to build this in 2.02 will be:

BuildTheme()

theme.AddContainerTheme("menu")
theme.Container("menu").BackColor = ABM.COLOR_TEAL
theme.Container("menu").BackColorIntensity = ABM.INTENSITY_ACCENT3
  
theme.AddLabelTheme("white")
theme.Label("white").ForeColor = ABM.COLOR_WHITE

BuildPage()

' create a floating container MUST be added in BuildPage!
Dim floatingcont1 As ABMContainer
floatingcont1.Initialize(page, "floatingcont1", "")
floatingcont1.AddRowsM(1,False,0,0, "").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0,"")
floatingcont1.BuildGrid ' IMPORTANT
floatingcont1.SetFixedWidth("100%")
floatingcont1.SetFixedPosition("0px","0px","0px","")
page.AddFloatingContainer(floatingcont1, ABM.FLOATING_FROMTOP, "0px")

ConnectPage()

' get the floating container
Dim floatingcont1 As ABMContainer
floatingcont1 = page.FloatingContainer("floatingcont1")

' create menu container
Dim cont2 As ABMContainer
cont2.Initialize(page, "cont2", "menu")
' you have to take care yourself how it bahaves on the different devices
cont2.AddRows(1,False,"").AddCellsOS(1,0,0,0,6,2,1,"").AddCellsOS(1,0,0,0,1,7,9,"").AddCellsOS(1,0,0,0,5,3,2,"")
cont2.BuildGrid  
  
cont2.Cell(1,1).MarginLeft = "6px"
cont2.Cell(1,1).Margintop = "6px"
  
cont2.Cell(1,2).MarginLeft = "-6px"   ' to compensate for the +5px in cell 1
  
cont2.Cell(1,3).Margintop = "16px"

Dim img As ABMImage
img.Initialize(page, "img", "../images/paulo.png",1)
cont2.Cell(1,1).AddComponent(img)
  
Dim lbl As ABMLabel
lbl.Initialize(page, "lbl", "{NBSP}{I}Paulo Gomez{/I}", ABM.SIZE_H4, False, "white")
lbl.Visibility = ABM.VISIBILITY_HIDE_ON_SMALL_ONLY ' hide the label on phones
cont2.Cell(1,2).AddComponent(lbl)
  
Dim img2 As ABMImage
img2.Initialize(page, "img2", "../images/france_round_256.png",1)
img2.SetFixedSize(48,36)
cont2.Cell(1,3).AddComponent(img2)
  
Dim img3 As ABMImage
img3.Initialize(page, "img3", "../images/united_kingdom_round_icon_256.png",1)
img3.SetFixedSize(48,36)
cont2.Cell(1,3).AddComponent(img3)
  
Dim img4 As ABMImage
img4.Initialize(page, "img4", "../images/hungary_round_icon_256.png",1)
img4.SetFixedSize(48,36)
cont2.Cell(1,3).AddComponent(img4)
  
' add it to the floating container
floatingcont1.Cell(1,1).AddComponent(cont2)
 
page.Cell(1,1).PaddingTop = "50px"

' make some big text to show the floating container stays on top 
Dim biglabel As ABMLabel
biglabel.Initialize(page, "biglabel", ABM.Util.paragraphs(50,True), ABM.SIZE_PARAGRAPH, True, "")
page.Cell(2,1).AddComponent(biglabel)
       
' 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

 

[Mashiane]

Wow, cant wait...

 

[Cableguy]

) The keyword in ABMaterial is it follows the Google Material Design guidelines. That is why it is not called ABWhateverWebYouWantToDo

I understand that perfectly, and a big thank you is due from me

 

[alwaysbusy]

Added another method AddFloatingContainerHideOnScroll() which could be useful on smaller devices. e.g. if with the ABMActionButton. Imagine in this picture I'm scrolling...

' create a floating container
Dim floatingcont2 As ABMContainer
floatingcont2.Initialize(page, "floatingcont2", "")
floatingcont2.AddRowsM(1,False,0,0, "").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0,"")
floatingcont2.BuildGrid ' IMPORTANT
page.AddFloatingContainerHideOnScroll(floatingcont2, ABM.FLOATING_FROMBOTTOM, "110px",0.2,1.0)

' get the floating container
Dim floatingcont2 As ABMContainer
floatingcont2 = page.FloatingContainer("floatingcont2")

' create a new container
Dim cont3 As ABMContainer
cont3.Initialize(page, "cont3", "")
cont3.AddRows(1,False,"").AddCellsOS(1,10,10,10,2,2,2,"")
cont3.BuildGrid   

' action button   
Dim acb1 As ABMActionButton
acb1.Initialize(page, "acb1", "mdi-action-shop", "", "bigblue")
acb1.MainButton.size = ABM.BUTTONSIZE_LARGE
   
' the sub buttons
Dim btn1 As ABMButton
btn1.InitializeFloating(page, "btn1", "mdi-social-share", "sub1")
acb1.AddMenuButton(btn1)
Dim btn2 As ABMButton
btn2.InitializeFloating(page, "btn2", "mdi-social-whatshot", "sub2")
acb1.AddMenuButton(btn2)
Dim btn3 As ABMButton
btn3.InitializeFloating(page, "btn3", "mdi-social-notifications", "sub3")
acb1.AddMenuButton(btn3)
   
' add to cell
cont3.Cell(1,1).AddComponent(acb1)
   
' add it to the floating container
floatingcont2.Cell(1,1).AddComponent(cont3)

 

[Cableguy]

dahm, I just saw the "GOMEZ" thing after I re-donated! I want my 100000000€ back!!!
Lol, just kidding of course... When can we expect the new version out?
Also, I think I lost the donators code e-mail, along with my feedback credentials

 

[alwaysbusy]

I'm waiting on some feedback from a couple of users who are pre-testing the new reconnect system (only this part, as I want to get this out of the way). So next week you will probably get the new update.

 

[alwaysbusy]

@Cableguy I will resend you your credentials

 

[Cableguy]

received, thanks.... now about those 1000000€....

 

[alwaysbusy]

@Cableguy, I've just send you a package by courier, all in 1€ bills. Should arrive tomorrow. Enjoy

 

[Harris]

I'm waiting on some feedback from a couple of users who are pre-testing the new reconnect system (only this part, as I want to get this out of the way). So next week you will probably get the new update.

If you are waiting on me... I have tested your Feedback and Demo from my problematic slow connection.
Both apps connected and behaved as expected over this slow sat connection (where they would not before the updates to your sites (pre test 2.02) ).
I shall update my site soonest. Got my winter wood in the shed over the past three days. Now lots of Advil and rest in my chair to re-cooperate (which is the problem in the first place - too much typing - not enough strenuous exercise).

Hint: Avoid version 4 and 7 updates. They always kill everyone else that have released these versions (MS, Borland Delphi, Nexus 7 phones).

BTW - ABM rocks - as usual...
Thanks

 

[stanmiller]

I'm waiting on some feedback from a couple of users who are pre-testing the new reconnect system (only this part, as I want to get this out of the way). So next week you will probably get the new update.

We've put our ABM project on hold until the next release. Between the ABM analyzer throwing random exceptions on .BAS files, combo boxes coming up empty, and issues of connection stability we can't spend any more time with ABM 2.00.

 

[alwaysbusy]

we can't spend any more time with ABM 2.00

I understand. But I hope you understand too ABMaterial is huge, incredible complicated with all the types of browsers and devices and I'm a one-man-team that does make this for free for the community, writing it in 4 completely different language syntaxes at nighttime. And all you have to do is write BASIC. If you don't have the patience and expect with all those wishes the next version will be bug free, I'm afraid you're better off searching for an expensive commercial product (and keep your fingers crossed, because they aren't bug free either).

 

[Harris]

We've put our ABM project on hold until the next release. Between the ABM analyzer throwing random exceptions on .BAS files, combo boxes coming up empty, and issues of connection stability we can't spend any more time with ABM 2.00.

I am not really concerned with ABM current issues. The one man team (of 1) will get there, with his limited time and VAST knowledge. He just needs our help to expose the issues so he knows what to correct.

We understand your frustration and greatly appreciate your expertise and advice. You help make this framework better.

I think the next release will resolve most of what has been discovered (mainly from you - but others as well) in 2.0
I truly hope you stick with this... We all need someone at your level to help ABM evolve - skilled resources are in short supply.

Thanks again for your support.

 

[stanmiller]

I understand. But I hope you understand too ABMaterial is huge, incredible complicated with all the types of browsers and devices and I'm a one-man-team that does make this for free for the community, writing it in 4 completely different language syntaxes at nighttime. And all you have to do is write BASIC. If you don't have the patience and expect with all those wishes the next version will be bug free, I'm afraid you're better off searching for an expensive commercial product (and keep your fingers crossed, because they aren't bug free either).

I appreciate the complexity of your endeavor.

However, don't discount the submissions (298+) in the ABM Feedback database that represent hundreds of man hours of contributions to ABM by the B4J community. Our time is valuable. Through the community you've had access to diverse hardware, use cases, and network connection scenarios. The ABM project has benefited from these generous contributions.

Over the past year, not only has the ABM project improved for the community but also for your own business opportunities where you might use the framework.

Our group doesn't have specific deadline for an ABM project. However we can't spend anymore time with ABM v2.00 exploring possibilities when the ABM analyzer throws random exceptions and crashes the app.

 

[stanmiller]

I am not really concerned with ABM current issues. The one man team (of 1) will get there, with his limited time and VAST knowledge. He just needs our help to expose the issues so he knows what to correct.

We understand your frustration and greatly appreciate your expertise and advice. You help make this framework better.

I think the next release will resolve most of what has been discovered (mainly from you - but others as well) in 2.0
I truly hope you stick with this... We all need someone at your level to help ABM evolve - skilled resources are in short supply.

Thanks again for your support.

We're still interested in ABM, but over budget with the current build. If AB were to ever make ABM open source (like Materilize CSS on which it largely depends) things could move along faster. No doubt there are other multilingual developers lurking on these boards and who could contribute code fixes.

 

[Harris]

Our group doesn't have specific deadline for an ABM project. However we can't spend anymore time with ABM v2.00 exploring possibilities when the ABM analyzer throws random exceptions and crashes the app

Hummm, I don't experience this... My app doesn't throw random exceptions or crash in 2.0 (thank heavens) - likely not near as complex as yours.
I expect a patch is on its' way soonest. He hears you, me and everyone else that chimes in. I still can't believe the effort he put in to resolve my (little) connection issue.

ab hates when things don't work right - he feels he is letting his followers down. No one (ab) needs additional stress; just calm and insightful encouragement to overcome the issues at present. You and I both know that try as we might (code and debug intensively), something unforeseen slips thru and some smart user will bring it tumbling down. The nature of the beast.

As per Open Source.... that's interesting... Would we ask Erel to Open Source (free - built on java) B4J ?

In a very short time, all this will be irrelevant.

 

[alwaysbusy]

@stanmiller It is clear you are not happy with ABMaterial so I suggest you just move on to something else. No need to get frustrated, life is to short

2.00 was 2.00 just because internally A LOT was rewritten for future features (Designer, B4JS) and yes, this introduced some new problems. And the 'random' crashes where really not that random at all. We've been able to identify where they came from (e.g. I don't use '_' in B4J on my 28" screen, so I missed it). I'm considering removing all the ABMCodeLabels in the demo (as it is hard to keep them up to date) and as we are all programmers, you should be able to read the source code anyway. And with every release, I try to keep at least the demo code up to date. I think because we use ABMaterial within our company ourselves, we can identify problems faster than any other framework.

Open Source brings a whole new kind of hell. Materialize CSS has currently 1000+ issues and 250+ pull requests. And maybe ABMaterial started based on it a year ago, since then it relies on a lot more other libraries (each with its own perks) and Materialize CSS is maybe only 10% of ABMaterial nowadays. E.g. CSS is a pain in the a$$. One makes a change to solve ones personal problem, but if you are not carefull, introduce a 100 for others.

If one thing could be changed, it may be another type of release mode: one or two STABLE versions per year, and a BETA group with faster releases that has all the latest features, but is for people who are prepared to live with the typical problems a beta brings.

Taking a back seat and do nothing will definitely not solve anything. I can build-in a setting to disable the ABM Analyser if you want, but then YOU will have tell in you app with the page.needs... properties which components you use in your page, read console logs in the browser to see which page.needs... you missed, and won't be able to use new features like B4JS in the future.

I for one am tremendously happy with the the support and help I receive from everyone who uses ABMaterial. Without this input and feedback I don't believe this framework would be possible. So maybe I don't say it enough: a big THANKS to all!