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

Mashiane · May 28, 2020

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 · May 28, 2020

Core 4.10 now available...

Mashiane · May 29, 2020

Upcoming Updates: 4.11 Extensions (These are separate libraries)

Drag n Drop Infobox

Mashiane · May 29, 2020

Upcoming Updates: 4.11 Extensions (These are separate libraries)

Drag n Drop Quill Editor

Mashiane · May 29, 2020

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 · May 29, 2020

Upcoming Updates: 4.11

The logo and title are clickable and these fire logo_click and title_click events. These might be useful when you want to go to the home page!

Mashiane · May 30, 2020

Mock.Compile.Publish Change Password Dialog Part 1

Mashiane · May 30, 2020

Upcoming Updates 4.11 PDFObject to view PDF files

Been looking for something that is not based on JQuery. This is cool.. https://pdfobject.com

Mashiane · Jun 1, 2020

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.

swamisantosh · Jun 1, 2020

it was needed - it was been demanded long back.

Mashiane · Jun 1, 2020

Upcoming Updates 4.11 - Setting Font Family and Font Sizes

Mashiane · Jun 1, 2020

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

Mashiane · Jun 2, 2020

Upcoming Updates 4.11, Preloader

We have been able to implement a full loader that appears as soon as your page fires. This is before everything on the page shows.

To show a loader during app execution, one can use vm.PagePause and vm.PageResume.

Ta!

Mashiane · Jun 2, 2020

Core 4.11 Release Now Available.

It's with pleasure to make available Core 4.11 with a pre-loader.

alwaysbusy · Jun 2, 2020

Mashiane said:
appears as soon as your page fires

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 · Jun 2, 2020

alwaysbusy said:
the first 4 seconds (on high-speed internet, 30 seconds on fast 3G) nothing is shown.

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!

Mashiane · Jun 4, 2020

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.

swamisantosh · Jun 4, 2020

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.

swamisantosh · Jun 4, 2020

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 · Jun 4, 2020

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.

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.

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Member

Member

Expert

Similar Threads