B4J Tutorial [Websites] Create a Landing Page for your website using UOENow+BANano

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

  1. Mashiane

    Mashiane Expert Licensed User

    Hi there..

    UOENow, introduced us in terms of the various components of the Now UI Kit from Creative Tim that we can use to develop our websites. What we will do today is to extend on that and create a landing page based on the components. We follow the same routine we did before to create the other web page..

    UOENow Introduction

    Here is part of the resulting output...

    LandingPage.png

    As usual, you will need the BANano library to use UOENow, so get your copy here.

    Get your copy of UOENOw from Github. UOENow is a coding based approach to creating websites so sadly you wont be using the abstract designer here. Well, I haven't learned how to use that yet perhaps one day.

    So to do this, we fire up a new B4J project and then.... refer to the UOE Introduction for more details.

    Let's add a code module, and name it pglandingpage.
     
    Last edited: Mar 19, 2019
  2. Mashiane

    Mashiane Expert Licensed User

    Anyway, we create a page with a navigation bar, a heading image and some navigation buttons... this will do in the Init Sub..

    If you followed up on the introduction, all of the code below will make sense...

    Code:
    Sub Init(thisApp As UOENowApp)
        App = thisApp
        
    'initialized the page, the 'main' div name will be components
        Page.Initialize(App,"landing",False,True,App.EnumThemes.Primary)
        
    'left menu items
        Page.NavBar.LeftMenu.Visible = True
        
    Page.NavBar.LeftMenu.Items.AddHeader("","Dropdown Header","")
        
    Page.NavBar.LeftMenu.Items.AddAnchor("","Action","#","","")
        
    Page.NavBar.LeftMenu.Items.AddAnchor("","Other Action","#","","")
        
    Page.NavBar.LeftMenu.Items.AddAnchor("","Action","#","","")
        
    '
        App.AddToolTip("uoenow",App.EnumPosition.bottom,"Designed by Invision. Coded by Creative Tim")
        
    Page.NavBar.AddBrand("uoenow","Now UI Kit","https://demos.creative-tim.com/now-ui-kit/index.html")
        
    Page.NavBar.AddHamBurger
        
    '
        Page.NavBar.SetColorOnScroll(400)
        
    Page.NavBar.SetTransparent
        
    Page.NavBar.setfixed
        
    Page.NavBar.JustifyContentEnd
        
        
    Page.NavBar.AddAnchor("back2kit","Back to Kit","./index.html","","",False,False,"",False)
        
    Page.NavBar.AddAnchor("haveanissue","Have an issue?","https://github.com/creativetimofficial/now-ui-kit/issues", _
        
    "","",False,False,"",False)
        App.AddToolTip(
    "twitter",App.EnumPosition.bottom,"Follow us on Twitter")
        App.AddToolTip(
    "facebook",App.EnumPosition.bottom,"Like us on Facebook")
        App.AddToolTip(
    "instagram",App.EnumPosition.bottom,"Follow us on Instagram")
        
    Page.NavBar.AddAnchor("twitter","{NBSP}Twitter","https://twitter.com/CreativeTim","fab fa-twitter",App.EnumTarget.blank,False,False,"",True)
        
    Page.NavBar.AddAnchor("facebook","{NBSP}Facebook","https://www.facebook.com/CreativeTim","fab fa-facebook",App.EnumTarget.blank,False,False,"",True)
        
    Page.NavBar.AddAnchor("instagram","{NBSP}Instagram","https://www.instagram.com/CreativeTimOfficial","fab fa-instagram",App.EnumTarget.blank,False,False,"",True)
        
        
        
    'header
        'Page.Header.SetFilterColor("orange")
        Page.Header.AddParallax1(0,0,"","./assets/bg6.jpg","")
        
    Page.Header.PageHeaderSmall
        
    '
    What's new in this instance is the LeftMenu and PageHeaderSmall.

    As noted above, this time around, our navigation bar as a left menu hamburger button, this can be turned to be visible / not and in this instance its visible. We add a few buttons to its dropdown menu. We add a tooltip for the brand then add the hamburger on the right. We want the nav bar to be transparent and only show its background color when we scroll past 400px and fix the navbar on top. As we want the buttons to appear on the right we JustifyContentEnd.

    We also add some social media buttons, these could be linked to go to the various sharing networks. For the header, instead of it filling the page, we call the PageHeaderSmall method, this justs creates a nice header for us to see the Who we are? section. The header again is a parallax with a background image. We set a filter for it, an overlay color that sits and disappears as we scroll to show the parallax.
     
    amaxco, Johan Schoeman and joulongleu like this.
  3. Mashiane

    Mashiane Expert Licensed User

    To finish up the header, we add the heading and the social sharing button centered across the screen...

    Code:
    Sub HeadingSection As UOENowContainer
        
    Dim div As UOENowContainer
        div.Initialize(App,
    "",False,"","")
        div.ContentCenter
        
    Dim div1 As UOENowContainer
        div1.Initialize(App,
    "",True,"","")
        div1.AddH1(
    0,0,"","This is our great company.","","title")
        
    Dim div2 As UOENowContainer
        div2.Initialize(App,
    "",False,"","")
        div2.TextCenter
        div2.AddFAB(
    0,0,"""fab fa-facebook-square","#pablo","","",App.EnumThemes.Primary,"")
        div2.AddFAB(
    0,0,"""fab fa-twitter","#pablo","","",App.EnumThemes.Primary,"")
        div2.AddFAB(
    0,0,"""fab fa-google-plus","#pablo","","",App.EnumThemes.Primary,"")
        div1.AddContainer(
    0,0,div2)
        div.AddContainer(
    0,0,div1)    
        
    Return div
    End Sub
    This is done by creating a container, passing it a class to center the content by calling ContentCenter, then we add another container inside it with some components.. The textcenter method adds a 'text-center' class to the container, meaning that all the contents inside it will be centered, i.e. floating buttons.

    This container is added as is to the header by calling...

    Code:
    Page.Header.AddContainer(0,0,HeadingSection)
     
    Johan Schoeman and joulongleu like this.
  4. Mashiane

    Mashiane Expert Licensed User

    Next Inline is the About Us Section...

    Code:
    Sub AboutUs As UOENowSection
        
    Dim au As UOENowSection
        au.Initialize(App,
    "","","section-about-us")
        
        
    Dim co As UOENowContainer
        co.Initialize(App,
    "",True,"","")
        co.AddRows(
    1).addcolumns(1,"","8","","")
        co.SetMargins(
    1,1,"","","auto","auto")
        co.SetClass(
    1,1,"text-center")
        co.AddH2(
    1,1,"","Who we are?","","title")
        co.AddH5(
    1,1,"",App.LoremIpsum(1),"","description")
        co.Refresh
        co.AddSeparator(
    0,0,App.EnumThemes.Primary)
        co.AddSection(
    0,0,SectionOverView)
        au.Section.AddContainer(
    0,0,co)
        
    Return au
    End Sub
    AboutUs.png

    The about us section is made of the who we are part and also the part with images. This is created by using containers inside containers. We create a container with a grid and then add the text needed for the about us section, then add a section that has the overlapping images...

    Code:
    Sub SectionOverView As UOENowSection
        
    Dim s As UOENowSection
        s.Initialize(App,
    "","","section-story-overview")
        s.Section.RemoveClass(
    "section")
        s.Section.AddRows(
    1).AddColumns(1,"","6","","").AddColumns(1,"","5","","")
        
    Dim imgcont As UOENowContainer
        imgcont.Initialize(App,
    "",False,"","")
        imgcont.AddImageContainer(
    0,0,"","./assets/login.jpg","image-left")
        imgcont.AddParagraphBlockQuote(
    0,0,"",App.LoremIpsum(1),App.EnumThemes.Primary,"-NOAA","","")
        imgcont.AddBreak(
    0,0)
        imgcont.AddBreak(
    0,0)
        
    'imgcont.AddImageContainer(0,0,"","./assets/bg3.jpg","")
        s.Section.AddContainer(1,1,imgcont)
        s.Section.AddImageContainer(
    1,2,"","./assets/bg1.jpg","image-right")
        s.Section.addh3(
    1,2,"","So what does the new record for the lowest level of winter ice actually mean","","")
        s.Section.AddParagraph(
    1,2,"",App.LoremIpsum(1),"","")
        s.Section.AddParagraph(
    1,2,"",App.LoremIpsum(1),"","")
        s.Section.AddParagraph(
    1,2,"",App.LoremIpsum(1),"","")
        
    Return s
    End Sub
    As everything is fed on R0C0, all it means is everything is not sitting on grids. Where stuff sits on grids like above, a section with 1 row with 6 and 5 spanning columns was added. A container with an image and a blockquote was then injected at R1C1. Same with R1C2
     
    amaxco, Johan Schoeman and joulongleu like this.
  5. Mashiane

    Mashiane Expert Licensed User

    Next is Teams...

    Team.png

    The teams section is centered across the page and we just use the same template to add each team member. We create a row with 3 columns each equal to 4 spaces each.

    Code:
    Sub TeamSection As UOENowSection
        
    Dim t As UOENowSection
        t.Initialize(App,
    "","","section-team")
        t.Section.TextCenter
      
        
    Dim co As UOENowContainer
        co.Initialize(App,
    "",True,"","")
        co.AddH2(
    0,0,"","Here is our team","","title")
      
        
    Dim team As UOENowContainer
        team.Initialize(App,
    "",False,"","team")
        team.AddRows(
    1).AddColumns(3,12,4,4,4)
      
        
    Dim tm As UOENowContainer
        tm.Initialize(App,
    "",False,"","team-player")
        tm.AddImage1(
    0,0,"""./assets/avatar.jpg","Thumbnail",True,True,True,"img-fluid")
        tm.AddTitle(
    0,0,"","Romina Hadid")
        tm.AddCategory(
    0,0,"","Model",App.EnumThemes.Primary)
        tm.AddDescription(
    0,0,"",App.LoremIpsumRandom(1),"")
        tm.AddFAB(
    0,0,"","fab fa-twitter","#","","",App.EnumThemes.Primary,"")
        tm.AddFAB(
    0,0,"","fab fa-instagram","#","","",App.EnumThemes.Primary,"")
        tm.AddFAB(
    0,0,"","fab fa-facebook-square","#","","",App.EnumThemes.Primary,"")
        team.AddContainer(
    1,1,tm)
      
        
    Dim tm As UOENowContainer
        tm.Initialize(App,
    "",False,"","team-player")
        tm.AddImage1(
    0,0,"""./assets/ryan.jpg","Thumbnail",True,True,True,"img-fluid")
        tm.AddTitle(
    0,0,"","Ryan Tompson")
        tm.AddCategory(
    0,0,"","Designer",App.EnumThemes.Primary)
        tm.AddDescription(
    0,0,"",App.LoremIpsumRandom(1),"")
        tm.AddFAB(
    0,0,"","fab fa-twitter","#","","",App.EnumThemes.Primary,"")
        tm.AddFAB(
    0,0,"","fab fa-instagram","#","","",App.EnumThemes.Primary,"")
        tm.AddFAB(
    0,0,"","fab fa-facebook-square","#","","",App.EnumThemes.Primary,"")
        team.AddContainer(
    1,2,tm)
      
        
    Dim tm As UOENowContainer
        tm.Initialize(App,
    "",False,"","team-player")
        tm.AddImage1(
    0,0,"""./assets/eva.jpg","Thumbnail",True,True,True,"img-fluid")
        tm.AddTitle(
    0,0,"","Eva Jenner")
        tm.AddCategory(
    0,0,"","Fashion",App.EnumThemes.Primary)
        tm.AddDescription(
    0,0,"",App.LoremIpsumRandom(1),"")
        tm.AddFAB(
    0,0,"","fab fa-twitter","#","","",App.EnumThemes.Primary,"")
        tm.AddFAB(
    0,0,"","fab fa-instagram","#","","",App.EnumThemes.Primary,"")
        tm.AddFAB(
    0,0,"","fab fa-facebook-square","#","","",App.EnumThemes.Primary,"")
        team.AddContainer(
    1,3,tm)
      
      
        co.AddContainer(
    0,0,team)
        t.Section.AddContainer(
    0,0,co)
        
    Return t
    End Sub
    We could have just defined a single container sub to create the template for each of the team members and returned it with content. One can also do that, the sub would expect the image url, the title, the category, the description and social media links and it would return a container. This team section is added directly to the contents of the page with...

    Code:
    Page.Content.AddSection(0,0,TeamSection)
     
    Last edited: Mar 19, 2019
    amaxco, Johan Schoeman and joulongleu like this.
  6. Mashiane

    Mashiane Expert Licensed User

    In finality, we want to add the Contact Us section..

    ContactUs.png

    Code:
    Sub SectionContactUS As UOENowSection
        
    Dim cu As UOENowSection
        cu.Initialize(App,
    "","","section-contact-us")
        cu.Section.TextCenter
      
        
    Dim co As UOENowContainer
        co.Initialize(App,
    "",True,"","")
        co.AddTitle(
    0,0,"","Want to work with us?")
        co.AddDescription(
    0,0,"","Your project is very important to us.","")
        co.AddRows(
    1).AddColumns(1,"","8","6","")
        
    'importanant to center the contents in the row
        co.SetClass(1,1,"text-center ml-auto mr-auto")
        co.AddTextBox(
    1,1,"","","First Name...""now-ui-icons users_circle-08","","","","")
        co.AddTextBox(
    1,1,"","","Email...""now-ui-icons users_circle-08","","","","")
        co.AddTextArea1(
    1,1,"","","Type a message...","","")
        co.AddAnchorButton(
    1,1,"","Send Message","","#pablo","",App.EnumButtonSize.Regular,False,True,App.EnumThemes.Primary,"btn-block")
        cu.Section.AddContainer(
    0,0,co)
        
    Return cu
    End Sub
    Again we create a section and text-center it on the page. We add a grid to it that will host the various input controls. On R1C1 we add the firstname, email, text area etc. As noted, our components dont have ids, but in real life should you want to read and assign values to them, do specify the ids. A button is also added to send the content.

    One can just finish up then using the banano methods to get the values and perform the needed tasks to send the message. This section is also added directly to the page content.
     
    Last edited: Mar 19, 2019
    amaxco, Johan Schoeman and joulongleu like this.
  7. Mashiane

    Mashiane Expert Licensed User

    The footer is the same as before, this time around we did not specify the background color though but just specified the default theme.

    Footer.png

    Code:
    Sub Footer
        
    Page.Footer.UseTheme(App.EnumThemes.Default)
        
    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,"","")
    End Sub
     
    Last edited: Mar 19, 2019
    Johan Schoeman and joulongleu like this.
  8. Mashiane

    Mashiane Expert Licensed User

    We made a slight adjustment to the navbar buttons, we want the 'Back to Kit' button to actually go to the previous example. As this is the same project..

    Code:
    Page.NavBar.AddAnchor("back2kit","Back to Kit","./index.html","","",False,False,"",False)
    Our anchor has an id of 'back2kit', we want when a user selects this button for it to go back to the index page which is built internally. We need to add an event.

    Just before the end of the Init sub we add an event after Page.Create..

    Code:
    Page.LandingPage
        
    Page.create
        Banano.GetElement(
    "#back2kit").On("click", Me, "openindex")
    This needs to run the openindex subroutine, we define this as

    Code:
    Sub OpenIndex(e As BANanoEvent)
        e.StopPropagation
        pgIndex.Init(App)
    End Sub
    So when the button is clicked, the pgindex.init(app) method will be called. This navigates to the previous page.
     
    Johan Schoeman and joulongleu like this.
  9. Mashiane

    Mashiane Expert Licensed User

    The structure of UOENow is such that one is able to delete from the final distributable all unused assets, thus before running BANano.build, one has to tag all uses resourcs on the project, for example..

    Code:
    App.TagDoNotDelete(Array As String("fonts.zip","blurred-image-1.jpg","header.jpg","now-logo.png"))
        App.TagDoNotDelete(
    Array As String("invision-white-slim.png","creative-tim-white-slim2.png"))
        App.TagDoNotDelete(
    Array As String("hero-image-1.png","hero-image-2.png","hero-image-3.png"))
        App.TagDoNotDelete(
    Array As String("bg7.jpg","julie.jpg","bg1.jpg","bg6.jpg","bg3.jpg","bg4.jpg","bg5.jpg"))
        App.TagDoNotDelete(
    Array As String("login.jpg","avatar.jpg","ryan.jpg","eva.jpg","landing.jpg","profile.jpg"))
    Besides, in any case, one would NOT include un-necessary resources on the Files tab of their project, but then im still exploring this...

    After the build, I run some cleaning code, then unzip the fonts files needed.

    Code:
    'remove un-needed files
        Dim appPath As String = File.Combine(File.DirApp,ShortName)
        
    Dim csspath As String = File.Combine(appPath,"styles")
        
    Dim jspath As String = File.Combine(appPath,"scripts")
        
    Dim asspath As String = File.Combine(appPath,"assets")
        
    Dim cssList As List = File.ListFiles(csspath)
        
    Dim DoNotDelete As Map = App.DoNotDelete
        
    'css files
        For Each strf As String In cssList
            
    Dim hasit As Boolean = DoNotDelete.ContainsKey(strf)
            
    If hasit = False Then
                
    File.Delete(csspath,strf)
            
    End If
        
    Next
        
    'javascript
        Dim jsList As List = File.ListFiles(jspath)
        
    For Each strf As String In jsList
            
    Dim hasit As Boolean = DoNotDelete.ContainsKey(strf)
            
    If hasit = False Then
                
    File.Delete(jspath,strf)
            
    End If
        
    Next
        
    'assets
        Dim asList As List = File.ListFiles(asspath)
        
    For Each strf As String In asList
            
    Dim hasit As Boolean = DoNotDelete.ContainsKey(strf)
            
    If hasit = False Then
                
    File.Delete(asspath,strf)
            
    End If
        
    Next
        
    'unzip fonts folder
        Dim zf As String = File.Combine(File.DirApp,$"${AppName}/assets/fonts.zip"$)
        
    Dim zo As String = File.Combine(File.DirApp,$"${AppName}"$)
        
    Dim UnZL As SD_ZipLibray
        UnZL.Initialize
        UnZL.unZip(zf,zo)
        
    'delete zip File
        File.Delete("",zf)
        
    'open the app
        'open index.html file
        Dim appPath As String = File.Combine(File.DirApp,ShortName)
        
    Dim url As String = File.GetUri(appPath,"index.html")
        fx.ShowExternalDocument(url)
        
    ExitApplication
    Where your app will have a constant internet connection, rather use the fonts directly from the provided CDNS and the above code will be not very useful. So these are included for cases where there is no internet connection.

    Ta

    Upcoming is creating a profile page and then a login page and we complete the Now UI Kit Websites.
     
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