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

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...



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.

 

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.

 

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)

 

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

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

 

Next is Teams...



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)

 

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

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.

 

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

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

 

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.

 

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.