Share My Creation [Web][BANano] Web App library with Abstract Designer support

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

BANano is a FREE B4J library to create websites/webapps with (offline) Progressive Web App support.

Unlike its big brother ABMaterial, BANano does not rely on any particular framework like Materialize CSS.

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.

1633089919229.png
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
BANano v6.09

TAKE A BACKUP!

IMPORTANT!

A BANano Custom View can now have a special Property: the AutoID Key.
If the Custom View has a property AutoID and it is set to True, then the BANano Transpiler will use a random string for the ID/Name of the component.

This will make it easier to make layouts in the Abstract Designer without having to worry about having the same name.

In the BANanoSkeleton library for example the following Custom Views have an AutoID:
  • SKRow
  • SKColumn
  • SKContainer
  • SKlabel
  • SKImage
It is important that you open your existing layouts and check if this setting is correct for your layout (as by default, this will be set to True for the above Custom Views)

You can Ignore this behavior by setting the TranspilerOptions.SetIgnoreAutoID(True), but I suggest you do the check described above for your existing layouts and make use of it as it will make it easier in the future if you have new layouts.

CHANGES:

1. [NEW] BANano.DeepMerge()
---------------------------
Merges two object into one (e.g. two maps into one)

2. [NEW] Live Updating of Layouts
---------------------------------
You can now live (while running) update the layouts in the Abstract Designer and reload them in the browser

3. [NEW] BANano.GetAsset()
--------------------------
returns the object previously loaded with AssetsLoad/AssetsLoadEvent/AssetsLoadWait
needs the exact url path used in the Load methods.

4. [NEW] Prefixing Smart Strings
--------------------------------
When you start the Smart Strings ($""$) with one of these prefixes, BANano will do some automatic replaces:

B4X:
[BANCLEAN]: removes \n and \r
[BANRAW]: replaces \n to \\n, \r to \\r, " to \"

5. [NEW] BANano.CallBackMethod()
--------------------------------
Get the BANano name of a method, to be used in e.g. AddEventListener and RemoveEventListener.

6. [NEW] BANano.Await
---------------------
Makes JavaScript wait until the promise returns a result. It has to be noted that it only makes the async (Wait) function block wait and not the whole program execution.

The method name itself has end with ...Wait (this adds the async prefix in Javascript).

7. [NEW] Typical Javascript Array methods added
------------------------------------------------
B4X:
BANano.Pop
BANano.Push
BANano.Shift
BANano.Unshift
BANano.Splice
BANano.Concat
BANano.Slice
BANano.Slice2
BANano.Sort
BANano.Sort2
BANano.Reverse
BANano.ForEach
BANano.Map
BANano.Filter
BANano.Reduce
BANano.ReduceRight
BANano.Every
BANano.Some
BANano.IndexOf
BANano.IndexOf2
BANano.LastIndexOf
BANano.LastIndexOf2
BANano.Find
BANano.FindIndex

8. [NEW] BANano Event has property ReturnValue
----------------------------------------------

9. [NEW] BANanoMediaQuery
-------------------------
A media query fires an event if a certain rule matches.

Example rules:
B4X:
(max-width: 400px)
(min-width: 401px) and (max-width: 600px)
(min-width: 601px) and (max-width: 800px)
(min-width: 801px)
(orientation: portrait)
(orientation: landscape)

Example Usage:
B4X:
Private Bigger992px As BANanoMediaQuery
...
Bigger992px.Initialize("(min-width: 992px)")
...
Sub Bigger992px_Matched()
    MainSidebar.AlwaysOpen = True
    ' and hide the hamburger button
    MainHamburgerMenu.Element.SetStyle($"{"visibility": "hidden"}"$)
End Sub

10. [NEW] BANanoObject Delete operator
--------------------------------------
The delete operator deletes a property from an object

11. [NEW] New/changed components in the BANanoSkeleton b4xlib
-------------------------------------------------------------
* SKCanvas/SKCanvasObject/SKCanvasImageData

Very similar object as in ABMaterial. Build-in Drag/Drop of objects

* SKMenu

Menu object (e.g. can be used in a Sidebar as a Hamburger menu)

* SKTextbox

Possibility to add a prefix/suffix label to the component.

* SKColorPicker

12. [NEW] BANano.LoadLayoutAppend/BANanoElement.LoadLayoutAppend/BANanoElement
------------------------------------------------------------------------------
Appends the layout at the end without emptying the target first.

13. [NEW] RemoveEventListener extra parameter UseCapture
--------------------------------------------------------
useCapture: A Boolean value that specifies the event phase to remove the event handler from.

true - Removes the event handler from the capturing phase
false - Removes the event handler from the bubbling phase

14. [FIX] Tags are not appended on thead/tbody/tfoot tags
---------------------------------------------------------
Umbrella limitation. Reason is the javascript createDocumentFragment() method does not support table tags but I have written a workaround for it.

15. [FIX] Sometimes in libraries, and error looking for a BANanoApp.jar occured
-------------------------------------------------------------------------------

16. [FIX] ...Wait methods not generated in libraries
----------------------------------------------------

17. [NEW] includes a BANano Skeleton.b4xtemplate
------------------------------------------------
Because B4X now allows templates, BANano has a template using the BANanoSkeleton library.
It has a page, sidebar, topbar and an example modal sheet.

18. [FIX] Description Meta Tag was added twice
----------------------------------------------

19. [NEW] TranspilerOptions.SetFireReadyWhenReadyStateComplete(bool as Boolean)
-------------------------------------------------------------------------------
Raises the Ready state only when the loading state is 'Complete'. Default = True

Set to False to have the old behaviour.

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

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

Alwaysbusy
 

alwaysbusy

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

alwaysbusy

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

alwaysbusy

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

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
 

alwaysbusy

Expert
Licensed User
Longtime User

alwaysbusy

Expert
Licensed User
Longtime User
BANano 9.02 Released. See: https://www.b4x.com/android/forum/t...h-abstract-designer-support.99740/post-627764

IMPORTANT TAKE A BACKUP!

Ability to be able to make Web Components. (creating your own HTML Tags)

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

See Chapter 17 in the booklet for more information

Several bug fixes where done with one important one you should be aware of:

BANano.Split(). After spending quite some time looking why some code did work in B4J but not in BANano, we found out that the split functionality is very different between Java and JavaScript, especially when it comes to empty values before and after the delimiter. As we strive to have as much compatibility between B4J and BANano code, we have now made the JavaScript behavior identical to how it works in Java. So if you have used this method, you should check your code. It may or may not have impact on your code.

Note: You can now also use Regex.Split() in your BANano code (not the other RegEx methods. You can use BANanoRegEx for that).

BANanoSkeleton has also some bug fixes and 3 new components:

SKSVGSurface
SKTimeStartStop
SKTreeView

Alwaysbusy
 
Top