B4J Question [ABMaterial] Beginners questions

[MathiasM]

Hello

I'm just starting out with ABMaterial, and it's very nice to work with. Altough I have a little problem with grids (Who would've tought)

I'm trying to create a simple login page, in the style of Unifi (or thousands of other applications), see example: https://www.servethehome.com/wp-con...i-UniFi-Controller-Docker-Container-Login.jpg

I think I got the grip on grids, so I created a grid with 4 rows (image, username input, password input, and login button) in a container. And then put that container on a page in a center cell.
I tried to accomplish this center cell by creating 3 rows:
Row 1: pagewide (1 cell of 12 units long)
Row 2: 3 cells of 4 units long
Row 3: also pagewide

And then put that container in the second cell on row 2.

Here is my code:

' adding a navigation bar
   ' ABMShared.BuildNavigationBar(page, "My Page","../images/logo.png", "", "", "")
 
   ' create the login container grid
   Dim loginContainer As ABMContainer
   loginContainer.Initialize(page, "containerlogin", "")
   loginContainer.AddRows(4, True, "").AddCells12(1, "")
   loginContainer.BuildGrid
 
   Dim usernameInput As ABMInput
   usernameInput.Initialize(page, "txtusername", ABM.INPUT_TEXT, "Username", False, "")
   loginContainer.Cell(2,1).AddComponent(usernameInput)
 
   Dim passwordInput As ABMInput
   passwordInput.Initialize(page, "txtpassword", ABM.INPUT_PASSWORD, "Password", False, "")
   loginContainer.Cell(3,1).AddComponent(passwordInput)
 
   Dim loginButton As ABMButton
   loginButton.InitializeRaised(page, "btnlogin", "", "", "Login", "")
   loginButton.Size = "100%"
   loginContainer.Cell(4,1).AddComponent(loginButton)
      
   ' create the page grid
   page.AddRows(1,True,"").AddCells12(1,"")
   page.AddRows(1,True,"").AddCellsOS(3,0,0,0,4,4,4,"")
   page.AddRows(1,True,"").AddCells12(1,"")
   page.BuildGrid ' IMPORTANT!
 
   page.Cell(2,2).AddComponent(loginContainer)
 
   page.BuildGrid

All fun and games, the login form is showed. But there are 3 problems:

While I explicitaly not turned on the naviagtion bar with the BuildNavigationBar sub. It seems that the bar is actually there on the left, while empty.

In the remaining space on the right, the container is not centered. It looks like the cells above and left of the container have no width.

I tried setting the loginButton. Size to 100%, as I hoped it would stretch the button width to the width of the cell. Actually I hoped it would automatically take the width of the cell it is in (like the inputs do). What is the right way to do this? Or even better, where can I find documentation on this?

This is the result I'm getting: https://i.imgur.com/bbr6auX.png
Don't mind the red Show button, that is a Firefox plugin for showing password fields, is unrelated to ABMaterial code.

Thanks a bunch!

 

[Cableguy]

Why not use a ModalSheet for the LogIn?
By using it you could get the exact same visual as your image example.

For the navigationbar, you need to delete or just comment out both BuildNavigationBar and ConnectNavigationBar in BuildPage and ConnectPage.

For Documentation… well, you have all the Code Projects that came with the Lib, you have @Harris [ABMaterial] for Dummies and you also have a almost complete guide to Modalsheets Theming in my [ABMaterial] Theming the Framework.

 

[MathiasM]

Thanks for your reply Cableguy.
I could use a ModalSheet, but that won't solve my problem, as I want to understand how cells are working. I tried the following: Fill every cell with a cellwide button, and use no buttons, the visual difference is big.

It seems that cells that contain no element have no width, how can I force them to keep their width?

My page with 'filling':

Without filling:

How can I force 2,1 and 2,3 to retain their 33% width? So that the login container is centered without components next to it to force it?
@alwaysbusy Do you have an idea?

Thanks a bunch for your help

 

[alwaysbusy]

For the width, you have to use offset (params 2,3 and 4):

page.AddRows(1,True,"").AddCellsOS(3,4,4,4,4,4,4,"")

As ABM is responsive, you may want to adjust this to something like:

page.AddRows(1,True,"").AddCellsOS(3,1,2,4,10,8,4,"")

TIP: Use the GridBuilder in the zip to help learning how grids work.

 

[MathiasM]

Thanks a bunch @alwaysbusy. I must confess that I had no idea what those ofset and size parameters actually did. But now, after some testing and resizing the browser screen, it's brilliant.

I did use the GridBuilder indeed, and now used it again, but it's giving me weird results with AddCellOS.
I adjusted your last line to this:

page.AddRows(1,True,"").AddCellsOS(3,0,2,4,12,8,4,"")

And that is showing me this in GridBuilder:

While those columns should be clearly next to eachother, not above?

Gridbuilder always shows them above eachother, regardless of the size (Phone, Tablet, Desktop). Or is my thinking wrong?

 

[alwaysbusy]

Seems correct. O = offset, X = width

Phone:

3 cells with settings 0,12: X X X X X X X X X X X X (sum = 12)
makes: X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
will wrap to:
X X X X X X X X X X X X (12 + next 12 > 12 so wrap)
X X X X X X X X X X X X (12 + next 12 > 12 so wrap)
X X X X X X X X X X X X

Tablet:

3 cells with settings 2, 8: O O X X X X X X X X (sum = 10)
Makes: O O X X X X X X X X O O X X X X X X X X O O X X X X X X X X
will wrap to:
O O X X X X X X X X (10 + next 10 > 12 so wrap)
O O X X X X X X X X (10 + next 10 > 12 so wrap)
O O X X X X X X X X

Desktop:

3 cells with settings 4,4: O O O O X X X X (sum = 8)
Makes: O O O O X X X X O O O O X X X X O O O O X X X X
will wrap to:
O O O O X X X X (8 + next 8 > 12 so wrap)
O O O O X X X X (8 + next 8 > 12 so wrap)
O O O O X X X X

 

[alwaysbusy]

Corrected the last post (forgot to finish the Makes lines)

 

[MathiasM]

You're totally right @alwaysbusy. My thinking was indeed wrong.
Now I get the idea of offset and I fixed my problem even better; Instead of trying to use 3 columns, I just created 1 column with the right offset.

page.AddRows(1,True,"").AddCellsOS(1,0,2,4,12,8,4,"")

And the GridBuilders shows really nice what the outcome is on 3 types of devices. I'm really amazed by your work. Very clever.