B4J Tutorial [BANanoVuetifyAD3] How to learn from the New Awesome Kitchen Sink to create your next powerful WebApp/Website

Hi there

As a start to anyone interested in BANanoVuetifyAD3 and its webapp/website development eco-system, creating powerful webapps / websites, I greatly recommend the kitchen sink.

So you can head over to netlify and explore what has been done so far using the BVAD3 library. https://magenta-vacherin-2f7e6b.netlify.app/#/

You will find...

BVAD3StartPage.jpg


Use the VNavigationDrawer on the left to navigate and check what happens on each of the sections.

To be continued...
 

Mashiane

Expert
Licensed User
Longtime User
What's New

The What's New section will always have the latest content that has been added to the library. This content expires and will move to one of the tree parent items.

For example, we have an expansion panel child element, opening it shows a data-table with some expansion panels. Expansion panels are a kind of drill down of your data-table rows where you can provide more content about that row.

BVAD3ExpansionPanel.png
 

Mashiane

Expert
Licensed User
Longtime User
Planning Your Project: The 80-20 Principle

Before you start designing and work on your project, plan it out. You have an idea in mind of how you want your project to look like and feel. Will it have a top navigation bar, will it have a footer, will it show images, show a map etc etc.

With those questions in mind, skim through the kitchen sink to find out how those components have been explored, which color schemes were used, can you specify your own colors etc etc.

If I dont find anything in the kitchen sink that I can use (which is practically impossible 99% of the time), can I send Mashy a request for the component? Yep.

Now that you have an idea of what your webapp will use, sketch it out on a piece of paper, use figma, use evolus pencil or whatever. Plan it, change it, to suit your needs. This step is very very crucial for execution.

Of course, you will be able to change things after / during the design, but imagine not doing your designs first and then realizing that you can done it better, differently, later on. So plan, plan, plan.

In most cases, as a developer, you are given an excel spreadsheet to create an app from. By planning your designs to translate that into a working app, you help yourself for the execution stage.

By checking each page of the kitchen sink, you get to explore all the available components and what you can use, what you can combine to make your app awesome.

Plan it out, thoroughly. You wont regret it. Scrutinize the kitchen sink, see what you like, see what you can customize. Make the kitchen sink your friend.
 

Mashiane

Expert
Licensed User
Longtime User
My Website will have a Contact Us Page, it should also show a location of our Shop etc etc...

A contact us page, usually have input controls. These are available from the "Form Components" of the kitchen sink.
If you want to show a map for example, you have a choice to use Leaflet / Google Maps. These two are not part of the core Vuetify distribution and thus are under the PlugIns section.

BVAD3CreatingForms.jpg


This gives you an idea for example of how VAutoComplete components are used and can display.

From the Google Map, you can see the various types of layers that have been added on this map.

BVAD3GoogleMap.jpg


Remember, you are still planning and exploring BVAD3 out and what you can use and what not. Be patient with yourself. I know that edge of wanting to jump into coding here and then without being ready or knowing how you will executive something. Ive learned the hard way of how important the requirement gathering stage is and how terrible it is to work without properly documented requirements and or perhaps non existing requirements. A plan to fail approach, I think and call it.

Dont plan to fail.
 

Mashiane

Expert
Licensed User
Longtime User
BTW...

I am growing a Reference section on the kitchen sink for all those websites I find very interesting. If you have some in mind, hit me up, let me add it to beef up the knowledge base, it helps a lot and is still far from being complete. Yes, the internet can give the right information at times yeah. 🙏 to the many people who share their knowledge there hey.

1652253012282.png
 

Mashiane

Expert
Licensed User
Longtime User
I know what I want, just get to it...

Let's take a typical example, that on your web project you want to show a variant of a card, and after exploring the Kitchen sink, you get to this page.

BVAD3Cards.jpg


Your best friend # 1: The browser address tab and address bar.

Ok, you want to create a card with the food.

Q. How do I do it?
A1. First locate the page reference from the address bar.

1652253784968.png


Also, note that the browser Tab has BVAD3 - VCard.

1652255238781.png


The name of the page being shown in your app will be the first "route" after the first #, in this case "adcards". To get to the source i.e. b4x sourc code, layouts used, components used, we need the source. This is the kitchen sink. This will become your second best friend in this journey.

Your best friend #2: The Kitchen Sink Source Code

Get it from Github, https://github.com/Mashiane/BANanoVuetifyAD3/blob/main/BVAD3KitchenSink.zip

Unzip it and now we need to perform a search.

Each page in our app will and should always have a unique name. So there can only be 1 page with a name "adcards" in our web project.

A2. Open the kitchen sink after unzipping it in b4j, locate the quick seach on top right of the IDE and type "adcards"

1652254201453.png


We want to access the last entry on the list as that has the matching name.

A3. Click on the name of the code module on that row (blue section on the left)

1652254281574.png


A4. This activates the code module, now check that the name matches to the name shown in the address bar. It does..

1652254337744.png



A5. Locate the Initialize Sub.

This sub is where all the magic of creating your UI with BVAD3 happens, you can code your UI or use the abstract designer. For the kitchen sink, all the UI pages are created with the Abstract Designer.

1652254437803.png
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Ok, I get it, show me how that card was created, come on, come on....

Like I said, the content of the "adcards" page that shows on the browser, is created by a page called "adcards". We have just now located the pag source and want to see how the UI was created.

To create the UI, we have not written any code, but used the Abstract Designer. We use the BANano.Loadlayout call to load these views to our page, then generate events. This is the normal process that is followed by the B4x App creation process with all the b4xs..

A6. BANano.LoadLayout is referring to a layout named "mycards". There can only be 1 layout with that name in our app. The content of this layout will create the necessary HTML we finally see on our page, and this layout has been created using BVAD3 "custom elements".

Q. Custom Elements?
A6.1 Yes, custom elements, I will explain about that later, for now lets locate the "mycards" layout.

Your best friend #3: The Abstract Designer

A7. In the B4J IDE, locate the File Manager and search for "mycards". Click on Open Designer.

1652254957410.png


Phew, this looks busy...

Lets, back track a little, remember the browser tab?

1652255442145.png


That is the clue of what we need to look for. The browser tab will in almost all cases, give you a hint the major component name the page makes reference to.

Its time your creative juices come to life. All we have to do is to locate a vcard. And you want one with a picture of food, so you will also search for a component that has an image URL

1652255035875.png



Found it, its VCard2. Yippie!!!

1652255623294.png


Your best friend #4: The Property Bag

1652255700360.png


We have established that the card we want is VCard2. We open up the property bag and see what settings have been set.

This goes for all the components in BVAD3, the property bag, by just settings this and that property, you can create an amazing web project. Go on, change some properties, run the project and see what it does.


1652255886711.png
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Q. I see, Add, Edit, Delete buttons but there is nothing on the VCard2 property bag. Can you explain?
A. The Vuetify VCard component is rather a complex components, its made up of a couple of components, a VCard itself, the VCardTitle, the VCardSubTitle, the VCardText and VCardActions. One has to combine all of these to build up the HTML of the card itself.

You can read more about it here..


The buttons you see are sitting inside the VCard, inside a VCardActions components. As you have noted in the VCard, there are some child components inside it.

1652256380213.png


And also a child element inside that VCardActions.

The child component inside the VCardActions in this case is a VBtnIcon. Its does not exist in the Vuetify world and was create to make creating buttons easy.

1652256483183.png


With it you are able to create multiple buttons at the same time, which fire a single event and receive a key to differentiate them. If you notice on the property bag of the VBtnIcon, you will notice..

1652256570248.png


That is how those 3 buttons were created.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Q. How about events like click, change, mouse move etc etc? How are those done.

A. Normally in B4J, to link components on your layout to the source code, you generate events. That has not changed.

On the element you want to generate events for,

Right click it and locate Generate and then click the events you want to trap for that component.

1652256753529.png


Because for this case, we use 1 component to generate multiple buttons, we needed an identifier for each button, that is what is specified as "Item Keys" with "add; edit; delete"

So as you will notice, the Click Event receives the item which can either be add, edit or delete.

BTW, You can also access all the events generation process from the Tools > Generate Members, when you want to create events for all your components.

1652256964496.png


1652256997728.png


So, in the IDE, the events will be generated and you can write normal b4x code.

B4X:
Private Sub VBtnIcon2_Click (item As String)
    Select Case item
    Case "edit"
        'DoEdit
    Case "add"
        'DoAdd
    Case "delete"
        'DoDelete    
    End Select
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Q. Why is there no manual / ebook about BVAD3?

For the past couple of months, the concentration has been to make the library stable and usable for production project purposes. The shift has been to ensure that the kitchen sink has all the components and more that one can use to create awesome projects.

Basically, the way I think about it is, if you already know how to code with B4a, B4i or B4J, there is nothing else new, you are just doing what you have been doing before.

Vuetify LLC is already working on the next version of Vuetify using VueJS 3, so the best possible future approach is to rather place more emphasis on that project and maintain the existing one, fixing bugs and ensuring that users are able to work with it. As Vuetify 3 is not released yet and it still in beta, it also gives us time to learn about VueJS3 and its differences with VueJS2 to be ready to create the next version of BVAD3 smarter.

At the time of writing this, this is document on the Vuetify Next website.

1652258732324.png


Rather than just jump into it, being incomplete, lets rather plan in advance and wait.

Q. Is there any work besides Vuetify 3 that is being done to learn Vue3?

We are documenting our experience with VueJS3 with SithasoVant3, a mobile UI framework we are working on and its still a long way to go, but we will get there.

BTW..

Besides the lack of a book/manual, we have a teaching series from this thread.


Q. If there is something I dont understand, can I ask questions? like ask a lot and lot of questions?

Yes definately and please do.

Always start a new thread, please prefix your question with [BANanoVuetifyAD3], please try and be as detailed as possible about your question / bug reporting / whatever you want to raise.

🙏
 
Top