Share My Creation [UOENow] Create beautiful Bootstrap 4 Websites with Now UI Kit+BANano

Discussion in 'B4J Share Your Creations' started by Mashiane, Mar 16, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Download

    Hi there

    UOENow is a wrap of the beautiful theme from Creative Tim to create Bootstrap 4 websites. UONow wraps the Now UI kit around BANano for one to create beautiful things with this theme.

    The attached video is the generation of the theme directly from Creative Tim, done to ensure that everything works the same.



    You can view the Creative Tim Now UI Kit here, https://www.creative-tim.com/product/now-ui-kit

    The download is a an uncompiled lib that you can run and it will open up the example page to generate the page. The code has been simplified as much as possible and one can use BANano methods to set/get elements, styles etc.

     
    Last edited: Mar 17, 2019
  2. Mashiane

    Mashiane Expert Licensed User

    As usual, one creates a new BANano project. I have created a single page just like the Creative Tim Now UI Kit website. In the Main module..

    Code:
    'demo the components
    Sub BANano_Ready()
        
    'create the app
        App.Initialize(AppName,ShortName,False)
        
    'pgComponents.Init(App)     
        pgIndex.Init(App)
    End Sub
    pgIndex is a code module that has been split into code regions for easy code navigation...
     
    korshkov and joulongleu like this.
  3. Mashiane

    Mashiane Expert Licensed User

    In the pgIndex code module, we initialize the page and then inject some css for a few things...

    Code:
    'Static code module
    Sub Process_Globals
        
    Public App As UOENowApp
        
    Public Page As UOENowPage
    End Sub

    Sub Init(thisApp As UOENowApp)
        App = thisApp
        
    'initialized the page, the 'main' div name will be components
        Page.Initialize(App,"home",False,True,App.EnumThemes.Primary)
        
    'set up a few css
        App.InjectCSSMap(".invision-logo", CreateMap("max-width""70px""top":"-2px","position""relative"))
        App.InjectCSSMap(
    ".creative-tim-logo", CreateMap("max-width""140px","top""-2px","position""relative"))
        App.injectcssmap(
    ".brand .n-logo", CreateMap("max-width""100px","margin-bottom""40px"))
        App.InjectCSSMap(
    ".brand .h1-seo", CreateMap("font-size""2.8em","text-transform""uppercase","font-weight""300"))
    The Page.Initialize methods creates the navigation bar skeleton, the side bar skeleton, the footer skeleton and also the page content skeleton so that one can add components to the page. There are some few css attributes that we need to set to ensure the header works as expected. The above css is applied to the header elements.

    Code:
    'clear the body of the page
        Page.Clear
        
    '*** NAVBAR
        'show the color of the navbar when one scrolls past 400 px
        Page.NavBar.SetColorOnScroll(400)
        
    ' the navbar should be transparent
        Page.NavBar.SetTransparent
        
    'add a tooltip for the brand element. All tooltips should be added before an element is added
        App.AddToolTip("uoenow",App.EnumPosition.bottom,"Designed by Invision. Coded by Creative Tim")
        
    ' we add the brand with a link
        Page.NavBar.AddBrand("uoenow","Now UI Kit","https://demos.creative-tim.com/now-ui-kit/index.html")
        
    ' we add the hamburgder`
        Page.NavBar.AddHamBurger
        
    ' the navbar should be fixed
        Page.NavBar.SetFixed
        
    ' we set the nav image, this gets shown on small devices in the automatic side bar
        Page.NavBar.SetNavImage("./assets/blurred-image-1.jpg")
        
    'the navbar buttons should be added on the right side of the navbar
        Page.NavBar.JustifyContentEnd
        
    'add buttons
        Page.NavBar.AddAnchor("btndownload","{NBSP}Download","javascript:void(0)","now-ui-icons arrows-1_cloud-download-93","",False,False,"",False)
        
    'add dropdown
        Dim dd As UOENowNavItemDropDown
        dd.Initialize(App,
    "navbarDropdownMenuLink1","now-ui-icons design_app","{NBSP}Components","","")
        dd.AddAnchor(
    "","{NBSP}Add Components","./index.html","now-ui-icons business_chart-pie-36","")
        dd.AddAnchor(
    "","{NBSP}Documentation","https://demos.creative-tim.com/now-ui-kit/docs/1.0/getting-started/introduction.html","now-ui-icons design_bullet-list-67","")
        
    Page.NavBar.AddDropDown(dd)
        
    Page.NavBar.AddAnchor("","{NBSP}Upgrade to PRO","https://www.creative-tim.com/product/now-ui-kit-pro","now-ui-icons arrows-1_share-66", _
        App.EnumTarget.blank,
    False,False,"btn btn-neutral",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)
    We then clear the page, set up the navbar and then add the links and icons for social sharing as displayed and then also create the full page header of the page. The header has a background image with an orange like filter.

    Code:
    '**** HEADER
        Page.Header.SetFilterColor("orange")
        
    Page.Header.AddParallax1(0,0,"","./assets/header.jpg","")
        
    Page.Header.AddContainer(0,0, Advert)
    As noted, there is no grid created on the page so all elements will be added at R0C0, this means that they are placed in sequence as they are added.

    In the header, a container named Advert is added. This is created like this...

    Code:
    Sub Advert As UOENowContainer
        
    Dim a As UOENowContainer
        a.Initialize(App,
    "",True,"","")
        
        
    Dim b As UOENowContainer
        b.Initialize(App,
    "",False,"""content-center brand")
        b.AddImage1(
    0,0,"","./assets/now-logo.png","",False,False,False,"n-logo")
        b.AddH1(
    0,0,"","Now UI Kit.","","h1-seo")
        b.AddH3(
    0,0,"","A beautiful Bootstrap 4 UI kit. Yours free.","","")
        
        
    Dim h6 As UOENowContainer
        h6.Initialize(App,
    "",False,"","category category-absolute")
        h6.AddText(
    "Designed by ")
        
    Dim img As UOENowImage
        img.Initialize(App,
    "","./assets/invision-white-slim.png","","invision-logo")
        h6.AddAnchor1(
    0,0,"",img.ToString,"http://invisionapp.com/",App.EnumTarget.blank,False,"","")
        h6.AddText(
    ". Coded by ")
        
    Dim imgx As UOENowImage
        imgx.Initialize(App,
    "","./assets/creative-tim-white-slim2.png","","creative-tim-logo")
        h6.AddAnchor1(
    0,0,"",imgx.ToString,"https://www.creative-tim.com",App.EnumTarget.blank,False,"","")
        a.AddContainer(
    0,0,b)
        a.AddContainer(
    0,0,h6)
        
    Return a
    End Sub
    And the resulting output is....

    UOENowHeader.png
     
    korshkov and joulongleu like this.
  4. Mashiane

    Mashiane Expert Licensed User

    When one scrolls down the page with a mouse, the navbar background color changes from transparent to orange, orange being the primary color for this theme. The change in color is done by the .SetColorOnScroll. As one can decide not to have a hamburger menu / brand, we decided to leave these to the developer and thus are added with AddBrand and AddHamburger. JustifyContentEnd ensures that the navitems are added on the right of the navbar, removing this will ensure the buttons are on the left.

    The next section of the screen has hero images. Each of the images is housed inside a container. A container with a grid is created with 1 row that has 1 single column sized 12 spaces.

    Code:
    Sub SectionImages As UOENowSection
        
    Dim si As UOENowSection
        si.Initialize(App,
    "","","section-images")
        
        
    Dim sic As UOENowContainer
        sic.Initialize(App,
    "",True,"","")
        sic.AddRows(
    1).AddColumns(1,12,12,12,12)
        
        
    Dim hic As UOENowContainer
        hic.Initialize(App,
    "",False,"","hero-images-container")
        hic.AddImage1(
    0,0,"","./assets/hero-image-1.png","",False,False,False,"")
        sic.AddContainer(
    1,1,hic)
        
        
    Dim hic As UOENowContainer
        hic.Initialize(App,
    "",False,"","hero-images-container-1")
        hic.AddImage1(
    0,0,"","./assets/hero-image-2.png","",False,False,False,"")
        sic.AddContainer(
    1,1,hic)
        
        
    Dim hic As UOENowContainer
        hic.Initialize(App,
    "",False,"","hero-images-container-2")
        hic.AddImage1(
    0,0,"","./assets/hero-image-3.png","",False,False,False,"")
        sic.AddContainer(
    1,1,hic)
        
        
        si.Section.AddContainer(
    0,0,sic)
        
    Return si
    End Sub
    Creating...

    UOENowHeroImages.png
     
    korshkov and joulongleu like this.
  5. Mashiane

    Mashiane Expert Licensed User

    Next are some basic elements, these are buttons and inputs.

    UOENowBasicElements.png

    Shortcut methods have been created to ensure that one adds these elements easily. Whilst one can first define a component, then initialize it and then add it to the parent, using shortcuts ensure that ones skeleton is up an running in no time. From below the various components are themed and also some classes passed to them to ensure they look as expected.

    Code:
    #Region BasicElements
    Sub BasicElements As UOENowSection
        
    Dim be As UOENowSection
        be.Initialize(App,
    "basic-elements","","section-basic")
        
    Dim cont As UOENowContainer
        cont.Initialize(App,
    "",True,"","")
        cont.AddTitle(
    0,0,"","Basic Elements")
        cont.AddH4(
    0,0,"","Buttons","","")
        
    '
        Dim bs As UOENowContainer
        bs.Initialize(App,
    "",False,"","")     
        bs.addcategory(
    0,0,"","Pick your style")
        bs.AddRows(
    1).AddColumns(1,10,10,10,10)
        bs.AddButton1(
    1,1,"","Default","","","","",False,False,App.EnumThemes.Primary,"","")
        bs.AddButton1(
    1,1,"","Round","","","","",False,True,App.EnumThemes.Primary,"","")
        bs.AddButton1(
    1,1,"","{NBSP}With Icon",App.EnumNucleo.ui_2_favourite_28,"","","",False,True,App.EnumThemes.Primary,"","")
        bs.AddButton1(
    1,1,"","",App.EnumNucleo.ui_2_favourite_28,"","","",True,False,App.EnumThemes.Primary,"","")
        bs.AddButton1(
    1,1,"","Simple","","","","",False,False,App.EnumThemes.Primary,"btn-simple","")
        cont.AddContainer(
    0,0,bs)
        
    '
        Dim bs1 As UOENowContainer
        bs1.Initialize(App,
    "",False,"","")
        bs1.AddCategory(
    0,0,"","Pick your size")
        bs1.AddRows(
    1).AddColumns(1,10,10,10,10)
        bs1.AddButton1(
    1,1,"","Small","","","",App.EnumButtonSize.small,False,False,App.EnumThemes.Primary,"","")
        bs1.AddButton1(
    1,1,"","Regular","","","","",False,False,App.EnumThemes.Primary,"","")
        bs1.AddButton1(
    1,1,"","Large","","","",App.EnumButtonSize.large,False,False,App.EnumThemes.Primary,"","")
        cont.AddContainer(
    0,0,bs1)
        
    '
        Dim be1 As UOENowContainer
        be1.Initialize(App,
    "",False,"","")
        be1.AddCategory(
    0,0,"","Pick your color")
        be1.AddRows(
    1).AddColumns(1,10,10,10,10)
        be1.AddButton1(
    1,1,"","Default","","","","",False,False,App.EnumThemes.Default,"","")
        be1.AddButton1(
    1,1,"","Primary","","","","",False,False,App.EnumThemes.Primary,"","")
        be1.AddButton1(
    1,1,"","Info","","","","",False,False,App.EnumThemes.Info,"","")
        be1.AddButton1(
    1,1,"","Success","","","","",False,False,App.EnumThemes.Success,"","")
        be1.AddButton1(
    1,1,"","Danger","","","","",False,False,App.EnumThemes.Danger,"","")
        be1.AddButton1(
    1,1,"","Neutral","","","","",False,False,App.EnumThemes.Neutral,"","")
        cont.AddContainer(
    0,0,be1)
        
    '
        Dim be1 As UOENowContainer
        be1.Initialize(App,
    "",False,"","")
        be1.AddCategory(
    0,0,"","Links")
        be1.AddRows(
    1).AddColumns(1,10,10,10,10)
        be1.AddButton1(
    1,1,"","Default","","","","",False,False,App.EnumThemes.Default,"btn-link","")
        be1.AddButton1(
    1,1,"","Primary","","","","",False,False,App.EnumThemes.Primary,"btn-link","")
        be1.AddButton1(
    1,1,"","Info","","","","",False,False,App.EnumThemes.Info,"btn-link","")
        be1.AddButton1(
    1,1,"","Success","","","","",False,False,App.EnumThemes.Success,"btn-link","")
        be1.AddButton1(
    1,1,"","Danger","","","","",False,False,App.EnumThemes.Danger,"btn-link","")
        be1.AddButton1(
    1,1,"","Neutral","","","","",False,False,App.EnumThemes.Neutral,"btn-link","")
        cont.AddContainer(
    0,0,be1)
        cont.AddDiv(
    0,0,"","","space-70")
     
    korshkov likes this.
  6. Mashiane

    Mashiane Expert Licensed User

    Then another container is added so that we demo how the input controls are created.

    Code:
    Dim be1 As UOENowContainer
        be1.Initialize(App,
    "inputs",False,"","")
        be1.AddH4(
    0,0,"","Inputs","","")
        be1.AddCategory(
    0,0,"","Form Controls")
        be1.AddRows(
    1).AddColumns(5,12,6,3,3)
        be1.AddTextBox(
    1,1,"t1","","Regular","","","","","")
        be1.AddTextBox(
    1,2,"t2","","Success","","",App.EnumThemes.Success,"","")
        be1.AddTextBox(
    1,3,"t3","","Danger","","",App.EnumThemes.Danger,"","")
        be1.AddTextBox(
    1,4,"t4","","Left Fontawesome Icon",App.EnumFontAwesome.user_circle,"","","","")
        be1.AddTextBox(
    1,5,"t5","","Right Fontawesome Icon","",App.EnumNucleo.users_single_02,"","","")
        cont.AddContainer(
    0,0,be1)
        cont.AddDiv(
    0,0,"","","space-70")
        
    '
        Dim be1 As UOENowContainer
        be1.Initialize(App,
    "",False,"","")
        be1.AddRows(
    1).AddColumns(4,6,6,3,3)
        be1.AddCategory(
    1,1,"","Checkboxes")
        be1.AddCheckBox1(
    1,1,"c1","Unchecked","opt1","",False,False,False)
        be1.AddCheckBox1(
    1,1,"c2","Checked","opt2","",True,False,False)
        be1.AddCheckBox1(
    1,1,"c3","Disabled Unchecked","opt3","",False,False,True)
        be1.AddCheckBox1(
    1,1,"c4","Disabled Checked","opt4","",True,False,True)
        
    '
        be1.AddCategory(1,2,"","Radios")
        be1.AddRadio1(
    1,2,"rad1","","Unchecked","opt1","",False,False,False)
        be1.AddRadio1(
    1,2,"rad1","","Checked","opt2","",True,False,False)
        be1.AddRadio1(
    1,2,"rad","","Disabled Unchecked","opt3","",False,False,True)
        be1.AddRadio1(
    1,2,"rad","","Disabled Checked","opt4","",True,False,True)
        
    '
        be1.AddCategory(1,3,"","Toggle Buttons")
        be1.AddSwitch1(
    1,3,"sw1",False,"","","","")
        be1.AddBreak(
    1,3)
        be1.AddSwitch1(
    1,3,"sw2",False,"ON","OFF","","")
        
    '
        be1.AddCategory(1,4,"","Sliders")
        be1.AddSlider1(
    1,4,"sl1",0,10,100,App.EnumThemes.primary,"")
        be1.AddBreak(
    1,4)
        be1.AddRangeSlider1(
    1,4,"rs",30,60,0,100,App.EnumThemes.Warning,"")
        cont.AddContainer(
    0,0,be1)
        cont.AddDiv(
    0,0,"","","space-70")
      
        be.Section.AddContainer(
    0,0,cont) 
        
    Return be
    Checkboxes and Radios can also be created to be inline. The switch can have own labels e.g. ON and OFF in this case and input boxes can have icons on either side. Two sets of icons are used in this UI Kit, FontAwesome and Nucleo Icons. Enumerations have been built right into UOENow for both.

    UOENowControls.png
     
    korshkov and joulongleu like this.
  7. Mashiane

    Mashiane Expert Licensed User

    Next inline are the navigation bars. These can have icons and text or rather text only. Another option to have a dropdown in a menu button also exists.

    UOENowNav.png

    A container is created with two equal sides to demo both menus.

    Code:
    Dim d As UOENowContainer
        d.Initialize(App,
    "menu-dropdown",True,"","")
        d.AddRows(
    1).AddColumns(2,12,6,6,6)
        d.AddRows(
    1).AddColumns(1,12,12,12,12)
        d.AddH4(
    1,1,"","Menu","","")
        d.AddH4(
    1,2,"","Menu with Icons","","")
        
    '
        Dim nb As UOENowNavBar
        nb.Initialize(App,
    "nb",False,App.EnumPosition.top,App.EnumThemes.Primary,"")
        nb.AddBrand(
    "","Menu","#")
        nb.AddHamburger
        nb.AddAnchor(
    "","Link","#","","",False,True,"",False)
        nb.AddAnchor(
    "","Link","#","","",False,False,"",False)
        
    '
        Dim dd As UOENowNavItemDropDown
        dd.Initialize(App,
    "dd","","Dropdown","","")
        dd.AddAnchor(
    "","Action","#","now-ui-icons users_circle-08","")
        dd.AddAnchor(
    "","Another Action","#","","")
        dd.AddAnchor(
    "","Something Else","#","","")
        dd.AddDivider
        dd.AddAnchor(
    "","Separated Content","#","","")
        nb.AddDropDown(dd) 
        d.AddNavBar(
    1,1,nb)
        
    'icons
        Dim nb As UOENowNavBar
        nb.Initialize(App,
    "nb1",False,App.EnumPosition.top,App.EnumThemes.Info,"")
        nb.AddBrand(
    "","Icons","#")
        nb.AddHamburger
        nb.JustifyContentEnd
        nb.AddAnchor(
    "","","#","now-ui-icons ui-1_send","",False,True,"",False)
        nb.AddAnchor(
    "","","#","now-ui-icons users_single-02","",False,False,"",False)
        
    Dim dd As UOENowNavItemDropDown
        dd.Initialize(App,
    "dd","now-ui-icons ui-1_settings-gear-63","","","")
        dd.AddHeader(
    "","Dropdown Header","")
        dd.AddAnchor(
    "","Action","#","now-ui-icons users_circle-08","")
        dd.AddAnchor(
    "","Another Action","#","","")
        dd.AddAnchor(
    "","Something Else","#","","")
        dd.AddDivider
        dd.AddAnchor(
    "","Separated Content","#","","")
        nb.AddDropDown(dd)
        d.AddNavBar(
    1,2,nb)
        d.AddH4(
    2,1,"","Navigation","","")
        n.Section.AddContainer(
    0,0,d)
    The menu on the left demos buttons sitting on the left without icons and the other with icons but sitting on the right side. Each of the menus have a dropdown using Nucleo icons. Each item in the navbar is a nav-item even the dropdown. Using a divider, one can also separate the anchors.

    The rest of the 5 navigation menus are themed per bootstrap themes, sitting on top of an image. To do this, a container is created and a background image set and then each of the navbars is added. Above we had demoed how to make the navbar transparent, so we see that again on the last navbar.

    Code:
    ' other navigation
        Dim n1 As UOENowContainer
        n1.Initialize(App,
    "navbarx",False,"","")
        n1.SetBackgroundImage(
    "./assets/bg7.jpg","740px")
        
    Dim nb As UOENowNavBar
        nb.Initialize(App,
    "nb",False,App.EnumPosition.top,App.EnumThemes.Primary,"")
        nb.AddBrand(
    "","Primary Color","#")
        nb.AddHamburger
        nb.JustifyContentEnd
        nb.AddAnchor(
    "","Discover","#pablo","now-ui-icons objects_globe","",False,True,"",False)
        nb.AddAnchor(
    "","Profile","#pablo","now-ui-icons users_circle-08","",False,False,"",False)
        nb.AddAnchor(
    "","Settings","#pablo","now-ui-icons ui-1_settings-gear-63","",False,False,"",False)
        n1.AddNavBar(
    0,0,nb)
        
    '
        Dim nb As UOENowNavBar
        nb.Initialize(App,
    "nb",False,App.EnumPosition.top,App.EnumThemes.Info,"")
        nb.AddBrand(
    "","Info Color","#")
        nb.AddHamburger
        nb.JustifyContentEnd
        nb.AddAnchor(
    "","Discover","#pablo","","",False,True,"",False)
        nb.AddAnchor(
    "","Profile","#pablo","","",False,False,"",False)
        nb.AddAnchor(
    "","Settings","#pablo","","",False,False,"",False)
        n1.AddNavBar(
    0,0,nb)
        
    '
        Dim nb As UOENowNavBar
        nb.Initialize(App,
    "nb",False,App.EnumPosition.top,App.EnumThemes.Success,"")
        nb.AddBrand(
    "","Success Color","#")
        nb.AddHamburger
        nb.JustifyContentEnd
        nb.AddAnchor(
    "","","#pablo","now-ui-icons objects_globe","",False,True,"",False)
        nb.AddAnchor(
    "","","#pablo","now-ui-icons users_circle-08","",False,False,"",False)
        nb.AddAnchor(
    "","","#pablo","now-ui-icons ui-1_settings-gear-63","",False,False,"",False)
        n1.AddNavBar(
    0,0,nb)
        
    '
        Dim nb As UOENowNavBar
        nb.Initialize(App,
    "nb",False,App.EnumPosition.top,App.EnumThemes.Warning,"")
        nb.AddBrand(
    "","Warning Color","#")
        nb.AddHamburger
        nb.JustifyContentEnd
        nb.AddAnchor(
    "","","#pablo","fab fa-facebook-square","",False,True,"",False)
        nb.AddAnchor(
    "","","#pablo","fab fa-twitter","",False,False,"",False)
        nb.AddAnchor(
    "","","#pablo","fab fa-google-plus","",False,False,"",False)
        nb.AddAnchor(
    "","","#pablo","fab fa-instagram","",False,False,"",False)
        n1.AddNavBar(
    0,0,nb)
        
    '
        Dim nb As UOENowNavBar
        nb.Initialize(App,
    "nb",False,App.EnumPosition.top,App.EnumThemes.Danger,"")
        nb.AddBrand(
    "","Danger Color","#")
        nb.AddHamburger
        nb.JustifyContentEnd
        nb.AddAnchor(
    "","{NBSP}Facebook","#pablo","fab fa-facebook-square","",False,True,"",False)
        nb.AddAnchor(
    "","{NBSP}Twitter","#pablo","fab fa-twitter","",False,False,"",False)
        nb.AddAnchor(
    "","{NBSP}Pin","#pablo","fab fa-pinterest","",False,False,"",False)
        n1.AddNavBar(
    0,0,nb)
        
    '
        Dim nb As UOENowNavBar
        nb.Initialize(App,
    "nb",False,App.EnumPosition.top,"","")
        nb.AddBrand(
    "","Danger Color","#")
        nb.AddHamburger
        nb.JustifyContentEnd
        nb.SetTransparent
        nb.AddAnchor(
    "","{NBSP}Facebook","#pablo","fab fa-facebook-square","",False,True,"",False)
        nb.AddAnchor(
    "","{NBSP}Twitter","#pablo","fab fa-twitter","",False,False,"",False)
        nb.AddAnchor(
    "","{NBSP}Pin","#pablo","fab fa-pinterest","",False,False,"",False)
        n1.AddNavBar(
    0,0,nb)
     
    korshkov and joulongleu like this.
  8. Mashiane

    Mashiane Expert Licensed User

    I like the idea of creating Tabs inside cards as they have done.

    UOENowTabs1.png

    These are nicely responsive as each header is just one after another on small devices using a single container to show the content. One can also add containers for content of each tab.

    Code:
    Dim xcard As UOENowCard
        xcard.Initialize(App,
    "xcard","","")
        
    Dim xtabs As UOENowTabs
        xtabs.Initialize(App,
    "xtabs","","")
        xtabs.Tabs.list.JustifyContentCenter
        xtabs.TabContent.TabContent.AddClass(
    "text-center")
        
    Dim c1 As UOENowContainer
        c1.Initialize(App,
    "c1",True,"","")
        c1.AddParagraph(
    0,0,"",App.LoremIpsumRandom(4),"","")
        xtabs.AddItem(
    "homei","Home","now-ui-icons objects_umbrella-13",False,True,c1)
        
    Dim c2 As UOENowContainer
        c2.Initialize(App,
    "c1",True,"","")
        c2.AddParagraph(
    0,0,"",App.LoremIpsumRandom(4),"","")
        xtabs.AddItem(
    "profilei","Profile","now-ui-icons shopping_cart-simple",False,False,c2)
        
    Dim c3 As UOENowContainer
        c3.Initialize(App,
    "c1",True,"","")
        c3.AddParagraph(
    0,0,"",App.LoremIpsumRandom(4),"","")
        xtabs.AddItem(
    "messagesi","Messages","now-ui-icons shopping_shop",False,False,c3)
        
    Dim c4 As UOENowContainer
        c4.Initialize(App,
    "c1",True,"","")
        c4.AddParagraph(
    0,0,"",App.LoremIpsumRandom(4),"","")
        xtabs.AddItem(
    "settingsi","Settings","now-ui-icons ui-2_settings-90",False,False,c4)
        xcard.AddTabs(xtabs)
    So a card is initialized and also the tabs are initialized. As cards can also have other types of elements, we create tabs and then add them to the card. The tabs in this example should be centered on the card and the tabcontent inside each tab should also be centered.

    For each existing tab, a container with LoremIpsum text is created just to demo, and each of these containers is passed when each tabs.AddItem method is called, specifying the tab title, icon, active, disabled properties. Then when the content for the tabs is created, these are added to the card. Automatically these are placed on the body element of the card. A card can have a header, body, footer, imageoverlay etc.
     
    korshkov and joulongleu like this.
  9. Mashiane

    Mashiane Expert Licensed User

    The other tabs example has been themed with a background. This is done by setting the backgroundcolor of the tabs component.

    UOENowTabs2.png

    Code:
    d.AddCategory(1,2,"","Tabs with Background on Card")
        
    Dim xcard As UOENowCard
        xcard.Initialize(App,
    "xcard","","")
        
        
    Dim tabsx As UOENowTabs
        tabsx.Initialize(App,
    "cardtabs",App.EnumThemes.Neutral,"")
        tabsx.BackgroundColor = 
    "orange"
        tabsx.Tabs.List.JustifyContentCenter
        
    Dim c1 As UOENowContainer
        c1.Initialize(App,
    "c1",True,"","")
        c1.AddParagraph(
    0,0,"","First container...","","")
        tabsx.AddItem(
    "chome","Home","now-ui-icons objects_umbrella-13",False,True,c1)
        
    Dim c2 As UOENowContainer
        c2.Initialize(App,
    "c2",True,"","")
        c2.AddParagraph(
    0,0,"","Second container...","","")
        tabsx.AddItem(
    "cprofile","Profile","now-ui-icons shopping_cart-simple",False,False,c2)
        
    Dim c3 As UOENowContainer
        c3.Initialize(App,
    "c3",True,"","")
        c3.AddParagraph(
    0,0,"","Third container...","","")
        tabsx.AddItem(
    "cmsgs","Messages","now-ui-icons shopping_shop",False,False,c3)
        
    Dim c4 As UOENowContainer
        c4.Initialize(App,
    "c4",True,"","")
        c4.AddParagraph(
    0,0,"","Fourth container...","","")
        tabsx.AddItem(
    "cset","Settings","now-ui-icons ui-2_settings-90",False,False,c4)
        
    'add to header
        xcard.AddTabs(tabsx)
        d.AddCard(
    1,2,xcard)
    So the same principles apply as the previous example, such that we set the background color here etc.
     
    korshkov and joulongleu like this.
  10. Mashiane

    Mashiane Expert Licensed User

    Other nice interesting things include progress bars, navigation pills, badges and pagination as demoed below.

    UOEOtherThings.png

    Progress Bars: Simple as ABC

    We create a containter and then add the prog bars as needed.

    Code:
    Dim co As UOENowContainer
        co.Initialize(App,
    "",True,"","")
        co.AddRows(
    1).AddColumns(2,12,6,6,6)
        co.AddH4(
    1,1,"","Progress Bars","","")
        co.AddProgress1(
    1,1,"prg","Default",25,"")
        co.AddProgress1(
    1,1,"prg1","Primary",60,App.EnumThemes.Primary)
    Navigation Pills

    Code:
    co.AddH4(1,1,"","Navigation Pills","","")
        
    Dim np As UOENowNavPills
        np.Initialize(App,
    "np",App.EnumThemes.Primary,"")
        np.AddItem(
    "ab","","#","far fa-gem",False,True)
        np.AddItem(
    "ac","","#","fa fa-thermometer-full",False,False)
        np.AddItem(
    "ad","","#","fa fa-suitcase",False,False)
        np.AddItem(
    "ae","","#","fa fa-exclamation",True,False)
        co.addNavPills(
    1,1,np)
    These can be marked as disabled / active depending on what one needs.

    Pagination

    One set of these have a previous and a next button and the other one not having.

    Code:
    Dim pg As UOENowPagination
        pg.Initialize(App,
    "pg",App.EnumThemes.Default,"")
        pg.AddItem(
    "pg1","1","#",False,True)
        pg.AddItem(
    "pg2","2","#",False,False)
        pg.AddItem(
    "pg3","3","#",False,False)
        pg.AddItem(
    "pg4","4","#",False,False)
        co.AddPagination(
    1,2,pg)
        
    '
        Dim pg1 As UOENowPagination
        pg1.Initialize(App,
    "pg1",App.EnumThemes.Primary,"")
        pg1.AddPrevious(
    False,False)
        pg1.AddItem(
    "pg1","1","#",False,True)
        pg1.AddItem(
    "pg2","2","#",False,False)
        pg1.AddItem(
    "pg3","3","#",False,False)
        pg1.AddNext(
    False,False)
        co.AddPagination(
    1,2,pg1)
    Badges

    To demo the badge labels, we used a loop to pick up the themes.

    Code:
    co.AddH4(1,2,"","Labels","","")
        
    Dim tCnt As Int = 0
        
    Dim tTot As Int = App.Themes.Size - 1
        
    For tCnt = 0 To tTot
            
    Dim strName As String = App.Themes.Get(tCnt)
            
    'create the badge
            Dim badge As UOENowBadge
            badge.Initialize(App,
    $"badge${tCnt}"$,strName,strName)
            co.AddBadge(
    1,2,badge)
        
    Next
     
    korshkov and joulongleu like this.
  11. Mashiane

    Mashiane Expert Licensed User

    Next are notifications. These can be placed inside modal dialogs also or in whatever container one wishes for.

    UOENotifications.png

    These notifications have icons and close buttons. These are optional and one has the flexibility to add whatever component they need on any component. This is because all components have a base component being the UOENowContainer. With that base component, one is able to add whatever component they need, whether inside the grid or not.

    Code:
    nt.Section.AddAlert1(0,0,"alert1","now-ui-icons ui-2_like","<strong>Well done!</strong> You successfully read this important alert message.",True,True,App.EnumThemes.Success)
        
        nt.Section.AddAlert1(
    0,0,"alert2","now-ui-icons travel_info", _
        
    "<strong>Heads up!</strong> This alert needs your attention, but it's not super important.",True,True,App.EnumThemes.Info)
        
        nt.Section.AddAlert1(
    0,0,"alert3","now-ui-icons ui-1_bell-53", _
        
    "<strong>Warning!</strong> Better check yourself, you're not looking too good.",True,True,App.EnumThemes.Warning)
        
        nt.Section.AddAlert1(
    0,0,"alert4","now-ui-icons objects_support-17", _
        
    "<strong>Oh snap!</strong> Change a few things up and try submitting again.",True,True,App.EnumThemes.Danger)
    Simply, each alert is themed and text for the notification added..
     
    korshkov and joulongleu like this.
  12. Mashiane

    Mashiane Expert Licensed User

    Typography deals with how to represent the headings and labels. This is easily done with built in methods that make and cover most properties.

    UOENowTypography.png

    To demo this, a container is created and this is added to a section container. Using methods like AddH1, AddH2, AddParagraph etc, makes this simple and straighforward.

    Code:
    Dim co As UOENowContainer
        co.Initialize(App,
    "co",True,"","")
        co.AddRows(
    1).AddColumns(1,"",12,"","")
        co.AddH4(
    0,0,"","Typography","","")
        
        co.AddH1(
    1,1,"","h1.Heading 1","","")
        co.AddH2(
    1,1,"","h2.Heading 2","","")
        co.AddH3(
    1,1,"","h3.Heading 3","","")
        co.AddH4(
    1,1,"","h4.Heading 4","","")
        co.AddH5(
    1,1,"","h5.Heading 5","","")
        co.AddH6(
    1,1,"","h6.Heading 6","","")
        co.AddBreak(
    1,1)
        co.AddParagraph(
    1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Danger,"")
        co.AddParagraph(
    1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Default,"")
        co.AddParagraph(
    1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Primary,"")
        co.AddParagraph(
    1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Success,"")
        co.AddParagraph(
    1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Warning,"")
        co.AddParagraph(
    1,1,"",App.LoremIpsumRandom(1),"","text-muted")
        co.AddBreak(
    1,1)
        co.AddBlockQuote(
    1,1,"bq1",App.LoremIpsumRandom(1),App.EnumThemes.Primary,"This is it...","Mashy","")
        
    'add container to section
        typ.Section.AddContainer(0,0,co)
     
    korshkov and joulongleu like this.
  13. Mashiane

    Mashiane Expert Licensed User

    The Now UI Kit images can be round, circle, raised etc.

    UOENowImages.png

    This has been simply done by adding each image in a single row column matrix to demo the method and settings one can use.

    Code:
    Dim co As UOENowContainer
        co.Initialize(App,
    "",True,"","")
        co.AddRows(
    1).AddColumns(1,12,12,12,12)
        co.AddH4(
    1,1,"","Images","","")
        co.AddRows(
    1).AddColumns(4,2,2,2,2)
        co.AddCategory(
    2,1,"","Image")
        co.AddImage1(
    2,1,"","./assets/julie.jpg","Image",True,False,False,"")
        co.AddCategory(
    2,2,"","Circle Image")
        co.AddImage1(
    2,2,"","./assets/julie.jpg","Circle Image",True,False,True,"")
        co.AddCategory(
    2,3,"","Raised Image")
        co.AddImage1(
    2,3,"","./assets/julie.jpg","Raised Image",True,True,False,"")
        co.AddCategory(
    2,4,"","Raised Circle Image")
        co.AddImage1(
    2,4,"","./assets/julie.jpg","Raised Circle Image",True,True,True,"")
    These images were loaded via the Files tab, then on build copied to the assets folder. Due to the need to clean up on unused project resources, we will later look into how to tell the UOENow library to keep resources that are used in the project.
     
    korshkov and joulongleu like this.
  14. Mashiane

    Mashiane Expert Licensed User

    Javascript Components address the need for modal dialog, tooltips, popovers and the date picker.

    UOENowModal.png

    Before a modal is shown via the toggle modal button it needs to be defined and then added to the page. A modal can be big and also show in mini format.

    UOEMiniModal.png

    These are created with this code respectively...

    Code:
    Dim mdl1 As UOENowModal
        mdl1.Initialize(App,
    "mymodal","","")
        mdl1.Size = App.EnumModalSize.large
        mdl1.Header.JustifyContentCenter
        mdl1.Header.AddModalCloseButton
        mdl1.Header.AddH4(
    0,0,"mdl1title","Modal Title","","modal-title")
        mdl1.Body.AddParagraph(
    0,0,"",App.LoremIpsum(1),"","")
        mdl1.Footer.AddButton1(
    0,0,"btnnice","Nice Button","","#","","",False,False,App.EnumThemes.Default,"","")
        mdl1.Footer.AddButton1(
    0,0,"btnclose","Close","","#","","",False,False,App.EnumThemes.danger,"","mymodal")
        
    Page.Content.AddModal(mdl1)
        
    '***
        Dim mdl2 As UOENowModal
        mdl2.Initialize(App,
    "mymodal1",App.EnumThemes.Default,"")
        mdl2.Size = App.EnumModalSize.small
        mdl2.Header.JustifyContentCenter
        
    ' add profile
        Dim prof As UOENowModalProfile
        prof.Initialize(App,
    "profile")
        prof.ModalProfile.AddIcon(
    0,0,"","now-ui-icons users_circle-08","","")
        mdl2.Header.AddModalProfile(
    0,0,prof)
        mdl2.Body.AddParagraph(
    0,0,"","Always have access to your profile","","")
        mdl2.Footer.AddButton1(
    0,0,"btnback","Back","","#","","",False,False,App.EnumThemes.Neutral,"","mymodal1")
        mdl2.Footer.AddButton1(
    0,0,"btnclose","Close","","#","","",False,False,App.EnumThemes.Neutral,"","mymodal1")
        
    Page.Content.AddModal(mdl2)
    The names of these modals are mymodal and mymodal1 respectively. To activate them, we can do so via buttons. So in the code, two buttons are added also specifying which modals to activate when clicked.

    Code:
    co.AddButton1(2,1,"smodal","Launch Modal","","","","",False,False,App.EnumThemes.primary,"","mymodal")
        co.AddButton1(
    2,1,"mmodal","Launch Modal Mini","","","","",False,False,App.EnumThemes.Warning,"","mymodal1")
    As noted above, a modal can have a header, body, footer just like a card component.

    DatePicker

    Adding a datepicker is as simple as writing this code line..

    Code:
    co.AddH4(2,1,"","Date Picker","","")
        co.AddDatePicker1(
    2,1,"dp","","10/05/2016", App.EnumThemes.Primary,"")
    Resulting in..

    UOENowDatePicker.png
     
    korshkov and joulongleu like this.
  15. Mashiane

    Mashiane Expert Licensed User

    Popovers activate when the element that are linked to is clicked. These have been set to ensure that the previous pop over is closed when a new one is activated. These can be placed on top, bottom, left, right of the element linked to and also themed.

    UOENowPopOver.gif

    Code:
    co.AddH4(2,2,"","Pop Overs","","")
        App.AddPopOver(
    "ponleft","ponleft",App.EnumPosition.left,App.LoremIpsumRandom(1),True,App.EnumThemes.Primary)
        co.AddButton1(
    2,2,"ponleft","On Left","","","","",False,False,App.EnumThemes.Default,"","")
        App.AddPopOver(
    "ponright","ponright",App.EnumPosition.right,App.LoremIpsumRandom(1),True,"")
        co.AddButton1(
    2,2,"ponright","On Right","","","","",False,False,App.EnumThemes.Default,"","")
        App.AddPopOver(
    "pontop","pontop",App.EnumPosition.top,App.LoremIpsumRandom(1),True,"")
        co.AddButton1(
    2,2,"pontop","On Top","","","","",False,False,App.EnumThemes.Default,"","")
        App.AddPopOver(
    "ponbottom","ponbottom",App.EnumPosition.bottom,App.LoremIpsumRandom(1),True,"")
        co.AddButton1(
    2,2,"ponbottom","On Bottom","","","","",False,False,App.EnumThemes.Default,"","")
        co.AddBreak(
    2,2)
        co.AddH4(
    2,2,"","Tool Tips","","")
        App.AddToolTip(
    "ponleft1",App.EnumPosition.left,App.LoremIpsumRandom(1))
        co.AddButton1(
    2,2,"ponleft1","On Left","","","","",False,False,App.EnumThemes.Default,"","")
        App.AddToolTip(
    "ponright1",App.EnumPosition.right,App.LoremIpsumRandom(1))
        co.AddButton1(
    2,2,"ponright1","On Right","","","","",False,False,App.EnumThemes.Default,"","")
        App.AddToolTip(
    "pontop1",App.EnumPosition.top,App.LoremIpsumRandom(1))
        co.AddButton1(
    2,2,"pontop1","On Top","","","","",False,False,App.EnumThemes.Default,"","")
        App.AddToolTip(
    "ponbottom1",App.EnumPosition.bottom,App.LoremIpsumRandom(1))
        co.AddButton1(
    2,2,"ponbottom1","On Bottom","","","","",False,False,App.EnumThemes.Default,"","")
    Tooltips activate as soon as the element linked to is hovered on. PopOver and Tooltips SHOULD be added before the owner element is added.
     
    korshkov and joulongleu like this.
  16. Mashiane

    Mashiane Expert Licensed User

    The Carousel is a slideshow of images that one can decide to show on their website.

    Code:
    Dim co As UOENowContainer
        co.Initialize(App,
    "",True,"","")
        co.AddRows(
    1).AddColumns(1,12,12,8,8)
        co.AddH4(
    1,1,"","Carousel","","")
        
        
    Dim c As UOENowCarousel
        c.Initialize(App,
    "c","")
        c.AddItem(
    "Image 1","./assets/bg1.jpg",True)
        c.AddItem(
    "Image 2","./assets/bg6.jpg",False)
        c.AddItem(
    "Image 3","./assets/bg3.jpg",False)
        c.AddItem(
    "Image 4","./assets/bg4.jpg",False)
        c.AddItem(
    "Image 5","./assets/bg5.jpg",False)
        co.AddCarousel(
    1,1,c)
        co.SetClass(
    1,0,"justify-content-center")
        cc.Section.AddContainer(
    0,0,co)
    A couple of images are added to the carousel. As noted above for large devices, the column size is 8 whilst for medium and small is 12.

    UOENowCarousel.png

    This automatically starts by itself and has navigation buttons for next and previous slides and also those on bottom to move around the slides.
     
    korshkov and joulongleu like this.
  17. Mashiane

    Mashiane Expert Licensed User

    Creating a footer.

    UOENowFooter.png

    Just above the footer, there is a black background container with buttons in the middle for social sharing. These are created by using .AddAnchorButton. The footer has a copyrights section that will always reflect the current system year, due to javascript code.

    The social sharing buttons are inside a container...

    Code:
    Dim co As UOENowContainer
        co.Initialize(App,
    "",True,"","")
        co.AddRows(
    1).addcolumns(1,12,12,8,8)
        co.SetClass(
    1,0,"justify-content-md-center sharing-area text-center")
        co.SetClass(
    1,1,"text-center")
        co.AddAnchorButton(
    1,1,"","","fab fa-twitter","#",App.EnumTarget.blank,App.EnumButtonSize.Large,True,True,App.EnumThemes.Neutral,"btn-twitter")
        co.AddAnchorButton(
    1,1,"","","fab fa-facebook-square","#",App.EnumTarget.blank,App.EnumButtonSize.Large,True,True,App.EnumThemes.Neutral,"btn-facebook")
        co.AddAnchorButton(
    1,1,"","","fab fa-linkedin","#",App.EnumTarget.blank,App.EnumButtonSize.Large,True,True,App.EnumThemes.Neutral,"btn-linkedin")
        co.AddAnchorButton(
    1,1,"","","fab fa-github","#",App.EnumTarget.blank,App.EnumButtonSize.Large,True,True,App.EnumThemes.Neutral,"btn-github")
    This container is centered for R1C1.

    Code:
    Sub Footer
        
    Page.Footer.CenterOnPage = True
        
    Page.Footer.BackgroundColor = "black"
        
    '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
    On the footer there is a list of links inside a nav element. This is added to the footercontent object of the footer. Also the copyright section is added with more details needed.
     
    korshkov and joulongleu like this.
  18. Mashiane

    Mashiane Expert Licensed User

    Let's take a look at Main.AppStart...

    This is rather longer than should be. This is because this has not been compiled into a library yet. The code that is covered here mostly will be in your website. We initialize the App object here (this is also done in BANano_Ready). What is does here is some useful stuff needed for the website configuration.

    1. Build up the list of resources (css, js files) the website will use.
    2. Tag resources that should not be deleted.
    3. Build the website
    4. Scan assets, scripts, styles folder for all relevant resources and remove anything else not tagged as not to be deleted. Your resources will still remain in the Files tab and thus Files folder of your project but tagging helps to clean up the version of your website to be created.
    5. Unzip the fonts folder (these are nucleo and fontawesome fonts to distribute) etc. Other code is just for the development version.

    When compiling this project to a library, most of this code will be removed.

    Code:
    App.Initialize(AppName,ShortName,True)
        
    'mark files as not to be deleted
        'App.TagDoNotDelete(Array As String("1.jpg","2.jpg","3.jpg"))
        'App.TagDoNotDelete(Array As String("4.jpg","5.jpg"))
        'App.TagDoNotDelete(Array As String("eric.png","kenny.png","sponge.png","yuna.jpg","background.png"))
        'replica
        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"))
        
    'build the project
        BANano.Build(File.DirApp)
        
    '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
    To Do: Consolidate and minify the css and js files for distribution.

    That's all folks. Thanks for taking time to go through this. Enjoy!
     
    korshkov and joulongleu like this.
  19. Mashiane

    Mashiane Expert Licensed User

    In summary, the base component for any component in UOENow is the UOENowContainer. UOENow does not use the abstract designer as one can code their website from start to finish. The assumption being made is that one should design their UI first then inject events and Banano code after Page.Create.

    Page.Create ensures that all the elements Added to the various containers are created and then added to the page with SetHTML. There are no events, getters / setters built with this library and one can use their knowledge of javascript / css to enhance UOENow and also add functionality for .GetValue, .SetValue, .SetStyle etc.

    As this is based on the bootstrap framework, additional bootstrap and or bootstrap functionality can be added easily. You will also note on the Creative Tim's Now UI Kit website that they reference one to the bootstrap website for more functionality.

    The focus has been on building websites, now let me work on my next website project with this.

    Enjoy...

    Ta!
     
    korshkov, RWK and joulongleu like this.
  20. joulongleu

    joulongleu Active Member

    :)waw!!! Very good ,UOENEW beautiful component,How can I use event?:)
     
    Last edited: Mar 17, 2019
    Mashiane 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