B4J Tutorial SithasoDaisy: Creating Dialog Forms with the Abstract Designer

Good day

In the SithasoDaisy download package, you get a MySQL Crud App for a simple expense tracking app. As a showcase, there is a b4j layout named expenseCategory

1688029549865.png



This layout has been built to stand alone as it's injected inside a modal during the BuildPage page process.

B4X:
'start building the page
private Sub BuildPage
    banano.LoadLayout(app.PageViewer, "expensecategorieslayout")
    banano.LoadLayout(mdlExpense.FormHere, "expenseCategory")
    'apply master data source settings
    app.SetBackEnd(dsExpense)
    '
    BuildTable
    '
    mounted
End Sub


We first load the expensecategorieslayout into the pageViewer, then, inside the form of the modal, we load this layout. This layout uses a grid approach as components are placed inside rows and columns. You can get a brief about this here.


A column can span 12 spaces i.e Size, however you can indicate the size to take for each of the devices.


1688030037500.png


In the case below, we are saying, the size across all devices, should be 6 i.e. half of the screen.


1688030193341.png


The end result of this form is...

1688030948258.png


When the app is being ran, you will explore and learn about creating this type of table. This has badged and color coded text (green & red)
1688031094483.png


Also


1688031179048.png


Adding Expenses & Loading combo boxes from Database records

1688031338866.png



Etc

Happy Coding.
 
Top