B4J Tutorial [BANanoWebix] Lesson 19 Contexts

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

  1. Mashiane

    Mashiane Expert Licensed User

    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.

    Lesson19Contexts.gif

    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.

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

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

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

    Code:
    Sub itemClick(meid As String)
        pg.Message(meid)
    End Sub
     
    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