[BANanoVuetifyAD3] Early Stages of the Kanban Board Creation Process

Mashiane

Expert
Licensed User
Longtime User
Ola

Explore online in the Kitchen Sink

This has been one of my wishes to make come through for BVAD3. Thing is I wanted to create this from scratch and not take something that exists, mostly because I want to learn how it works.

So managed to get a baseline working. Now for the UI to have more bling. Watch this space.



This does not come standard with Vuetify and as you can see, it takes time to create these cool things..

Ta!
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
It's possible to do it
 

Star-Dust

Expert
Licensed User
Longtime User

ilan

Expert
Licensed User
Longtime User
found this:

vuedraggable

draggable component for vue. Latest version: 2.24.3, last published: 5 years ago. Start using vuedraggable in your project by running `npm i vuedraggable`. There are 4131 other projects in the npm registry using vuedraggable.
www.npmjs.com
 

Mashiane

Expert
Licensed User
Longtime User
Thanks, the first image on this thread was what I had already covered. So im just adding stuff to the UI now, then will be the events and setting and getting data.
 

ilan

Expert
Licensed User
Longtime User
alwaysbusy said:
@ilan if you want this for normal BANano (not Vue), the main principle for this is shown in the BANanoDragula library demo in the zip.
Click to expand...

to tell you the truth i have no idea what the difference between BANano and Vue is. actually i tried more than 10 times to get into BANano and ABmaterials but i always gave up a few hour's later. I think ABmaterial is a huge and amazing framework but i just don't understand how it works.
 

Mashiane

Expert
Licensed User
Longtime User
I feel what you are saying, sorry for that. I also took a while to learn it but then ended up creating a very large app with 99 pages for a client. It was really awesome and its still being used here in the country. One of the reasons I love ABM+B4x.

Anyway, the purpose of B.V.A.D.3 i.e. BANano + Vuetify + Abstract Designer Iteration 3, is to enable anyone to use the abstract designer to create webapps just like they do any normal b4a, b4i and b4j app. You generate events after placing components on the form and you are good to go. We are able to connect to various backends, BANanoSQL, PouchDB, MySQL Firebase, MySQL etc, either via PHP or JRDC where applicable.

As an example, you can take a look at this video here to see what we are talking about,
I was really amazed also a couple of days ago when SD released an app here in the forum of what he did. I guess we are all grateful to Alain for BANano as it makes things rather easier, also due to the BANanoServer, one can create similar ABM apps with whatever framework they want, so I chose VueJS.

All the best!
 

Mashiane

Expert
Licensed User
Longtime User
ilan said:
link please
Click to expand...

Reserve the Place

I have created a simple booking system. Gyms, Restaurants, Hairdressers, Barber Shops etc .... I store the data on an online MySql DB (on a site that offers web / db / php services etc.) I made 3 different apps, each multiplatform. 1) (only B4J) My console that I create an account for the...
www.b4x.com

2nd last post!
 

Star-Dust

Expert
Licensed User
Longtime User
Honestly, I also had a hard time understanding ABM and Banano. With the different examples and the vuetify template I did something.

But I'm still a long way off saying "I understand".

You have to get to know Banano better. Unfortunately, you believe there is a need for more documentation; Although many videos have been produced, the videos in English do not help those who do not know English well.

Those who have followed everything with from the beginning are lucky and have therefore been able to learn gradually

My idea is to create a couple of projects to share the sources as a tutorial for novices. I hope I can do this in the next few weeks
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
I add two considerations on a personal level.

@alwaysbusy is a profound connoisseur of PWAs, js, html, queries, etc. He is at a much higher level than ours, which probably prevents us from understanding this extraordinary tool.

@Mashiane with VueAD3 revealed his potential as a developer, he had a very important insight. Even the one with AngularJs is not just, too bad he abandoned it
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
The BANano library allows you to write normal B4J code that transpiles to Html/JavaScript/CSS and also use components to design the layout in the Abstract Designer. BANano is the core engine that processes and transpiles all the elements for both the logic code of your WebApp and the layouts you make in the Abstract Designer. If it makes it easier to understand what BANano is, one could call it B4W.

In short:
B4A + Abstract Designer => Android Java
B4i + Abstract Designer => Objective C
B4J + Abstract Desinger => Java
B4R + Abstract Designer => C/C++
BANano (B4W) + Abstract Designer => HTML, JavaScript, CSS

You can use any CSS framework (e.g. Kendo, Skeleton, Bootstrap, Vue, ...) you want to make those components for the Abstract Designer, just by using plain B4J and the special BANano commands. Included with the download are already a lot of components (the BANanoSkeleton library). Mashiane wrote another such a component library that uses Vue and on the forum there are others who wrote one for e.g. Kendo UI.

Alwaysbusy
 
Last edited:

ilan

Expert
Licensed User
Longtime User
alwaysbusy said:
The BANano library allows you to write normal B4J code that transpiles to Html/JavaScript/CSS and also use components to design the layout in the Abstract Designer.
Click to expand...

ok so the b4j project will compile and create for me the html/css/js files and they will run independently.
so it's not creating a server that provides the HTML to the client (that must be mostly written outside b4j) and handles all requests/responses from the client like for example NodeJS? or is that also possible?
 

Mashiane

Expert
Licensed User
Longtime User
Star-Dust said:
Even the one with AngularJs is not just, too bad he abandoned it
Click to expand...
LOL. Remember that is just AngularJS, i.e. Angular 2 and not the real beast. It was a learning exercise for me anyway. I mean a lot has changed with Angular and with AngularJS a ceiling was reached a little bit.

BTW, how on earth will I write an abstract designer layout that will accept this?

B4X: 
<div *ngFor="let product of products">

Ha ha ha.

and in VueJS this is done easily with

B4X: 
<div v-for="product in products">

And remember, VueJS was born out of taking the best of Angular and the best of ReAct. So its a win!
 
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…