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

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

  1. Mashiane

    Mashiane Expert Licensed User

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

    ProfilePage1.png

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

    ProfilePage2.png

    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.
     
    Last edited: Mar 22, 2019
  2. Mashiane

    Mashiane Expert Licensed User

    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.

    Code:
    Banano.GetElement("#backtokit").HandleEvents("click", Me, "openindex")
    On the header, we have an image and some social media stats...

    Code:
    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.
     
    Johan Schoeman and joulongleu like this.
  3. Mashiane

    Mashiane Expert Licensed User

    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.

    Code:
    Sub Gallery(img1 As String, img2 As String, img3 As String, img4 As StringAs 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.
     
  4. Mashiane

    Mashiane Expert Licensed User

    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.

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