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






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:

Toky Olivier

Active Member
Licensed User
Longtime User
No, you will need to write this yourself. All it does is make sure it runs offline by caching the assets.
Thank you. There is no thread about it in the forums. It will be good if there is some tutorial.
There is some resources here: https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa and here: https://codelabs.developers.google.com/codelabs/workbox-indexeddb/index.html?index=../..index#0
I'll try to understand...
Again thank you.
 

Toky Olivier

Active Member
Licensed User
Longtime User
It seems that there are some background sync plugin that will be used with the service worker. Is it possible to implement it in BANano please? No idea for now how to do in the code.
 

Duque

Active Member
Licensed User
Longtime User
How can i achieve this
JavaScript:
document.getElementById("myId").focus();
?

I tried without success

B4X:
BANano.RunJavascriptMethod("hacerFocus",Array As String())
#if JAVASCRIPT
function hacerFocus(){   
    document.getElementById("SKTextBox1").focus();
    };
 #End If

SKTextBox1 was created in the designer, I only saw the classes field not the ID field
 

alwaysbusy

Expert
Licensed User
Longtime User
Please start a new thread with your question
Yes please

However, I'll answer this one once here because part of the question is an important concept in BANano:

SKTextBox1 was created in the designer, I only saw the classes field not the ID field
All components created in the designer have their ID (in B4X terms, this is the Name in the Abstract Designer) lowercased. So probaby doing this would've worked:
B4X:
BANano.RunJavascriptMethod("hacerFocus",Array As String())
#if JAVASCRIPT
   function hacerFocus() {
        document.getElementById("sktextbox1").focus(); // lowercased id
   };
#End If

A much cleaner thing to do is make some changes to the BANanoSkeletonCSS library by adding a couple of properties to each component:
B4X:
' returns the BANanoElement
public Sub getElement() As BANanoElement
    Return mElement
End Sub

' returns the tag id
public Sub getID() As String
    Return mName
End Sub

And to make the 'lowercased' ID to be consistent also for dynamically added components, we could lowercase the Name in the initialize method:
B4X:
Public Sub Initialize (CallBack As Object, Name As String, EventName As String)
    mName = Name.ToLowerCase '<--------- to make it also lowercase for dynamically added components
    mEventName = EventName.ToLowerCase
    mCallBack = CallBack   
End Sub

Now we have access to the inner BANano component, which allows us to do this without having to use Javascript:
B4X:
BANano.GetElement("#" & SKTextBox1.ID).RunMethod("focus", Null)

And even simpler:
B4X:
SKTextBox1.Element.RunMethod("focus", Null)

You can download an updated SkeletonCSS library where these changes are implemented here: http://gorgeousapps.com/BANanoSkeletonCSS1.05.zip

If it is a much used method, you can make it part of the component in the library:
B4X:
' set focus
Public Sub Focus()
     mElement.RunMethod("focus", Null)
End Sub

Now we would be able to do just this:
B4X:
SKTextBox1.Focus

Alwaysbusy
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
@Toky Olivier I haven't forgotten you for the PWA But it takes a lot more work to make the needed changes to BANano for syncing via a Service Worker. Fascinating stuff though and it will be great if it is in build-in. I'm trying, as always, to hide all the difficult stuff from you so it is simple to use.
 

Toky Olivier

Active Member
Licensed User
Longtime User
Thank you for your good and hard work
B4X + BANano are more powerfull than ever
 

Roberto P.

Well-Known Member
Licensed User
Longtime User

hi Alain, are there any updates for this feature?
 

alwaysbusy

Expert
Licensed User
Longtime User
hi Alain, are there any updates for this feature?
it is still on the table, but my day job is due to the corona thingy taking up most of my time as I'm running double shifts for the moment. Hopefully things will change back to normal soon and I will be able to spend more time on this.
 

Roberto P.

Well-Known Member
Licensed User
Longtime User
it is still on the table, but my day job is due to the corona thingy taking up most of my time as I'm running double shifts for the moment. Hopefully things will change back to normal soon and I will be able to spend more time on this.

I understand, we are all in the same situation. Good job everyone
 

alwaysbusy

Expert
Licensed User
Longtime User
BANano v5.10

TAKE A BACKUP!

CHANGES:


[UPDATE] Complete rewrite of BANano.TranspilerOptions.RemoveDeadCode
-----------------------------------------------------------------------------------------
The RemoveDeadCode setting has had a complete overhaul. It is a lot smarter than before.

A new setting was also introduced to ignore a certain method to be removed. Just add 'IgnoreDeadCode after the method you want te be ignored.

This is needed in cases like this, as the Transpiler does not know if the method getimageurl is used or not:
B4X:
Store.SetMethod(Me, "getimageurl")
...
Sub getimageurl(url As String) As String 'IgnoreDeadCode
    Return $".${url}"$
End Sub

[NEW] BANano.AddServiceWorkerSyncMethod
------------------------------------------------------
Can only be used in AppStart. Module and method name can NOT be variables.

A Sync method must return a BANanoPromise!

This can be used to add extra functionalities to the ServiceWorker.
Most useful for PWAs using the BANanoServer library.

Example:
B4X:
' activate the service worker
Server.BANano.TranspilerOptions.UseServiceWorker = True

'define a service worker method and the BROWSER method that will make the call to the SERVER API Handler url
Server.BANano.AddServiceWorkerSyncMethod("sync-db", "BROWSERSyncDB", "SyncDB") ' In hybrid BANano Web Apps the prefix BROWSER/SERVER/SHARED is important!

' add the SERVER API handler
Server.AddHandler("/v1/sync/*", "SERVERSyncDB", False) ' In hybrid BANano Web Apps the prefix BROWSER/SERVER/SHARED is important!

[NEW] BANano.RunServiceWorkerSyncMethod
------------------------------------------------------
Runs this Service Worker Sync Method in the background (previously added with AddServiceWorkerSyncMethod) if supported by the browser.

Example, running the above method:
B4X:
BANano.RunServiceWorkerSyncMethod("syncdb")

[NEW] BANano.BP: Set a breakpoint
------------------------------------------
Stops the execution of JavaScript. Is ignored if in release mode.
Use the Developer Tools in the browser to inspect e.g. variable values.

[NEW] BANano.TM
----------------------
Is ignored in Release mode.
Track Method. Use it in a Sub to trace some info after it ran in the browsers log.

[NEW] BANano.TMC
------------------------
Is ignored in Release mode.
Same as TM (TrackMethod), but initially collapsed

[DEPRECIATED] BANano.CallDebugger
--------------------------------------------
Use BANano.BP instead

[DEPRECIATED] BANano.DebugtrackLine
-----------------------------------------------
Use BANano.BP instead

[DEPRECIATED] BANano.DebugTrackMethod
---------------------------------------------------
Use BANano.TM or BANano.TMC instead

[NEW] BANano.ExternalHTMLToHTMLBlocks
----------------------------------------------------
Can only be used in AppStart
Useful if you use an external Designer.

Will extract all html blocks where the HTML tag has the class BANANO.

if the class = BANANO, then the body HTML String will not contain these elements.

You can later get their HTML by using the GetHTMLBlock() method.
The Body HTML can be returned with the GetHTMLBody() method.

[NEW] BANano.GetHTMLBlock
-----------------------------------
Returns the HTML String from a removed HTML Block (using the BANANO class)
previously added with the ExternalHTMLToHTMLBlocks() method.

The idPostFix will be added to the original Id as _idPostFix. Is normally a number.

[NEW] BANano.HTMLBody
-------------------------------
returns the HTML String with all HTML Blocks having the BANANO class removed.

[NEW] BANano.GenerateUUID
-----------------------------------
Generates a UUID. Works both in B4J as in BANano code

[NEW] BANano.GetP/SetP
------------------------------
Method to get/set a property from any class

Can be useful for example if you want to get/set a property from a class by name.

The second parameter is Case Sensitive and MUST be a literal String!

Example:
B4X:
BANano.SetP(mSelf, "mClasses", props.Get("Classes"))

For an example usage, check out the BANanoSkeleton source code.

[NEW] BANanoObject.Initialize5
-------------------------------------
Can be used to create a plain Javascript object. This is basically set the object in Javascript to {}

Example:
B4X:
Dim options As BANanoObject       
options.Initialize5
options.SetField("field", mElement.ToObject)

[NEW] BANano.TranspilerOptions.RedirectOutput
---------------------------------------------------------
Redirects the logs to a file. Must be set in AppStart.

[NEW] BANano.TranspilerOptions.EnableLiveCodeSwapping
---------------------------------------------------------------------
Enable Live Code Swapping and watch live changes made in the B4J source code.
On Save, the changed B4J code is Transpiled again and reloaded by the browser.

Default = true

For more info: https://www.b4x.com/android/forum/threads/banano-live-code-swapping-in-v5-preview.118053/#content

[NEW] the BANanoSkeleton library has been updated extensively
---------------------------------------------------------------------------
Optimized the Custom Views code.
Now uses the Roboto font and can use Font Awesome Icons.

Because it is no longer just a wrapper of SkeletonCSS, it is now just called Skeleton.

New components:

View attachment 96242
B4X:
SKBreadCrumbs
SKChip
SKDatePicker
SKDivider
SKDropButton
SKEditor
SKFloatingButton
SKMobileNav
SKModal
SKPagination
SKQRCode
SKSideBar
SKSignaturePad
SKTabs

Toasts have also been added and if SKTextBox is a file selector, it got a new look.

Some general theme settings can be set very quickly:
B4X:
SKTools.SetBaseColor("#546e7a")
SKTools.SetDatePickerSelectedColor("#00ff00")
SKTools.SetDatePickerHoverColor("#ff0000")
SKTools.SetFloatingButtonBottom(100)
SKTools.SetBadgeBackColor("#00ff00")
SKTools.WriteTheme ' IMPORTANT

See the DemoNewComponents in the BANanoLibraries\Skeleton folder for a demo of these components.

[FIX] Smaller bug fixes in the transpiler
---------------------------------------------

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

Alwaysbusy
 
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
 

LJG

Member
Thank you for the update!
Trying to run BANano v6.09 in the BANanoServer demo. All works fine except it seems that in the BANanoServer environment, we can no longer simply load a layout to a SKContainer like we were able to do before (eg, SKMainContainer.Element.LoadLayout("Template")):

B4X:
Private body As BANanoElement
body.Initialize("#body")
body.Append($"<div id="mainHolder"></div>"$).Get("#mainHolder").LoadLayout("UploadForm")
 SKMainContainer.Element.LoadLayout("Template")

This worked before in the BANanoServer demo (as called from the Sub WebSocket_Connected()), but now it doesn't show up in the browser and I get the following error in the web browser console:

browserabout.js:1513 Uncaught TypeError: Cannot read property 'BANll' of null
at _B.websocket_connected (browserabout.js:1513)
at b4j_runFunction (bananocore.js:9)
at p._B._ws.onmessage (browserabout.js:1491)
at HTMLDivElement.<anonymous> (bananocore.js:7)
at WebSocket.s.onmessage (bananocore.js:7)

In JS: _B._skmaincontainer.getelement().BANll(_B.template);

This seems to work fine outside of using BANanoServer. I know that outside of BANanoServer, SKMainContainer.Element.LoadLayout("Template") would be initiated from BANano_Ready(), so I do not know if that is the issue here within the BANanoServer environment (again, this wasn't an issue before v6.09).

I'll start a new thread about it, but any help in resolving this would be appreciated, thanks.
 

LJG

Member

[Partially Resolved]: I was able to resolve this by using the setting "Server.BANano.TranspilerOptions.SetIgnoreAutoID(True)". Sorry if I misunderstood something in regard to the use of the AutoID. I did not copy the SKContainer from an older project. I created it new using the updated 6.09 BANano - so, I don't know why it caused this issue and why it seems that we have to ignore the AutoID when using BANano within the BANanoServer.
 

alwaysbusy

Expert
Licensed User
Longtime User
BANano v6.11

TAKE A BACKUP!

CHANGES:


1. [FIX] ...Wait methods not generated in libraries
----------------------------------------------------
Somehow this fix slipped through my final push for 6.09 and should now work in 6.11.

2. [FIX] AutoID for SKLabel1 in UploadForm (Server demo) was still on True
---------------------------------------------------------------------------------------
Explanation here: https://www.b4x.com/android/forum/t...ith-skcontainer-loadlayout.124707/post-778708

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

Alwaysbusy
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…