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

Discussion in 'B4J Tutorials' started by Mashiane, Mar 22, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    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.
     
    joulongleu and Don Oso like this.
  2. Mashiane

    Mashiane Expert Licensed 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.

    Code:
    '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'.
     
    joulongleu likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    Code:
    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.
     
    joulongleu likes this.
  4. Mashiane

    Mashiane Expert Licensed 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.

    Code:
    '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

    Code:
    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
     
    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice