B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

Mashiane

Expert
Licensed User
Longtime User
Upcoming Changes 4.10

Validation - TextField (Email, Telephone, Number, Password, Date Picker, Time Picker, Text Area, File Inputs, Select, Combo, Auto Complete)

The validation methodology for BANanoVuetify has been updated. This is dependent on ensuring that your components are not static. ie.

From..

B4X: 
= vm.NewTextField(Me, True,

To

B4X: 
= vm.NewTextField(Me, False,

This is now default with the designer.

 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: 4.11 Extensions (These are separate libraries)

Drag n Drop File Select

This demo shows how one can drag and drop a file select on the stage. A file select is an invisible file input control that can be activated by a click of another component like a button. One can use a file select to read files without uploading them to the server. Eg. Read Text Files, Read Excel files.

 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates 4.11 Margins & Padding

At times the space between components is large. This can be decreased by setting .HideDetails and also adding margin and padding classes to the components. This in essence will make the space between components smaller, i.e. row after another.

By setting the mx (vertical) and my (horizontal) margins and px and py, one can decrease or increase these values.

For each components we have added extra property bag properties for margins and padding.



Upcoming Updates 4.11 Floats

Most components have an additional property on the property bag to adjust the float.



Setting these places the elements on the positions needed.



FavIcon Update

Its important that your app gets some proper icons etc.

This tool can help in converting a png to favicon.

Favicon & App Icon Generator

Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.
www.favicon-generator.org

You can then use the icons on your header with..

B4X: 
BANano.Header.AddFavicon("favicon-16x16.png", "16x16")
    BANano.Header.AddAppleTouchIcon("apple-touch-icon.png", "180x180")
    'BANano.Header.AddMSTileIcon("mstile-150x150.png", "144x144")
    'BANano.Header.SetMaskIcon("safari-pinned-tab.svg")
    BANano.Header.AddManifestIcon("android-chrome-192x192.png", "192x192")
    BANano.Header.AddManifestIcon("android-chrome-512x512.png", "512x512")

Thus we have updated the template1 example to include these icons.
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates 4.11 VueJS LifeCycle Hooks.

We have added functionality to trap and one be able to execute code when the vue js instance life cycle hooks run. This has been added to pgIndex.Init




The VueJS life cycle can be explained with this diagram.

For example, one could select records from a db or create a db on the Created callback.



B4X: 
'life cycle hooks
    vm.SetBeforeCreate(Me, "BeforeCreate")
    vm.SetCreated(Me, "Created")
    vm.SetBeforeMount(Me, "BeforeMount")
    vm.SetMounted(Me, "Mounted")
    vm.SetBeforeUpdate(Me, "BeforeUpdate")
    vm.SetUpdated(Me, "Updated")
    vm.SetBeforeDestroy(Me, "BeforeDestroy")
    vm.SetDestroyed(Me, "Destroyed")

Then one needs to add the call back events applicable.

B4X: 
Sub Destroyed
    Log(vm.DateTimeNow & " App Destroyed")
End Sub

Sub BeforeDestroy
    Log(vm.DateTimeNow & " App BeforeDestroy")
End Sub

Sub Updated
    Log(vm.DateTimeNow & " App Updated")
End Sub


Sub BeforeUpdate
    Log(vm.DateTimeNow & " App BeforeUpdate")
End Sub

Sub BeforeMount
    Log(vm.DateTimeNow & " App BeforeMount")
    vm.PagePause
End Sub


Sub BeforeCreate
    Log(vm.DateTimeNow & " App BeforeCreate")
End Sub

'when the #el is mounted
Sub Mounted
    Log(vm.DateTimeNow & " App Mounted!")
End Sub


'when the instance is created
Sub Created
    Log(vm.datetimenow & " App Created!")
End Sub
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
Mashiane said:
appears as soon as your page fires
Click to expand...
As I described in the other post, this is only partial true as it will first load and parse all css/javascript files before showing the loader if you do it this way. When I run your solution, the first 4 seconds (on high-speed internet, 30 seconds on fast 3G) nothing is shown. Only with the DOMContentLoaded parameter which will be introduced in BANano v5, you will be able to show a loader as soon as the html is parsed.
 

Mashiane

Expert
Licensed User
Longtime User
alwaysbusy said:
the first 4 seconds (on high-speed internet, 30 seconds on fast 3G) nothing is shown.
Click to expand...
Thanks again, we have noted this and we patiently await BANano V5, which we hope will come soon.

In other news, I made a test outside the BANanoCoreVue, with a pure BANano App, as indicated here, there was not even a delay when loading (no css or js was added on headers though)

For now the purpose of "perceived speed" is partially defeated. We smile at progress!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: 4.12

A new look of the interface. We wanted more space on the stage so we moved stuff around.



1. The property bag has been moved to a side drawer, it now sits on the left.
2. The project properties have been moved to the left



3. We have 43 components on the designer as indicated by the badge.
4. The next badge indicates the number of components on the stage.
5. We moved the avatar logo to the right.



6. From the project you can now specify database connection details. This will extract your database schema so that you can automatically generate a data-table from it. This helps with speeding development based on the data / backend first approach. For now this ONLY supports MySQL. One can just migrate their DB to MySQL and use this important part of the builder.

ToDataTable Functionality



The way this works is simple.

a) specify the database and connectivity details (MySQL ONLY)
b) connect to the database (this extracts the schema) & displays it on the treeview.
c) select the tables and fields you want to be "ToDataTable"
d) click the green gears to execute the process and see your generated datatable on the stage. You can then update the data-table properties as you need to be able to generate dialogs for data entry and other things.
e) exit the ToDataTable

7. Added a treeview to the layout components. This is a renderless component.

To activate the toolbox, you click the 3rd left button on the navbar, this will have the number of components e.g. 43.



8. My Components

The list of components that you draw on the stage is now accessible by clicking the 4th left button in the navbar. We have used a side nav for this as it has a scrollbar and one can scroll without moving the "iMac" etc. To activate a component, just select it from the list and its property bag will activate automatically.

 
Last edited:
S

swamisantosh

Member
Licensed User
Longtime User
c) select the tables and fields you want to be "ToDataTable"
d) click the green gears to execute the process and see your generated datatable on the stage. You can then update the data-table properties as you need to be able to generate dialogs for data entry and other things.

* once we click the green gear to execute the process , is it possible to add or update the fields from table to ToDataTable later on.
 
S

swamisantosh

Member
Licensed User
Longtime User
as on today we are been performing CRUD operation on Single Table, it is possible in near future to create form like Order Form were we need to save the data into multiple table for the single form. and reporting tool. it will be complete framework/package.
 

Mashiane

Expert
Licensed User
Longtime User
swamisantosh said:
once we click the green gear to execute the process , is it possible to add or update the fields from table to ToDataTable later on.
Click to expand...
This is a one way process, when the fields are available in the DataTable component, you can update them anyway you want just like in the Mock.Compile.Publish Expense Tracker videos posted on that thread.
 
Last edited:
You must log in or register to reply here.

Similar Threads

  • Article
Share My Creation [BANanoAngularJS] - How far my AngularJS with BANano curiosity has taken me...
2
Replies
22
Views
3K
Mashiane
  • Article
B4J Tutorial [BANanoVueMaterial] How to ask questions, request help, report bugs and request enhancements + Telegram Channel
Replies
0
Views
2K
Mashiane
  • Article
B4J Tutorial [BANanoVueMaterial] Exploring Components & Routers Basics
Replies
4
Views
2K
Mashiane
  • Article
B4J Tutorial [BANanoVueMaterial] BVMDesigner - Mock.Compile.Publish
2
Replies
29
Views
9K
Mashiane
  • Article
B4J Tutorial [BANanoVue] - Building WebApps/Websites with VueJS
Replies
5
Views
4K
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…