B4J Library [ABMaterial] Creating ABMModalSheets at runtime: Part 2

Mashiane · Sep 6, 2018

The next attempt is to create a container and add it to the modal sheet. The ABMRange and ABMSlider, dont have a title, so do make them appear they have, I have added them to a container. I also explored adding items to the ABMCombo. We also want to save the entered pattern.

'lets save the patternLock whenever it changes. We do this with .SetValue, that assigns the returned value of the PatternLock

B4X:

Sub simplelogin1ptn_Changed(target As String, value As String)
    mymdl1.Setvalue("ptn",value)
End Sub

We can also do this with the fileinput component and save the value to a class structure.. This saves the file name returned by the control.

B4X:

Sub simplelogin1upl_Changed(value As String)
    mymdl1.SetValue("upl",value)
End Sub

Let's also add items to the combo box, assuming they are coming from a database. These can be defined as a list of map records specifying the id and title fields.

B4X:

'set items for the combobox
    Dim lst As List
    lst.Initialize
    lst.add(CreateMap("id":-1,"title":""))
    lst.add(CreateMap("id":1,"title":"A"))
    lst.add(CreateMap("id":2,"title":"B"))
    lst.add(CreateMap("id":3,"title":"C"))
    lst.add(CreateMap("id":4,"title":"D"))
    lst.add(CreateMap("id":5,"title":"E"))
    mymdl1.SetCombo("cbo","id","title",lst,"-1")

We add an ABMSlider and an ABMRange control to our modalsheet.

B4X:

mymdl1.AddRange("range1","ABMRange",6,1,0,0,0,12,6,6).SetPadding("range1",0,0,10,10)
    mymdl1.AddSlider("slider1",6,2,0,0,0,12,6,6).SetPadding("slider1",0,0,20,20)

After a couple of changes, creating a container component that sits inside another is rather easy, this is with the slider and range components that we want to have titles. One should note that with these controls the padding becomes a little tricky due to CenterInPage when adding rows. To do this we can define as MashForm, add a range / slider to it then add this MashForm into another MashForm.

B4X:

Dim mfrange As MashForm
    mfrange.Initialize(page,"msrange","ABMRange")
    mfrange.CenterInPage = False
    mfrange.AddRange("range","ABMRange",2,1,0,0,0,12,12,12).SetPadding("range",0,0,10,10)
    
    Dim crange As ABMContainer = mfrange.BuildContainer("Loan Amount")
    mymdl1.AddContainer("range",crange,7,1,0,0,0,12,6,6).SetPadding("range",0,0,10,10)

I have defined a mfrange as a MashForm, I indicate that everything in it should not be CenteredInPage i.e. CenterInPage = false, then I add a range control to it.

The next step is defining the container that will house the mfrange MashForm. The ABMRange control is being added at R2C1 of the form / container. as we want some space between the container title and the control. I then build the container by calling BuildContainer with title 'Loan Amount" and then add this container to the parent modal sheet.

The same is with the slider..

B4X:

Dim mfslider As MashForm
    mfslider.Initialize(page,"msslider","ABMSlider")
    mfslider.CenterInPage = False
    mfslider.AddSlider("slider",2,1,0,0,0,12,12,12).SetPadding("slider",0,0,10,10)
    
    Dim cslider As ABMContainer = mfslider.BuildContainer("Payment Period")
    mymdl1.AddContainer("slider",cslider,7,2,0,0,0,12,6,6)
    mymdl1.SetPadding("slider",0,0,20,20)

From this above, it is clear that for the MashForm class to work, it needs to be flexible enough to build containers that can he housed by other components.

In Part 3, we will look at creating more complex components using containers.

Mashiane · Sep 7, 2018

The above two methods to add a titled range / slider have shortcuts. These are

B4X:

mymdl1.AddRange1("loanamount","Loan Amount",5,50,0,100,5,True,8,1,0,0,0,12,6,6)
    mymdl1.AddSlider1("paymentperiod","Payment Period",6,0,100,2,True,8,2,0,0,0,12,6,6)

As a result, adding them like this ensures that their values are returned as part of the map when the form results are being read.

The final code for the new modal sheet is..

B4X:

Sub btnMdl1_Clicked(Target As String)
    mymdl1.Initialize(page,"simplelogin1","Additional Modal").SetModalSheet(theme,ABM.MODALSHEET_SIZE_FULL,ABM.MODALSHEET_TYPE_NORMAL,False,"id","users")
    mymdl1.IsTextSelectable = False
    mymdl1.IsDismissible = False
    mymdl1.ForceLeft = True
    mymdl1.CenterHeading = True
    mymdl1.WhiteHeading = True
    mymdl1.UseControlPrefixes = False
    'mymdl1.CenterInPage = False
    mymdl1.AddImage("img","Image","../images/sponge.png",1,2,0,0,0,12,3,3).SetImageFixedSize("img",100,100).SetImage("img", True, False,False,1,False,ABM.ZDEPTH_2).SetPadding("img",0,0,10,0)
    mymdl1.AddFileInput("upl","Select Profile Picture",1,3,0,0,0,12,3,3).SetFileInput("upl",ABM.VISIBILITY_HIDE_ALL,True)
    mymdl1.AddSignaturePad("sig",1,4,0,0,0,3,3,3,True).SetSignaturePad("sig",100,200,ABM.COLOR_WHITE,ABM.INTENSITY_NORMAL,ABM.COLOR_BLACK,ABM.INTENSITY_NORMAL,ABM.ZDEPTH_1)
    mymdl1.AddPatternLock("ptn",3,1,5,0,0,0,3,3,3,True)
    mymdl1.AddPassword("password","Password","",2,1,0,0,0,12,6,6,True).AddEmail("email","Email","",2,2,0,0,0,12,6,6,True)
    mymdl1.AddTelephone("telephone","Telephone","",3,1,0,0,0,12,6,6,True).AddWebsite("website","Website","",3,2,0,0,0,12,6,6,True)
    mymdl1.AddCheckBox("chk","ABMCheckBox","1",4,1,0,0,0,12,6,6).SetPadding("chk",0,0,10,0)
    mymdl1.AddSwitch("swt","ABMSwitch","0",4,2,0,0,0,12,6,6).SetPadding("swt",0,0,10,0)
    mymdl1.AddComboBox("cbo","ABMComboBox","",5,1,0,0,0,12,6,6,True).AddRadioGroup("rad","ABMRadioGroup","",5,2,0,0,0,12,6,6)
    mymdl1.AddRadioGroupItem("rad","Male",True,True).AddRadioGroupItem("rad","Female", True,True)
  
    'set items for the combobox
    Dim lst As List
    lst.Initialize
    lst.add(CreateMap("id":-1,"title":""))
    lst.add(CreateMap("id":1,"title":"A"))
    lst.add(CreateMap("id":2,"title":"B"))
    lst.add(CreateMap("id":3,"title":"C"))
    lst.add(CreateMap("id":4,"title":"D"))
    lst.add(CreateMap("id":5,"title":"E"))
    mymdl1.SetCombo("cbo","id","title",lst,"-1")
  
    mymdl1.AddRange("range1",6,1,0,0,0,12,6,6).SetPadding("range1",0,0,10,10)
    mymdl1.AddSlider("slider1",6,2,0,0,0,12,6,6).SetPadding("slider1",0,0,20,20)
  
    Dim mfrange As MashForm
    mfrange.Initialize(page,"range","ABMRange")
    mfrange.CenterInPage = False
    mfrange.AddRange("range",2,1,0,0,0,12,12,12).SetPadding("range",0,0,10,10) 
    Dim crange As ABMContainer = mfrange.BuildContainer("Loan Amount")
    mymdl1.AddContainer(mfrange.id,crange,7,1,0,0,0,12,6,6).SetPadding(mfrange.id,0,0,10,10)

    Dim mfslider As MashForm
    mfslider.Initialize(page,"slider","ABMSlider")
    mfslider.CenterInPage = False
    mfslider.AddSlider("slider",2,1,0,0,0,12,12,12).SetPadding("slider",0,0,10,10)
    Dim cslider As ABMContainer = mfslider.BuildContainer("Payment Period")
    mymdl1.AddContainer(mfslider.id,cslider,7,2,0,0,0,12,6,6).SetPadding(mfslider.id,0,0,20,20)
  
    mymdl1.AddRange1("loanamount","Loan Amount",5,50,0,100,5,True,8,1,0,0,0,12,6,6)
    mymdl1.AddSlider1("paymentperiod","Payment Period",6,0,100,2,True,8,2,0,0,0,12,6,6)
  

  
    'mymdl1.AddEditor("editor","Editor","Mashy",6,1,1,1,1,11,11,11,False)
    'mymdl1.AddButton("raised","Raised Button",7,1,0,0,0,4,4,4)
    'mymdl1.AddFlatButton("flat","Flat Button",7,2,0,0,0,4,4,4).SetButton("flat","","","",ABM.BUTTONSIZE_LARGE,True)
    'mymdl1.AddFloatingButton("floating","mdi-editor-mode-edit",7,3,0,0,0,4,4,4)
    mymdl1.show
End Sub

The Initialize method for the MashForm has been shortedned. This is due to the fact this the class should now work with both ABMContainers / ABMModalSheets components.

If a modal sheet will be used, ensure the .SetModalSheet method is called for the class. When building ABMContainers, the .BuildContainer method should be used to build the container based on the items added to the MashForm and this should be assigned to an ABMContainer component.

Returned map

B4X:

{
    "": "",
    "slider": com.ab.abmaterial.ABMContainer@5b239d7d,
    "img": "Image",
    "website": "",
    "range1": "0.0-100.0",
    "chk": false,
    "range": com.ab.abmaterial.ABMContainer@6572421,
    "loanamount": "5.0-50.0",
    "telephone": "",
    "ptn": null,
    "upl": "",
    "sig": "id.jpg",
    "paymentperiod": 6,
    "swt": false,
    "cbo": "-1",
    "password": "",
    "rad": 0,
    "email": "",
    "slider1": 0
}

B4J Library [ABMaterial] Creating ABMModalSheets at runtime: Part 2

Attachments

Mashiane

Expert

Mashiane

Expert

Attachments

Similar Threads