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

    Code:
    Dim myList As WixDataTable
        records.Initialize
        myList.Initialize(
    "grid_insurance_master").SetSelect(True).SetData(records).SetAutoConfig(True)
        myList.SetSelectRow(
    True).SetResizeColumn(True).SetScroll(True).SetNavigation(True)
        myList.SetPager(
    "pager").SetHeaderBorders(True).SetAutoHeight(True)
        myList.SetColumnWidth(
    200)
        
    '
        Dim arguements As Object
        myList.DataTable.OnItemDblClick(BANano.CallBack(Me,
    "mylist_dblclick",Array(arguements)))
        myList.DataTable.OnKeyPress(BANano.CallBack(Me,
    "mylist_keypress",Array(arguements)))
    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...

    Code:
    Sub download
        
    If lastcode <> "" Then
            lastcode = lastcode.Replace(
    "<br>"CRLF)
            pg.SaveText2File(lastcode,
    "BWFD.txt")
        
    End If
    End Sub
    This requires these lines to be added to the headers.

    Code:
    BANano.Header.AddJavascriptFile("Blob.min.js")
        BANano.Header.AddJavascriptFile(
    "FileSaver.min.js")
    We also tested if one can have collaboration in their apps with TogetherJS.

    Add this to the header.

    Code:
    BANano.Header.AddJavascriptFile("https://togetherjs.com/togetherjs-min.js")
    This is activated with

    Code:
    Sub collab
        
    Dim theObject As Object = Sender
        
    Dim isonline As Boolean = BANano.CheckInternetConnectionWait
        
    If isonline Then
            BANano.RunJavascriptMethod(
    "TogetherJS"Array(theObject))
        
    Else
            pg.Message_Debug(
    "You dont appear to be connected to the interweb!")
        
    End If
    End Sub
    together.png

    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

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

    Code:
    Publish = "C:\xampp\htdocs"
    BANanoWebixApp.gif
     
    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

    Ta!
     
    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

    example1.jpg

    To showing actual contract numbers

    example2.jpg

    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?

    Code:
    'clear the grid
        1Page.ClearAll(grd)
        
    2. otardb.OpenWait("otardb""otardb")
        
    '
        alaSQL.Initialize
        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))
        
    5Page.RefreshColumns(grd)
      
        
    '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, https://docs.webix.com/datatable__columns_configuration.html

    Ta!
     
    Last edited: Jul 30, 2019
    joulongleu likes this.
  13. Mashiane

    Mashiane Expert Licensed User

    joulongleu likes this.
  14. Mashiane

    Mashiane Expert Licensed User

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

    https://github.com/Mashiane/BANanoWebix

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