B4J Tutorial [BANanoWebix] Lesson 15 Menus & Windows

Hi

This lesson covers 3 items being..

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

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.

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.

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.

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.

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)

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.

pg.ShowPopUp("I'm loving Webix Intergrations!", 75, 375, "center")

 

[Mashiane]

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)

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

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

Dim meID As Map
    pg.onMenuItemClick("menu", BANano.CallBack(Me, "itemClick", Array(meID)))
    pg.onMenuItemClick("menu1", BANano.CallBack(Me, "itemClick", Array(meID)))

 

[Mashiane]

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.

So the new method is..

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.

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!", 75, 375, "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.

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.

 

[Mashiane]

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.