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

Mashiane

Expert
Licensed User
Spinnet: Responsive Form Demo, Setting Styles, Rows and Columns

The project below shows how to create a responsive form in a multi-page application. What we do is to create an app with 2 pages. One has a form and the other has a label. We also use a toolbar and add a header to it that we style to have a bigger font and add an image to the right side of the toolbar using a spacer.

For this exercise we are not using a grid.

Responsive.gif


modSideBar - the code in this module creates the sidebar of the application. This has the various navigation buttons for our app on the far left.

In the other modules there are 2 very important methods.

B4X:
Sub AddPage(pg As WixPage, mv As WixMultiView)
    Page = pg
    'create a page
    Dim a As WixLayout
    a.Initialize("mv_companies").SetTemplate("Almacena información de Compañías").SetTypeLine("")
    'add a form to the row
    a.AddRows(CreateForm.Item)
    'add page to multiview
    mv.AddItem(a.Item)
End Sub

Sub ShowPage(pg As WixPage)
    Page = pg
    Page.Show("mv_companies")
    Page.Clear("formcompanies")
    Page.ClearValidation("formcompanies")
End Sub
One method is to add a page i.e. to the multi-view component and the other method to show it whenever a navigation button is clicked. In the sidebar code, we assigned a click event to the sidebar. Each time an element is clicked, we detect its 'identifier' and then show the appropriate page in the multi-view component.

B4X:
Sub sm_click(meid As String)
    Select Case meid
    Case "arc_clienti"
        modClient.ShowPage(Page)
    Case "arc_prodotti"
        modArchivi.ShowPage(Page)
    Case "utility_backup"
    Case "utility_restore"
    End Select
End Sub
The main method that does everything here is in pgIndex.init("body")

B4X:
Sub Init(pgContainer As String)
    pg.Initialize("index", pgContainer)
    '
    Dim tblBar As WixToolBar
    tblBar.Initialize("tblBar")
    tblBar.SetHeight(100)
    tblBar.SetStyles(CreateMap("background": "#ffffff !important"))
    tblBar.CreateIcon("menuopen").SetIcon("mdi mdi-menu").SetStyles(CreateMap("background": "#eeeeee")).SetClick(BANano.CallBack(Me, "OpenMenu", Null)).Pop
    tblBar.CreateHeader("heading").SetBorderless(True).SetTemplate("My Webix App").SetStyles(CreateMap("height":"100%","vertical-align":"middle !important","font-size": "32px !important")).Pop
    tblBar.AddColumns(CreateMap())
    tblBar.CreateImage("logo").SetWidth(150).SetValue("./assets/pexels-photo-2879991.jpeg").pop
    
    Log(pg.Map2JsonPretty(tblBar.Item))
    
    
    pg.AddRows(tblBar.Item)
    '
    Dim R2 As WixRow
    R2.Initialize("R2")
    R2.AddColumns(modSideBar.Create(pg))
    'master multi page view to host all other pages
    'create a multiview pager
    Dim mv As WixMultiView
    mv.Initialize("mymv")
    modClient.AddPage(pg, mv)
    modArchivi.AddPage(pg, mv)
    
    
    'add multiview pager to the page
    R2.AddColumns(mv.item)
    pg.AddRow(R2)
    '
    'build the ui
    pg.UI
    '
    modClient.showpage(pg)
End Sub
1. When this starts the contents of the module are rendered in the "body" element of the page.
2. A toolbar is created and we use the .SetStyles() method to change the background of the toolbar.
3. An icon is added that when clicked it will toggle the sidebar
4. We then add a header to the toolbar and then add a spacer and then
5. Add an image.

We then add the toolbar to the first row in our page.

We then create another row and in this column we add the sidebar and then add the multi-view control to the second row. We add the details of the row to the page row collection.

We build the UI and then show the necessary starting page.

PS: this also demonstrates the latest methodology in creating multi-page apps using the Multiview element.

Ta!
 

Attachments

Mashiane

Expert
Licensed User
BANanoWebix 2.28

Important Additions to the library

1. SetStyles(Map) - this is used to set multiple css styles of any element.

B4X:
.SetStyles(CreateMap("height":"100%","vertical-align":"middle !important","font-size": "32px !important"))
2. SetAttributes(Map) - used to set multiple attributes for any element. Usage is same as .SetStyles (without the '!important' word)

Other bug fixes and improvement

Get it here, https://github.com/Mashiane/BANanoWebix
 

Mashiane

Expert
Licensed User
BANanoWebix 2.32

A Reminder:


1. If you don't have Webix, download webix standard from here, https://webix.com/get-webix-gpl/. After registration they will send you an email.
2. From that email locate webix.js and webix.min.css.
3. Copy these to the BANanoWebix\Files folder
4. Rename the webix.js file to webix.min.js
5. Open the BANanoWebix project and run it in B4J. This will compile the BANanoWebix Library. It should be 2.32
6. Open the BANanoWebixApp project and run it in B4J, select Demos to explore the demos.

Download BANanoWebix

Important: Using MSSQL as a backend for your BANanoWebix Apps.

This update includes the BANanoMSSQL class file so that one can use the form designer for BANanoWebix. So an option to use MSSQL as a backend for your BANAnoWebix projects is now available when selecting databases on the form designer.

WixCalendar

WixCalendar.gif


With the calendar one is able to select a single / multiple dates. This is lesson 32 in the Demo. Here is an example..

B4X:
Dim isHoliday As BANanoObject = pg.IsHoliday
    Dim df As BANanoObject = pg.NewDate(2016, 3, 16)
    Dim dt As BANanoObject = pg.NewDateTime(2019, 10, 28, 8, 10)
B4X:
Dim dp1 As WixCalendar
    dp1.Initialize("dp1").SetTimePicker(True).SetWeekHeader(True).SetDate(df)
    Dim value1 As Object
    dp1.OnChange(Me, "dp1_change", value1)
    dp1.SetEvents(isHoliday).AddToRows(frm.Form)
B4X:
Dim dp7 As WixCalendar
    dp7.initialize("dp7").SetWeekHeader(True).SetWeekNumber(True).SetEvents(isHoliday)
    dp7.SetDate(nd)
    dp7.SetMinDate("2015-04-05")
    dp7.SetMaxDate(md)
    dp7.SetWidth(290)
    dp7.SetIcons(True)
    dp7.SetTimePicker(True)
    dp7.SetMultiSelect("touch")
    Dim value2 As Object
    dp7.OnChange(Me, "dp7_change", value2)
    dp7.AddToRows(frm.Form)
Trapping the events

B4X:
Sub dp1_change(value As Object)
    Dim ds As String = pg.GetValueDate(value)
    Log(ds)
End Sub

Sub dp7_change(value As Object)
    Dim dates As String = pg.GetValueDates("dp7")
    Log(dates)
End Sub
You can also pre-select dates for the calendar (after pg.UI)

B4X:
pg.ui
    
    pg.SelectDate("dp1", pg.NewDate(2016, 3, 20), True)
    pg.SelectDates("dp7", Array("2015-04-13", "2015-04-14", "2015-04-15"))
VERY VERY IMPORTANT: CleanUp

Due to the structure of BANano, some cleanups on the resources included in this library was necessary. This sadly requires some manual intervention on your side. This affects the font files and cannot be done on my side as the css and js files you need to obtain from webix yourself for use.

1. Open webix.min.css in the BANanoWebix folder
2. Locate all URL(fonts text, and replace with URL(../fonts
3. Save the file, refresh your list files in B4X
4. Compile the BANanoWebix library.

For now that's all. Ta!

 

Mashiane

Expert
Licensed User
BANanoWebix now compiled with version 4.07 of BANano and B4J 8 Beta. Works as expected.

Get it here.

Some updates about using themes/skins

Webix comes with different themes that you can use. Go to the webix skin builder, https://webix.com/skin-builder/

themes.png


1. Select the skin you need in the Skin column and customize it as you need.
2. Click Download. This will download everything you need to work with your app.
3. Your download will have the webix.js and some other files as depicted below.

skinfiles.png


The version of webix.cs and webix.js files included here will be the latest versions of webix, currently 7.01.

4. Copy the files in your download to the BANanoWebix Library folder and compile the BANanoWebix library. This will replace the webix.css and webix.js files there

Using the BANAnoWebix 2.33 Library with a theme.

BANanoWebix has already been bundled with these theme files with the exception of the webix.js and webix.css files that you will get from your licensed version or from the download above. To use the themes, your code SHOULD be

Using the Contrast Theme

B4X:
BANano.Header.AddCSSFile("materialdesignicons.min.css")
    BANano.Header.AddCSSFile("contrast.min.css")
    BANano.Header.AddJavascriptFile("webix.js")
    BANano.Header.addjavascriptfile("contrast.skin.js")
Using the Material Theme

B4X:
BANano.Header.AddCSSFile("materialdesignicons.min.css")
    BANano.Header.AddCSSFile("material.min.css")
    BANano.Header.AddJavascriptFile("webix.js")
    BANano.Header.addjavascriptfile("material.skin.js")

Using the Compact Theme


B4X:
BANano.Header.AddCSSFile("materialdesignicons.min.css")
    BANano.Header.AddCSSFile("compact.min.css")
    BANano.Header.AddJavascriptFile("webix.js")
    BANano.Header.addjavascriptfile("compact.skin.js")
etc

Enjoy!
 

roberto64

Active Member
Licensed User
Hi Mashine, I'm trying BANanoWebixApp, I've done all the steps but give me all these errors how can I fix them?
regards

Waiting for debugger to connect...
Program started.
Reading B4J INI in C:\Users\roberto\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: Z:\ANDROIDUT\AdditionalLibs
Building C:\laragon\www\BANanoWebixApp\scripts\app1574410770371.js
Loading library: Z:\ANDROIDUT\AdditionalLibs\B4J\bananopostprocessor.xml
Library: Z:\ANDROIDUT\AdditionalLibs\B4J\bananopostprocessor.xml is not a BANano library!
Loading library: Z:\ANDROIDUT\AdditionalLibs\B4J\bananowebix.xml
Z:\ANDROIDUT\AdditionalLibs\B4J\bananowebix.js is missing!
Z:\ANDROIDUT\AdditionalLibs\B4J\bananowebix.dependsOn is missing!
java.io.FileNotFoundException: Z:\ANDROIDUT\AdditionalLibs\B4J\bananowebix.dependsOn (Impossibile trovare il file specificato)
at java.base/java.io.FileInputStream.open0(Native Method)
at java.base/java.io.FileInputStream.open(FileInputStream.java:219)
at java.base/java.io.FileInputStream.<init>(FileInputStream.java:157)
at java.base/java.io.FileReader.<init>(FileReader.java:75)
at com.ab.banano.BANano.a(Unknown Source)
at com.ab.banano.BANano.a(Unknown Source)
at com.ab.banano.BANano.b(Unknown Source)
at com.ab.banano.BANano.Build(Unknown Source)
at b4j.example.main._appstart(main.java:264)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:632)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:234)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:167)
at jdk.internal.reflect.GeneratedMethodAccessor1.invoke(Unknown Source)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:91)
at anywheresoftware.b4a.shell.ShellBA.raiseEvent2(ShellBA.java:98)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:78)
at b4j.example.main.start(main.java:38)
at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$9(LauncherImpl.java:846)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runAndWait$12(PlatformImpl.java:455)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:428)
at java.base/java.security.AccessController.doPrivileged(Native Method)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:427)
at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:96)
at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:174)
at java.base/java.lang.Thread.run(Thread.java:834)
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CheckInternetConnectionWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CheckInternetConnectionWait will not work in old browsers!
[WARNING]: The method CallAjaxWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
WARNING: The method cleardatabase in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
cleardatabaseWait()
[WARNING]: The method cleardatabase will not work in old browsers!
WARNING: The method foreignkeyregister in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
foreignkeyregisterWait()
[WARNING]: The method foreignkeyregister will not work in old browsers!
WARNING: The method localize in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
localizeWait()
[WARNING]: The method localize will not work in old browsers!
WARNING: The method importfk in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importfkWait()
[WARNING]: The method importfk will not work in old browsers!
WARNING: The method importfd in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importfdWait()
[WARNING]: The method importfd will not work in old browsers!
WARNING: The method importdb in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importdbWait()
[WARNING]: The method importdb will not work in old browsers!
WARNING: The method importfielddescriptions in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importfielddescriptionsWait()
[WARNING]: The method importfielddescriptions will not work in old browsers!
WARNING: The method importforeignkeys in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importforeignkeysWait()
[WARNING]: The method importforeignkeys will not work in old browsers!
WARNING: The method importsqlite in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importsqliteWait()
[WARNING]: The method importsqlite will not work in old browsers!
[WARNING]: The method refreshtreewait will not work in old browsers!
[WARNING]: The method addprimarykeywait will not work in old browsers!
[WARNING]: The method prop_savewait will not work in old browsers!
[WARNING]: The method saveelementwait will not work in old browsers!
[WARNING]: The method clearform1wait will not work in old browsers!
[WARNING]: The method clearform2wait will not work in old browsers!
[WARNING]: The method deletepropwait will not work in old browsers!
[WARNING]: The method tree_clickwait will not work in old browsers!
WARNING: The method updateforeignlinks in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
updateforeignlinksWait()
[WARNING]: The method updateforeignlinks will not work in old browsers!
WARNING: The method tablevuemobile in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
tablevuemobileWait()
[WARNING]: The method tablevuemobile will not work in old browsers!
WARNING: The method tableschema in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
tableschemaWait()
[WARNING]: The method tableschema will not work in old browsers!
WARNING: The method field_edit in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
field_editWait()
[WARNING]: The method field_edit will not work in old browsers!
[WARNING]: The method formcodewait will not work in old browsers!
[WARNING]: The method collabwait will not work in old browsers!
[WARNING]: The method sidebar_clickwait will not work in old browsers!
[WARNING]: The method btnmulti_clickwait will not work in old browsers!
[WARNING]: The method btnmulti1_clickwait will not work in old browsers!
[WARNING]: The method collabwait will not work in old browsers!
[WARNING]: The method updatelist1wait will not work in old browsers!
WARNING: The method cleardatabase in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
cleardatabaseWait()
WARNING: The method foreignkeyregister in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
foreignkeyregisterWait()
WARNING: The method localize in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
localizeWait()
WARNING: The method importfk in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importfkWait()
WARNING: The method importfd in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importfdWait()
WARNING: The method importdb in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importdbWait()
WARNING: The method importfielddescriptions in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importfielddescriptionsWait()
WARNING: The method importforeignkeys in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importforeignkeysWait()
WARNING: The method importsqlite in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
importsqliteWait()
WARNING: The method updateforeignlinks in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
updateforeignlinksWait()
WARNING: The method tablevuemobile in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
tablevuemobileWait()
WARNING: The method tableschema in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
tableschemaWait()
WARNING: The method field_edit in (MODULE: pgFD) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
field_editWait()
Copying CSS files to WebApp assets...
Copying Javascript files to WebApp assets...
Building C:\laragon\www\BANanoWebixApp\index.html

The total size of your local CSS and JS files is 2.9MB and another 9.6MB in other assets.
It is very important to only load the JS and CSS files from components that you actually use in your website/webapp!

If you are using public frameworks (like jQuery, Bootstrap, etc...), consider using their CDN so the browser can use already buffered versions.
Done!
 

Mashiane

Expert
Licensed User
Hi Mashine, I'm trying BANanoWebixApp, I've done all the steps but give me all these errors how can I fix them?
regards
Please always start a new thread with your issues and questions as its much easier. This thread is for posting anything that is BANanoWebix related. Please prefix your question with [BANanoWebix].

NB:

1. To compile BANanoWebix to a library, you need to run the BANanoWebix project. DO NOT "Compile to Library". It is a BANano b4xlib file and not a jar. That is how BANano works. If you have a BANanoWebix.jar file in your additional libraries folder, delete it.
 
Last edited:

roberto64

Active Member
Licensed User
Now I have created the BANanoWebix b4xlibs lib as per the instruction of the first pos, but still it tells me that it doesn't find Library: Z: ANDROIDUT Additional Libs B4J bananaopostprocessor.xml is not a BANano library! "Instead talelib exists, and also java. io.FileNotFoundException: C: Users Roberto Desktop BANANO ~ 2 444C6 ~ 1.BAN Objects b4xlibs_BANano bananowebix B4J manifest.txt (The path specified could not be found) "but also this lib exists in the project Objects ", what am I wrong now?
thanks for your commitment.
 

roberto64

Active Member
Licensed User
Hi, are all these errors possible? the page starts but it remains completely blank nothing appears.
regards
Reading B4J INI in C:\Users\Eoby\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: D:\AdditionalLibs
Building C:\Users\Eoby\Desktop\usbwebserver_v8.6.2\root\WareHouse\scripts\app1575788023491.js
Loading library: D:\AdditionalLibs\B4J\bananopostprocessor.xml
Processing b4xlib: bananowebix
Library: D:\AdditionalLibs\B4J\bananopostprocessor.xml is not a BANano library!
java.io.FileNotFoundException: C:\Users\Eoby\Desktop\BANANO~1\444C6~1.BAN\Objects\b4xlibs_BANano\bananowebix\B4J\manifest.txt (Impossibile trovare il percorso specificato)
at java.base/java.io.FileInputStream.open0(Native Method)
at java.base/java.io.FileInputStream.open(FileInputStream.java:219)
at java.base/java.io.FileInputStream.<init>(FileInputStream.java:157)
at java.base/java.io.FileInputStream.<init>(FileInputStream.java:112)
at java.base/java.io.FileReader.<init>(FileReader.java:60)
at com.ab.banano.BANano.ProcessB4XLib(Unknown Source)
at com.ab.banano.BANano.a(Unknown Source)
at com.ab.banano.BANano.b(Unknown Source)
at com.ab.banano.BANano.Build(Unknown Source)
at b4j.example.main._appstart(main.java:101)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:91)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:78)
at b4j.example.main.start(main.java:37)
at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$9(LauncherImpl.java:846)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runAndWait$12(PlatformImpl.java:455)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:428)
at java.base/java.security.AccessController.doPrivileged(Native Method)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:427)
at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:96)
at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:174)
at java.base/java.lang.Thread.run(Thread.java:834)
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method CallInlinePHPWait will not work in old browsers!
[WARNING]: The method OpenWait will not work in old browsers!
[WARNING]: The method ExecuteWait will not work in old browsers!
WARNING: The method btnnewgodown_click in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
btnnewgodown_clickWait()
[WARNING]: The method btnnewgodown_click will not work in old browsers!
WARNING: The method btnsavegodown_click in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
btnsavegodown_clickWait()
[WARNING]: The method btnsavegodown_click will not work in old browsers!
WARNING: The method readgodown in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
readgodownWait()
[WARNING]: The method readgodown will not work in old browsers!
WARNING: The method godown_delete in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
godown_deleteWait()
[WARNING]: The method godown_delete will not work in old browsers!
WARNING: The method dtgodown_afteredit in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
dtgodown_aftereditWait()
[WARNING]: The method dtgodown_afteredit will not work in old browsers!
WARNING: The method loaddatatable in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
loaddatatableWait()
[WARNING]: The method loaddatatable will not work in old browsers!
WARNING: The method btnnewgodown_click in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
btnnewgodown_clickWait()
WARNING: The method btnsavegodown_click in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
btnsavegodown_clickWait()
WARNING: The method readgodown in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
readgodownWait()
WARNING: The method godown_delete in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
godown_deleteWait()
WARNING: The method dtgodown_afteredit in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
dtgodown_aftereditWait()
WARNING: The method loaddatatable in (MODULE: pgGoDown) uses Wait functions, but doesn't end itself with wait()
This will not work if compiled to a libray. You should call the method:
loaddatatableWait()
Copying CSS files to WebApp assets...
Problem copying all.min.css
java.io.FileNotFoundException: all.min.css
at anywheresoftware.b4a.objects.streams.File.OpenInput(File.java:209)
at anywheresoftware.b4a.objects.streams.File.Copy(File.java:336)
at com.ab.banano.BANano.Build(Unknown Source)
at b4j.example.main._appstart(main.java:101)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:91)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:78)
at b4j.example.main.start(main.java:37)
at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$9(LauncherImpl.java:846)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runAndWait$12(PlatformImpl.java:455)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:428)
at java.base/java.security.AccessController.doPrivileged(Native Method)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:427)
at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:96)
at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:174)
at java.base/java.lang.Thread.run(Thread.java:834)
Copying Javascript files to WebApp assets...
java.io.FileNotFoundException: webix.min.js
at anywheresoftware.b4a.objects.streams.File.OpenInput(File.java:209)
at anywheresoftware.b4a.objects.streams.File.Copy(File.java:336)
at com.ab.banano.BANano.Build(Unknown Source)
at b4j.example.main._appstart(main.java:101)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:91)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:78)
at b4j.example.main.start(main.java:37)
at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$9(LauncherImpl.java:846)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runAndWait$12(PlatformImpl.java:455)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:428)
at java.base/java.security.AccessController.doPrivileged(Native Method)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:427)
at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:96)
at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:174)
at java.base/java.lang.Thread.run(Thread.java:834)
Problem copying webix.min.js
Building C:\Users\Eoby\Desktop\usbwebserver_v8.6.2\root\WareHouse\index.html

The total size of your local CSS and JS files is 2.0MB and another 2.9MB in other assets.
It is very important to only load the JS and CSS files from components that you actually use in your website/webapp!

If you are using public frameworks (like jQuery, Bootstrap, etc...), consider using their CDN so the browser can use already buffered versions.
Done!
 

Mashiane

Expert
Licensed User
@roberto64 Can you please start a new thread about your issue and please explain how I can reproduce it the issues. Please post this under B4J questions and prefix it with [BANanoWebix]. This is the 3rd time I am requesting you to please not post questions and problems on this thread as this thread is for updates about the library and not questions.
 
Last edited:

Mashiane

Expert
Licensed User
Upcoming Changes: Detecting CheckBox changes with onItemClick

Procurement.gif


Just added the onItemClick event for the Checkbox. This helps when one wants to detect the changes in the checkbox. Please note there is an onChange event also.

The function added to BANanoWebix is...

B4X:
Sub SetOnItemClick(module As Object, MethodName As String) As WixCheckBox
    MethodName = MethodName.tolowercase
    Dim value As String
    Dim e As BANanoEvent
    Dim cb As BANanoObject = BANano.CallBack(module, MethodName, Array(value, e))
    On.Put("onItemClick", cb)
    Return Me
End Sub
Usage:

We first define the CheckBox.

B4X:
Dim stepdone As WixCheckBox
        stepdone.Initialize($"procprocess.${chkID}"$).SetName(chkID).SetLabelPosition("left").SetLabelWidth(250)
        stepdone.SetLabel(chkLabel).SetValue(False).SetCheckValue("Yes").SetUncheckValue("No")
        stepdone.SetOnItemClick(Me, "ppchange")
        r1.AddColumns(stepdone.Item)
Above there are multiple checkboxes and dates that I am defining based on steps that I have defined.

What ppChange does is to detect the value of the checkbox, if Yes, set today's date on the corresponding date control.

B4X:
Sub ppchange(id As String, e As BANanoEvent)
    'get the value
    Dim chkValue As String = Page.getvalue(id)
    'define the date value to update
    Dim datID As String = id.replace("done", "date")
    Select Case chkValue
    Case "yes","Yes"
        'set the date
        Page.setvalue(datID, Page.datenow)
    Case Else
        Page.setvalue(datID, "")
    End Select
End Sub
Let's look at the steps I'm talking about.

B4X:
Sub CreateProcurementProcess As WixForm
    Dim pp As WixForm
    pp.Initialize("procprocess")
    pp.SetScroll("y")
    pp.SetName("procprocess")
    pp.SetResponsive("true")
    pp.SetDefaultLabelWidth("120")
    pp.SetDefaultLabelPosition("top")
    '
    Dim steps As List
    steps.Initialize
    steps.add("Need analysis")
    steps.Add("Budget confirmation")
    steps.add("Preliminary relocation timelines")
    steps.add("Bid specification")
    steps.Add("RFQ")
    steps.add("Decision to proceed to RFP")
    steps.add("RFP evaluation")
    steps.Add("RFP adjudication")
    steps.add("Relocation team confirmation")
    steps.add("Final relocation plan")
    steps.add("Relocation")
        
    Dim cnt As Int = 0
    For Each ppstep As String In steps
        cnt = cnt + 1
        Dim chkLabel As String = $"${cnt}. ${ppstep} done"$
        Dim datLabel As String = $"${cnt}. ${ppstep} date"$
        Dim chkID As String = $"step${cnt}done"$
        Dim datID As String = $"step${cnt}date"$
        'create the control
        Dim r1 As WixLayout
        r1.initialize($"r${cnt}"$)
        Dim stepdone As WixCheckBox
        stepdone.Initialize($"procprocess.${chkID}"$).SetName(chkID).SetLabelPosition("left").SetLabelWidth(250)
        stepdone.SetLabel(chkLabel).SetValue(False).SetCheckValue("Yes").SetUncheckValue("No")
        stepdone.SetOnItemClick(Me, "ppchange")
        r1.AddColumns(stepdone.Item)
        '
        Dim stepdate As WixDatePicker
        stepdate.Initialize($"procprocess.${datID}"$).SetDisabled(True)
        stepdate.SetName(datID).SetType("text").SetFormat("%Y-%m-%d")
        stepdate.SetEditable(True).SetStringResult(True).SetLabel(datLabel)
        r1.AddColumns(stepdate.Item)
        pp.AddRows(r1.Item)
    Next
    '
    Dim procplannotes As WixTextArea
    procplannotes.Initialize("procprocess.procplannotes")
    procplannotes.SetName("procplannotes").SetLabel("Notes").SetHeight(200)
    pp.AddRows(procplannotes.Item)
    pp.AddRowsSpacer("")
    Return pp
End Sub
So for each checkbox we have procprocess.step1done and procprocess.step1date, procprocess.step2done and procprocess.step2date etc.

Watch this space!
 

Mashiane

Expert
Licensed User
Upcoming: Detecting CheckBox changes with onChange

The onchange event works the same way with the onItemClick event however it should be linked to 1 component unlike the onItemClick event.

Reference: https://docs.webix.com/api__link__ui.checkbox_onchange_event.html

BANanoWebix Change

B4X:
'expects id of element and event
Sub SetOnChange(module As Object, MethodName As String) As WixCheckBox
    MethodName = MethodName.tolowercase
    Dim newv As Object
    Dim oldv As Object
    Dim cb As BANanoObject = BANano.CallBack(module, MethodName, Array(newv, oldv))
    On.Put("onChange", cb)
    Return Me
End Sub
Implementation

B4X:
stepdone.SetOnChange(Me, "ppchange1")
Event

B4X:
Sub ppchange1(newv As String, oldv As String)
    Log(newv)
    Log(oldv)
End Sub
 

Toky Olivier

Active Member
Licensed User
Thank you for this huge work.
Just wondering, is it not possible to add something like Pace (https://github.hubspot.com/pace/docs/welcome/) while loading the page. On slow connections, there is only a blank page while downloading js and css.

EDIT: It was possible, I just created small library for it
B4X:
Sub AppStart (Form1 As Form, Args() As String)
    Publish = "C:\xampp\htdocs"
    Publish = "E:\SOFTS\UwAmpPortable\www"
    Dim version As String = DateTime.now
    Dim appFile As String = $"app${version}.js"$
    BANano.Initialize("BANano", AppName,1)
    BANano.HTML_NAME = "index.html"
    BANano.Header.Title = AppName
    BANano.JAVASCRIPT_NAME = appFile
    BANano.TranspilerOptions.UseServiceWorker = False
    BANano.Header.AddCSSFile("https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&amp;subset=latin-ext")
    BANano.Header.AddCSSFile("mini.min.css")
    BANano.Build(Publish)
   
    Pace.Initialize(File.Combine(Publish, AppName), BANano.HTML_NAME, BANano.SCRIPTS_FOLDER, BANano.STYLES_FOLDER)
    Pace.InstallPace(CreateMap("ajax": "true", "eventLag": "true"), Pace.PACE_CENTER_ATOM_THEME, "#EAA928")
    ExitApplication
End Sub
 

Attachments

Last edited:

Mashiane

Expert
Licensed User
BANanoWebix already has a loader built into it. Identify the component you want the loader to be put in and call 2 methods, 1 to show and one to hide it.

For example, lets assume you have defined a component called "gridxx1" on your page. You want to show a loader for a long process.

On your button click

B4X:
Sub me_click(e as bananoevent)

pg.WorkingOnIt("gridxx1")   ' this will show a progress bar

.... a long process running

pg.DoneWorking("gridxx1")  ' this will hide a progressbar

End Sub
For more details also see this: https://docs.webix.com/desktop__progress.html
 
Top