[BANanoVuetifyAD3] Creating Websites / WebApps by persons who are unable to use the Abstract Designer

[Mashiane]

Hi there

I once read a thread here that there are persons who cannot / unable to use the Abstract Designer. It got me thinking about the future of BVAD3. The drive ever-since AD3 started was to move everything towards the abstract designer as it seemed the easier when it comes to creating stuff.

With the addition of Hot Reload/Live Code Swapping to BANano, it made it even more easier to create and see what you are doing in real time. In any case, from experiencing user interactions in the forum and how other people were using and plan to use it, taking this additional direction was inevitable.

So I got to think in terms of how I could make this easier with the current implementation. We have properties in the Custom Views, we have events etc etc. The properties in the custom view are passed as a map and with DesignerCreateView, you can pass a similar map, get your properties read and everything happening in that Sub Fired.

Enter the DT (Design Time) suffix for getters & setters

Taking the properties in the properties bag, and due to the way VueJS + Vuetify Works, there should be a difference between static and dynamic content. Some content remains static for the duration of the app and some changes.

As an example, we have this property

#DesignerProperty: Key: ParentID, DisplayName: ParentID, FieldType: String, DefaultValue: , Description: The id of the element to place this into

And might already have a sub named setParentID / getParentID, so to ensure there is no conflict, all getters and setters for Design Time settings for a component were added DT as a suffix, reuslting in.

'DESIGN TIME: Set ParentID:The id of the element to place this into
Sub setParentIDDT(detiParentID As String)
    sParentID = detiParentID
    sParentID = sParentID.Replace("#","")
    DP.put("ParentID", sParentID)
End Sub

'DESIGN TIME: Get ParentID:The id of the element to place this into
Sub getParentIDDT() As String
    Dim detiParentID As String = DP.GetDefault("ParentID", "")
    Return detiParentID
End Sub

As you can note above, the getters and setters here, feed a map using the actual DesignerProperty key. This map is later fed into the Custom View (via code) when DesignerCreateView is called.

Point 1:
All getters and setters ending with DT feed the design time properties and should be used on Sub Init on your page. These cannot be used to change properties at RT (runtime) at all.

Handing Parent & Child Relationships

In the abstract designer, one is able to put components inside another, how do I create parent child relationships with code? Each component in BVAD3 had to include a ParentID property and the code updated to ensure that when the ParentID is specified, whether in the Abstract Designer/ via code, that particular components is injected inside the parent. This has already been used for VExpansionPanels, VStepper, VTabs as an example.

Point 2:
All components with for DT should have a parent ID specified.

Can I re-use existing code that is not relevant to the Abstract Designer?

Absolutely yes. This approach just deals with creating your UI via code when you are unable to use the abstract designer any other code will remain the same.

Point 3
One can re-use existing code without any issues.

The abstract designer has functionality to generate members, how do I accomplish event related code?

When you click on the variable type name, in the IDE, you are able to find events for your component, you can click copy, then paste and change the event name. For example, for apphamburger, it has the ClickStop event.

BANanoVuetifyAD3 is a large library, and we have reported crashes and hangs in the IDE, you have just added more getters and setters to it and and who knows what else? What guarantees that such issues will not exist in this version?

Frankly for this concept, one is going to need some kind of beast machine with some capable RAM to say the least. My 8GB with a "usable" number of far less, more taken by Windows 11, is not coping. For now I will say, use this approach when its absolutely necessary and you have a well defined machine. I am getting System Out Of Memory Errors from time to time. I keep drifting between jdk8 and 11 from time to time, but with jdk 8, the crashes and hangs are not as often. I guess with a different machine I could be saying different things.

It would be awesome to hear your views after you have tested it though.

Do you have an example of how this is going to be done? Will it be hard? What kind of challenges will be experienced.

An example exists, see the next post.

Hard, well that is rather relative.

Challenges - the getters and setters are based on Designer Property Key values and not necessarity the Display Values. In some few cases these are different. So coming from the Abstract Designer and moving to code, you might find that your "Caption" property is actually linked to the "Text" keyword. Your getter and setter will be getTextDT/setTextDT instead of getCaptionDT/setCaptionDT. These are very few cases and these will be aligned in time by adding proper getters and setters.

Does this approach have documentation on how to use?

At the moment, no. However, examples will be provided and a new kitchen sink done where everything will be based on code. When though is another story.

Will I have to write BindState calls?

Nope, as long as your variables are defined in Class_Globals, you are covered.

Will this work with BANanoServer?

Whilst not tested yet, it should work without any issues. Dont you want to check it out yourself and tell us what you find?

Can I use both the Abstract Designer and also coded UIs in my project.

Definately yes, what has been done is just add extra getters / setters to the existing BANanoVuetifyAD3 library and named the download zip file BANanoVuetifyNAD3, underneath is the same thing. The original library is still untouched.

Enjoy!

 

[Mashiane]

Let's create the base layout

BANanoVuetifyNAD3

Tip: You can use the BVAD3 Blank Project Template for this, remove the layout and code in pgIndex.

We define Class_Globals as usual...

Sub Process_Globals
    Public vuetify As VuetifyApp        'ignore
    Public BANano As BANano        'ignore
    '
    Private appbar As VAppBar                    'ignore
    Private appbartitle As VToolBarTitle        'ignore  
    Private appdrawer As VNavigationDrawer        'ignore
    Private apphamburger As VAppBarNavIcon        'ignore
    Private inspire As VApp                        'ignore
End Sub

We define our Init Call - note that everything has a parentID and each setter is suffixed with DT.

[code]
Sub Init                    'ignoreDeadCode
    'initialize the app
    vuetify.Initialize(Me, Main.AppName)
    'add the vapp
    inspire.Initialize(Me, "inspire", "inspire")
    inspire.ParentIDDT = vuetify.Here
    inspire.AddDT
    '
    BuildAppBar
    BuildAppDrawer
  
    'render the ux
    vuetify.Serve
End Sub

This sub here is a perfect example of adding parent & child relationships... The appbar is injected to the vapp component named "inspire". We then add the hamburger to appbar and then a toolbar title

Sub BuildAppBar
    'add the vappbar
    appbar.Initialize(Me, "appbar", "appbar")
    appbar.ParentIDDT = inspire.Here
    appbar.AppDT = True
    appbar.ColorDT = vuetify.COLOR_LIGHTBLUE
    appbar.ColorIntensityDT = vuetify.INTENSITY_NORMAL
    appbar.DarkDT = True
    appbar.AddDT
    'add vappbarnavicon
    apphamburger.Initialize(Me, "apphamburger", "apphamburger")
    apphamburger.ParentIDDT = appbar.Here
    apphamburger.AddDT
    'add appbartitle
    appbartitle.Initialize(Me, "appbartitle", "appbartitle")
    appbartitle.ParentIDDT = appbar.Here
    appbartitle.TextDT = "My First BANanoVuetifyAD3 WebApp"
    appbartitle.AddDT
End Sub

We then add the code for the drawer. The drawer sits inside the vapp (inspire) and its hidden (closed)

Sub BuildAppDrawer
    'add appdrawer
    appdrawer.Initialize(Me, "appdrawer", "appdrawer")
    appdrawer.AppDT = True
    appdrawer.ParentIDDT = inspire.Here
    appdrawer.HiddenDT = True
    appdrawer.AddDT
End Sub

Then we define the click event for the hamburger, you might remember this from current codes. Nothing has changed.

Private Sub apphamburger_ClickStop (e As BANanoEvent)            'ignoreDeadCode
    appdrawer.ToggleOnApp(vuetify)
End Sub

When ran, this code produces...

 

[Ilya G.]

Is it possible to make SPA example?

 

[aeric]

I tried run the project BVAD3Manual.zip attached. I got blank screen and several times Out of Memory error. I am using a new laptop with 24GB RAM.

[IDE message - 2:01:14]
An error occurred.
Exception of type 'System.OutOfMemoryException' was thrown.
[IDE message - 2:01:38]
An error occurred.
Exception has been thrown by the target of an invocation.

 

[Mashiane]

I tried run the project BVAD3Manual.zip attached. I got blank screen and several times Out of Memory error. I am using a new laptop with 24GB RAM.

Hi, I understand your frustration with this, sadly this is also something I go through from time to time. We are working towards a thinner version of the library based on what one can package for themselves using the package manager.

At the moment the library is 5MB, a 50% drop from what it was.

Also without putting pressure on Erel, we hope and anticipate the 64 bit b4x which will go beyond the 2GB limitation we all face at the moment. So it's not your RAM.

This project here seeked to test a theory and at this moment it's parked due to the same memory related issues.

 

[aeric]

At the moment the library is 5MB, a 50% drop from what it was.

This is a good improvement.

anticipate the 64 bit b4x which will go beyond the 2GB limitation

Hopefully.

 

[alwaysbusy]

At the moment the library is 5MB, a 50% drop from what it was.

Is that with or without those images (approx 5MB) removed as I suggested?

the 64 bit b4x which will go beyond the 2GB limitation we all face at the moment.

I don't believe this will in this case make much of a difference. If you can find a way to reduce the number of objects it has to hold in your library, this will definitely help. I do not have any problem with the 2GB limitation and some of my projects are huge.

 

[Mashiane]

Is that with or without those images (approx 5MB) removed as I suggested?

Yep as per your suggestions.

I don't believe this will in this case make much of a difference.

If you can find a way to reduce the number of objects it has to hold in your library,

I am hoping to finalize the package manager soon. This will help developers choose the components they want to use for their BVAD3 projects themselves and use those. This will greatly minimize what they see in the abstract designer custom components too. Then they can run the internal RemoveDeadCode calls internal to BANano to do final clean-ups.

With Vuetify3 coming soon (next month actually), lots of lessons learned here, the outline is rather work towards that and ensure that's available in a couple of months from now and basing it all all recommendations received so far. That's the best outline I think going forward.

Thanks again!