B4J Tutorial [BANanoVueMaterial] BVMDesigner - Mock.Compile.Publish

*START OF NOTICE

As of 02 FEB 2021, this project is is no longer maintained as it has given birth to BVAD3.

This project was a joy to create, however like everything that has a start and an end, its time to move on and evolve. BVAD3 is faster, more simpler to implement and takes advantage of the Abstract Designer use.

Subscribe to Telegram Channel

[BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies

Ahoy!!!

*END OF NOTICE

Ola

You can subscribe to Telegram Channel here

UPDATE 24 October 2020: The recommended methodology to create BANanoVuetify WebApp is being discussed here: MealPrep. This covers most of what VueJS + Vuetify is all about in terms of the internals.

Whilst you can use the designer to create your UX, you need to separate your concerns when creating the app just like its done on the MealPrep by using components and routers for the pages.

DO NOT FOLLOW THE APPROACH USED IN CREATING THE BANANOVUEMATERIALDEMO WHEN CREATING YOUR APPS. THAT METHOD IS NO LONGER FEASIBLE.

NB: Set your browser to 80%

Newsflash!!!

Download BANanoVueMaterial 3.08+
Download BVMDesigner eBook (draf)

This thread is specifically about using the BANanoVueMaterial Designer 3.

I'm working on an eBook about using the designer. So far it is a draft, however if you are interested to check it so long, here is it. Feedback will be welcomed and also stuff you would like to see in it.

I do greatly recommend that you go through the videos posted in the first post here as they will brief you about how the designer works, this also helps you as you go through the eBook.

The designer helps one to 1. Mock an app then 2. Compile the app in B4J (after copying the generated source code) and then you can 3. Publish your app on the interweb.

Some facts about BANanoVueMaterial.

BVM (BANanoVueMaterial) is based on Vuetify, wrapping Vuetify for BANano. Vuetify is based on VueJS. Try and explore VueJs and Vuetify from their respective sites. I will make a silly assumption that you are prepared to also do some ground work but will do my best to make this easy peasy.

The Designer is meant for you to mock your app by dragging and dropping components on a stage, change the properties of that component in the property bag, this generates the needed B4X source code and also the HTML source code. The HTML source code is usable if you want to write your app via the Vue CLI, whilst the B4X code you can only use it in a B4J Project.

We will gradually work from one example app here with the designer and we will create some database based webapps here.

Welcome to the world of the BANanoVueMaterial Designer!!

Ta

 

[Mashiane]

Mock.Compile.Publish Contacts

Download Transcript

In this tutorial we will mock a contacts data entry screen. This is a beginner tutorial just to get us on the ropes about using the designer. We mock the app with the designer, copy the generated source code to our B4J project and then run it.

You can watch this video how we created the data entry screen below and then compiled the source code to be a webapp.



Below is the output that should exist after you finishing working yourself through the transcript.

2010-04-30 Update (Download BVM 3.08+)
The details of this form have been updated:

• We moved some controls to different locations.
• We ran .SetHideDetails(True) on the controls - this decreases the space between the controls
• We set up some default values for the components
• We added some events
• We added prepend icons for the controls.
• We added functionality to set the field types. Field types are string, int, dbl (float), date, bool (boolean)

The updates source code is available here:

First Name - set a default value and assure that this will be returned as a string

txtfirstname.SetValue("Anele")
txtfirstname.SetFieldType("string")

Last Name - set the default value and assure that this will be returned as a string

txtlastname.SetValue("Mbanga")
txtlastname.SetFieldType("string")

Telephone - set default value and assure that this will returned as a string

telmobilenumber.SetValue("0833333456")
telmobilenumber.SetFieldType("string")

Date of Birth - we set the default value, set the return type and add a change event

dpdateofbirth.SetFieldType("string")
dpdateofbirth.SetValue("1973-04-15")
dpdateofbirth.SetOnChange(Me, "dpdateofbirth_change")

The date is set here to be a particular date. If you want to set the date to show today's date, execute this call:

dpdateofbirth.SetIsNow(True)

We add the event to trap when a date is changed

Private Sub dpdateofbirth_change(value As Object)
    vm.ShowSnackBar(value)
End Sub

City - we set the default value to c1 and return type and also add a change event

selcity.SetValue("c1")
selcity.SetOnChange(Me, "selcity_change")

The callback is defined like this...

Private Sub selcity_change(value As Object)
    vm.ShowSnackBar(value)
End Sub

Gender - we set the return type (String - we want to return Yes/No). To return a boolean, set the return type to bool. We also add a change event for demonstration.

rdgender.SetFieldType("string")
rdgender.SetOnChange(Me, "rdgender_change")


Private Sub rdgender_change(value As Object)
    vm.ShowSnackBar(value)
End Sub

Get Notifications - set the return type, set the default value and event

swtnotifications.SetFieldType("string")
swtnotifications.SetValue("Yes")
swtnotifications.SetOnChange(Me, "swtnotifications_change")

The callback to trap the switch change is:

Private Sub swtnotifications_change(value As Object)
    vm.ShowSnackBar(value)
End Sub

Save button - we want to return the record as a map and process it further

Private Sub btnSaveRecord_click(e As BANanoEvent)
    'get the record to create/update
    Dim Record As Map = vm.Container.GetData
    Log(Record)
    'validate the record
    Dim bValid As Boolean = vm.Validate(Record, vm.Container.Required)
    'if invalid exit create/update
    If bValid = False Then Return
    'add code to save the record!
End Sub

The record returned here is a map record that is based on the keys of the map being the "vmodels" and the entered values:

 

[Marc Van Cauwenberghe]

Excellent. Looking forward to it.

 

[joulongleu]

+1

 

[Johan Hormaza]

Hello
How can I place a container in a parallax?

 

[Mashiane]

Hello
How can I place a container in a parallax?

please start a new thread for your question and prefix it with [BananoVueMaterial]

 

[Mashiane]

Creating Toolbars: You will need BVM 3.85 for this

Download

This B4J project for this is 11. MyYouTube


Reproduction

1. You can reproduce this by importing the myyoutube.txt file here in your designer or
2. Follow the attached transcript or
3. Just open and run the project on the 11. MyYoutube folder

NB: Transcript & imports inside the example folder and see the post below how this can be created and compiled into a skeleton app.

 

[Mashiane]

Mock.Compile.Publish - Toolbar & Drawer


In this example, we create 2 projects, one for the toolbar and the other for the drawer. For each project we save the stage details and when we want to generate the source code we extract the contents of the project.

The toolbar has a search bar and also an add button. The drawer does not have any items and will source its items from a data source.

We then create a new B4J Project from 5. Template1 and then follow the instructions and paste the code at particular sections.

After finalizing copying and pasting the code, we compile to publish our app.

This example takes from the previous post but is detailed to show how to then move from the designer to the B4J project with the source code and compile the skeleton app.

Ta!

 

[Mashiane]

IMPORTANT UPDATE: BVM 4.00 about the Core, Designer and Extensions

Download

The BVMDesigner is now using the BANanoVuetifyCore Library and Extensions. The compiled versions of these extensions are in the 1. External Libraries folder, and the source code for them are available in the 0. Core Folder.

NB: Use the core library for your projects as it does not have the extensions. These will all be available as separate libraries soon.

B..Connect - Database Connectivity (BANanoSQL, SQLite, MySQL and MSSQL). PHP specific classes
B..Device - device component for designer
B..Prism - code view for designer.

View attachment 93875

 

[Mashiane]

Mock.Compile.Publish - Expense Tracker - Part 1

Download

NB: You can download and import the component files for each of the project. Get them here.

This demo shows the first part in creating an expense tracker. Here we create a toolbar and and set up some drawer properties for our WebApp. Next we will create the respective pages for the web app and link them to the complete app. This will just be a simple app to show CRUD with BANanoSQL (indexeddb) as a backend

 

[Mashiane]

Mock.Compile.Publish - Expense Tracker - Part 2

Download

In this part of the tutorial we extend our example and create the "Expense Types". This in essence creates the indexeddb for us using BANanoSQL, the "expensetypes" table with 2 fields, typeid and typename. In the same process we create a modal for data entry so that we are able to add new expense types, update existing expense types and also delete expense types.

We are also able to view our existing expense types in a data table that has pagination. BANanoVuetify -

The purpose of this is to design our UI and then in the last part for Expense Types, we will show how to create a B4J Application, copy and paste the source code and then have an expense type data entry screen.

Ta!

 

[Mashiane]

Mock.Compile.Publish - Expense Tracker Part 3

Download

Part 3 In this part of the tutorial we continue where we left off and start copying and pasting the designer source code to a B4J project and then execute it to make the app come to life.

We will continue to add 2 additional tables here, 1. Expense Categories and then 2. Expenses to complete the project.

 

[Mashiane]

Mock.Compile.Publish - Expense Tracker Part 4

Download

In this part of the tutorial we are looking at adding expense categories to our expense tracker. We create the page and then add it to existing pages. The final version of this would be to add the expenses page linking all 3 files together into one.


Enjoy!

 

[Mashiane]

We updated a few things...

1. Added .AutoFocus (this applies to date / time picker, selects and text fields). This ensures that the focus is on the input control you want.
2. We outlined the input controls
3. We fixed a few bugs
4. We ensured that on deletion you are prompted with the "name" and not the "id" of what you want to delete.

Final part 5 of this tutorial coming soon. We will then port the example to SQLite, MySQL and MSSQL.

You need Core 4.03 for the update...

Download

 

[Mashiane]

Preparing for Part 5 of Mock.Compile.Publish - Expense Tracker App

One of the crucial things we have added to the designer is the table "look up" functionality. This is useful when you have related tables. For example in our app here, the expense categories and expense types have a relationship with the expenses table where we will capture our expenses.

To tell the designer that we will use the information from these tables as lookups, we need to turn this option on. This is available in Core 4.03.

To do this, one needs to select the data-table control and then set some options.

For expense types, activate the table and then update it accordingly as per property bag.

For expense categories, also update the property bag accordingly. Select the table first and then update the property bag.

Watch this...

 

[Mashiane]

Mock.Compile.Publish Designer Expenses - Part 5.1

Download

In this part of the expenses tracker example created with the designer, we create the expenses table. This is where we will capture our expenses. Each expense will be linked to a category and a type. We do this by defining 2 fields in the expenses table expcatid and exptypeid which we establish a relationship with the expense categories and expense types table. By doing that the designer recognises that there is a relationship between the 3 files and creates a command query that will ensure that such information is displayed when the expenses are listed on the expenses table. On the table definition itself we add columns and are able to indicate which columns should show ("On Table") or not and also define which columns should be shown or hidden in our dialog ("Visible") In part 5.2 we will copy the generated source code by the designer and update and run our expenses table. We will then conclude this tutorial.

 

[Mashiane]

Mock.Compile.Publish Designer Expenses - Part 5.2

Download

In this part of the tutorial we are finalizing the expenses tracker. We change the 2 fields for categories and types to be "selects", combo boxes allow data entry and we dont want that. We also want to add functionality to duplicate records with cloning. For now this covers what we planned to achieve.



Ta

 

[Mashiane]

Mock.Compile.Publish - SQLite Apps

To make an app that uses SQLite as a backend, one needs to select the SQLite database option on the project. The source code has been made to be as compatible as possible and because we are using PHP, a few things needs to be activated.

With laragon, click Menu > PHP > Extensions > sqlite3 (should be checked)

Here is the Expense Categories as per tutorial above that uses SQLite as a backend.

Creating a similar application as the expense tracker follows the same process as above except that the database is changed to SQLite. Thats all that needs to be done.

Ta!

 

[Mashiane]

Mock.Compile.Publish Expense Tracker with SQLite as BackEnd Full Implementation

Download

This shows the full demo of the SQLite Expenses - this is just an extension of the Expense Tracker we have been creating, but now by just turning on the option to compile for SQLite, the structure of the source code is changed to suit SQLite.

Recommended implementation

1. Create your SQLite database externally from B4J
2. Attach the file via the Files tab of your project.

 

[Mashiane]

Mock.Compile.Publish Expense Tracker with MSSQL as BackEnd

Download BANanoVuetify 4.06

Example 17 Implements this.

Recommended implementation

1. Create your MSSQL database externally from B4J
2. Update the config.php file (Files Tab in B4J) with connection settings to your MSSQL backend.

This is the MSSQL implementation of the Expense Tracker tutorial. We are using laragon as a webserver so one needs to install the PDO drivers for MSSQL. These are obtainable from here, https://www.microsoft.com/en-us/download/details.aspx?id=20098

Once installed, extract these and copy them to the C:\laragon\bin\php\php-7.2.19-Win32-VC15-x64\ext folder (this depends on your PHP installation)

In laragon, activate the PHP Extensions for the php installations that is made. e.g. 72_nts and 72_ts.

On the designer we activated the MSSQL backend for the project and regenerated the source code.


Database Tables Creation Scripts

CREATE TABLE [dbo].[expensecategories] (
    [catid] int NOT NULL IDENTITY(1,1) PRIMARY KEY CLUSTERED, 
    [catname] varchar(255) COLLATE SQL_Latin1_General_CP1_CI_AS
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[expenses] (
    [expid] int NOT NULL IDENTITY(1,1) PRIMARY KEY CLUSTERED, 
    [expdate] varchar(255) COLLATE SQL_Latin1_General_CP1_CI_AS, 
    [expcatid] int, 
    [exptypeid] int, 
    [expamount] float, 
    [expdesc] varchar(255) COLLATE SQL_Latin1_General_CP1_CI_AS
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[expensetypes] (
    [typeid] int NOT NULL IDENTITY(1,1) PRIMARY KEY CLUSTERED, 
    [typename] varchar(255) COLLATE SQL_Latin1_General_CP1_CI_AS
) ON [PRIMARY]