I've spent the past 6 months looking into browser-based app development vs platform specific clients such as Android, iOS, Windows, etc. I've looked at MS Blazor, Dapper, VueJS, B4X, and many others. I re-implemented an application I created over 5 years ago that used Xamarin C# with VueJS, as a means of learning it. Wow, what a journey. Then a couple of weeks ago I began an effort to learn and utilize B4X BANano with and without BVAD (BANano, Vuetify, Abstract Designer). I was able to do the 'without BVAD' proof of concept in a week (took two months with VueJS). I'm in the midst of the 'with BVAD' version as I type. Since BANano is centered around B4J and Abstract Designer (based on B4X Visual Designer) it was easy to transition. So, I'll share some of what I've learned.
VueJS is very popular, large community, many add-ons. It abstracts HTML/CSS, but is still HTML centric using what is referred to as a Template.
The events of interest are buried in the HTML (see above) e.g. @keypress, @blur and invoke Methods implements in JavaScript (validateNumber, onBlur). Some of what you see, such as v-model and v-for, are incorporated into BANano BVAD since it incorporates Vue/Vuetify. Anyway, I got a working prototype, but don't really like the development environment that is HTML-centric. Which brings me to BANano.
BANano is B4X-centric in that you code in B4J and create a layout using Abstract Designer. When you hit F5 it transpiles B4X code into Java as normally is done and then transpiles the Java, B4XLIBS and Layouts into JavaScript, then writes the results in a directory under a web server (I use Largon) and you can then point a browser at the web server directory and your B4X app is loaded into the browser and runs without a server! In addition, you can create a PWA (Progressive Web App) that can be distributed and runs without a web server!
Being B4X-centric, you can right-click on a UI element in the Designer and have it create a variable for the UI widget and create events of interest e.g. blur (lost focus). VueJS is much more abstract as you have to create a Reactive variable and reference it within the HTML (e.g. inputWeight) using v-model and ref as well as @eventName to call methods (see code above). VueJS is based on SFA (single file application) so everything is in a .vue text file, including the form definition. I really prefer the Designer/Layout being separate from the B4X code. MS is similar in that your UI is in a separate text file e.g. .axml or .xaml.
Anyway, if there's interest I'll post more regarding my VueJS and BAnano app. I used common event handler for all of the TextBox on the form that enforces edit such as Numeric, Range, Required, Min characters, Maximum characters, etc.
This Map is used whenever the user navigates away from an input field (blur)
CheckFieldEdits loops through the edits and write to the input field Label any failed edits. Notice the edits that failed using the AddTextInfo noted above.
Anyone interested interested in starting a dialogue regarding B4X and BANano?
VueJS is very popular, large community, many add-ons. It abstracts HTML/CSS, but is still HTML centric using what is referred to as a Template.
Example of one Label and Input in a VueJS Template:
<!-- weight -->
<b><label class=aLabel ref="lblWeight" :for="inputWeight" @click="checkData">{{lblWeight}} </label></b>
<input type="text" ref="inputWeight" v-model="inputWeight"
@keypress="validateNumber" :maxlength="5" placeholder=9(5) style="width: 50px;"
@blur="onBlur('Weight', 'inputWeight')"/>
<br>The events of interest are buried in the HTML (see above) e.g. @keypress, @blur and invoke Methods implements in JavaScript (validateNumber, onBlur). Some of what you see, such as v-model and v-for, are incorporated into BANano BVAD since it incorporates Vue/Vuetify. Anyway, I got a working prototype, but don't really like the development environment that is HTML-centric. Which brings me to BANano.
BANano is B4X-centric in that you code in B4J and create a layout using Abstract Designer. When you hit F5 it transpiles B4X code into Java as normally is done and then transpiles the Java, B4XLIBS and Layouts into JavaScript, then writes the results in a directory under a web server (I use Largon) and you can then point a browser at the web server directory and your B4X app is loaded into the browser and runs without a server! In addition, you can create a PWA (Progressive Web App) that can be distributed and runs without a web server!
Being B4X-centric, you can right-click on a UI element in the Designer and have it create a variable for the UI widget and create events of interest e.g. blur (lost focus). VueJS is much more abstract as you have to create a Reactive variable and reference it within the HTML (e.g. inputWeight) using v-model and ref as well as @eventName to call methods (see code above). VueJS is based on SFA (single file application) so everything is in a .vue text file, including the form definition. I really prefer the Designer/Layout being separate from the B4X code. MS is similar in that your UI is in a separate text file e.g. .axml or .xaml.
Anyway, if there's interest I'll post more regarding my VueJS and BAnano app. I used common event handler for all of the TextBox on the form that enforces edit such as Numeric, Range, Required, Min characters, Maximum characters, etc.
Example of input field edit for BANano app:
AddTextInfo("txtWeight", "Weight", "lblWeight", 5, "INT:REQ:RANGE1000", "6000") ' 6000 for testing
AddTextInfo("txtSlope", "Slope", "lblSlope", 2, "INT:RANGE00-45", "0")
AddTextInfo("txtWheels", "Wheels", "lblWheels", 2, "INT:RANGE04-18", "4") ' 4-18 didn't work
AddTextInfo("txtDamaged", "Damaged", "lblDamaged", 2, "INT:RANGE00-18", "0") ' 0-18 didn't work
AddTextInfo("cmbStuck", "Stuck", "lblStuck", 0, "PICK", "0")
AddTextInfo("cmbConditions", "Conditions", "lblConditions", 0, "PICK", "-1")
AddTextInfo("txtCapacity", "Capacity", "lblCapacity", 5, "INT:MIN4:NOERR:RANGE1000", "9000") ' 9000 for testingThis Map is used whenever the user navigates away from an input field (blur)
Example of field edit check:
Private Sub CheckFieldEdits (fieldName As String, testOnly As Boolean) As String
Dim fldInfo As textBoxInfo
fldInfo = fieldObjectsMap.Get(fieldName.ToLowerCase)
...CheckFieldEdits loops through the edits and write to the input field Label any failed edits. Notice the edits that failed using the AddTextInfo noted above.
Anyone interested interested in starting a dialogue regarding B4X and BANano?
Last edited:
) His chosen path with all the B4X tools had proven to be successful in many projects we had done before and is easy to learn, so why not follow it?
