B4J Tutorial [Web][SithasoDaisy5] Let's create some layouts.

Hi Fam

In this post we will look at creating some layouts...

SithasoDaisy5 is available for free here

Here we go.

 

[Mashiane]

An Empty Gradient Page

For this to work, the pageview in the baselayout should just be basic without any padding.

We will use gradient properties in the property box of the SDUI5Page component.

These properties also exist on the SDUI5Container.

For your page to fill the complete screen space, please also set these settings on the SDUI5Page.

 

[Mashiane]

A page with a full image

Source Code

With the fullpage, fullscreen and resize pageview on, we can set the background image of a page.

 

[Mashiane]

Let's add a Sign In Modal to our Layout

Source Code

Let's look at the abstract designer layout...

Schema

1. SDUI5Page
1.1 SDUI5Modal
1.1.1 SDUIRow
1.1.1.1 SDUIColumn
1.1.1.1.1 SDUITextBox - email
1.1.1.2 SDUIColumn
1.1.1.2.1 SDUITextBox - password

 

[Mashiane]

Let's add some validation to the Modal..

We will check if the email and password are not blank.

If blank, the focus will be put to the input element

Private Sub mdlLogin_Yes_Click (e As BANanoEvent)
    e.PreventDefault
    If txtEmailAddress.IsBlank Then Return
    If txtPassword.IsBlank Then Return
    mdlLogin.YesLoading = True
End Sub

 

[Mashiane]

Additional Validations

Private Sub mdlLogin_Yes_Click (e As BANanoEvent)
    e.PreventDefault
    If txtServer.IsBlank Then Return
    If txtServer.IsValidUrl = False Then Return
    If txtEmailAddress.IsBlank Then Return
    If txtEmailAddress.IsValidEmail = False Then Return
    If txtPassword.IsBlank Then Return
    If txtPassword.IsMinLength(12) = False Then Return
    If txtPassword.IsStrongPassword = False Then Return
    mdlLogin.YesLoading = True
    Sleep(3000)
    mdlLogin.YesLoading = False
End Sub

 

[Mashiane]

Adding Remember Me (AES Encrypted)

Remember Me is a functionality that saves the current login details of the user to localstorage and then retrieves them when a user wants to login again.

Click Login... (save details to localstorage is Remember Me is active)

Private Sub mdlLogin_Yes_Click (e As BANanoEvent)
    e.PreventDefault
    If txtServer.IsBlank Then Return
    If txtServer.IsValidUrl = False Then Return
    If txtEmailAddress.IsBlank Then Return
    If txtEmailAddress.IsValidEmail = False Then Return
    If txtPassword.IsBlank Then Return
    If txtPassword.IsMinLength(12) = False Then Return
    If txtPassword.IsStrongPassword = False Then Return
    'save the details to localstorage
    If chkRememberMe.Checked Then
        Dim srememberKey As String = $"${Main.appname}remember"$
        Dim rmap As Map = CreateMap()
        rmap.put("email", txtEmailAddress.Value)
        rmap.put("pwd", txtPassword.Value)
        rmap.put("server", txtServer.Value) 
        'convert to json
        Dim sremember As String = BANano.ToJson(rmap)
        'encrypt using api key
        Dim sout As String = BANano.Await(app.UI.AESEncrypt(sremember, Main.APIKey))
        'store encrypted data
        BANano.SetLocalStorage2(srememberKey, sout)
    End If
    
    mdlLogin.YesLoading = True
    Sleep(3000)
    mdlLogin.YesLoading = False
End Sub

Show Page...

When a page is shown, the localstorage is read and decrypted and input controls updated

Private Sub BuildPage
    'define the rememberkey data for app
    Dim srememberKey As String = $"${Main.appname}remember"$
    'read data from local storage
    Dim sremember As String = BANano.GetLocalStorage2(srememberKey)
    'convert to string, this also deals with null
    sremember = app.UI.CStr(sremember)
    'there is data that was saved
    If sremember <> "" Then
        'decrypt the data
        Dim sout As String = BANano.Await(app.UI.AESDecrypt(sremember, Main.APIKey))
        Dim rmap As Map = BANano.FromJson(sout)
        chkRememberMe.Checked = True
        txtEmailAddress.Value = rmap.Get("email")
        txtPassword.Value = rmap.Get("pwd")
        txtServer.Value = rmap.Get("server")
    End If
End Sub