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

Mashiane

Expert
Licensed User
Longtime 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.



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

  • ResponsiveForm.zip
    272.3 KB · Views: 414

Mashiane

Expert
Licensed User
Longtime 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
Longtime 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



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



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.



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

 

Mashiane

Expert
Licensed User
Longtime User
roberto64 said:
Hi Mashine, I'm trying BANanoWebixApp, I've done all the steps but give me all these errors how can I fix them?
regards
Click to expand...
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
Longtime User
as I understand it must be made a b4xlib lib! how can i make such library? what files?
 

roberto64

Active Member
Licensed User
Longtime 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
Longtime User
Hi, are all these errors possible? the page starts but it remains completely blank nothing appears.
regards
 

Mashiane

Expert
Licensed User
Longtime 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
Longtime User
Upcoming Changes: Detecting CheckBox changes with onItemClick



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

  • BANanoPace B4J lib.zip
    13.2 KB · Views: 330
Last edited:

Mashiane

Expert
Licensed User
Longtime 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
 
You must log in or register to reply here.

Similar Threads

  • Article
B4J Tutorial [BANanoWebix] Lesson 19 Contexts
Replies
0
Views
2K
Mashiane
  • Article
B4J Tutorial [BANanoWebix] Lesson 15 Menus & Windows
Replies
3
Views
3K
Mashiane
  • Article
B4J Tutorial [BANAnoWebix] Lesson 11 Unit List
Replies
0
Views
2K
Mashiane
  • Article
B4J Library [BANanoWebix] An Object Oriented UX library for BANano
Replies
1
Views
3K
Mashiane
  • Article
B4J Tutorial [BANanoWebix]: Lesson 1 - Understanding the layout of a Webix SPA
Replies
2
Views
3K
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…