B4J Tutorial [Websites] Create a Login page with UOENow+BANano

Hi

The Creative Tim Now UI Kit comes with 3 example pages. By using the UOENow library we have tried to replicate the features to come as close to the provided examples as much as possible.

Download UOENow

A Profile Page was created
A Landing Page was also created

Now we look at the login page. This will ONLY have a header section that has a navigation bar and a footer. The footer will be added to the header with a background image to fill the complete area of the header.

UOENowExamples.png


These examples have been included with the latest version of UOENow and can be accessed at the bottom of the page by selecting any of the images / clicking relevant buttons.

The complete login page looks like the image below.

UOENowLogin.png


This threads completes the example pages demos provided.
 

Mashiane

Expert
Licensed User
Longtime User
As noted above, the login input boxes are not having any borders and they look bigger. This is because these have been set to remove the borders and that a 'large' class attribute has also been added to them. The footer also has been added to the header and thus transparent.

As usual, somewhere on the Init method of pgloginpage code module, we have code to finalize the setup.

B4X:
'header
    Page.Header.SetFilterColor("orange")
    Page.Header.AddParallax1(0,0,"","./assets/login.jpg","")
    '
    Page.Header.AddContainer(0,0,HeadingSection)
    ' we also add the footer to the header
    Page.Header.AddFooter(0,0,Footer)
    Page.Content.Visible = False
    Page.Footer.visible = False
    '
    '
    Page.LoginPage
    Page.create
    'remove the border of the first name & lastname
    App.InputNoBorder(Array As String("fname","lname"))
    'make the input large for the firstname
    App.InputLarge(Array As String("fname","lname"))

A filter for the header is added to be orange and a background image is added. We then add a container with the login content and then add a footer to the header. We then hide the page and actual footer for the page by setting .visible = false. This is because automatically, the footer and content containers are created for each page.

We then add a class to the body of the page 'login-page', create the page html structure by injecting the body using BANano's sethtml method. For the existing input controls we remove the border and then call the method to make them 'larger'.
 

Mashiane

Expert
Licensed User
Longtime User
B4X:
Sub HeadingSection As UOENowContainer
    Dim div As UOENowContainer
    div.Initialize(App,"",False,"","content")
    
    Dim co As UOENowContainer
    co.Initialize(App,"",True,"","")
    
    Dim col As UOENowContainer
    col.Initialize(App,"",False,"","col-md-4 ml-auto mr-auto")
    
    'create a card
    Dim card As UOENowCard
    card.Initialize(App,"lcard","","card-login card-plain")
    'center the card header content
    card.Header.TextCenter
    ' add the company logo
    card.Header.AddLogoContainer(0,0,"","./assets/now-logo.png","")
    ' add firstname
    card.Body.AddTextBox(0,0,"fname","","First Name","now-ui-icons users_circle-08","","","","")
    ' add last name
    card.Body.AddTextBox(0,0,"lname","","Last Name","now-ui-icons text_caps-small","","","","")
    'center the footer
    card.Footer.TextCenter
    card.Footer.AddAnchorButton(0,0,"getstarted","Get Started","","#pablo","",App.EnumButtonSize.large,False,True,App.EnumThemes.Primary,"btn-block")
    'add create account, the left should float to the left
    Dim ca As UOENowContainer
    ca.Initialize(App,"",False,"","")
    ca.PullLeft
    Dim cal As String = ca.GetAnchor("","Create Account","#pablo","",False,"","link")
    ca.AddH6(0,0,"",cal,"","")
    card.Footer.AddContainer(0,0,ca)
    'add get help
    Dim ca As UOENowContainer
    ca.Initialize(App,"",False,"","")
    ca.PullRight
    Dim cal As String = ca.GetAnchor("","Need Help?","#pablo","",False,"","link")
    ca.AddH6(0,0,"",cal,"","")
    card.Footer.AddContainer(0,0,ca)
    
    'hide the imageoverlay on the card
    card.ImageOverlay.Visible = False
    '
    col.AddCard(0,0,card)
    co.AddContainer(0,0,col)
    div.AddContainer(0,0,co)
    Return div
End Sub

The input controls in this instance are created inside a card component with a centered heading. On the heading of the card we add the company logo, then on the body add the input controls without titles but placeholders. On the footer is the Getting Started button.

Because we want to have ability to create an account and also when one needs help, we place these on either side of the button, Create Account on the left and Need help on the right, this done by applying pullright and pullleft classes to the containers. Both these containers are added to the footer.

As a card has an imageoverlay also, we hide this, return this as a container that is eventually added to the header.
 

Mashiane

Expert
Licensed User
Longtime User
The footer of the page is created as usually like before, but in this case, it will be added to the header of the page, thus we return it as its own component.

B4X:
'design and return the footer to be used in the header
Sub Footer As UOENowFooter
    Page.Footer.CenterOnPage = True
    'add a nav
    Dim nav As UOENowNav
    nav.Initialize(App,"fnav","","")
    
    'add a list to the nav
    Dim lst As UOENowList
    lst.Initialize(App,"flinks",App.EnumListType.ul,"")
    lst.AddAnchor("","Creative Tim","https://www.creative-tim.com","","",False,False)
    lst.AddAnchor("","About Us","http://presentation.creative-tim.com","","",False,False)
    lst.AddAnchor("","Blog","http://blog.creative-tim.com","","",False,False)
    nav.Nav.AddList(0,0,lst)
    Page.Footer.FooterContent.AddNav(0,0,nav)
    'set up copyright
    Page.Footer.CopyRight.CopyRight.AddText(", Designed by ")
    Page.Footer.CopyRight.Copyright.AddAnchor1(0,0,"","Invision","https://www.invisionapp.com",App.EnumTarget.blank,False,"","")
    Page.Footer.CopyRight.CopyRight.AddText(". Coded by ")
    Page.Footer.CopyRight.CopyRight.AddAnchor1(0,0,"","Creative Tim","https://www.creative-tim.com",App.EnumTarget.blank,False,"","")
    Return Page.footer
End Sub

This returned Footer is added with

B4X:
Page.Header.AddFooter(0,0,Footer)

as noted above.

Getting/Setting content and adding events follow the normal BANano methodologies.

That should cover it!

#HelpingOthersToSucceed
 
Top