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

Mashiane · May 16, 2020

Defining Lookup Tables where there are relationships between tables.

Eg. expense categories, expense types and the expenses (upcoming)

See, https://www.b4x.com/android/forum/t...igner-mock-compile-publish.116934/post-737321

Mashiane · May 17, 2020

A constant internet connection and working offline - without service workers turned on.

If your internet connection will always be on, it is recommended that you use the CDN versions of the resources used to with the library.

To do this.

Open the core library and in Main.AppStart i.e. Main module in AppStart sub

1. Constant Internet Connection (without service workers turned on)

1.1 Uncomment these lines

B4X:

'BANano.Header.AddCSSFile("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900")
'BANano.Header.AddCSSFile("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp")
'BANano.Header.AddCSSFile("https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css")
'BANano.Header.AddCSSFile("https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css")
'BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js")
'BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js")
'BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js")

1.2 Delete the rest of the lines that are adding stuff to the header e.g. AddCSS and AddJavaScript
1.3 Remove all the resources listed in the Files tab of your b4J project
1.4 In your projects using this library, comment this line out, BP.UnzipFonts in your project.

2. Local Resources for offline usage (without service workers turned on)

1.1. Ensure the resources referenced here exists in the Files tab of your project and leave the lines above in 1.1. commented.

B4X:

BANano.Header.AddCSSFile("roboto.min.css")
BANano.Header.AddCSSFile("materialfont.min.css")
BANano.header.AddCSSFile("materialdesignicons.min.css")
BANano.Header.AddCSSFile("vuetify.min.css")
BANano.Header.AddJavascriptFile("vue.min.js")
BANano.Header.AddJavascriptFile("vuetify.min.js")
BANano.Header.AddJavascriptFile("vue-router.min.js")

Turning Service Workers On (offline usage)

Turning service workers on ensures that your resources are available and your app can work offline. At the moment this is unstable when consolidated with BVM tests. More tests are being done to debug the issue.

Ta

Mashiane · May 18, 2020

BVM Core 4.05 Now available.

Download

We have fixed some bugs and running tests for SQLite database connectivity, other backends are also being tested

Here is an example so long

Mashiane · May 18, 2020

Mock.Compile.Publish - Making your app use SQLite as a backend.

Mashiane · May 18, 2020

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

Mashiane · May 18, 2020

Mock.Compile.Publish Expense Tracker with MSSQL as BackEnd

Core 4.06 is now available with SQLite+MSSQL backend functionality implemented. MySQL coming soon!

Download BANanoVuetify 4.06

Mashiane · May 19, 2020

Mock.Compile.Publish Expense Tracker with MySQL as BackEnd

Download

Mashiane · May 20, 2020

IMPORTANT UPDATE : Core 4.06 Maintenance Update

1. The library with extensions has been split to Core + Extensions.
2. Extensions have their own Source + Demo
3. Compiled versions of the Extensions are in the External Libraries folder and source code on 2.1 Extensions
4. The Demo is the Core Demo
5. The Libraries folder is the Core Library
6. The Designer is based on the Core + BVMConnection + BVMDevice + BVMPrism
7. All examples have been updated to use the Core and Extensions where necessary
8. A Backends folder has been added, this has installation files for MSSQLE usage
9. To test of your webserver will work upload the contents of Test your WebServer

This is the list of existing extensions

Don Oso · May 21, 2020

What is the best way to debug Banano apps? what is your strategy? debug with JavaScript? Abmaterial has integrate debugger who improve the development speed...

alwaysbusy · May 21, 2020

Don Oso said:
Abmaterial has integrate debugger

ABM is server side and can use the B4J debugger because the .jar must be running to let the ABM app work. The B4JS part of ABM (comparable with what BANano does) is browser side so it can not use the B4J debugger eighter. Once the Transpiler has done its thing, B4J is no longer needed to run a BANano app. In B4JS & BANano, the browser and its Developer Tools are your best friends.

That is why the hybrid mode (BANano + BANanoServer) is much more powerful than e.g. BANano + PHP in development as it can, just like ABM, use the B4J debugger for the server side.

For BANano 5, I'm working on Live Code Swapping that should help and will be closer to how other B4X programming works, but e.g. putting a break in a method is never going to be possible as the webapp never goes through the B4J code, but through its Transpiled javascript. See for more info: https://www.b4x.com/android/forum/threads/banano-live-code-swapping-in-v5-preview.118053/

Alwaysbusy

Mashiane · May 22, 2020

Don Oso said:
What is the best way to debug Banano apps?

I kindly request that you please start a new thread next time when you want to ask a question. This thread is specifically for posting about BVM. The response from @alwaysbusy is such a crucial point and rather deserves its own thread than inside here. Please understand.

alwaysbusy said:
ABM is server side and can use the B4J debugger

Thanks @alwaysbusy, this is beautiful news for BANano 5.

Mashiane · May 22, 2020

Upcoming Updates:

1. We have redesigned the toolbox so that "My Components" are just next to the items and no longer down the toolbox. This makes good use for a longer list of components.

2. Due to case SensiTivity of javascript, we have fixed some bugs in the code generated by the designer for Data Tables. Most things are lowercase.
3. When one changes an option in the designer, e.g. turn a switch on, update text (and press tab to trap the change event), the property bag is automatically updated and the stage refreshed taking care of your changes.

Mashiane · May 22, 2020

Mock.Compile.Publish Sign In / Login Dialog

Mashiane · May 22, 2020

Mock.Compile.Publish Contact Us Page

Mashiane · May 22, 2020

Maintenance Update Core 4.07 now available for download.

Mashiane · May 27, 2020

Core Version 4.09 Now available

Updated Vuetify to 2.3.30 (released yesterday)
Fixed a few bugs here and there

Mashiane · May 28, 2020

Upcoming updates... 4.10

1. If one has a required field and "forgot" to enter the error text property, this is updated based on the provided label. See the property bag in this instance.

Activate the control from the 'My Components' list and then save the control from the property bag.

2. In the designer, required fields are automatically marked as being in an "error" state. This gives a guideline for all your required fields. See above.

3. Button actions have been increased, for example, we have added "Contact Us" and "User Credentials". Contact Us provides functionality to send an email about the contact us information entered. This expects to get the details from a map variable that will have a fullname, an email address, telephone and comment.

This in essence generates this source code for the button click event.

Explaining Record.get(?)

For each specified ?, one needs to provide the v-model /id of the textbox that you had already created on your page to get the content. As an example...

5. One has created some controls in the page and gave them names, so on the B4X generated code, you are now provided extra code to read the form contents, should you need these after .GetData. These are however external to the .GetData call as there could be a variety of controls on your page.

6. Update to Project Properties

To be able to send emails, the project details should be updated to indicate the "from", "to", "cc" (if required) email addresses. If you are using gmail, one needs to turn on a settings to use gmail from less secure apps.

If you are also using laragon to test, you can also set laragon to send emails (after turning the above setting on). Set up the mail catcher (optional) and mail sender, by specifying your email address and password and run test email. when successful, this will send an email to your gmail account.

7. Sending emails inside BANAno.

We are using this PHP script to send emails.

B4X:

#if PHP
function SendEmail($from,$to,$cc,$subject,$msg) {
    $msg = str_replace("|", "\r\n", $msg);
    $msg = str_replace("\n.", "\n..", $msg);
    // use wordwrap() if lines are longer than 70 characters
    $msg = wordwrap($msg,70,"\r\n");
    //define from header
    $headers = "From:" . $from . "\r\n";
    $headers .= "Cc: " . $cc . "\r\n";
    $headers .= "X-Mailer:pHP/" . phpversion();
    // send email
    $response = (mail($to,$subject,$msg,$headers)) ? "success" : "failure";
    $output = json_encode(array("response" => $response));
    header('content-type: application/json; charset=utf-8');
    echo($output);
}
#End If

This expects the actual www address for php and not localhost. So your settings for PHP in BANano should be like:

B4X:

BANano.PHPHost = $"http://${ActualIP}/${AppName}/"$

Where ActualIP could be www.mycompany.com and AppName is the sub domain where your BANano app will reside.

8. Password Encryption

For password components, one is able to encrypt them. This means the value that will be saved to the db will be encrypted. This is one-way encryption. This means to check a match against the db value, one needs to encrypt the value first and then compare it to the value in the database.

We have a hash type..

And the algorithm

I have attached the Change Password screen components herein. You can create a project and then import it to create your design.

9. Match to

For passwords & possibly confirm password, we have added a property to indicate the matching v-model for that component. In this instance, the confirm password should match to the new password v-model.

10. Updatable

The confirm password, should not be added to the database. So we need to turn updatable off. For anything else that should be written to the database, one needs to turn updatable on. This is for the code that is generated to change / update the code to add/update the db. We will depict it below.

For the change password screen, we want to encrypt the content before we add it to the db and do some verification. Let's look at the generated source code.

B4X:

'INSTRUCTION: Copy and paste the code below this line to the "<Your Module>" module, in case you need this!
Dim scurrentpassword As String = Record.Get("currentpassword")
'Reference the BANanoEncrypt Library...
Dim bencrypt As BANanoHashes
'Initialize the encryption
bencrypt.Initialize(scurrentpassword, Main.AppName)
'Encrypt the content
Dim scurrentpasswordhash As String = bencrypt.Hash("SHA256", "b64")
'update the content
Record.put("currentpassword", scurrentpasswordhash)
Dim snewpassword As String = Record.Get("newpassword")
'Reference the BANanoEncrypt Library...
Dim bencrypt As BANanoHashes
'Initialize the encryption
bencrypt.Initialize(snewpassword, Main.AppName)
'Encrypt the content
Dim snewpasswordhash As String = bencrypt.Hash("SHA256", "b64")
'update the content
Record.put("newpassword", snewpasswordhash)
Dim sconfirmpassword As String = Record.Get("confirmpassword")
'Reference the BANanoEncrypt Library...
Dim bencrypt As BANanoHashes
'Initialize the encryption
bencrypt.Initialize(sconfirmpassword, Main.AppName)
'Encrypt the content
Dim sconfirmpasswordhash As String = bencrypt.Hash("SHA256", "b64")
'update the content
Record.put("confirmpassword", sconfirmpasswordhash)
'Check match
snewpassword = Record.Get("newpassword")
sconfirmpassword = Record.Get("confirmpassword")
If snewpassword <> sconfirmpassword Then
vm.ShowSnackBarError("The passwords do not match!")
Return
End If
'Should not be updated...
Record.Remove("confirmpassword")

alwaysbusy · May 28, 2020

Note that you can use BANano.SendEmail() if you want to send a secure email from pure javascript without needing a php server. It uses the free https://www.smtpjs.com/ service.

Mashiane · May 28, 2020

alwaysbusy said:
send a secure email

Thanks, you know I have tried to get this working for myself and never got it to work at all. I never received the emails I tried to send. Can you please write a tut on how to successfully make this work? Ta!

Mashiane · May 28, 2020

Upcoming Updates 4.10

Things for Date Added, Date Updated...

At times you need to add text fields that will keep track of times and dates without using the time and date picker. We have 3 variants for this. 1. Date Now, 2. Time Now and 3. Date Time Now. These return yyyy-mm-dd and HH:mm and yyyy-mm-dd HH:mm respectively.

For this in each text field, you activate the needed option in the property bag.

Date.Now

B4X:

Dim txtdatenow As VMTextField = vm.NewTextField(Me, false, "txtdatenow", "datenow", "Date Now", "", true, "mdi-account", 0, "", "The date now is required!", 0)
txtdatenow.SetFieldType("string")
txtdatenow.SetVisible(true)
vm.Container.AddControl(txtdatenow.textfield, txtdatenow.tostring, 1, 1, 0, 0, 0, 0, 12, 12, 12, 12)

Updating the record to date now.

B4X:

Dim sdatenow As String = Record.Get("datenow")
sdatenow = vue.DateNow
Record.put("datenow", sdatenow)

Time.Now

B4X:

Dim txttimenow As VMTextField = vm.NewTextField(Me, false, "txttimenow", "timenow", "Time Now", "", true, "mdi-account", 0, "", "The time now is required!", 0)
txttimenow.SetFieldType("string")
txttimenow.SetVisible(true)
vm.Container.AddControl(txttimenow.textfield, txttimenow.tostring, 2, 1, 0, 0, 0, 0, 12, 12, 12, 12)

Updating the record to time now.

B4X:

Dim stimenow As String = Record.Get("timenow")
stimenow = vue.TimeNow
Record.put("timenow", stimenow)

DateTime.Now

B4X:

Dim txtdatetimenow As VMTextField = vm.NewTextField(Me, false, "txtdatetimenow", "datetimenow", "Date Time Now", "", true, "mdi-account", 0, "", "The date time now is required!", 0)
txtdatetimenow.SetFieldType("string")
txtdatetimenow.SetVisible(true)
vm.Container.AddControl(txtdatetimenow.textfield, txtdatetimenow.tostring, 3, 1, 0, 0, 0, 0, 12, 12, 12, 12)

Update the record date.time now

B4X:

Dim sdatetimenow As String = Record.Get("datetimenow")
sdatetimenow = vue.DateTimeNow
Record.put("datetimenow", sdatetimenow)

Static vs Dynamic Controls

The designer has been creating static components in some respects. This has been due to the initialization of controls, for example

B4X:

= vm.NewTextField(Me, True,

For dynamic components the True needs to be False. This activates the vue state. The designer will now generate all your components to be dynamic. This variable name is bStatic.

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Attachments