B4J Tutorial [BANanoWebix] Lesson 19 Contexts

Ola

This lesson is about the 'context' and 'contextmenu' widgets.

Context are popups that one can use in case they want to provide some help on the UX. Both the context and context menus appear when the right mouse button is clicked and can be linked to any element on the page.

In this example, we create two divs the normal way HTML components are defined and then we set the 'master' divs for the context and context menus.

Each time one right clicks on the divs, the context and context menu appears. As these contexts are created during run time, they should be built after the page .UI method is called.

First we create a row, then build our divs and inject to the row using the .SetTemplate method of the row. We set some background colors to the divs for our example.

'
    Dim R1 As WixRow
    R1.Initialize("R1")
    '
    'the body of the page is empty, lets create a div
    Dim div1 As UOENowHTML
    div1.Initialize("div1", "div").SetStyle("background-color", "#ff0000")
    div1.SetStyle("width", "200px").SetStyle("height", "200px")
    '
    Dim div2 As UOENowHTML
    div2.Initialize("div2", "div").SetStyle("background-color", "#00ff00")
    div2.SetStyle("width", "200px").SetStyle("height", "200px")
    '
    'get the body element
    Dim sb As StringBuilder
    sb.Initialize
    sb.Append(div1.HTML)
    sb.Append("<br>")
    sb.Append(div2.html)
    '
    R1.SetTemplate(sb.ToString)
    '

We then add the row to the page and then execute .UI method of the page.

Creating the Context

The next step is to build the 'memory/runtime' contexts and link them to each of the divs.

Dim context As WixContext '(popup)
    context.Initialize("context").SetMaster("div1").SetWidth(250).SetHeight(150)
    context.SetTemplate("Exterminate the Doctor! Exterminate! Exterminate!")
    '
    pg.AddContext(context)

As you right click on "div1" the context pop-up will show.

Creating the ContextMenu

The context-menu is a menu, thus all the operations related to the WixMenu will apply.

Dim contextmenu As WixContextMenu
    contextmenu.Initialize("contextmenu").SetMaster("div2").SetSelect(True)
    contextmenu.AddItem("","sendto","Send To...","","","","")
    contextmenu.AddItem("sendto", "clara", "Clara","","","","")
    contextmenu.AddItem("sendto", "billie", "Billie","","","","")
    contextmenu.AddItem("sendto", "rose", "Rose","","","","")
    contextmenu.AddItem("","addcompanion","Add Companion","","","","")
    Dim data As List = pg.Unflatten(contextmenu.Items, "submenu")
    contextmenu.SetData(data)
    '
    pg.AddContextMenu(contextmenu)
    '
    Dim meID As Map
    pg.onMenuItemClick("contextmenu", BANano.CallBack(Me, "itemClick", Array(meID)))

We add each of the menu items and then attach an event so that when each item of the menu is clicked we can do something.

Sub itemClick(meid As String)
    pg.Message(meid)
End Sub