B4J Question [ABMaterial] Beginners questions

Discussion in 'B4J Questions' started by MathiasM, May 23, 2019.

  1. MathiasM

    MathiasM Member Licensed User

    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:

    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(
    4True"").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!
     
  2. Cableguy

    Cableguy Expert Licensed User

    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.
     
  3. MathiasM

    MathiasM Member Licensed User

    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':
    [​IMG]
    Without filling:
    [​IMG]


    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
     
  4. alwaysbusy

    alwaysbusy Expert Licensed User

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

    Code:
    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:
    Code:
    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 likes this.
  5. MathiasM

    MathiasM Member Licensed User

    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:

    Code:
    page.AddRows(1,True,"").AddCellsOS(3,0,2,4,12,8,4,"")
    And that is showing me this in GridBuilder:
    [​IMG]

    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?
     
  6. alwaysbusy

    alwaysbusy Expert Licensed User

    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
     
    Last edited: May 24, 2019
    MathiasM likes this.
  7. alwaysbusy

    alwaysbusy Expert Licensed User

    Corrected the last post (forgot to finish the Makes lines)
     
  8. MathiasM

    MathiasM Member Licensed User

    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.

    Code:
    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.
     
    Harris likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice