B4J Tutorial [Websites] Create a profile page for your website using UOENow+BANano

Hi there again..

Download UOENow

We introduced you to UOENow.
Then we showed you how you can create your landing page for your website.

Today we will show you how you can create a profile page that talks about your company, you etc with some nice pill buttons based gallery.

For this to be possible the NavbarPill component needed a little tweaking. Im also learning this as I go along but then, am just here to help you succeed.

So let's do this. When done with this, you should see something like this...

And as you scroll down... have a gallery that is based on pill buttons.

As the previous stuff on how to create navbar, header section with background images have already been touched on in the previous sections, we wont do that here.

 

[Mashiane]

Create a pgprofile code module as usual in b4j on the same project.

Add an Init sub that will be called to activate the page. This empties the body of the main page and then injects the needed content for the page. To ensure that the links dont follow the normal behaviour, i have used handleevents in this case.

Banano.GetElement("#backtokit").HandleEvents("click", Me, "openindex")

On the header, we have an image and some social media stats...

Sub HeaderStuff As UOENowContainer
    Log("process.HeaderStuff")
    Dim Co As UOENowContainer
    Co.Initialize(App,"",True,"","")
    '
    Dim pc As UOENowContainer
    pc.Initialize(App,"",False,"","photo-container")
    pc.AddImage1(0,0,"","./assets/ryan.jpg","",False,False,False,"")
    Co.AddContainer(0,0,pc)
    
    Co.AddH3(0,0,"", "Ryan Scheinder","","title")
    Co.AddParagraph(0,0,"","Photographer","","category")
    
    Dim cc As UOENowContainer
    cc.Initialize(App,"","","","content")
    
    Dim sd As UOENowContainer
    sd.Initialize(App,"",False,"","social-description")
    sd.AddH2(0,0,"", "26","","")
    sd.AddParagraph(0,0,"","Comments","","")
    cc.AddContainer(0,0,sd)
    
    Dim sd As UOENowContainer
    sd.Initialize(App,"",False,"","social-description")
    sd.AddH2(0,0,"", "36","","")
    sd.AddParagraph(0,0,"","Likes","","")
    cc.AddContainer(0,0,sd)
    
    Dim sd As UOENowContainer
    sd.Initialize(App,"",False,"","social-description")
    sd.AddH2(0,0,"", "48","","")
    sd.AddParagraph(0,0,"","Bookmarks","","")
    cc.AddContainer(0,0,sd)
    
    Co.AddContainer(0,0,cc)
    Return Co
End Sub

So besides the background image of the header, we have some additional content, again added to R0C0. Most of what is on this page depends again on predefined css rules on the ui-kit, for example the social-description class. We add a profile pic, some comments, likes and booksmarks stuff on this section.

 

[Mashiane]

The second portion of the profile displays a gallery of images. This is achieved with the pill button navigation and each pill has 4 images.

Sub Gallery(img1 As String, img2 As String, img3 As String, img4 As String) As UOENowContainer
    Dim g As UOENowContainer
    'create a div with a column = 10 for medium devices
    g.Initialize(App,"",False,"", "col-md-10 ml-auto mr-auto")
    'add a row with 2 columns = 6 for medium devices
    g.AddRows(1).AddColumns(2,"","6","","")
    'add a class to the row
    g.SetClass(1,0,"collections")
    g.AddImage1(1,1,"",img1,"",False,True,False,"")
    g.AddImage1(1,1,"",img2,"",False,True,False,"")
    g.AddImage1(1,2,"",img3,"",False,True,False,"")
    g.AddImage1(1,2,"",img4,"",False,True,False,"")
    Return g
End Sub

A container is created with a 10 space column with auto left and right margins. Within that column, a row is added with 2 columns of equal length and this has two images. This can be customised to have more images depending on ones needs.

 

[Mashiane]

To complete the profile, the gallery method above that returns a container for whatever images we need for the gallery is created. This has the effect that for each navigation pill selected, some gallery images are shown.

Dim pp As UOENowContainer
    pp.Initialize(App,"",False,"","nav-align-center")
    'create navpills
    Dim np As UOENowNavPills
    np.Initialize(App,"gal",App.EnumThemes.primary,"")
    np.TabContent.TabContent.AddClass("gallery")
    'create the gallery images for the profile
    Dim pg As UOENowContainer = Gallery("./assets/bg6.jpg", "./assets/bg11.jpg", "./assets/bg7.jpg","./assets/bg8.jpg")
    np.AddItem("profile","","now-ui-icons design_image",False,True,pg)
    Dim hg As UOENowContainer = Gallery("./assets/bg1.jpg", "./assets/bg3.jpg", "./assets/bg8.jpg","./assets/bg7.jpg")
    np.AddItem("home","","now-ui-icons location_world",False,False,hg)
    Dim mg As UOENowContainer = Gallery("./assets/bg3.jpg", "./assets/bg8.jpg", "./assets/bg7.jpg","./assets/bg6.jpg")
    np.AddItem("messages","","now-ui-icons sport_user-run",False,False,mg)
    'add navpills to container
    pp.AddNavPills(0,0,np)
    ' add container to parent container
    c1.AddContainer(1,1,pp)
    'refresh the grid
    c1.Refresh
    'add navpills tabcontent
    c1.AddTabContent(0,0,np.tabcontent)

A container to house the navpills is created, then a navpill component is created with buttons that have a primary theme. For each navpill, we use nucleo icons and then add a container for each. These containers are automatically added to an internal tabcontent container existing in the navpill component. Thus the navpill is added to the parent container and then its tabcontent component added to complete the structure of the navigation pills.

This concludes the profile page.