B4J Tutorial [BANanoWebix] Lesson 9: DataView

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

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    Get your own copy of BANanoWebix

    The data view is also one of the elements to view data from data sources. One feeds it whatever template they need to display it it. For example here we have used..

    Code:
    <div id='tmp' class='webix_strong' style='background-color:#ffeaea !important;' >#title#</div> Year: #year#<br/>System: #system#
    To display..

    Lesson9.png

    We have defined the data to add..

    Code:
    Dim data As List
        data.Initialize
        data.Add(CreateMap(
    "title" : "Pitfall""year" : 1982"system" : "Atari 2600"))
        data.Add(CreateMap(
    "title" : "Pick Axe Pete""year" : 1982"system" : "Odyssey2"))
        data.Add(CreateMap(
    "title" : "Ladybug""year" : 1981"system" : "Colecovision"))
        data.Add(CreateMap(
    "title" : "Altered Beast""year" : 1988"system" : "Sega Genesis"))
        data.Add(CreateMap(
    "title" : "Halo""year" : 2001"system" : "Xbox"))
        data.Add(CreateMap(
    "title" : "Crash Bandicoot""year" : 1996"system" : "Playstation"))
        data.Add(CreateMap(
    "title" : "Guitar Hero""year" : 2005"system" : "Playstation 2"))
    Then defined the structure of the DataView including the template to use.

    Code:
    Dim dt As WixDataView
        dt.Initialize(
    "dv")
        dt.SetxCount(
    4).Setwidth(640).SetHeight(250).SetBorderless(False).SetItemHeight(100)
        dt.SetStyle(
    "margin" , "10px").SetSelect(True).SetMultiSelect(False)
        
    Dim tmp As UOENowHTML
        tmp.Initialize(
    "tmp""div")
        tmp.AddStyle(
    "background-color""#ffeaea")
        tmp.AddClass(
    "webix_strong")
        tmp.AddContent(
    "#title#")
        tmp.AddContentAfter(
    " Year: #year#{BR}System: #system#")
        dt.SetTemplate(tmp.HTML)
        
        dt.SetData(data)
    We also added an onSelectChange event to trap what happens when a selection changes.

    Code:
    pg.UI
        
    '
        Dim recs As List
        pg.OnSelectChange(
    "tmp", BANano.CallBack(Me,"dataview_click"Array(recs)))
    When setting the template its important to set the item height and width so that your item appears propertly.

    To be able to trap the select method of the dataview we have .SetSelect(True)
     
    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