B4J Library [BANanoVuetifyAD] [BETA] Create VueJS+Vuetify based Websites / WebApps using the Abstract Designer

Mashiane

Expert
Licensed User
Ola

*****************************************************
Update 10 November 2020 - BANanoVuetifyAD3 -

This is an completely new re-write of this library. We are still testing the library and its not for use for production use.
BANanoVuetifyAD3 Examples
****************************************************

New: Wrapping Vuetify using the BANano Custom View Creator

FEATURED: Create a News Website / WebApp App with less than 100 lines of code
FEATURED: Create an Online Store Website / WebApp

Download

BANanoVueAD YT Playlist

BANanoVueAD is based on BANanoVueMaterial however in this case one uses the Abstract Designer to create websites / webapps. This library as much as it focuses on design, one is also able to write source code as in normal b4j app. One is able to create a website / webapp exactly the way they want as one is able to use more than the 150+ components to build whatever one can imagine.

We are currently however building up usable blocks (as layouts) that one can use.

Some silly assumptions:
  • You have explored some BANanoVueMaterial
  • You are familiar with VueJS
  • You are familiar with Vuetify and off course (this will help you in designing your own blocks)
  • You know BANano.
We have prepared some videos here to take you along and all source code (both library + examples) are downloadable per link above.

From AD

source.png


To Website / WebApp

target.png


Enjoy!

PS: To test this library in detail. You can go to the Vuetify website, each component is defined and when you explore the "Source Code" you can see how it is defined.
Text inside <>Text</> is mostly set via the Caption property in the property bag. Each element is defined by <v-???></v-???> and these are available as custom views herein. You can then use the abstract designer to create your elements.

VuetifyWeb.gif



Update: 29 September 2020

I was figuring out how this all works and it can be summarized with this drawing. Do you think you can understand this flow by just looking at it?

BANanoVuetifyAD2.jpg


The library is developed based on Vuetify 2.3.10. At the heat of the library we have a couple of things, the view (one creates these using the abstract designer), the model (these are your data structures which can be saved to the global store using .SetData and .GetData. To store the model data we can use any of

BANanoSQL, MySQL, SQLite or MSSQL at the moment.

One can create any numbers of pages in their app. For this they need to use the Code Module and initialize an instance of the VueComponent. For each of the pages, one needs to define their views (layouts) using the abstract designer as indicated in step 1-3 of the View item.

After the view / layout is created and loaded we need to get its HTML content, bind events and states to the app / vuecomponent instance.

All created vuecomponent instances should be added to the app instance and then in finality the app is served and runs on dev browser.
 

Attachments

Last edited:

Mashiane

Expert
Licensed User

Mashiane

Expert
Licensed User
Thoughts on moving towards Alpha

Download

BANanoVuetifyAD is supposed to be faster and stable and a better way towards you creating BANanoVueMaterial/Vuetify WebApps.

The approach being used is creating your webapps completely with the abstract designer and thus this is receiving an over-haul when creating apps. Instead of many custom views, only 1 single generic custom view has been created. This has meant a library that was previously 933KB is now 60KB. This decrease in bloat ensures our web apps are loading faster and less buggy and easier to maintain.

At the same time, this means that the design of a webapp completely rests with the webapp creator using all available documentation provided by VuetifyJS

One of the examples is converting this wireframe: https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/wireframes/inbox.vue

Using the abstract designer:

1604958695978.png


To a resulting output of:

InboxWireFrame.jpg
 
Last edited:

Mashiane

Expert
Licensed User
Thoughts moving towards Alpha - Create a Discord Wireframe

Our Source Code

We create a few layouts and then append these to each other. There are 3 drawers in this wireframe.

B4X:
'initialize the app
    vuetify.Initialize(Me)
    
    'load v-app to app template
    BANano.LoadLayout("#apptemplate", "vbaseline")
    '
    'add icons to appbar
    LoadLayoutIcon("icnsquare", "mdi-square", CreateMap("color":"red"))
    vsystembar.AppendHolder
    '
    LoadLayoutIcon("icncircle", "mdi-circle", CreateMap("color":"yellow"))
    vsystembar.AppendHolder
    '
    LoadLayoutIcon("icntriangle", "mdi-triangle", CreateMap("color":"blue"))
    vsystembar.AppendHolder
    '
    BANano.LoadLayout("#placeholder", "vsearch")
    vappbar.AppendPlaceHolder
    '
    BANano.loadlayout("#placeholder", "vminidrawer")
    vnavigationdrawer.AppendPlaceHolder
    
    BANano.loadlayout("#placeholder", "vrestdrawer")
    vnavigationdrawer.AppendPlaceHolder
    
    BANano.loadlayout("#placeholder", "vitemtitle")
    vlistitem.VFor = "n in 5"
    vlistitem.AddAttr("link", True)
    vlistitem.AddAttr(":key", "n")
    vlistitemtitle.Caption = "Item {{ n }}"
    vlist.AppendPlaceHolder
    '
    BANano.loadlayout("#placeholder", "vdrawerright")
    vapp.AppendPlaceHolder
    '
    BANano.loadlayout("#placeholder", "vfooter")
    vapp.AppendPlaceHolder
Output

Discord.jpg


Original Source Code

 

Mashiane

Expert
Licensed User
Thoughts on moving towards Alpha - A full abstract designer based app.

Download

We have been testing if we can have the AD3 "thin" library abilities. So we created the MealPrep app using the single custom component.

We created components, placed those inside other components to create routers (i.e. pages). We linked the firebase backend.

The original source code for this is here. https://github.com/ratracegrad/meal-prep

You might have to study the source code on the original vue files and then compare how we have done this using the abstract designer.

If you notice, where layouts were large, we have split those into pieces and then "appended" the child layouts to the parent layouts.

You will note that there is a performance gain on this app as the library now has less bloat compared to the original library we used.

BANanoVuetifyAD3.jpg


As a developer, one has to create their layouts based on knowledge as discussed on the vuetify website.

Ta!

PS: Things to take note on the abstract designer layouts.

1. The name (each element should have a unique name, if not, any previously loaded layout with the same name will be overwritten)
2. The tag name (each vuetify element name is prefixed by v-, see the vuetify documentation on how to create layouts and their child elements)
3. Attributes (these are the properties of each element, possible attributes / properties for each element are discussed on the vuetify website)
4. Classes (these are also indicated on the vuetify website for each element that you can use)
5. Styles (here you apply your own styles for your element, expects a json string e.g. background:yellow;border:1px

  • You load the layout with BANano.LoadLayout.
  • You generate events
  • You need to call BindVueElement - this ensures that all bindings e.g. attributes you binded with : (prefix) on the property bag are bound, this also binds events.
Whilst this new library, BANanoVuetifyAD3 is smaller etc, here one used the VueElement custom component to create layouts and then specify the attributes, styles etc, the same principles & methodologies as discussed from the 1st thread here still applies in creating apps. The only thing is that now a generic component is used.

Ta!
 
Top