B4J Tutorial [BANanoWebix] Lesson 31 WixImage

Discussion in 'B4J Tutorials' started by Mashiane, Jul 19, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    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.

    WixImage.gif

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

    Code:
    Dim photo As WixImage
    We then add it as part of our form.

    Code:
    photo.Initialize("photo").SetHeight(260).SetBorderLess(True)
        photo.AddToRows(frm.Form)
    We have also added, the make and model select boxes.

    Code:
    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"))
        rs1.RichSelect.OnChange(BANano.CallBack(Me,
    "getCar",Null))
        rs1.AddToRows(frm.Form)
        
        
    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"))
        rs.RichSelect.OnChange(BANano.CallBack(Me,
    "getCar",Null))
        rs.AddToRows(frm.Form)
    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..

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

    Code:
    Sub getCar
        pg.webix.RunMethod(
    "delay",BANano.CallBack(Me,"getCar1",Null))
    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.

    Ta!
     
    Alexander Stolte and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed 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.

    ontoolbar.png

    This is done with the...

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

    Code:
    Sub getToolBar As WixToolBar
        
    Dim tblBar As WixToolBar
        tblBar.Initialize(
    "tblBar").SetHeight(58).setPadding(9)
    '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
        tblBar.AddSpacer
    '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

    Ta!

    Get BANanoWebix OpenSource Library here.

    End Sub
     
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