B4J Tutorial [BANanoWebix] Lesson 31 WixImage


One of the components that seem not to feature anywhere as a built up component is the image. Anyway to cut a long story short, here is our own version of the image, called WixImage.


What we have also done here is to trap the onChange event of the RichSelect component. Whilst a WixCombo has an edit box so that one can type on it, a RichSelect has not.

On each change of the make and model, we change the image that shows for the product.

We define the photo in process globals..

Dim photo As WixImage

We then add it as part of our form.


We have also added, the make and model select boxes.

Dim rs1 As WixRichSelect
    rs1.Initialize("make").SetName("make").SetLabel("Make").SetPlaceHolder("Click to select")
    rs1.SetOptionsMAP(CreateMap("transtar": "Transtar", "kasma": "Kasma", "typhon": "Typhon&Co"))
    Dim rs As WixRichSelect
    rs.Initialize("model").SetName("model").SetLabel("Model").SetPlaceHolder("Click to select")
    rs.SetOptionsMAP(CreateMap("coral": "Coral AF-13B72P", "thalos": "Thalos RD-D7N0H8", "pytheas": "Pytheas RY-1M4L1VE"))

IMPORTANT: The .SetName property of these controls has been set so that we are able to get/set their contents with .SetValues and .GetValues

Note that we also added the .OnChange events for these controls, before these are added to the from. These are part of the advanced additions with BANanoWebix 1.12+

After our page is built and renders, we want to set the default values of the form. This has the effect of rendering the expected image chosen..

    Dim vals As Map = CreateMap()
    vals.Put("make", "kasma")
    vals.Put("model", "coral")
    vals.Put("produced", "2056-05-05")
    vals.Put("color", "#DD0000")
    vals.Put("notifications", "Agree")
    pg.SetValues("form", vals)

Now, when each make and model is changed, the getCar method is called. When this method is called, we want it to be delayed a little and then fired, so we use the .delay method of webix.

Sub getCar
End Sub

Sub getCar1
    Dim fd As Map = pg.GetValues("form")
    Dim make As String = fd.Get("make")
    Dim model As String = fd.Get("model")
    Dim val As String = $"${make}_${model}.jpg"$
    photo.SetValue("./assets/" & val).Refresh(pg)
End Sub

So, on each change, .getCar is called, however through a delay mechanism, getCar calls getCar1 which does the update of the image.

IMPORTANT: Due to the image being a built in component (not with ProtoUI though), setting and updating it is done by updating the .template of the parent element. So we need to fire a .Define and .Refresh methods on it. This a .Refresh method of the WixImage component was built that should be passed the WixPage that we are calling from.



Licensed User
Longtime User
Adding images to the toolbar

One is also able to add images to the toolbar easily. In this example we have added a company logo on the left and also a profile pic image on the right with a status connector.


This is done with the...

1. .CreateElement (logo on left) call of the toolbar and then
2. .CreateAvatar (profile pic) on the right.

Sub getToolBar As WixToolBar
    Dim tblBar As WixToolBar
'icon for side menu toggling    
tblBar.CreateIcon("menuopen").SetIcon("mdi mdi-menu").SetClick(BANano.CallBack(pgFormDesigner, "OpenMenu", Null)).Pop
'create the logo
    tblBar.CreateElement("logo").SetStyle("background","url(./assets/webix-logo.svg) 2px -7px no-repeat").SetWidth(100).AddToColumns(tblBar.toolbar)
'add a label
    tblBar.CreateLabel("heading").SetLabel("BANanoWebix - Form Designer").Pop
'a spacer to separate left and right buttons
'refresh button    
tblBar.CreateIcon("refresh").SetIcon("mdi mdi-refresh").SetTooltip("Refresh tree").SetClick(BANano.CallBack(pgFormDesigner,"refreshapp", Null)).pop
    'help button
    tblBar.CreateIcon("help").SetIcon("mdi mdi-help").SetTooltip("Hints").SetClick(BANano.CallBack(pgFormDesigner,"showhints", Null)).pop
'collaborate button    
tblBar.CreateIcon("collab").SetIcon("mdi mdi-wechat").SetTooltip("Collaborate").SetClick(BANano.CallBack(pgFormDesigner,"collab",Null)).pop
'profile picture    
tblBar.CreateAvatar("avatar", "./assets/3.jpg", "green",CreateMap("top":"-4px")).SetTooltip("Click here To change settings").SetWidth(60).SetBorderLess(True).AddToColumns(tblBar.ToolBar)
    Return tblBar


Get BANanoWebix OpenSource Library here.

End Sub