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

Ola

**NB: BANanoPostProcessor: The BP used in some of the examples is an updated version of what Kiffi did in the forum. The examples are old and have not been maintained due to time challenges as the focus has been to maintain the core library and other things. Due to enhancements in BANano, this means you can un-reference it and comment out the code that uses it for BANanoWebix. This will not have any effect on your app.

Here are the revised procedures...

Step 1:
Download BANano

Step 2:
Download Webix GPL License - OpenSource or
Download Webix Pro Trial Version

Step 3:
Download BANanoWebix

3.1 Copy the contents of the 1. Libraries folder to your B4J external libraries

3.2. From your Webix download, copy the webix.js and webix.css files to the Files folder of the BANanoWebix project folder

3.3 Open BANanoWebix project and run it in release mode (DO NOT COMPILE TO LIBRARY) and ensure BANanoWebix.b4xlib is created! This will be stored in your additional libraries folder

Step 4

Open BANanoWebixApp, this should have the project references established and run it in release mode.

5. On execution, the web-browser should be opened with the localhost file. Your b4j logs will have some details, this is normal. It might look like this..

From the Demos, I have selected charts. I am running a laragon webserver. You can also publish to Xamp. The Chrome Web-browser does not support PHP thus Im not using it for tests.

Congrats, you have setup BANanoWebix for use!

Using BANanoWebix

New: BANanoWebix App Creation Process

Development Servers you can use

1. XAMPP
2. Laragon

The 32 bit version of laragon is available here, https://sourceforge.net/projects/laragon/files/releases/4.0/laragon-wamp.x86.exe

Reproduction:


If you are using XAMP, comment out the line that publishes to laragon on Main.AppStart

Sub AppStart (Form1 As Form, Args() As String)
    Publish = "C:\xampp\htdocs"
    Publish = "C:\laragon\www"

Now Featuring a Form Designer that generates source code you can use in your B4J Project



An Object Oriented UX library for BANano [BANanoWebix]
Show a progressbar on long processes [BANanoWebix]
WixPivot on PRO [OffTopic] [BANanoWebix]
App Creation Process: The BackEnd with BANanoSQL [BANanoWebix]
App Creation Process: The UI [BANanoWebix]
Creating a Multi-Page Interface in a SPA [BANanoWebix]
Creating Multi-Page Apps - Part 1 [BANanoWebix]
Creating Multi-Page Apps - Part 2 [BANanoWebix]
Creating Multi-Page Apps - Part 3 [BANanoWebix]
Creating Multi-Page Apps - Part 4 [BANanoWebix]
Creating Multi-Page Apps - Part 5 [BANanoWebix]
Creating the Form Designer CRUD Backend BANanoSQL DB [BANanoWebix]
Dragging N Dropping Things with the Form Designer [BANanoWebix]
Form Builder / Designer [BANanoWebix]
Lesson 1 - Understanding the layout of a Webix SPA [BANanoWebix]
Lesson 2: Understanding the 6 layout types [BANanoWebix]
Lesson 3: Let's create some accordions [BANanoWebix]
Lesson 4: Carousels, MultiView & TabView [BANanoWebix]
Lesson 5: Creating ToolBars [BANanoWebix]
Lesson 6.X Form Validation [BANanoWebix]
Lesson 6: Form Data Entry Elements [BANanoWebix]
Lesson 7: Charts - Part 1 [BANanoWebix]
Lesson 8.1 The DataTable/DataGrid [BANanoWebix]
Lesson 8.2. The DataTable/DataGrid [BANanoWebix]
Lesson 8.3 Datatable Pagination & Exporting to XLSX, PNG, PDF and CSV [BANanoWebix]
Lesson 8.4 Enhanced Data-Table [BANanoWebix]
Lesson 9: DataView [BANanoWebix]
Lesson 10 Lists [BANanoWebix]
Lesson 11 Unit List [BANAnoWebix]
Lesson 12: Property Sheet [BANanoWebix]
Lesson 13 The TreeView [BANanoWebix]
Lesson 14 - The TreeTable [BANanoWebix]
Lesson 15 Menus & Windows [BANanoWebix]
Lesson 16 - The Sidebar [BANanoWebix]
Lesson 17 - Comments / Chat Widget [BANanoWebix]
Lesson 18 GroupList [BANanoWebix]
Lesson 19 Contexts [BANanoWebix]
Lesson 20 Google Map [BANAnoWebix]
Lesson 21 TabBar [BANanoWebix]
Lesson 22 - Method 3 [DropZone] [BANanoWebix]
Lesson 22 Uploader - Method 1 [BANanoWebix]
Lesson 22 Uploader Method 2 [BANanoWebix]
Lesson 23 WixVideo [BANanoWebix]
Lesson 24 ScrollView [BANanoWebix]
Lesson 25 Template [BANanoWebix]
Lesson 28 Suggestions [BANanoWebix]
Lesson 29 MessageBoxes [BANanoWebix]
Lesson 30 WixHints [BANanoWebix]
Lesson 31 WixImage [BANanoWebix]


For a long long long while I have been very curios about Webix, It reminded me of my days when I was doing ASP.Net with Ext.JS many many moons aho. That helped me create my first web database application with SQL as a backend back in 2009. A lot of VB.Net code that was... It was marvelous and I was the happiest man in the world, king of the world. It so amazing how the excitement of achieving something as a first "Hellow World" app running without hurdles. Just like when I first wrote my first Android app with B4A many years back.

So today I spent time time to feed that curiosity and with my question being can I achieve this with BANano? I am happily surprised and satisfied that I was able to pull it off, and I had to take everything I tend to think about HTML out of the window for a while to Object Orientation.

I made mistakes, rewrote stuff, debugged a lot, but hey, ended up with a single component class to rule them all.

What I liked most was that all this was done without a single HTML element being created by me. I'm basically using Lists and Maps all the way. Everything is an object and Webix just renders, creates the datasource links automatically. Basically I just had to worry about the look and feel of the app.

So I followed their example, tried to understand the logic of what they did things and came up with my own flavor of implementation.

As their lib is quiet huge, this just for me meant that its possible and if I want to explore more of their candy, I continue on the trend, there are a lot of things I like about it though and well, their price is not as welcoming. Yes for internal company apps and open source apps, the moon is no longer the limit. Anything commercial should be licensed.

Exporting Offline: BANanoWebix 1.04+

The current implementation of BANanoWebix is able to export to excel, pdf etc only when you are connected to the internet.

To be able to export offline without an internet connection there is about 6MB of resources needed as discussed here.

In BANanoWebix, this is how this has been implemented..

1. Unzip the extras folders to your project build folder.

BP.UnzipFonts
    BP.UnzipFile("extras.zip")

2. On the page where you will use exporting, after page initialize

pg.Initialize("wp", pgContainer).SetHeader("Lesson 8.3 Datatable Pager").SetResponsive("master")
    pg.SetExtrasFolder("http://localhost/bananowebixdemo/extras")
    '

Execute .SetExtrasFolder

Use your own PROJECTNAME for bananowebixdemo

Developing an app

In their example, this is the structure of the Basic App.

webix.ui({
    width:500,
    rows:[
        {
            view:"toolbar", elements:[
                { view:"button", value:"Add", width:100 },
                { view:"button", value:"Delete", width:100 }
            ]
        },
        {
            height:120, cols:[
                {
                    view:"form", elements:[
                        { view:"text", placeholder:"Title" },
                        { view:"text", placeholder:"Year" }
                    ]
                },
                {
                    view:"list",
                    template:"#title# - #year#", // which data to show
                    select:true, //enables selection
                    height:400,
                    data:[
                        { id:1, title:"The Shawshank Redemption", year:1994 },
                        { id:2, title:"The Godfather", year:1972 },
                        { id:3, title:"The Godfather: Part II", year:1974 },
                        { id:4, title:"The Good, the Bad and the Ugly", year:1966 },
                        { id:5, title:"My Fair Lady", year:1964 },
                        { id:6, title:"12 Angry Men", year:1957 }
                    ]
                }
            ]
        }
    ]
});

So here is my BANano_Ready to generate same...

Sub BANano_Ready()
    Dollar.Initialize("$$")
    pg.Initialize("mashy")
    pg.Content.TypeOf = "line"
    '*** define row 1
    'add toolbar
    Dim R1 As WixRow
    R1.Initialize("R1")
    'R1.Template = R1.ID

    Dim hdr As WixHeader
    hdr.Initialize("hdr", "My First Webix App")
    R1.AddItem(hdr.Item)

    Dim tblBar As WixToolBar
    tblBar.Initialize("tblBar")
    tblBar.AddButton("btnSave","Save",70, BANano.CallBack(Me,"save_row",Null))
    tblBar.AddButton("btnDelete", "Delete", 70, BANano.CallBack(Me,"delete_row",Null))
    tblBar.AddButton("btnClear", "Clear", 95, BANano.CallBack(Me,"clear_form",Null))
    R1.AddItem(tblBar.Item)
    'add rows to the page
    pg.AddRow(R1)

    Dim R2 As WixRow
    R2.Initialize("R2")

    Dim R2C1 As WixColumn
    R2C1.Initialize("R2C1")
    'R2C1.Template = R2C1.ID

    'add form
    myForm.Initialize(Dollar, "myform",300)
    myForm.AddTextBox("title","Title",280,"left")
    myForm.AddTextBox("year", "Year",280,"left")
    R2C1.AddItem(myForm.Item)
    'add r2c1 to row
    R2.AddColumn(R2C1)

    Dim R2C2 As WixColumn
    R2C2.Initialize("R1C2")
    'R2C2.Template = R2C2.id
    'add a list

    Dim filmset As List
    filmset.Initialize
    filmset.Add(CreateMap("id":1, "title":"The Shawshank Redemption", "year":1994))
    filmset.Add(CreateMap("id":2, "title":"The Godfather", "year":1972))
    filmset.Add(CreateMap("id":3, "title":"The Godfather: Part II", "year":1974))
    filmset.Add(CreateMap("id":4, "title":"The Good, the Bad and the Ugly", "year":1966))
    filmset.Add(CreateMap("id":5, "title":"My Fair Lady", "year":1964))
    filmset.Add(CreateMap("id":6, "title":"12 Angry Men", "year":1957))

    Dim recID As String
    myList.Initialize(Dollar, "myList")
    myList.Template = "#title# - #year#"
    myList.EnableSelect = True
    myList.Height = 400
    myList.data = filmset
    myList.onAfterSelect = BANano.CallBack(Me,"record_selected",Array(recID))
    '
    R2C2.AddItem(myList.Item)
    '
    R2.AddColumn(R2C2)
    '
    pg.AddRow(R2)
    '
    pg.UI
    'attach the select event
    myList.AttachAfterSelectEvent
End Sub

 

[Mashiane]

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

Get it here

 

[Mashiane]

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

 

[Mashiane]

2019-07-16 Update

The TabView, TabBar, MultiView have been completely reworked.

Get the latest version here, https://github.com/Mashiane/BANanoWebix

 

[Mashiane]

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

 

[Mashiane]

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
    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(prop1rop1val)) and then call .Refresh(?) on the element using its id.

Get it here

 

[Mashiane]

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("<br>", CRLF)
        pg.SaveText2File(lastcode,"BWFD.txt")
    End If
End Sub

This requires these lines to be added to the headers.

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.

BANano.Header.AddJavascriptFile("https://togetherjs.com/togetherjs-min.js")

This is activated with

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

Get it here

 

[Mashiane]

The latest version of the BWFD includes a grid builder that helps you generate the code for your grid including the data columns.


The output of this is part of this lesson, https://www.b4x.com/android/forum/threads/bananowebix-creating-multi-page-apps-part-3.107946/

Ta!

 

[Mashiane]

Version 1.17 now available, https://github.com/Mashiane/BANanoWebix

This is line with Creating Multi-Page Apps - Part 5.

• Printing the grid
• Updating combo-boxes dynamically
• Updating badge values

 

[Mashiane]

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"

 

[Mashiane]

Version 1.19 with drag n drop support.

 

[Mashiane]

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

BANanoWebix 1.20

Ta!

 

[Mashiane]

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
    1. Page.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)
    3. Dim nl As List = Page.List2IDValue(rs.result, Array("id", "number"))
    '
    4. Page.SetDataColumn(grd, "contractid", CreateMap("options" : nl))
    5. Page.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!

 

[Mashiane]

Version 2.14 with updated form builder now available...

https://github.com/Mashiane/BANanoWebix

 

[Mashiane]

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

 

[Mashiane]

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, https://webix.com/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.

BANano.Header.addcssfile("all.min.css")
    BANano.Header.AddCSSFile("materialdesignicons.min.css")
    BANano.Header.AddCSSFile("webix.css")
    BANano.Header.AddCSSFile("hint.css")
    BANano.Header.AddJavascriptFile("webix.js")
    BANano.Header.AddJavascriptFile("hint.js")
    BANano.Header.AddJavascriptFile("skin.js")

Ta!

 

[Mashiane]

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

 

[Mashiane]

Version 2.17

Some bug fixes on the SQLIte database importer, get it here, https://github.com/Mashiane/BANanoWebix

 

[Mashiane]

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 Map) As 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 String) As Map
    Dim rec As Map = ds.RunMethod("getItem", Array(itemID)).result
    Return rec
End Sub

'get the wixitem
Sub GetWixElement(eID As String) As 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 String) As BANanoObject
    Dim bo As BANanoObject = GetWixElement(elID)
    Dim Data As BANanoObject = bo.GetField("data")
    Return Data
End Sub

Download from here, https://github.com/Mashiane/BANanoWebix

 

[Mashiane]

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, https://webix.com/download/

Update on first post!

TA

 

[Mashiane]

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, https://webix.com/get-webix-gpl/
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

Mashy