Ola
Creating this demo app has has been done in 2 phases. The first phase has been to develop the components to use with the app into a BANano based library and secondly to build the resulting CRUD app using those components.
The elements / components are HTML based elements (built as class modules), one can also define and create these as custom view components to use with the abstract designer. Creating components to use with the abstract designer is rather far more superior and more welcoming (i have found). This is due to the fact that you can link your events, methods and designer properties when you are creating a custom components, drop these in your abstract designer and generate members as you do with b4a, b4j and b4i.
The UOENow BANano based lib is done following a coding methodology of doing things as it does not have an abstract designer based part yet. Due to the ease of using abstract designer based components, at some stage I will add such to the lib, either way the MO for CRUD functionality will be the same, i.e. the code that knits the UX and controller code.
I fired up UOEProcess.Show to try and explain what we are trying to achieve.
At the heart of a BANano app is the UX part and the coding part just like any other app one develops. The UX part you can create yourself or use BANanoSkeleton that comes with BANano or KendoUI etc. My UX part is UOENow, a Bootstrap based framework from Creative Tim. The free stuff from CT was what was the base for UOENow eventually, and we had to procure their professional suite for additional components and more designs.
When creating a BANano app, one has to initialize the BANano library in AppStart, then add the CSS and JS files their app is using. After that comes the BANano.Build process. One can build their project as a library or an as app. When built as a library, the resulting code can be used in other BANano based libraries.
During the initialization process, an event is fired depending on the event name specified, in most cases this is just BANano and this calls BANano_Ready. All the code written in b4j will be then converted into JavaScript by BANano for your app, which then can be published to a website or you run local.
Before we publish we run the BANanoPostProcessor. As the source code for this is also available, we added functionality to also compress the css files using clean-css. The post processor needs Node.JS to run, so we have that installed as per thread in the BP.
Our UOENow library uses a combination of CSS and JS files, as a result, before the BANano.Build process, we tag the CSS and JS resources that we actually need for each app and after the BP ensure that any other un-needed resources are removed from our Apps.
For CSS and JS files though, it is recommended by BANano that one uses the available CDNs for better performance of their apps as it reports when one uses more CSS and JS files than necessary.
One of the CONS for using UOENow is that whilst we are able to merge and compress the CSS files into 1, which is absolutely great by using the BP, we can only compress the JS files and cannot merge these into a single file as it breaks the code. We are still investigating and looking for alternatives.
The demo app we will talk about is a wine register that uses a grid, page elements and then a modal sheet for editing and updating records.
We use BANanoSQL as a backend for this SPA. We will look into the process of creating the database, creating the table, building SQL commands for CRUD and then take a look at the UX elements.
It should be noted that because one can build their own UX for BANano, discussing the UX for us is not so crucial but rather the logic of the code. There are very good HTML5 components that one can find and build stuff, for example we found the Bootstrap Table very impressive for our exercise and build a component for ourselves. Its PRO was the ability to export to PDF, Excel, JSON, CSV etc.
Let's dive in...
Please note, the source code included here is for learning purposes. Due to license restrictions of CT Now UI Kit Pro, I have limited the attachment to just be B4J project with source code. I have included the code for the post processor thats adjusted to meet our needs.
The BP needs NodeJS to be installed. For other tools, run..
and
Related Thread:
CRU-ding around with BANanoSQLUtils
Creating this demo app has has been done in 2 phases. The first phase has been to develop the components to use with the app into a BANano based library and secondly to build the resulting CRUD app using those components.
The elements / components are HTML based elements (built as class modules), one can also define and create these as custom view components to use with the abstract designer. Creating components to use with the abstract designer is rather far more superior and more welcoming (i have found). This is due to the fact that you can link your events, methods and designer properties when you are creating a custom components, drop these in your abstract designer and generate members as you do with b4a, b4j and b4i.
The UOENow BANano based lib is done following a coding methodology of doing things as it does not have an abstract designer based part yet. Due to the ease of using abstract designer based components, at some stage I will add such to the lib, either way the MO for CRUD functionality will be the same, i.e. the code that knits the UX and controller code.
I fired up UOEProcess.Show to try and explain what we are trying to achieve.
At the heart of a BANano app is the UX part and the coding part just like any other app one develops. The UX part you can create yourself or use BANanoSkeleton that comes with BANano or KendoUI etc. My UX part is UOENow, a Bootstrap based framework from Creative Tim. The free stuff from CT was what was the base for UOENow eventually, and we had to procure their professional suite for additional components and more designs.
When creating a BANano app, one has to initialize the BANano library in AppStart, then add the CSS and JS files their app is using. After that comes the BANano.Build process. One can build their project as a library or an as app. When built as a library, the resulting code can be used in other BANano based libraries.
During the initialization process, an event is fired depending on the event name specified, in most cases this is just BANano and this calls BANano_Ready. All the code written in b4j will be then converted into JavaScript by BANano for your app, which then can be published to a website or you run local.
Before we publish we run the BANanoPostProcessor. As the source code for this is also available, we added functionality to also compress the css files using clean-css. The post processor needs Node.JS to run, so we have that installed as per thread in the BP.
Our UOENow library uses a combination of CSS and JS files, as a result, before the BANano.Build process, we tag the CSS and JS resources that we actually need for each app and after the BP ensure that any other un-needed resources are removed from our Apps.
For CSS and JS files though, it is recommended by BANano that one uses the available CDNs for better performance of their apps as it reports when one uses more CSS and JS files than necessary.
One of the CONS for using UOENow is that whilst we are able to merge and compress the CSS files into 1, which is absolutely great by using the BP, we can only compress the JS files and cannot merge these into a single file as it breaks the code. We are still investigating and looking for alternatives.
The demo app we will talk about is a wine register that uses a grid, page elements and then a modal sheet for editing and updating records.
We use BANanoSQL as a backend for this SPA. We will look into the process of creating the database, creating the table, building SQL commands for CRUD and then take a look at the UX elements.
It should be noted that because one can build their own UX for BANano, discussing the UX for us is not so crucial but rather the logic of the code. There are very good HTML5 components that one can find and build stuff, for example we found the Bootstrap Table very impressive for our exercise and build a component for ourselves. Its PRO was the ability to export to PDF, Excel, JSON, CSV etc.
Let's dive in...
Please note, the source code included here is for learning purposes. Due to license restrictions of CT Now UI Kit Pro, I have limited the attachment to just be B4J project with source code. I have included the code for the post processor thats adjusted to meet our needs.
The BP needs NodeJS to be installed. For other tools, run..
B4X:
npm install clean-css-cli -g
B4X:
npm install terser -g
Related Thread:
CRU-ding around with BANanoSQLUtils
Attachments
Last edited: