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
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.
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!
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
B4X:
#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.
B4X:
'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!
Last edited: