Share My Creation [BANanoWebix] An OpenSource Webix UX Wrapper for BANano

Discussion in 'B4J Share Your Creations' started by Mashiane, Jun 12, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Version 1.04 out, includes the first looks of the BANanoWebix-FormDesigner

    Get it here
    joulongleu likes this.
  2. Mashiane

    Mashiane Expert Licensed User

    The WixToggle element is now separated from the WixButton (they share very large similarities). This is due to the FD (Form Designer) as each element should stand on its own. Functionalities of the toggle were removed from the WixButton and updates to demo done.

    So one needs to define the ToggleButton as WixToggle and no longer as WixButton.

    Library Update
    Last edited: Jul 7, 2019
    joulongleu likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    joulongleu and José J. Aguilar like this.
  4. Mashiane

    Mashiane Expert Licensed User

    Version 1.10 now available, this includes some bug fixes and updates to the form designer. An empty shell for a sidebar based app has been included to showcase functionality of multi-view. Shells / templates are just that shells and are unlikely to be updated with content. Be inspired!

    Get it here..
    joulongleu likes this.
  5. Mashiane

    Mashiane Expert Licensed User

    BANanoWebix 1.12 now available.

    I had the pleasure of converting a legacy vb6 module with crud functionality to a BANanoWebix app!!! This meant the way I thought about BANanoWebix had to change and I made some minor but very important changes to BANanoWebix to make the whole thing work.

    It reminded me of my coding syle as I also followed the same approach in doing things, well, they methodologies still work.

    One of the major changes is events that had to be declared after pg.UI, this is NO LONGER NECESSARY. Let me provide an explanation..

    Dim myList As WixDataTable
        Dim arguements As Object
    In the above code, we have defined a data table. We need to trap the item double click event and also the keypress event. Previously this event attachment would have been done with pg.OnItemDoubleClick after pg.UI. With BANanoWebix 1.12, you can link events to elements as soon as they are initialized just like here. This takes a lot of weight of having to attach events in one pg.UI event after the page is built.

    2. The GetSelectedID has now been converted into a class. This returns an object that you can later parse to run .GetItem on the grid to get the saved data item on your datatable.

    3. You can maintain the data-table records by using .Update / .Add without having to reload the complete contents of the data-table from a database.

    4. You can reload the data in a data-table after page rendering by calling pg.ClearDataTable(?) and pg.SetData(?, data). The WixDataTable.SetData(?) on the data-table is before the page is rendered however the WixPage.SetData(?, data) is after the page is loaded with .UX.

    5. To change any property of an element after it has been drawn one can use .Define(?, createmap(prop1:prop1val)) and then call .Refresh(?) on the element using its id.

    Get it here
    joulongleu and JOSE GOMES like this.
  6. Mashiane

    Mashiane Expert Licensed User

    Version 1.14 features the WixImage as discussed here.

    For consistency, the WixDateTimePicker has now been renamed to WixDatePicker to be in line with the webix component names.

    One can also create and download text files through button clicks by calling...

    Sub download
    If lastcode <> "" Then
            lastcode = lastcode.Replace(
    End If
    End Sub
    This requires these lines to be added to the headers.

    We also tested if one can have collaboration in their apps with TogetherJS.

    Add this to the header.

    This is activated with

    Sub collab
    Dim theObject As Object = Sender
    Dim isonline As Boolean = BANano.CheckInternetConnectionWait
    If isonline Then
    "You dont appear to be connected to the interweb!")
    End If
    End Sub

    Get it here
    Last edited: Jul 19, 2019
    joulongleu likes this.
  7. Mashiane

    Mashiane Expert Licensed User

  8. Mashiane

    Mashiane Expert Licensed User

    Last edited: Jul 24, 2019
    joulongleu likes this.
  9. Mashiane

    Mashiane Expert Licensed User

    2019-07-25 Update

    1. The form designer and the BANanoWebix Demo source code have now been consololidated into 1 project for ease of maintenance.

    2. Headers (black circle) now include the source code page reference so that one can track back the source code demoed on that page.

    3. You access the form designer from the side menu (green circle), its always the first item.

    4. Version 1.18 of BANanoWebix and the BANanoWebixApp available on github

    5. I am developing using Laragon and thus my publish / build folder is

    Publish = "C:\laragon\www"
    if you are using XAMPP, leave this as

    Publish = "C:\xampp\htdocs"
    joulongleu likes this.
  10. Mashiane

    Mashiane Expert Licensed User

  11. Mashiane

    Mashiane Expert Licensed User

    Version 1.20, added a progress bar overlay for long processes that you can also hide.

    BANanoWebix 1.20

    joulongleu likes this.
  12. Mashiane

    Mashiane Expert Licensed User

    Foreign Values on tables (from contractid > contractname) / Setting Column Properties after using .AutoConfig / loading dynamic data-table data.

    From this - showing contractid numbers


    To showing actual contract numbers


    1. When saving my form with comboboxes that are derived from other tables, I load the options with key,value pairs.
    2. What Page.GetValues does is to read the key of that combobox.
    3. Now, the details of my form are loaded as saved directory to a data-table, and I am not running a join query.
    4. To be able for my data-table to establish that the value in some column is actually, Mr A, one option is to call .SetOptions(?) on the WixDataColumn when creating the WixDataTable. The question is what if the data is dynamic and keeps changing?

    5. So what happens is, the data-table structure has been created, what needs to happen is the data in the data-table needs to be refreshed and all foreign keys be property identified. Of when you were creating the data-table you used .AutoConfig and need to change the column properties?

    'clear the grid
    2. otardb.OpenWait("otardb""otardb")
        rs = alaSQL.SelectAll(
    "contracts"Array("id""number"), Array("number"))
        rs.Result = otardb.ExecuteWait(rs.query, rs.args)
    3Dim nl As List = Page.List2IDValue(rs.result, Array("id""number"))
        4Page.SetDataColumn(grd, "contractid", CreateMap("options" : nl))
    'initialize recordset
        6. alaSQL.Initialize
        rs = alaSQL.SelectAll(source, 
    Array("*"), Array("ele"))
        rs.Result = otardb.ExecuteWait(rs.query, rs.args)
    Page.SetData(grd, rs.result)
    What we do above is 5.1. clear all the contents of the grid. The column structure is intact. For this you need to know the column you want to change properties to.

    5.2. I have a table with contracts and in my form, the contract was saved as 1 with contract number MST1010. I want to retrieve this foreign value MST1010. So I execute a query to get all the contracts and then convert this to a key,value pair using List2IDValue in 5.3. Instead of havings maps with id,number keys now I have id,value pair.

    5.4 The column to feed in my data-table is "contractid" and the responsible field to keep a list of the foreign values is "options" just like the radio/segmented/combo etc elements. I use .SetDataColumn to set this column properties and then call .RefreshColumns in 5.5.

    In 5.6, the records of the grid I want to display are selected and using .SetData, updated and refreshed and my contractid based column now shows the foreign keys, MST1010 etc and not 1,2, 3 etc.

    Where you used autoConfig, you might want to change the data-column properties like this too.

    See configuation for columns,

    Last edited: Jul 30, 2019
    Johan Hormaza and joulongleu like this.
  13. Mashiane

    Mashiane Expert Licensed User

    Johan Hormaza and joulongleu like this.
  14. Mashiane

    Mashiane Expert Licensed User

    Version 2.15, just a slight maintenance issue that was related to MySQL connectivity is now available..

    Please note, there is an example app on the repo that is actually the same app but has different backends.

    4. App uses inline PHP for SQLite backend
    5. App uses BANanoSQL for backend
    6. App used inline PHP for MySQL backend

    This just shows how one can develop and app and then migrate it to a more stronger backend from AlaSQL, then SQLite then MySQL.

    The SQLite and MySQL code is 99% the same, just the class names and variables named used for the backend-talk is different
    Johan Hormaza and joulongleu like this.
  15. Mashiane

    Mashiane Expert Licensed User

    Skinning / Theming your Webix App

    There are themes that you can apply for your app for uniformity. To be able to do this, you need the webix skin builder. With this you can select or customise a theme that you need, download the resources and then use .AddCssFile and .AddJavaScriptFile on your BANanoWebix App.

    1. Go to the skin builder,


    This provides example apps and how they will look with different skins. The default is material (under the Skin) tab. If you click any of the skins, the skin builder automatically applies your theme. You can then customize your theme or just download it as it is.

    2. Click Download to download your theme of choice, a zip file will be generated for the download.
    3. Extract the contents of this zip file and inside there will be some resource files.


    4. Copy the css and js files to your B4J BANanoWebix project.

    Your files tab should now look like this.


    5. The next step is to set up your project to use this new theme/skin, go back to Main and ensure that your resources are loaded the BANano way.


    Attached Files:

  16. Mashiane

    Mashiane Expert Licensed User

    BANanoWebix 2.16

    Version 2.16 has an exciting feature of importing sqlite database schemas so that you can create your apps quicker. You can use AlaSQL (BANanoSQL), SQLite PHP and MySQL PHP as your backend for any BANanoWebix App.

    Get it here
    joulongleu and Johan Hormaza like this.
  17. Mashiane

    Mashiane Expert Licensed User

    joulongleu likes this.
  18. Mashiane

    Mashiane Expert Licensed User

    Version 2.21 Available.

    Added some functions to:

    1. Get a WixElement by id so that one is able to execute .RunMethod. This is useful when you want to run your own methods using Webix API.
    2. Get the underlying DataSource for a wixelement.
    3. Get an item from the DataSource

    'get datatable item
    Sub DataTableGetItem(dt As BANanoObject, itemID As MapAs Map
    Dim gItem As Map = dt.RunMethod("getItem"Array(itemID)).result
    Return gItem
    End Sub

    'get item from datasource
    Sub DataSourceGetItem(ds As BANanoObject, itemID As StringAs Map
    Dim rec As Map = ds.RunMethod("getItem"Array(itemID)).result
    Return rec
    End Sub

    'get the wixitem
    Sub GetWixElement(eID As StringAs BANanoObject
        eID = eID.ToLowerCase
    'select the item
        Dim itm As BANanoObject = Dollar.Selector(eID)
    Return itm
    End Sub

    'get data of an item
    Sub GetDataSource(elID As StringAs BANanoObject
    Dim bo As BANanoObject = GetWixElement(elID)
    Dim Data As BANanoObject = bo.GetField("data")
    Return Data
    End Sub
    Download from here,
    joulongleu likes this.
  19. Mashiane

    Mashiane Expert Licensed User

    Update 2.23

    Update 2.23 available on first post. Added the .SetStyle shortcut method for most of the controls.

    NB: 1. Copy your own webix.min.js and webix.min.css to the Files folder of the BANanoWebix project, 2. Open and run the project to compile the library.
    You can get your own copy of webix from here,

    Update on first post!

    joulongleu likes this.
  20. Mashiane

    Mashiane Expert Licensed User

    IMPORTANT ANNOUNCEMENT: Distributing BANanoWebix Library without Webix Resources in effect

    Please note that the inclusion of the webix.min.js and webix.min.css resource files in the distribution of BANanoWebix is no longer being effected. Webix has a trial licence that you can register for and download to get these resources or purchase their framework. The BANanoWebix library is no longer part of the 1. Libraries folder anymore.

    To compile the BANanoWebix library,

    1. Download webix resources,
    2. Copy the emailed webix.min.css and webix.min.js files to the Files folder of the BANanoWebix folder
    3. Open the BANanoWebix project and run it, you will need BANano 3.09+ to do this too.
    4. You are set to go.

    All the best

    joulongleu likes this.
  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