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

BANano7.jpg


BANano7architecture2.jpg



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.

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.

OVERVIEW

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

overview.png

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

BANano is written from scratch, so although it is similar to B4JS, both support different things. B4JS is build on jQuery, while BANano uses Umbrella JS (a lighter form of jQuery, about 50x smaller) and Mustache to build the HTML.

BANano does also support some different B4J than B4JS: e.g. things like CreateMap, better support for SmartStrings etc.

Abstract Designer support in v2.0+

BANano1.21.png


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 ([email protected]). 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 ([email protected]) 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 [email protected]

Cheers,

Alain
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User

alwaysbusy

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

Active Member
Licensed User
Longtime User
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

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

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

Member
Licensed User
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
 

Attachments

  • menu.jpg
    menu.jpg
    65.8 KB · Views: 105

alwaysbusy

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

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

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

B4X:
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
 
Last edited:

angel_

Well-Known Member
Licensed User
Longtime User
Thank you very much for this great update.

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




 

alwaysbusy

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

Well-Known Member
Licensed User
Longtime User
I get the following error (8.12 beta):

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

Captura.JPG


Captura2.JPG
 

angel_

Well-Known Member
Licensed User
Longtime User
I have had to change the folder structure of additional libraries, I had this:


I had to move the B4J subfolder
 

alwaysbusy

Expert
Licensed User
Longtime User
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 :rolleyes: . I have to rewrite them from scratch.
 

angel_

Well-Known Member
Licensed User
Longtime User
I have not found any new bugs in the beta version. Is the booklet available to review the new features?
 

Yafuhenk

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

Attachments

  • ws1.jpg
    ws1.jpg
    83.8 KB · Views: 84
  • ws2.jpg
    ws2.jpg
    243.2 KB · Views: 86
Last edited:

angel_

Well-Known Member
Licensed User
Longtime User
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_

Well-Known Member
Licensed User
Longtime User
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?
 
Top