Welcome to BANanoVuetifyAD3.
BANanoVuetifyAD3 is a framework to create WebApps and Websites. It is powered by B4X + Vuetify + BANano. B4X is a Rapid Application Development toolset to create Android, iOS and Desktop Applications, whilst Vuetify is the world’s most popular Vue.js framework for building feature rich, blazing fast applications. BANano is the glue that binds B4X and Vuetify so that one is able to create their WebApp / WebSites using Vuetify CDN approach. BANano transpiles your B4X code (vb like syntax) into pure HTML/JavaScript/CSS.
Actually you don't have to know any JavaScript to start developing BANanoVuetifyAD3 WebApps/Websites.
You can watch this video to take you through the installation process:
- In your Windows PC, create a folder on your C drive, named B4J
- Create 3 sub-folders inside this B4J folder named libraries, shared and workspace.
- Download and install B4J 64 Bit
- Download and install OpenJDK + OpenJFK 64 Bit and unzip these to C:\Java
- Get BANano. Please note that this content is governed by the BANano License, accessible here.
- Copy the contents of the BANano Library folder to your C:\b4j\libraries Folder
- It is recommended to download and install GitHub Desktop and then clone this repo
- Download and copy the contents of this folder to C:\b4j\libraries folder
- Download and unzip the contents of this folder to your C:\b4j\workspace folder.
- (Optional) Download and unzip the Kitchen Sink Demo WebApp to your C:\b4j\workspace folder.
- (Optional) Download and unzip the BANanoServer Kitchen Sink Demo WebApp to your C:\b4j\workspace folder.
- BANanoVuetifyAD3 projects are developed using the Laragon Development Web Server, however you can use any webserver of your choice.
We need to configure Paths on the B4J IDE.
- On the B4J IDE, click Tools
- Click Configure Paths, browse to the location of javac.exe and ensure its set, usually its C:\Program Files\Java\jdk1.8.0_281\bin\javac.exe
- Click and browse to the location of your additional libraries, this would be C:\b4j\libraries (if you just set it up)
- Click and browse to the location of your shared modules, this would be C:\bj4\shared (if you just set it up)
- Close the IDE.
The Optional items below are to check if your installation was done successfully. It is recommended that you have a development webserver running. If you don't have one, please see the section below for using LAMP Laragon.
You can read this Medium Article about this for more clarity.
- Open the B4J IDE
- Click File > New > BVAD3 Blank. You can also opt for the 3 Pages example by clicking BVAD3 on the menu.
- Type in the name of your project (usually without spaces)
- Click OK, this creates a new BVAD3 project for you.
- (Optional) Click Windows > Reset
- (Optional) On the bottom right of the IDE, find the Libraries Manager and click on it
- (Optional) In the listed libraries, confirm that you have BANano, BANanoVuetifyAD3, BVAD3Classes checked
- This project template is configured so that your compiled project is published on the Laragon Development WebServer Path. This is in the Main module and is defined as Private Publish As String = "C:\laragon\www"
- You can change this path to suit your needs.
- Press F5 to run the project, your web browser should open up
- You can also change the WebServer Address. This has been specified as https:\localhost on the config.propeties file. You can find this file on the Files tab of the B4J IDE.
This tutorial discusses how to use the BVAD3Builder to optimize your webapp before or after development. Catch it here
If when running your example above you encounter the error as per subject, please follow the steps below titled 'Compiling the BANanoVuetifyAD3.b4xlib' on your PC.
If you are fairly new to web development, this development server will come very handy for you as its easy to set up and has been my preferred option.
- After you download and install the webserver, you can configure it to run on any port, as depicted here. The setup here is on ports 80 and 443 (SSL). By default, web servers run on port 80. I have also activated SSL, for example to use the camera, geo location, firebase messaging etc, SSL should be activated.
- If you change the default port to be another value, e.g. 8080, you also need to update the ServerIP variable in the config.properties file, to be your new port number, for example to be ServerIP=http://localhost:8080
- If you have not activated SSL on laragon, also update the ServerIP to be http and not https.
You can also compile the BANanoVuetifyAD3.b4xlib from the source.
From your C:\b4j\workspace folder locate and open the BANanoVuetifyAD3.b4j project.
Double click to open it and then press F5 to run the B4J Project. DO NOT COMPILE TO LIBRARY. This will compile the b4xlib and automatically put it under the C:\b4j\libraries folder.
A demo containing all the Vuetify components and some extras named 'The New Awesome Kitchen Sink' is available online.
You can also download this kitchen sink and run it on your PC. Please note that all the WebApps showcases here are configured to be published on the Laragon Development Server, however you can publish them on any web server by changing the source code.
To change the publish path, open the B4J project and in the Main Module change the path specified on the "Publish" string variable to suit your needs.
Also the webserver path, has been specified as https:\localhost on the config.propeties file (in the Files folder of your project). You can change this to suit your development setup.
As a beginner, you can watch this introductory video to begin your journey.
We have started a new series on teaching BANanoVuetifyAD3. You can check it out here.
Have Fun!
PS: Written with https://stackedit.io