B4J Question [ABMaterial] how to refine at best control graphic?

[rbirago]

In these two months I've started to study ABMaterial and really I noticed that is well designed. One of the tricky questions for a developer used to build B4A/B4J forms is the flexible concept of a web form.
Designing a well-responsive form is not so easy. On the other side a well refined look is very important to give a professional feel to an app, so some graphic details are essential.
From my trials I show these three arguments:

• Sizing of a DatePicker
• Sizing of a Combo
• Put two labels to the right of the same row

Look at this sample:

I used as base Master Template Project, adding some lines:

Sub ConnectPage()


    ' See the ABMPageTemplate for the tutorial!

    
    ABMShared.ConnectNavigationBar(page)
    ' add header
    page.Cell(1,1).AddComponent(ABMShared.BuildLabel(page,  "hdr1",  "About / Help Landing Page", ABM.SIZE_H3, "",0,""))
    page.Cell(3,1).AddComponent(ABMShared.BuildLabel(page,  "hdr2",  "Not much to see here... Click on 'Template Page' in Navigation Bar!", ABM.SIZE_H5, "",0,""))
    page.Cell(5,1).AddComponent(ABMShared.BuildLabel(page,  "hdr3",  "NOTE: Currently, Only About and Template In The Nav Bar Expose Any Pages!", ABM.SIZE_H5, "lbltheme2",0,""))
    
    'test
    Dim dpDate As ABMDateTimePicker
    Dim NewDate As Long = DateTime.now
    dpDate.Initializewithsize(page,"date",ABM.DATETIMEPICKER_TYPE_DATE,NewDate,"MyDate",0,0,0,30,30,30,"")
    dpDate.CancelText = "ignora"
    dpDate.ClearText = "reset"
    dpDate.PickText = "ok"
    dpDate.TodayText = "oggi"
    dpDate.Language = "it"
    dpDate.ReturnDateFormat = "DD/MM/YYYY"
    dpDate.ReturnTimeFormat = ""
    dpDate.FirstDayOfWeek = 0
    page.Cell(6,1).AddComponent(dpDate)
    Dim combo1 As ABMCombo
    combo1.Initializewithsize(page,"combo","MyCombo",250,0,0,0,300,300,300,"")
    combo1.AddItem("elem1","first element",BuildLb(page,"lbelem1","abc"))
    combo1.AddItem("elem2","1234567890 1234567890 1234567890 1234567890 1234567890",BuildLb(page,"lbelem2","1234567890 1234567890 1234567890 1234567890 1234567890 "))
    page.Cell(6,2).AddComponent(combo1)
    Dim lbr1 As ABMLabel = BuildLb(page,"lbr1","lb 1")
    Dim lbr2 As ABMLabel = BuildLb(page,"lbr2","lb 2")
    page.Cell(7,1).AddComponent(lbr1)
    page.Cell(7,2).AddComponent(lbr2)
    
    
    page.Refresh ' IMPORTANT
 
    ' NEW, because we use ShowLoaderType=ABM.LOADER_TYPE_MANUAL
    page.FinishedLoading 'IMPORTANT   
    
End Sub

public Sub BuildLb(apage As ABMPage, aIdField As String, aTitle As String) As ABMLabel
    Dim label1 As ABMLabel
    label1.Initialize(apage,aIdField,aTitle,ABM.SIZE_PARAGRAPH,False,"")
    Return label1
End Sub

public Sub BuildPage()
    ' initialize the theme
    BuildTheme
    page.InitializeWithTheme(Name, "/ws/" & ABMShared.AppName & "/" & Name, False, ABMShared.SessionMaxInactiveIntervalSeconds, theme)
    
    ' show the spinning cicles while page is loading....
    page.ShowLoader=True
    page.PageHTMLName = "index.html"
    page.PageTitle = ""  ' You can also set this as a property in "ABMShared.BuildNavigationBar" below...
    
    '  Google SEO stuff...
    page.PageDescription = ""
    page.PageKeywords = ""
    page.PageSiteMapPriority = ""
    page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_YEARLY
        
    ' faint green dot (on title bar) when connected - red when not connected with web socket
    page.ShowConnectedIndicator = True
    
    ABMShared.BuildNavigationBar(page, "My {B} About Page {/B} ", "../images/logo.png",  "",  "",  "")
    
    page.AddRowsM( 5, True, 0, 10, "").AddCellsOSMP( 1, 0, 0, 0, 12, 12, 12, 0,  0, 0, 0, "")

    page.AddRows(1,True,"").AddCellsOSMP(2,0,0,0,6,6,6,0,0,0,0,"")        '6=DatePicker and combo
    page.AddRows(1,True,"").AddCellsOSMP(2,8,8,8,2,2,2,0,0,0,0,"") '7=two labels right

    'IMPORTANT - Build the Grid before you start adding components ( with ConnectPage()!!! )
    page.BuildGrid
    
End Sub

As you can see:

• the DatePicker underline is longer than needed by the content of the field (the date)
• the Combo shows only 20 crts (the element contains 40 crts
• the two labels should be on the same line, but don't

I know that these arguments may sound as "silly details" but, as I wrote, the look is important to build a professional result and really I was not able to solve these details!!
Is there someone that could help me?
thanks
Roberto
p.s. : often I have found on the forum samples that shows the lines to build the controls, but not the themes lines: I think that should be important to show also themes details

 

[alwaysbusy]

Hi Roberto,

You have to try to think in '12-grid'. Google (and also Bootstrap for example) have invented this system to make it easier for developers to write responsive webapps.
That system does have limitations. E.g. you can not make the underlining of the date field fit the length of the text. It will fit a 'cell'. The idea behind it is that if you have multiple inputs, they all fit symmetrical if one is on a phone for example without having to worry about the cell wrapping.

So for example for your grid, I would write it like this:

' small screens 12 + 12 (wrapping the second 12)
' medium screens 3 + 9 (add up to 12)
' desktop screens 3 + 9 (add up to 12)
page.AddRows(1,True,"").AddCellsOSMP(1,0,0,0,12,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0,12,9,9,0,0,0,0,"")        '6=DatePicker and combo
' on all screens first an offset of 8 cells, then 2 cells for label 1 and again two cells (without offset!) for label 2 = together 12 cells
page.AddRows(1,True,"").AddCellsOSMP(1,8,8,8,2,2,2,0,0,0,0,"").AddCellsOSMP(1,0,0,0,2,2,2,0,0,0,0,"") '7=two labels right

In you code for the labels you have defined offset 8 + 2 cells + offset 8 + 2 cells = 20 cells which is > 12 cells so it wraps

I would not use the WithSize Initialization. (Note that also here, it uses the 12-grid system so 0,0,0,30,30,30 or 0,0,0,300,300,300 does not do anything as the numbers need to be <= 12.

A valid WithSize would be 0,0,0,12,12,12, which would be equal to 100%, or not using the WithSize initialize.
Half of the cell width would be 0,0,0,6,6,6. (12 / 2)
A third of the cell width would be 0,0,0,4,4,4 (12 / 3)
A forth of the cell witdh would be 0,0,0,3,3,3 (12 / 4)

A for the text not fitting the combo. This is because the combo is not able to fit enough cells. That is why in my example I use 12 for small and 9 for medium/big screens. Note in this case if I have another input 'Name', it will nicely be the same input length as he date, hence the symmetrical part Google wants.

Big Screen:

Medium screen (e.g. tablet):

Small screen (notice the wrap and symmetry):

I know that these arguments may sound as "silly details" but, as I wrote, the look is important to build a professional result

Not silly at all! I too take great pride in my screens looking professional.


It needs getting used to to think in that '12-cell' pattern. But once mastered, it saves you a lot of time if you do accept its limitations that come with it.

Alwaysbusy

 

[rbirago]

Thank you very much for the quick reply. These suggestions are precious. I think that explanations like this may help all developers to understand how to use correctly this framework. I will test these instructions.
A little suggestion: with some more explanations about properties and methods inside the library some concepts should be clearer (i.e. I didn't realize that SIZE was the number of cells, not the width in pixels).
Thank you for the help.
Roberto

 

[Harris]

ABM.SIZE_H3,

This SIZE property is the size of the text.
I am happy to see you are embracing this framework - and soon you will be able to teach us a thing or two!

Yes, ABM is a beast but, once you get it - you shall see what a gem and gift it is.
Most of the fundamentals, I attempted to explain in the tutorials - but many are not blatantly obvious to a newcomer.

@alwaysbusy demonstrated the importance of the 12 cell grid above, and how it automatically (for the most part) provides responsiveness across device types.
There are tools within your ABM package that will visually show your grid layout for each device. This will help you understand the different cell size values - as you apply them.

Thanks