[B4X] BANano 3.09 Released

CHANGES:

1. NEW: BANano .b4xlib libraries

The big change is the introduction of being able to make and use BANano libraries in the B4X .b4xlib format.
This has a couple of profound advantages over normal .jar libraries for BANano:

a. Because the libraries are compiled at the same time as the app, BANano can remove classes that are not used in the app. This works best for libraries that use Custom Views.

E.g. suppose you made a big library with a lot of components like DatePickers, Grids, etc. If you don’t use a certain component, then that code is not included in your final app. This can reduce the size of the generated app considerably.

I think the way BANano generates a build (very modular) is now paying off big time.
But, this really depends on how modular the library builder has written his library.

e.g. if a class is used in a method in a module, but this method is never called in your app, all the classes (and the DependsOnAsset, see 6) will still be included.

b. As all the assets are included in the .b4xlib, you don’t have to worry about adding them in your app anymore: they are copied and included automatically. This means less clutter in your Files tab and no more .AddCSSFile or .AddJavascriptFile that are just needed for a library. You just have to worry about the assets you use in your app.

c. No more need to make a library in two steps (BuildAsLibrary + Compile to Library)

As a Library Builder, there is nothing special you have to do in B4X, except using:

BANano.BuildAsB4Xlib("1.01")

I’ve tried it on all the libs and projects I have and it looks like it works, but maybe there are still some problems in it. I had to make a lot of changes to the core of BANano to make this possible, so the chance exists.

In short: TAKE A BACKUP! :)

2. NEW: The generated .js files are in Build (release) modus a lot smaller (tests showed sometimes 50% smaller)

3. CHANGE: UseServiceWorker is now by default false. You will have to set it to True if you want to use a Service worker.

4. NEW: MinifyOnline now also minifies CSS files

5. NEW: MergeAllCSSFiles and MergeAllJavascript files: will create one CSS and one JS file by mergin them.

6. NEW: DependsOnAsset

When creating e.g. a Custom View, you can set if it Depends on certain CSS, Javascript or other asset files.
For CSS and Javascript, you must still use the AddCSSFile & AddJavascriptFile in AppStart.

7. Because the Transpiler gets more and more options, I created a new object BANano.TranspilerOptions that hosts those options.

The old ones are marked DEPRECIATED (they still work, but will eventually be removed). A warning is shown.

8. NEW options: ShowWarningsDeadCode & RemoveDeadCode

Only works in Build

Shows a warning in the log if the transpiler suspects some code is dead (never used).
This is handy, especially in the final stage of development to remove code (or comment out) that is never used.

Methods with a _ in their name are always considerd to be needed.

You can then use the RemoveDeadCode property to prevent GENERATING dead javascript code.

9. Added the Fetch API: see here

Download here:

Alwaysbusy

or

Click here to Donation and support BANano & ABMaterial

Advertisements

[B4X] BANano 2.38 released

mr2

CHANGES:

1. Fix for CallInlinePHPWait which was missing the CallAjaxWait method

2. Fix for Bit functions where the first param was ignored

3. New BANanoURL, a wrapper around the URL object

4. Shortcut for URL’s CreateObjectURL() and RevokeObjectURL() on the BANano object

5. New BANanoLibrary BANanoMediaRecorder which allows WebCam/Microphone/Screen recording

see for more info: https://www.b4x.com/android/forum/threads/banano-capture-webcam-microphone-screen.104504

6. Other small transpiler fixes

Download: https://www.b4x.com/android/forum/threads/banano-website-app-wpa-library-with-abstract-designer-support.99740/

Alwaysbusy

or

Click here to Donation and support BANano & ABMaterial

[B4X] BANano new UI library

Image2

 

Great new BANanoLibrary by Kiffy: BANanoKendoUI

Unlike other RAD Web tools, with B4J and BANano, you are not limited to UI frameworks like bootstrap. Just use the one you like!

More info: https://www.b4x.com/android/forum/threads/banano-kendo-ui-core-wrapper.103257/

Alwaysbusy

or

Click here to Donation and support BANano & ABMaterial

[B4X] BANano 2.25 released

BANano2.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 owns a B&B.

Demonstrates:

  •  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/threads/banano-a-sneak-peek-into-a-progressive-web-app-library.99740/#post-627764

Alwaysbusy

or

Click here to Donation and support BANano & ABMaterial

[B4X] BANano 2.19 released


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:

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:

var myGraph = new Dygraph(div, data);

BANano:

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. 3 shortcut methods on the BANanoElement:

.GetField
.SetField
.RunMethod

All three are BANanoObject methods, now also available on BANanoElement as shortcuts.

So you can now do:

Dim UploadedFiles() As String = BANano.GetElement("#fu").GetField("files").Result

instead of having to do (both still work):

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

or

Click here to Donation and support BANano & ABMaterial

 

[B4X] BANano 2.15 released


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/threads/banano-extending-event-driven-bananosql-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/threads/banano-website-app-wpa-library-with-abstract-designer-support.99740/#post-627764

Alwaysbusy

or

Click here to Donation and support BANano & ABMaterial

 

[B4X] BANano v2: B4J Abstract Designer (part 2)

DOWNLOAD THE LATEST VERSION OF BANANO:

https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

Check out part 1 of this tutorial first! https://alwaysbusycorner.com/2019/01/20/b4x-banano-v2-b4j-abstract-designer-part-1/

INTRODUCTION

Now that we have our custom view created, let’s use it. As said in part 1, there are a couple of ways which I will go in to deeper now.

But first, I give you the steps on how to create a library out of part 1. This will allow us to use Sub + TAB in the B4J IDE.

CREATING A LIBRARY

This is a two step process. Make sure you have the following lines in your library AppStart code:

' start the build
#if release
       BANano.BuildAsLibrary()
#else
       BANano.Build(File.DirApp)
#end if

Now for step 1, run your library in release mode. The .js, .dependson (.php if you use it) and _Files.zip (if you have assets in the Files tab) will be created in your Additional Libraries folder. It will transpile everything in each .bas file. The Main class will be skipped.

Step 2 is just compiling the library with the B4J IDE ‘Compile To Library’

Give it the same name as you have used in the BANano.Initialize declaration. The .jar and .xml files will also be generated in your Additional Libraries folder.

So to summerize: you will now have the following files in your Additional Libraries folder:

yourlib.js
yourlib.dependsOn
yourlib.jar
yourlib.xml
yourlib.php (if you have used inline php in your library)
yourlib_Files.zip (if you had assets in your Files tab)

1. USING THE CUSTOM VIEW IN A LAYOUT
Make a new B4J UI project, and the BAnano.jar and yourlib.jar in the libraries. Also, unzip the yourlib_Files.zip file to your projects Files folder (watch out that you do not make a subfolder!).
Again let’s start with adding the default BANano project main code:

#Region Project Attributes
   #MainFormWidth: 600
   #MainFormHeight: 600
   #IgnoreWarnings: 16, 10, 14, 15
#End Region

Sub Process_Globals
   Private BANano As BANano 'ignore
End Sub

Sub AppStart (Form1 As Form, Args() As String)
   ' you can change some output params here
   BANano.Initialize("BANano", "BANanoSkeleton",12)
   BANano.HTML_NAME = "index.html"
 
   BANano.Header.Title="BANano Skeleton"
   BANano.ExternalTestConnectionServer = "http://gorgeousapps.com"
   BANano.Header.AddCSSFile("skeleton-all.min.css")
 
   ' start the build
   BANano.Build(File.DirApp)
 
   ExitApplication
End Sub

' HERE STARTS YOUR APP
Sub BANano_Ready()

End Sub

Save and open the Abstract Designer. In the Views Menu, under custom views you will find your newly created custom views:


Before we start using our views, a quick note: as currently B4J Custom views can only set their parent to main, make sure there is some space between each view to allow BANanos own algorithm to determine who is the parent. The absolute position of a view in the Designer has no relevance in BANano anyway.

Example:

So, now we add our Custom views. You will notice the Custom properties in the Properties Pane. Only the following properties can be used (the rest is ignored):

Once you are satisfied with your design, save it and generate the events you want to use:

IMPORTANT: If you plan to load this layout only ONCE at the time with BANano.LoadLayout(), you can select the view itself (e.g. Txt1 in this example) to generate the Private Txt1 As SKTextBox line. If you plan to use BANano.LoadLayoutArray(), then you can NOT use this.

This makes sense, as a single layout matches up with one single view. In case of an array of such layouts, the is no One-to-One relation. But we go into this deeper in just a second.

The code will be generated for you:

Sub Process_Globals
   Private BANano As BANano
   ...
   Private Txt1 As SKTextBox
End Sub

...

Sub Txt1_Focus (event As BANanoEvent)

End Sub

Sub Txt1_Blur (event As BANanoEvent)

End Sub

Sub Txt1_Keydown (event As BANanoEvent)

End Sub

Sub Txt1_KeyUp (event As BANanoEvent)

End Sub

Sub Txt1_Change (event As BANanoEvent)

End Sub

Sub Button1_Click (event As BANanoEvent)

End Sub

Sub SKTable1_Click (event As BANanoEvent)
 
End Sub

All you have to do now is load your newly created layout:

' HERE STARTS YOUR APP
Sub BANano_Ready()
   ...
   BANano.LoadLayout("#body", "layout1")
   ...
End Sub

This is just normal B4J stuff! :) Now you can code as you are used to.

2. ADDING CUSTOM VIEWS BY CODE
This is equally similar to normal B4J behaviour. First add a declaration of a View in globals:

Private btn As SKButton

Now initialize and add the button:

' create a dynamic button, not located in the Layout
btn.Initialize(Me, "Button2", "Button2")
btn.Text = "Dynamic Button"
btn.AddToParent("R2")

IMPORTANT NOTE: The first param in Initialize() MUST be Me. Only the class where the View is added to will be able to handle the events.



3. LOADING A LAYOUT MULTIPLE TIMES
Sometimes, you are going to want to re-use a certain layout multiple times. This can for example be because you made a layout for a list item, and now want to re-use it for each item in your list.
This can be done using the BANano.LoadLayoutArray method:

' loading layouts as array (multiple times loading the same layout)
For i = 0 To 4
       Dim Ret As Long
       Dim AllViews As Map
 
       Ret = BANano.LoadLayoutArray("#r3", "MultiLayout", (i=0)) ' only clear the parent if it is the first layout that is loaded
 
       ' ret returns a unique number you can use to get all views
       AllViews = BANano.GetAllViewsFromLayoutArray("MultiLayout", Ret)
 
       Dim mLabel As SKLabel = AllViews.Get("multilabel") ' always lowercase
       mLabel.Text = "I'm {C:#FF0000}{U}row " & (i+1) & "{/U}{/C} of a multi layout!"
 
       Dim mButton As SKButton = AllViews.Get("multibutton") ' always lowercase
       mButton.Text = "Multi Button " & Ret
Next

Nothing difficult here. The final parameter in LoadLayoutArray() can be used to clear the parent on which you are loading the layout (in this case #r3).
The method does return a ‘unique’ number. This is very useful to get all the views from your layout. We do this with the BANano.GetAllViewsFromLayoutArray() method.
The GetAllViewsFromLayoutArray() method returns a map with all the Views in it, for that layout, with instance ‘unique number’.
So you can just grab Views and start manipulating them.

NOTE: you may think you should ‘buffer’ this AllViews in a map yourself but this is not needed! In the generated Javascript, this will already be done for you so you would do it twice.

There is also a ‘helper’ method BANano.GetSuffixFromID() to know what this ‘unique’ number is, in case for example you want to make changes further in your code in a certain event.

Sub MultiButton_Click (event As BANanoEvent)
   Log(event.ID)
   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 " & Ret & " changed!"
   End If
End Sub

This concludes the 2 part tutorial of the new UI system in BAnano v2. Possibilities are endless and so much closer to standard B4J than the UI system v1.
Alwaysbusy

or

Click here to Donation and support BANano & ABMaterial