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

alwaysbusy

Expert
Licensed 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
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
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
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
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
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
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
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
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
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
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
Top