B4J Tutorial [BANanoWebix] Lesson 15 Menus & Windows

Discussion in 'B4J Tutorials' started by Mashiane, Jun 25, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Hi

    This lesson covers 3 items being..

    1. Menu
    2. SideMenu
    3. Window
    4. Popup

    Lesson15.gif

    1. The menu

    This can be a vertical or horizontal menu that one can have and it can also have sub-menus. For each menu item one is able to indicate the icon and badge to mention a few.

    Code:
    Dim menu As WixMenu
        
    menu.Initialize("menu")
        
    menu.SetSubMenuPosRight("")
        
    'show down arrow
        'menu.SetItemSubSign(True)
        menu.SetSelect(True)
        
    menu.setWidth(180)
        
    menu.SetHeight(300)
        
    'make menu vertical
        'menu.SetLayoutY("")
        menu.AddItem("""mt""Man Tactical""","","3","")
        
    menu.AddItem("mt""mtw""Worf""","","","")
        
    menu.AddItem("mt""mtd""Data""","","","")
        
    menu.AddSeparator("mt")
        
    menu.AddItem("mt""mtr""Riker""","","","")
        
    menu.AddItem("""fp""Fire Phasers","","","","")
        
    menu.AddItem("""ft""Fire Torpedoes""","","","")
        
    menu.AddItem("""win""Window""","","","")
        
    menu.AddItem("""iframe""iFrame""","","","")
    2. SideMenu

    The sidemenu can appear on either position of the screen whether left, right, bottom or top.

    Code:
    Dim sm As WixSideMenu
        sm.Initialize(
    "sm")
        sm.SetTemplate(
    "<span class='webix_icon mdi mdi-#icon#'></span> #value#")
        
    '
        sm.AddItem("new""New""account")
        sm.AddItem(
    "open""Open""cube")
        sm.AddItem(
    "close""Close""database")
    To toggle it, a method has been written for a toolbar button to check its visibility and toggle the side-menu.

    Code:
    Sub OpenMenu(meid As String)
        
    'toggle sidemenu
        Dim bVisible As Boolean = pg.IsVisible(smUX)
        
    If bVisible Then
            pg.Hide(smUX)
        
    Else
            pg.Show(smUX)
        
    End If
    End Sub
    3. Window

    One is able to create modals / resizable windows on the app via the Window element.

    Code:
    Dim win As WixWindow
        win.Initialize(
    "myWindow").SetWidth(300).SetHeight(200).SetLeft(100).SetTop(100).SetMove(True).SetResize(True).SetClose(True)
        win.SetHead(
    "A window unto the world!")
        win.SetPositionCenter(
    "")
        
    'win.SetModal(True)
        win.ToolBar.SetMargin(-4)
        win.ToolBar.CreateLabel(
    "lbl").SetLabel("A window unto the world!").Pop
        win.ToolBar.CreateIcon(
    "icnback").SetIcon("mdi mdi-arrow-left").Pop
        win.ToolBar.CreateIcon(
    "icnclose").SetIcon("mdi mdi-close").Pop
        
    'replace normal header
        win.SetToolBar(True)
        win.SetTemplate(
    "<br>We can show HTML here, or other Webix components - we could, in fact, build an entire application UI in a window!")
        
    'win.SetFullScreen(True)
    winUX = pg.UX(win.Item)
    The window can also be set to be full-screen. In this example its shown by clicking a menu button (top menu)

    Code:
    Sub itemClick(meid As String)
        
    Select Case meid
        
    Case "iframe"
        
    Case "win"
            pg.Show(winUX)
    4. Popup

    One can easily show a pop-up on their app by calling the PopUp method with the template content they want to show.

    Code:
    pg.ShowPopUp("I'm loving Webix Intergrations!"75375"center")
     
  2. Mashiane

    Mashiane Expert Licensed User

    Vertical Menu

    The menu here can also be made to display vertically by calling .SetLayoutY(""), this has the effect of rendering it like... (see bottom)

    Lesson15Update.gif

    So we have defined another menu and added it to the page...

    Code:
    Dim menu1 As WixMenu
        menu1.Initialize(
    "menu1")
        
    'show down arrow
        menu1.SetItemSubSign(True)
        menu1.SetSelect(
    True)
        menu1.setWidth(
    180)
        menu1.SetHeight(
    300)
        
    'make menu vertical
        menu1.SetLayoutY("")
        menu1.AddItem(
    """mt""Man Tactical","","","3","")
        menu1.AddItem(
    "mt""mtw""Worf""","","","")
        menu1.AddItem(
    "mt""mtd""Data""","","","")
        menu1.AddSeparator(
    "mt")
        menu1.AddItem(
    "mt""mtr""Riker""","","","")
        menu1.AddItem(
    """fp""Fire Phasers","","","","")
        menu1.AddItem(
    """ft""Fire Torpedoes""","","","")
        menu1.AddItem(
    """win""Window""","","","")
        menu1.AddItem(
    """iframe""iFrame""","","","")
        pg.Page.AddRows(menu1.Item)
    And to ensure that the menu and also the submenus work, we have added a new event..

    Code:
    Dim meID As Map
        pg.onMenuItemClick(
    "menu", BANano.CallBack(Me, "itemClick"Array(meID)))
        pg.onMenuItemClick(
    "menu1", BANano.CallBack(Me, "itemClick"Array(meID)))
     
    JakeBullet70 likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    About the Window

    The window is a component that gets created at runtime actually and is never added to the DOM, so we can have an own property that whenever it is needed, we create and show it and then assign events to it. It gets saved as a BANanoObject in memory.

    Lesson15Window.gif

    So the new method is..

    Code:
    Sub CreateWindow
        win.Initialize(
    "myWindow").SetWidth(300).SetHeight(200).SetLeft(100).SetTop(100).SetMove(True).SetResize(True).SetClose(True)
        win.SetHead(
    "A window unto the world!")
        win.SetPositionCenter(
    "")
        
    'win.SetModal(True)
        win.ToolBar.SetMargin(-4)
        win.ToolBar.CreateLabel(
    "lbl").SetLabel("A window unto the world!").Pop
        win.ToolBar.CreateIcon(
    "icnback").SetIcon("mdi mdi-arrow-left").Pop
        win.ToolBar.CreateIcon(
    "icnclose").SetIcon("mdi mdi-close").Pop
        
    'replace normal header
        win.SetToolBar(True)
        win.SetTemplate(
    "<br>We can show HTML here, or other Webix components - we could, in fact, build an entire application UI in a window!")
        
    'win.SetFullScreen(True)
        '
        winUX = pg.UX(win.Item)
    End Sub
    So each time we need it we can just call CreateWindow. The way the window shows is linked to a menu button.

    Code:
    Sub itemClick(meid As String)
        
    Select Case meid
        
    Case "iframe"
        
    Case "win"
            CreateWindow
            pg.Show(winUX)
            
    'assign event
            pg.OnItemClick(win.ToolBarID, BANano.CallBack(Me, "windowClick"Array(meid)))
        
    Case "mt"
            pg.ShowPopUp(
    "I'm loving Webix Intergrations!"75375"center")
        
    Case Else
            pg.Message(meid)
        
    End Select
    End Sub
    So when "win" is selected, the window is created and it gets shown. As we have a toolbar in it, we also attach events to the toolbar buttons with OnItemClick.

    These events are linked to a callback named windowClick.

    Code:
    Sub windowClick(meID As String)
        
    Select Case meID
        
    Case "icnclose"
            pg.Close(winUX)
        
    Case Else
            pg.Message(meID)
        
    End Select
    End Sub
    So when the icon 'icnclose' is clicked, it fires a close method linked to winUX, a BANanoObject.
     
    JakeBullet70 and joulongleu like this.
  4. Mashiane

    Mashiane Expert Licensed User

    NB: At the current moment, the SideMenu is still tricky, so rather use the SideBar as discussed here.

    Thanks to a friend who picked these things up.

    Here is the repo.
     
    joulongleu 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