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

banano609.png

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.

Note: Because Progressive Web Apps are a new technology, not all browsers do support it (e.g. on iOS, the chrome browser does not support it yet)

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

ideamaker

Member
[QUOTE =“ Erel,帖子:627643,成员:1”]
非常令人印象深刻。这是100%的客户端解决方案。您实际上在使用B4J编译器吗?
[/引用]
sorry ,My English is very poor, so I have to reply to you with an interpreter。I need to write a personal blog program with b4j, but I still can't find a tutorial. I haven't been exposed to web programming before。Although I know there are many free personal blog programs, can you give a tutorial on building a website。
 

alwaysbusy

Expert
Licensed User
BANano v6.57

TAKE A BACKUP!

CHANGES:


1. [NEW] BANano.SetTabNotification(number As String)
----------------------------------------------------
Adds a notification number to the browsers tab. e.g. '(2) My Website'

2. [NEW] BANano.DeepClone(Obj as Object)
----------------------------------------
Deep Clones an object (e.g. a map)

3. [NEW] BANano.CreateElement(Tag as String) As BANanoElement
-------------------------------------------------------------
Creates a BANanoElement, not attached to something

4. [NEW] Use you own favicon.ico
--------------------------------
If a favicon.ico is found in the /Files folder, it is used instead of the default BANano one.

5. [NEW] Optimisations saved to file
------------------------------------
As the log only shows the first x of optimizations, the full list is now saved in OPTIMISATIONS.txt

6. [FIX] Fixes in how the Service worker handles additional Javascript Files
----------------------------------------------------------------------------
In some rare cases, the Service worker did not included some needed Javascript files.
This part of the engine has been rewritten.

7. [NEW] BANano.BuildAsB4XLibForABM(LibraryVersion As String)
-------------------------------------------------------------
New transpilation to create ABMBANano b4xlib libraries for ABMaterial.

More info: https://www.b4x.com/android/forum/t...-libraries-for-abmaterial.126828/#post-793319

8. [NEW] BANano.RaiseEventToABM(eventName As String, eventParamNames as List, eventParamValues as List, Description as String)
------------------------------------------------------------------------------------------------------------------------------
Method to raise an event to a ABM, maximum two params because B4J only supports this maximum. Use a Map is more are needed.
The Description will be added to the generated .bas file for ABM as comment.

See 7 for usage.

9. [NEW[] BANano.Spread(variable as Object) as Object
-----------------------------------------------------
Adds the spread operator (three dots) before the variable.
e.g. BANano.Spread(myVar)

becomes: ...myVar

For more info on the Javascript Spread operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

10. [CHANGE] BANanoGeoLocation.GetCurrentGeoLocation() renamed to BANanoGeoLocation.GetCurrentPosition()
--------------------------------------------------------------------------------------------------------

11. [NEW] BANANO.Header.AddJavaScriptFileSW(AssetFileNameOrUrl As String)
-------------------------------------------------------------------------
Does the same a AddJavascriptFile() but will write in also in the ImportScripts() method in the Service Worker file.

NOTE:such a javascript file can NOT use window or document or any other reference to the DOM as a Service Worker can not access this!

If it is a javascript file used in a BANanoLibrary, it MUST be added in the app explicitly!

These javascript files will NOT be merged!

12. [NEW] BANANO.Header.AddJavascriptES6FileSW(AssetFileNameOrUrl As String)
-------------------------------------------------------------------------
Does the same a AddJavascriptES6File() but will write in also in the ImportScripts() method in the Service Worker file.

NOTE:such a javascript file can NOT use window or document or any other reference to the DOM as a Service Worker can not access this!

13. [NEW] BANanoSQL.NextInserted(tableName As String, FieldName as String)
--------------------------------------------------------------------------
Returns the next auto incremented value that will be used

14. [NEW] BANanoEvent.Target() As Object
----------------------------------------
New property, can contain the Target description on which the event was triggered.

15. [NEW] TranspilerOptions.DoNotDeleteFolderOnCompilation(fullPath as String)
------------------------------------------------------------------------------
Prevents the Transpiler from deleting this folder. Useful e.g. for assets that are not in the /Files folder.

16. [NEW] BANano. Online() and BANan. OffLine() events
-----------------------------------------------------
Raises an event when the webApp goes Online of Offline.

Note: Can ONLY be used in Main!

17. [NEW] New components in SKSkeleton
--------------------------------------
SKTagPicker
SKVideo

18. [FIX] Several smaller transpiler fixes
------------------------------------------

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

Alwaysbusy
 

AlexG

Member
Licensed User
First time poster, long time lurker here. :)

I have been developing with B4A, and have just got into developing with B4J and have just started looking at this wonderful framework.

When I build a release using a BAnano skeleton with the bare minimum, I can't seem to get anything to display in Chrome. I am using XAMPP as a server. Chances are I am doing something inherently wrong, or have missed the point. I have watched plenty of videos, and been through dozens of posts, but I can't seem to figure out where I have gone wrong.

Any hints, tips, or slapping upside the head would be much appreciated. :)

Cheers,
Alex
 

alwaysbusy

Expert
Licensed User
BANano v6.59

Do NOT use v6.57 anymore if you are using it to make ABMBANanoLibraries!

TAKE A BACKUP!

CHANGES:


1. [FIX] ABMBANano Libraries losing Websocket connection
--------------------------------------------------------
I had to find this out myself the hard way, but there was a major flaw in the generation of the 'glue' code:
It only worked for ONE instance of the page. So as soon as two or more users accessed the page, the previous ones broke the connection.

You will have to recompile your existing ABMBANanoLibraries with this new version and make the changes in the calling ABM app described below:

Consequences on this fix:

a. Step 3. (Call this method in ConnectPage() to set the WebSocket) has to be removed
b. In each call to an ABMBANano library in ABM, you must pass the WebSocket (ws) in the method as the first parameter.

2. [NEW] TranspilerOptions.Author and .IDECmment
------------------------------------------------
Added to comply with the latest version of B4J

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

Alwaysbusy
 
Last edited:

DonManfred

Expert
Licensed User

Juanmavalero

Member
Licensed User
Hello, What are the hosting requirements for Banano to work?
It does not work for me on my hosting
URL: stock.vpsolutions.es
Thanks
 
Last edited:

alwaysbusy

Expert
Licensed User
@Juanmavalero It runs on about anything. The error you get is because it can not connect to 'localhost' for your php (see browser console):

1621418361789.png


So you get a CORS error (cross origin) and hence afterwards a JSON error as it did not get back the expected result. I never use BANano with PHP as B4J has an excellent jServer itself, but I would suspect you will have to link to something like http://stock.vpsolutions.es/stock/stock.php to avoid the CORS error (or something to avoid having to use localhost).

Alwaysbusy
 

alwaysbusy

Expert
Licensed User
This looks like it is created with the BVAD3 library, so you should start a new question in the B4J forum with e.g. [BVAD3] in the subject to get a better answer from its developer as this error is not related directly to the BANano library itself. In any case, please do not ask questions in this topic, as it is reserved for announcements on the BANano library itself. Always start a new topic with e.g. [BANano] or [BVAD3] or something similar in the subject. Thx!
 

Juanmavalero

Member
Licensed User
This looks like it is created with the BVAD3 library, so you should start a new question in the B4J forum with e.g. [BVAD3] in the subject to get a better answer from its developer as this error is not related directly to the BANano library itself. In any case, please do not ask questions in this topic, as it is reserved for announcements on the BANano library itself. Always start a new topic with e.g. [BANano] or [BVAD3] or something similar in the subject. Thx!
ok thanks you very much
 

Mashiane

Expert
Licensed User
@Juanmavalero It runs on about anything. The error you get is because it can not connect to 'localhost' for your php (see browser console):

View attachment 113693

So you get a CORS error (cross origin) and hence afterwards a JSON error as it did not get back the expected result. I never use BANano with PHP as B4J has an excellent jServer itself, but I would suspect you will have to link to something like http://stock.vpsolutions.es/stock/stock.php to avoid the CORS error (or something to avoid having to use localhost).

Alwaysbusy
Noted, it seems like even if one uses an ip address, it either returns a server error and does not work when php host is an ip. At the moment I am able to have this working using the domain name and have indicated this on the BVAD3 tutorial thread. So I am not able to get it to work when the domain name is not accessible/cannot be provided. I had just posted a question about php access being blocked when one uses php in Banano.

As much as at times we want to use the Jetty server there are these exceptions where clients already have existing infrastructure on php and they don't want to change as yet.

Thanks.
 

alwaysbusy

Expert
Licensed User
As I told a couple of times before now, If JavaScript can not do it, BANano can not do it. And I haven't found any JavaScript that can solve such CORS problems safely. If you have, post me the link and I will look into it. But from what I have read, you will have to look into the setup of or PHP, or Apache. And using an IP in an XMLHTTPRequest will always cause trouble, even 10 years ago when security was less strict. Nothing against using PHP, but then you will will have to configure it also so you play by the correct security rules.

Maybe what one has to do is put the BANano generated code next to the php so you can use relative paths?

Alwaysbusy
 

alwaysbusy

Expert
Licensed User
Those are just warnings in the CSS of bootstrap.min.css. If the table looks ok for you, you may probably just ignore them but to be sure, you should ask the developer of BDAV3 (in a new topic).

EDIT: it would also be nice to post how you solved the url if others encounter this problem (where you asked the BDAV3 table question)
 

alwaysbusy

Expert
Licensed User
I'll wait to release this until the final version of B4J 9.10 (in case something should still change), but the next BANano Transpiler should be able to handle the new B4X Iif and As syntax too :cool:

B4X:
Sub WelcomePageButton_Click (event As BANanoEvent)
    WelcomeModalMessage.Text = IIf(WelcomePageName.Text <> "", "Welcome " & WelcomePageName.Text, "Hello unknown person!")
   
    WelcomeModal.Open
End Sub

Dim j As String = $"{
"data": {
"key1": "value1",
"complex_key2": {"key": "value2"}
},
"items": [0, 1, 2]
}"$
   
    Dim parser As BANanoJSONParser
    parser.Initialize(j)
    Dim m As Map = parser.NextObject
    Dim value1 As String = m.Get("data").As(Map).Get("key1")
    Dim value2 As String = m.Get("data").As(Map).Get("complex_key2").As(Map).Get("key")
    Log(value1)
    Log(value2)
    Dim FirstItemInList As String = m.Get("items").As(List).Get(0)
    Log(FirstItemInList)
    For Each item As Int In m.Get("items").As(List)
        Log(item)
    Next
   
    Dim count As Int
    For i = 1 To 100000000
        count = count + IIf(True, 5, 5).As(Int)
    Next
    Log(count)
   
    count = count + (50).As(Double)
    Log(count)
   
    body.Append($"<div id="test"></div>"$).Get("#test").As(BANanoElement).AddClass("test")
   
    Dim tstClass As MyClass
    tstClass.Initialize
    tstClass.value = "Test"
    Dim lst As List
    lst.Initialize
    lst.Add(tstClass)
   
    Log(lst.Get(0).As(MyClass).value)

Alwaysbusy
 
Last edited:

alwaysbusy

Expert
Licensed User
I have released a BETA version of BANano 7 for the adventurous ones among you ;) (https://www.b4x.com/android/forum/t...h-abstract-designer-support.99740/post-627764). This contains ONLY the library files (no examples or additional BANano libraries).

Do not ask questions about this one here (it is for announcements only), but start a new thread with [BANano] in the subject.

I'm finishing a big PWA myself for a client this week using version 7, so I got limited time to answer questions. But I try to follow-up feedback as much as possible.

This version may likely undergo some changes and may contain bugs, so be VERY careful and using it in production is 100% your own responsibility!

Alwaysbusy
 
Top