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
BANano v2.08: download https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

CHANGES:

1. Better handeling for removing elements + events: see question https://www.b4x.com/android/forum/threads/banano-how-to-maintain-element-events.101616/

2. BANanoElement has a new metod Get(). This makes it easier to get an element when using Append() etc...

Example from the BANanoSkeleton library:
B4X:
mElement = mTarget.Append($"<button id="${mName}" class="${mFlavor} ${mClasses}" style="${exStyle}${mStyle}">${BANano.SF(mText)}</button>"$).Get("#" & mName)

3. BANano new method: SetMeToNull which does the same as 'Me = null' (something unfortunately can not be typed in the B4J IDE).

4. Update custom view template

5. Bug fixes in the transpiler

Alwaysbusy
 

alwaysbusy

Expert
Licensed User
Longtime User
BANano v2.09

CHANGES:

1. NEW: BANano.GetElements() to get an array of elements matching the selector. BANano.Getelement() still exists if only one will be returned (e.g. by using a #id)

2. NEW: BANano.CallSub (similar to B4J callSub)

3. CHANGED: BANano.RunInlineJavascriptMethod is now just RunJavascriptMethod. The old name still works but may be depreciated in the future.

4. NEW: BANanoLibrary wrapper for Sweet Alert 2. As this is an independent library (does not rely on any framework) this is the perfect example to demonstrate some new things and how to wrap a javascript library.

5. NEW: BANano.RunThenCatchJavascriptMethod: like BANano.RunJavascriptMethod but with Then and Catch callbacks. See the BANanoSweetAlert library for an example usage.

6. FIX: Dim with multiple variables was broken (Dim var1, var2, var3 as String)

7. .IsInitialized will now always return true and is not part of the object anymore (like a Map or a List). Kept for B4J compatibility only.

8. Other bug fixes in the transpiler

Download:

https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

Alwaysbusy
 

alwaysbusy

Expert
Licensed User
Longtime User
BANano 2.15

CHANGES:

1. Support for B4J Type e.g. Type Person(Name As String, Properties As Map, Scores(10) As Int)

2. Support for NumberFormat and NumberFormat2

3. BANano.Sleep() is now just B4Js normal Sleep(). BANano.Sleep() will be depreciated in the future.

4. BANano.GetType() and BANano.TypeOf are now just B4Js normal GetType(). Both BAnano functions will be depreciated in the future.

5. BANanoSQL new method .ExecuteCallBack(). See for more info: https://www.b4x.com/android/forum/t...anosql-with-own-callbacks.101920/#post-639714

6. BANanoSkeleton added SKRange, SKRadio, SKSwitch and SKNaviagationBar.
All views now have a Visibility property.

IMPORTANT:
- BANanoSkeleton_Files.zip contains new files. If you use it already in a project, you must copy the new files in your projects Files folder.
- Open all your layouts and save them so the new property Visible will be saved in the layout.

7. Bug fixes in the Transpiler

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

Alwaysbusy
 
Last edited:

B4JExplorer

Active Member
Licensed User
Longtime User
Hi,

I'm not clear how the demos should work, in

B4JServerDemo\Server

and

B4JServerDemo\Client


The server is working fine, at http://localhost:51042. The echo defaults to

{"BANanoStatus": 800}

But the client demo (in the adjacent subfolder), is pointing to http://gorgeousapps.com.

BANano.ExternalTestConnectionServer = "http://gorgeousapps.com"


Shouldn't the client be pointing to http://localhost:51042?

I'm sorry. I'm trying to trace through, but don't understand how these two examples connect, or how they work together.
 

alwaysbusy

Expert
Licensed User
Longtime User
This does need some more explaining indeed.

But the client demo (in the adjacent subfolder), is pointing to http://gorgeousapps.com.

BANano.ExternalTestConnectionServer = "http://gorgeousapps.com"
This is not the server it is pointing to.

ExternalTestConnectionServer
By default the connection to the internet is tested by checking if donotdelete.gif can be retrieved
from the assets folder where the app is hosted.

However, if you do not put it on a host (e.g. just by opening the .html file from disk),
You can upload the donotdelete.gif to some host on the internet to test for an internet connection.

So in my case the gif is uploaded to http://gorgeousapps.com j(ust to test if the user has an internet connection). For production apps, you must put the gif on your own server, as I can not guarantee http://gorgeousapps.com will keep running forever.

The explaining of this demo is here: https://www.b4x.com/android/forum/threads/banano-authentication-to-a-b4j-server-rest-api.100269/

I added some extra notes explaining what happens in the code and will add a readme.txt file pointing to the above tutorial.

Alwaysbusy
 

alwaysbusy

Expert
Licensed User
Longtime User
BANano 2.17

CHANGES:

1. NEW: support for Sender. @Kiffi had the brilliant insight on how I could implement the B4J Sender keyword. This gives BANano a huge potential boost.

e.g.

Without Sender:
B4X:
   Sub MultiButton_Click (event As BANanoEvent)
       Dim Ret As Long = BANano.GetSuffixFromID(event.ID)
 
       Dim Allviews As Map = BANano.GetAllViewsFromLayoutArray("MultiLayout", Ret)
       If Allviews <> Null Then
           Dim mButton As SKButton = Allviews.Get("multibutton") ' always lowercase
           mButton.Text = "Multi Button changed!"
       End If
End Sub

With Sender:
B4X:
   Sub MultiButton_Click (event As BANanoEvent)
       Dim MultiButton As SKButton = Sender
       MultiButton.Text = "Multi Button changed!" 
End Sub

2. Because of the new Sender keyword support, the BANanoSkeleton library has been updated:

These events definition have changed:

B4X:
   'Sub RadioTest_Change (event As BANanoEvent, radio As SKRadio)
   Sub RadioTest_Change (event As BANanoEvent)
       Dim radio As SKRadio = Sender

B4X:
   'Sub SKSwitch1_Change (event As BANanoEvent, switch As SKSwitch)
   Sub SKSwitch1_Change (event As BANanoEvent)
       Dim switch As SKSwitch = Sender

3. New BANanoObject property which allows you to get the result of a GetField() or GetMethod() call:

B4X:
   Dim myArray() As Int 
   myArray = bObjekt.RunMethod("values", Null).Result

4. For getting the Url params I made a couple of new methods:

B4X:
   ' get the current url
   Dim url As String = BANano.GetCurrentUrl
   Log(url)

   ' gets a Map with all the params 
   Dim m As Map = BANano.GetURLParams(url)
   Log(m.Size)
   For i = 0 To m.Size - 1
       Log(m.GetKeyAt(i) & " = " & m.GetValueAt(i))
   Next

   ' get one param: if not exists return the default value 
   Log(BANano.GetURLParamDefault(BANano.GetCurrentUrl, "test", "Alain"))

5 NEW method BANano.Exists(target) which returns if the target exists in the html (can be an ID, class, tag)

6. Fixes for Transpiling a String/StringBuilder in some rare cases

Download:

https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

Alwaysbusy
 

B4JExplorer

Active Member
Licensed User
Longtime User
This does need some more explaining indeed.


This is not the server it is pointing to.

ExternalTestConnectionServer


So in my case the gif is uploaded to http://gorgeousapps.com j(ust to test if the user has an internet connection). For production apps, you must put the gif on your own server, as I can not guarantee http://gorgeousapps.com will keep running forever.

The explaining of this demo is here: https://www.b4x.com/android/forum/threads/banano-authentication-to-a-b4j-server-rest-api.100269/

I added some extra notes explaining what happens in the code and will add a readme.txt file pointing to the above tutorial.

Alwaysbusy

Thanks, I saw the Ajax call this morning, and understand better now.

Will play with it tonight, thanks chief.

Regards,
 

alwaysbusy

Expert
Licensed User
Longtime User
BANano 2.19

CHANGES:


1. Fix for bug in release mode for #if CSS commenting out all generated Javascript after it.

2. Support for #ExcludeFromLibrary. Modules having this tag set to true will not be compiled into the BANano library.

3. Fix for bug 'OR' between two String functions:

e.g. previously failed:

B4X:
   Dim myString As String = "Foo"
   If myString.ToLowerCase.Contains("foo") Or myString.ToLowerCase.Contains("bar") Then
       Log("!")
   End If


4. Fix for List AddAll(), AddAllTo()

5. BANanoObject.Initialize2() second param can now also be an Array. This makes it possible to do this:

In Javascript:
B4X:
   var myGraph = new Dygraph(div, data);

BANano:
B4X:
   DygraphObject.Initialize2("Dygraph", Array(div, data))

6. Support for BANanoPromise. See this tutorial: https://www.b4x.com/android/forum/threads/banano-working-with-promises.102413/

7. Other Transpiler fixes

8. Oh and I forgot: I made 3 shortcut methods on the BANanoElement:

.GetField
.SetField
.RunMethod

All three are BANanoObject methods, now also available on BANanoElement as shortcuts.

So you can do:

B4X:
Dim UploadedFiles() As String = BANano.GetElement("#fu").GetField("files").Result

instead of having to do (both still work):
B4X:
Dim UploadedFiles() As String = BANano.GetElement("#fu").ToObject.GetField("files").Result

I hope this will help confused users who do not always understand when to switch from BANanoElement to BANanoObject.

Download:

https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

Alwaysbusy
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
BANano 2.25

CHANGES:

1. GetViewFromLayoutArray() and GetAllViewsFromLayoutArray() has now an extra first parameter to allow adding the B4J class where the layout was loaded.

2. New params to config the paths for a build:

SCRIPTS_FOLDER
ASSETS_FOLDER
STYLES_FOLDER

3. BANanoSkeletonCSS added some properties. You will need to copy the new Library to your Additional Libraries folder if you have already used it.
the CSS file was also changed.

4. New example Website with multiple pages. I made two versions, one using a Router, one without a Router.
IMPORTANT: they need to run on a real server (or e.g. the Chrome Server plugin!)
It is a real world example I wrote for a friend of mine who ownes a B&B.

Demonstates:
- multi-pages
- multilingual supports
- browsers Back/Forward buttons support.
- floating navigation bar

It is ridiculous how little programming I had to do to make his site. Finished the whole thing in a morning. :)

Both examples are heavily commented.

5. The following Javascript DOM objects have been wrapped:

BANanoWindow
BANanoHistory
BANanoLocation
BANanoGeoLocation/BANanoGeoPosition (https only)
BANanoConsole
BANanoNavigator
BANanoScreen

Some are used in the examples in (4)

6. BANanoObject has been extended with:

AddEventListener
ClientLeft/Top/Width/Height
OffsetLeft/Top/Width/Height
ScrollLeft/Top/Width/Height

7. Other transpiler fixes.

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

Alwaysbusy
 
Last edited:

B4JExplorer

Active Member
Licensed User
Longtime User
Getting a missing library error.

Copied BANanoSkeleton jar and xml from

\Banano\BANano2.25\BANanoLibraries\SkeletonCSS\Library\

to

c:\Program Files\Anywhere Software\B4J\Libraries\

, along with the BANano xml and jar from

\Banano\BANano2.25\Library

But the demo at

\BanNano\WebsiteDemo\WithoutRouter\ChatNoir.b4j

complains that bananoskeleton is missing.


Not sure what's happening. I see the libraries in there, although obviously the case is different. BANanoSkeleton vs bananoskeleton.
 

alwaysbusy

Expert
Licensed User
Longtime User
BANano 2.32

CHANGES:

1. Two ways to handle old browsers who are not ES6 compliant (like IE 11).

a. Using the BANano.DetectNoES6Support = true switch

When there is no ES6 support, an event BANano_NoES6Support is raised. You can then inform the user (e.g. with an alert) that he has to upgrade her/his browser

b. Using the BANano.ShowWarningsUnsupportedForOldBrowsers = True switch

In this case, this is more a help for you, the developer. On compilation, you get a warning that you are using some code which will not be usable in a non ES6 browser.
You can then change this code to something which will run.

For example if you set this switch to true, and you use the following code:

B4X:
   If BANano.CheckInternetConnectionWait Then
       Log("on line")       
   End If

You will get a warning in the log when you compile:

B4X:
   [WARNING]: The method CheckInternetConnectionWait will not work in old browser!

I have added some polyfills for unsupported code (like the string methods .StartsWith/EndsWith and promises), but some things like async/await are just not working in a non ES6 compatible browser.
The ...Wait() methods use async/await, so hence the above warning.

2. Better system for updating Service Worker.

By using the version param in BANano.Initialize better, the system got a lot smarter in knowing when it has an update:

B4X:
   BANano.Initialize("BANano", "ChatNoir", DateTime.Now) '<----------
   BANano.JAVASCRIPT_NAME = "app" & DateTime.Now & ".js"

3. New method GZipGeneratedWebsite() will GZip your html/css/js/json files on compilation. You can set a minimum filesize so small files are no compressed (it may take longer to decompress such files than the actual transfer).

4. Some warnings and optimization reminders when you are using an excessive number of CSS/Javascript files. You may not think this is important, but tests have shown your website/webapp will loose the users interest EXPONENTIALLY.
In almost all cases, you can merge, and even omit certain files because you do not use them anywhere in your code. This is especially the case for jQuery components where plugins or even whole components are loading a lot of javascript and aren't even used in your current website.

Just think this: your website may look great, but nobody will ever see it as they are long gone because it takes to long to load.

Some numbers for each one-second delay in page load time:

11% fewer page views
16% decrease in customer satisfaction
7% loss in conversions

If your website is > 1MB in CSS/Javascript files alone and takes > 2.5 seconds to load, you are probably in trouble. So these are just gentle reminders you should look into this :)

I will furter look into these and by analysing the source code in the future give you more tips and tricks to make your website the fastest it can be.

5. Other bug fixes in the transpiler.

Download: https://www.b4x.com/android/forum/t...library-with-abstract-designer-support.99740/

Alwaysbusy
 

alwaysbusy

Expert
Licensed User
Longtime User
Top