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
Click to expand...

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 (70+ components)

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


Cheers,

Alain
 
Last edited:
Click to expand...

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

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.

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

BANano.ExternalTestConnectionServer = "http://gorgeousapps.com"
Click to expand...
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
 

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
 
B

B4JExplorer

Active Member
Licensed User
Longtime User

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

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

Similar Threads

  • Question
B4J Question What is BANano?
Replies
6
Views
3K
alwaysbusy
  • Article
B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano
34 35 36
Replies
707
Views
110K
Mashiane
  • Article
B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano
16 17 18
Replies
351
Views
61K
NGUYEN TUAN ANH
  • Article
B4J Tutorial BANano for Dummies by Example
2
Replies
25
Views
14K
Mashiane
  • Article
B4J Library [BANanoWebix] An Object Oriented UX library for BANano
Replies
1
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…