B4J Library [Web][BANano] Website/App/PWA library with Abstract Designer support

​

Download the latest version here: https://www.b4x.com/android/forum/t...rogressive-web-app-library.99740/#post-627764

INTRO

BANano is a new B4J library to websites/webapps with (offline) Progressive Web App support. Unlike its big brother ABMaterial, BANano does not rely on any particular framework like Materialize CSS. You will have to write that part yourself, but on the other hand, you have the choice to pick which one.

Why a second framework? Well, from the start ABMaterial was build with a back server in mind. B4J has great support to setup a very powerful jServer to handle web requests. Which does mean all intelligence is at the server side and you have the full power of B4J to do whatever you want (secure database access, serial communication, cache control etc). With B4JS, some of this intelligence could be transferred to the browser side, but the app still needs internet/intranet access so this is as far as it could go.

INTRODUCTION PODCAST TO BANano (A.I. generated from the booklet)

http://sndup.net/hncr6

BANano is a different animal. It can use a Service Worker to 'install' the web app in the browser, so it can also work when the user is offline. While ABMaterial builds the page from the server side, BANano builds it from the browser side. This means EVERYTHING you write in B4J is transpiled to Javascript, HTML and CSS.

But with great power comes great responsibility! Unlike ABMaterial, some basic knowledge of HTML, CSS and to some extend Javascript is needed to build BANano apps. It makes excellent use of B4X's SmartStrings to create the HTML part of the app. BANano gives you a set of tools to write your own wrapper around any framework (MiniCSS, Skeleton, Spectre, Bootstrap, ...), which then can be easily used to quickly build webapps/websites.

DEMO/EXAMPLES BANanoSkeleton UI library

https://gorgeousapps.com/BANanoSkeleton/

OVERVIEW

A quick overview to show the different uses of both frameworks:

So both frameworks have their specific target, both for the programmer and the app you want to make.

Abstract Designer support in v2.0+

LICENSE

Freeware/Donationware License

B4J is Copyright (c) 2010 - 2018 by Anywhere Software All Rights Reserved.
LIBRARY (Library/library): B4J library files BANano.jar and BANano.xml (by Alain Bailleul)
SOFTWARE (Software/software): Computer Software
APPLICATION (Application/application): Any end product as the result of compiling with an Anywhere Software product
SOURCE CODE: human-readable program statements written by a programmer or developer in a high-level or assembly language that are not directly readable by a computer and that need to be compiled into object code before they can be executed by a computer

BY USING THIS LIBRARY, YOU AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE.

1. THIS LIBRARY IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. IN NO EVENT SHALL ANY COPYRIGHT HOLDER/AUTHOR/DEVELOPER BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL,SPECIAL,INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE LIBRARY INCLUDING BUT NOT LIMITED TO LOSS OF DATA, FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER PROGRAMS OR LIBRARY, EVEN IF COPYRIGHT HOLDER/AUTHOR/DEVELOPER HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

2. YOU MAY NOT COPY, SUB-LICENSE, REVERSE ENGINEER, DECOMPILE, DISASSEMBLE, OR MODIFY THIS LIBRARY IN ANY WAY.

3. YOU MAY NOT DISTRIBUTE THE LIBRARY ON ANY MEDIUM WITHOUT PRIOR NOTICE FROM ALAIN BAILLEUL (alain.bailleul@telenet.be). YOU HAVE TO ASK FOR PERMISSION IN ORDER TO MAKE THIS LIBRARY AVAILABLE FOR DISTRIBUTION OVER THE INTERNET OR ANY OTHER DISTRIBUTABLE MEDIUM.

4. YOU AGREE NOT TO DISTRIBUTE FOR A FEE AN APPLICATION USING THE LIBRARY THAT, AS ITS PRIMARY PURPOSE, IS DESIGNED TO BE AN AID IN THE DEVELOPMENT OF SOFTWARE FOR YOUR APPLICATION'S END USER. SUCH APPLICATION INCLUDES, BUT IS NOT LIMITED TO, A DEVELOPMENT IDE OR A B4J SOURCE CODE GENERATOR.

By possessing and/or using this library you are automatically agreeing to and show that you have read and understood the terms and conditions contained within this Freeware Software License Agreement. This Freeware Software License Agreement is then effective while you possess, use and continue to make use of these software products. If you do not agree with our Freeware Software License Agreement you must not possess or use our library products - this Freeware Software License Agreement will then not apply to you. This Freeware Software License Agreement is subject to change without notice.

Violators of this agreement will be prosecuted to the full extent of the law.

This library is free, however if you do enjoy it, please consider a donation to Alain Bailleul (alain.bailleul@telenet.be) for his time and efforts to make this library possible.

This license file (LICENSE.TXT) shall be included in all copies of the library or any distribution using the library in any form resulting from mechanical transformation or translation of the source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.

If you have any questions regarding this license, please contact alain.bailleul@telenet.be

Cheers,

Alain

 

[alwaysbusy]

BANano 7.35 is Released!

The download has been simplified and some additional B4J Templates have been added that match the new booklet: BANano - Essentials.

Download https://www.b4x.com/android/forum/t...h-abstract-designer-support.99740/post-627764

Alwaysbusy

 

[alwaysbusy]

BANano 7.37 is Released!

This is a maintenance update fixing bugs. It also allows adding zip files as assets to BANanoLibraries. It also contains a newer version of the BANanoSkeleton library (7.36).

The Booklet BANano - Essentials has been updated.

New chapters:

1.11.1. Multi-line Designer property names
18. BANanoSkeleton: UI component library
19. Troubleshooting
20. (Advanced) Tips & Tricks

Download https://www.b4x.com/android/forum/t...h-abstract-designer-support.99740/post-627764

Alwaysbusy

 

[Toky Olivier]

Do the "per class obfucation deactivation option" is implemented in the latest version (7.37) please? If yes, how to do it? Thank you so much.

 

[alwaysbusy]

Do the "per class obfucation deactivation option" is implemented in the latest version (7.37) please? If yes, how to do it? Thank you so much.

No, the request was to short before release. This is not a simple one to implement and will take quite some time.

Alwaysbusy

 

[alwaysbusy]

Note: when the final version of jServer 4 is released, I will release a new version where the used java libraries will be also updated to the ones the new jServer uses. This has no impact on your projects, but I think it is better that the library uses the same versions as jServer.

Alwaysbusy

 

[idrotelapp]

Hi friend
new item added to b4j new project menu by the name of banano skeleton(see the attachment). what is this new project type ?
I am very interested in making web app with b4j and I suppose this will help

 

[alwaysbusy]

Hi friend
new item added to b4j new project menu by the name of banano skeleton(see the attachment). what is this new project type ?
I am very interested in making web app with b4j and I suppose this will help

I suggest you download the library and booklet from post https://www.b4x.com/android/forum/t...h-abstract-designer-support.99740/post-627764 and follow the install instructions in the booklet. New menu items will appear in the IDE after you copied the templates to the B4J Additional Libraries folder. The 'BANano Skeleton' project type is now called 'BANano PWA'.

 

[alwaysbusy]

BANano 8.12 Beta available

Most of the changes are internal within the core transpiler engine (e.g. the dead code detector has been rewritten from scratch).

Support for Anonymous Functions, something that is very common in JavaScript and can often be used instead of callbacks. They are 'Subs' within 'Subs'.

e.g. here we pass an Anonymous Function to another Function (SetTimeOut) as an argument:

Dim FuncTimer As BANanoObject
Dim FuncArgs As List

FuncTimer.Sub(FuncArgs)
       ' do something and restart
        BANano.Window.SetTimeout(FuncTimer, 1000)
FuncTimer.EndSub
 
BANano.Window.SetTimeout(FuncTimer, 1000)

Such a function can also be called directly:

Dim aa As Int = 5
Dim x As Int
Dim y As Int
 
Dim z As BANanoObject
z.Sub(Array(x,y))
        y = x * a
        Return y
z.EndSub

Log(z.Execute(Array(4,5)))

As such a function is an just object, it can be assigned to a property of another object. When wrapping a lib you often see that a property should be a function, especially in case of events. Previously we would've build a callback but now you can also use such a function.

Show an alert when the user clicks on the webpage

Dim onClick As BANanoObject
onClick.Sub(Null)
        BANano.Alert("Hello there!")
onClick.EndSub

' get the document object
Dim document As BANanoObject
document.Initialize("document")

' assign our new method to the onclick event 'property' 
document.SetField("onclick", onClick)

New BANano objects are:

BANanoNotification: browser notifications

Dim notif As BANanoNotification
notif.Initialize(Me, "notif") 
notif.Show("Hallo", DateTime.Now, "BANano is here!", "http://127.0.0.1:8090/api/files/d4m3p945iz74uup/u6lg1v53eoq527t/golf_alain_AuXAZ05yuM.jpg?thumb=100x100", "http://127.0.0.1:8090/api/files/d4m3p945iz74uup/u6lg1v53eoq527t/golf_alain_AuXAZ05yuM.jpg?thumb=100x100", 500)

BANanoFormData: a wrapper around the FormData object, often used to upload data to a server. Usage:

Dim record As BANanoFormData
record.Initialize

record.Append("id", Id)
record.Append("created", Created)
record.Append("updated", Updated)
record.Append("username", UserName)
record.Append("email", Email)
record.Append("verified", Verified)
record.Append("password", Password)

New lightweight components in BANanoSkeleton (now over 50+):
SKBarcode
SKBigRange
SKCard
SKCaroussel
SKChart
SKCollapsable
SKGanttChart
SKGauge
SKMobileMenu
SKPercentageBar
SKProgressBar
SKTimeInput
SKTimeline
SKTimePicker

BANanoSkeleton now also supports flex columns.

And a special object SKLayout which makes it possible to add components on the fly very fast with code.

Some examples:

Dim Layout As SKLayout
layout = Layout.Initialize(Me, "body" ) ' important! set the return value of the .Initialize method back in the layout variable
layout.AddFlexColumns(1,12,6,4, "center" )
layout.LastRow.Column(1).MarginTop = "20px"
layout.LastRow.Column(1).MarginBottom = "20px"

' the .Add object will give you a quick method to create each type of BANanoSkeleton object         
Dim bc As SKBarcode = Layout.LastRow.Column(1).Add.Barcode( "bc" , "bc" , 64, 0, "CODE128" , "/Z000001" , True, 1, 14)
bc.PaddingTop = "10px"

Dim Layout As SKLayout
Layout = Layout.Initialize(Me, "body" )
Layout.AddFlexColumns(1,12,6,4, "center" )
layout.LastRow.Column(1).MarginTop = "20px"
layout.LastRow.Column(1).MarginBottom = "20px"
          
Dim chart As SKChart = layout.LastRow.Column(1).Add.Chart( "chart" , "chart" , "My chart" , "pie" , 300)
chart.AddLabels(Array( "2020" , "2021" , "2022" , "2023" ))
chart.AddDataSet( "Sales" , "" , "" , Array(1000,1500,500,3000))
chart.Build

Dim Layout As SKLayout
Layout = Layout.Initialize(Me, "body" )
Layout.AddFlexColumns(1,12,6,4, "center" )
layout.LastRow.Column(1).MarginTop = "20px"
layout.LastRow.Column(1).MarginBottom = "20px"
          
Dim bigrange As SKBigRange = Layout.LastRow.Column(1).Add.BigRange( "bigrange" , "bigrange" , "My BigRange" , 20, 0, 100, 10, "%" , "#ffffff" , True)
bigrange.Classes = "banbr-input-bigrange"
bigrange.Width = "100%"
bigrange.Style = $"{"border-radius": "1rem"}"$
          
bigrange.ElementLabel.SetStyle( $"{"background-color": "#334D5C", "color": "#fff"}"$ )
          
bigrange.ElementBottomBarFill1.SetStyle( $"{"margin-left": "0%", "width": "100%", "background-color": "#f1a70f"}"$ )
bigrange.ElementBottomBarFill2.SetStyle( $"{"margin-left": "0%", "width": "0%", "background-color": "#f1a70f"}"$ )
  
Dim tmpTick As BANanoElement
tmpTick = bigrange.GetElementTick(bigrange.GetNumberOfSteps+1)
tmpTick.SetStyle( $"{"color" : "#f1a70f", "font-weight" : "bold", "font-size" : "1.2em"}"$ )

With the final release of BANano 8 will also come an update version of the documentation en some extra BANanoLibraries, but this beta can give you a taste of what is coming.

Note that both libraries are already used in full production within our company for over 6 months so we have ironed out many bugs already and we consider it now stable. But it is always nice if someone else can test them too and report back bugs to us.

Download: https://www.b4x.com/android/forum/t...h-abstract-designer-support.99740/post-627764

Alwaysbusy

 

[angel_]

Thank you very much for this great update.

Have you been able to fix some bugs in the previous version?

[BANano] SKCheckbox not change status - iPad

On iPad with Chrome and Safari the SKCheckbox is always checked, if you click on the check it does not change status

www.b4x.com

[BANano] Evaluate boolean function

I try to evaluate the function but the results returned are not what I expected, what am I doing wrong? Sub WelcomePageButton_Click (event As BANanoEvent) Log(IsCheckOk("ab")) 'Return ab Log(IsCheckOk("cd")) 'Return ab Log(IsCheckOk("de")) 'Return ab End Sub Sub...

www.b4x.com

[BANano] Evaluate boolean without variable

When a boolean is evaluated without using a variable it seems to not correctly interpret the result: Sub MenuList_Click (returnName As String) Dim Number1 As Double = 3 Dim Number2 As Double = 5 Dim Operation As String = "sum" Log(Operation = "sum") 'return sum...

www.b4x.com

[BANano] Operations with parentheses

When I do the following operations it seems to return an incorrect value: Log(SinD((180 - 120) / 2)) 'return 0.4330127018922193 Log(Sin((cPI - cPI * 2 / 3) / 2)) 'return 0.4330127018922193 Log(Sin((cPI - (cPI * 2 / 3)) / 2)) 'return 0.5, correct Log(SinD(30))...

www.b4x.com

 

[alwaysbusy]

The first two should be, but the last two I will recheck because they don't seem to be solved although I'm pretty sure they were at some point
Let met go through my backups to find out where I lost them...

Thx for reporting this because we never use these kind of constructions in our PWAs it was never noticed. I should add them to my test bank.

 

[angel_]

I get the following error (8.12 beta):

Waiting for debugger to connect...
Program started.
BANanoLOGS
Reading B4J INI in C:\Users\Angel\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: C:\Users\Angel\Documents\Libraries B4X
Starting to transpile...
BANano Fatal Error. BANano library not found in the Additional Libraries folder.

 

[alwaysbusy]

Could be because C:\Users\Angel\Documents\Libraries B4X is somehow protected and the lib is unable to read the .xml file.

 

[angel_]

I have had to change the folder structure of additional libraries, I had this:

[B4X] Additional libraries folder

The additional libraries folder can be organized in a way that allows sharing cross platform libraries between B4A, B4J and B4i. From now on, the recommended way to organize the additional libraries folder: Additional libraries folder is set under Tools - Configure Paths. As you can...

www.b4x.com

I had to move the B4J subfolder

 

[alwaysbusy]

Next update will support this folder structure too. As we only use B4J within our company, our folder structures didn't look like this yet.

I will try to release a new beta this week as it appeared the fixes for 'Boolean without variable' and parantheses bug were never pushed . I have to rewrite them from scratch.

 

[angel_]

I have not found any new bugs in the beta version. Is the booklet available to review the new features?

 

[alwaysbusy]

No, not yet. We had a major meltdown at one of the servers of a client last week and all my time went into recovering their stock data.

 

[Yafuhenk]

BANano 7.37 is Released!

This is a maintenance update fixing bugs. It also allows adding zip files as assets to BANanoLibraries. It also contains a newer version of the BANanoSkeleton library (7.36).

The Booklet BANano - Essentials has been updated.

New chapters:

1.11.1. Multi-line Designer property names
18. BANanoSkeleton: UI component library
19. Troubleshooting
20. (Advanced) Tips & Tricks

Download https://www.b4x.com/android/forum/t...h-abstract-designer-support.99740/post-627764

Alwaysbusy

Hi,
I am working myself trough the booklet since I am a newbie on these topics.
Note that the Chrome web server plugin used in the booklet does not work anymore.

 

[angel_]

Hi,
I am working myself trough the booklet since I am a newbie on these topics.
Note that the Chrome web server plugin used in the booklet does not work anymore.

[BANano] TIP: Running a test server

UPDATE: since december 2022, chrome plugins like this have stopped working. Luckcely, the author of this plugin has created a standalone alternative you can install on your computer: Simple Web Server: https://simplewebserver.org/...

www.b4x.com

 

[Yafuhenk]

Thanks angel_ I will continue my class

 

[angel_]

BANano 8.12 Beta available

With the final release of BANano 8 will also come an update version of the documentation en some extra BANanoLibraries, but this beta can give you a taste of what is coming.

Any news on the documentation and/or some examples?