B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

Mashiane

Expert
Licensed User
Longtime User
Developing BANanoVuetify Apps: The Grid

NB: You can run the demo app directly from Github

One of the things one will come across when developing their webapps or websites is the creation of the grid to place the various controls one will see and use.
The Vuetify grid follows the Bootstrap grid system (flex mode) with 12 column spans. With this we can add a variety of sizes as per our wants and needs.

One of the things BANanoVuetify prouds itself of are two things:

1. Without knowing your grid definition, when adding components in a container, you can specify where you want them to sit in the grid matrix, the code will figure it out. This however requires that no sequence is skipped. For example, you can define a component as sitting at R1C1, the next component should be in R2.

2. You can also use in the build grid definition that will give you the source code you can use to design your grid. In the designer we have added functionality to create any type of grid you wish and you can see the b4x code and also the html representation of the code.

Whilst there are more other properties you can define for your rows and columns as defined in the VMRow and VMCol classes respestively, most of these attributes and classes can be set directly in the VMContainer class.

The Container (VMContainer) class exists for most components that are likely to have more content and you can also create your own and then add it to your control with .AddComponent.

To access the designer, on the Demo app, click Designer on the nav drawer. For now this has the grid designer that after you have designed your grid, you can then

1. Export to B4x code - this code you use in your BANanoVuetify project
2. Export to HTML - this code you can use externally directly on a VueJS project outside B4x.

NB: Watch in HD
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Other quick wins coming with version 3.01

Whilst still working on finalizing the designer (which will feature drag and drop form input controls and code generation, I also needed some fancy counter). Here comes the arc and circle counters.




Arc Counters

B4X: 
Dim arc As VMArcCounter = vm.createarccounter("arc1", Me)
    arc.setsize("10rem").SetStart("-40").SetEnd("40").SetText("123")
    cont.AddComponent(1,1,arc.tostring)
    '
    Dim arc2 As VMArcCounter = vm.CreateArcCounter("arc2", Me)
    arc2.SetSize("10rem").SetDashSpacing("0.6").SetStrokeWidth("60")
    arc2.SetActiveWidth("60").SetDashCount("45").SetActiveCount("17")
    arc2.SetStart("300").SetEnd("60").SetText("Label").SetTextX("right")
    arc2.SetTextY("bottom")
    cont.AddComponent(1,2,arc2.tostring)
    '
    Dim arc3 As VMArcCounter = vm.CreateArcCounter("arc3", Me)
    arc3.SetSize("10rem").SetStrokeWidth("2").SetActiveWidth("6")
    arc3.SetDashSpacing("0").SetStart("140").SetEnd("-140")
    arc3.SetStroke("black").SetActiveStroke("red")
    arc3.SetText("5").SetTextX("center").SetTextY("bottom")
    cont.AddComponent(1,3,arc3.tostring)

One can add a counter to make this dynamic and update on ticks

Circle Counters

B4X: 
Dim arc4 As VMCircleCounter = vm.CreateCircleCounter("arc4", Me)
    arc4.SetSize("10rem").SetText("123")
    cont.AddComponent(2,1,arc4.tostring)
    '
    Dim arc5 As VMCircleCounter = vm.CreateCircleCounter("arc5", Me)
    arc5.SetSize("10rem").SetDashSpacing("0").SetStrokeWidth("2").SetActiveWidth("6")
    arc5.SetActiveCount("50").SetText("label")
    cont.AddComponent(2,2,arc5.tostring)
    '
    Dim arc6 As VMCircleCounter = vm.CreateCircleCounter("arc6", Me)
    arc6.SetSize("10rem").SetReverse("true").SetRotate("90").SetStrokeWidth("60")
    arc6.SetActiveWidth("60").SetDashSpacing("0.6").SetStroke("black").SetActiveStroke("red")
    cont.AddComponent(2,3,arc6.tostring)
 

Mashiane

Expert
Licensed User
Longtime User
Developing BANanoVuetify Apps: Form Input Controls

The process of developing apps with the designer should be simple. You drag and drop the elements that you want from the toolbox to the stage. These are placed in the stage so that you can manipulate them. At the moment, a few elements have been added and a property bag is forthcoming. This is just to introduce to you how things will unfold.

Just like in the previous example, one will be able to download the source code and even the html for the elements they have placed. This code one can then use it to create their pages.

NB: When one drags elements to the stage, one don't need to use any of the "Grid" panel elements as the grid will be automatically generated based on elements they put on the stage.

The process of generating a preview of the designed UX means a complete recompilation of the HTML templates per each of the elements. For this, a page refresh is necessary. This is just a designer anyway as it just helps one to achieve some objectives. This refresh ensures that the "state" of the elements is taken care of as the page is recompiled to show your designer UX.

NB: Watch in HD

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify 3 Designer - Dragging n Dropping, Updating Text Fields Control Properties to meet your design

As of version 3, BANanoVueMaterial is now based on Vuetify, we call it BANanoVuetify.

When you are designing components with the designer, you drag and drop the element that you need to the stage area. The component you added will be allocated a unique id and saved under 'My Components'.

NB: Watch in HD



You can select the component by selecting it from the 'My Components' section (left part of screen). This will activate the property bag for that element. Let's look at the video to see how we did our TextFields.

The TextFields affected by this are : Text, Email, Password, TextArea and Tel.

Once done, you can extract both the source code and HTML by using the menus. You can also add additional attributes and classes after the code is generated should you need to.

Soon, we will build an app directly from code generated by the designer! Watch this space.

Try out the text field components now by getting your copy of BANanoVuetify 3.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Moving towards an easier to maintain library: Version 3.02

NB: The AutoComplete, ComboBox and Select components are almost 90% identical in terms of attributes, classes etc.

To ensure that we are able to maintain the code easier, instead of having 3 different class objects, we have one, VMSelect, instead of VMAutoComplete and VMCombobox.

To create an autocomplete

B4X: 
dim auto As VMSelect = CreateAutoComplete("sel", module)

To create a combobox

B4X: 
Dim combo as VMSelect = CreateComboBox("cbo", module)

NB: The TextArea and TextField are almost 90% identical in terms of attributes, classes,etc also, these have been merged, we have VMTextField

To create a textarea

B4X: 
Dim txta as VMTextFIeld = CreateTextArea("txta", module)/Code]

To make a textfield a password input

[code]Dim txtp as VMTextField = CreateTextField("txtp", module).SetPassword(true, true)

The last variable passed indicates that one needs to show the toggle icons, to turn them off, set the last variable to false.

NB: Also the TimePicker and DatePicker are almost identical, so these have been merged. The new control name is VMDateTimePicker.

To create the time picker

B4X: 
Dim tp as VMDateTimePicker = CreateTimePicker("tp", module)

To create the date picker

B4X: 
Dim dp as VMDateTimePicker = CreateDatePicker("dp", module)

NB: Also the FileInput and TextField are almost identical, so these have been merged. The merged to control is the textfield

To create the file input

B4X: 
Dim fi as VMTextField = CreateFileInput("tp", module)
'
NB: Also the Switch and CheckBox are almost identical, so these have been merged. The merged to control is the CheckBox

To create the switch

B4X: 
Dim fi as VMCheckBox = CreateSwitch("tp", module)
Ta!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify 3 Designer - Dragging n Dropping, Updating Text Area Control for your design.

Download

This demo shows how we handle the text area control in the stage. We show here how we drag and drop it in the stage and then size it and then change some properties to meet our needs. We also show how we size the column size it will sit in, at first with 4 and then with 6 spans.

Just like the example above about the text fields, we configure and set the attributes of the component and then save it.

As you have seen above, we create regular text area, solo, filled and outlined. You can still apply most of the attributes we used in the text field.

Clicking <> for code in the toolbar or html will export your source code.

NB: Watch in HD

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify 3 Designer - Dragging n Dropping, Updating Password Controls for your design.

Download

This demo shows how we handle the password text field in the stage. There are 2 types of passwords, one that can show the toggle eye and one where you can hide the eye. We show here how we drag and drop it in the stage and then size it and then change some properties to meet our needs.

Just like the example above about the text fields, text areas etc, we configure and set the attributes of the component and then save it.

As you have seen above, we create regular text area, solo, filled and outlined. You can still apply most of the attributes we used in the text field.

Clicking <> for code in the toolbar or html will export your source code.

NB: Watch in HD

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify 3 Designer - Dragging n Dropping, Updating Image Controls for your design.

Download

This demo shows how we handle the images in the stage. We create a profile display picture with a round radius and borders and in another one we create an image that we can use for display. We show here how we drag and drop it in the stage and then size it and then change some properties to meet our needs.

Just like the example above about the text fields, text areas etc, we configure and set the attributes of the component and then save it.

Clicking <> for code in the toolbar or html will export your source code.

NB: Watch in HD

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify 3 Designer - Dragging n Dropping, Updating File Input for your design.

Download

The file input control is used to upload files to your server. In the designer you can place it along the matrix you need. In this demo we see how we can design and configure the file input according to what we need and the place it on our stage.

Clicking <> for code in the toolbar or html will export your source code.

NB: Watch in HD

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify 3 Designer - Dragging n Dropping, Updating Buttons for your design.

Download

The buttons are clickable controls that one can press and events can fire. To create buttons with the designer, one drags and drops them. One then updates the attributes to make the button meet their design requirements. This is how its done.

NB: Watch in HD

 

Mashiane

Expert
Licensed User
Longtime User
Added functionality to enable one to design to their device of choice. One is able to toggle between the three devices (top right).

NB: Decrease your web-browser to 80% at least.

Also, whilst elements are cut on the right hand section of the device, its not a true reflection.



iPad


iPhone



You are also able to view the B4X code for your stage creation by clicking the <> B4X tab.



And also a nicely formatted HTML of your code is available.

 

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify 3 Designer - Dragging n Dropping, Updating Icons for your design.

Download

Today we look at how one can drag and drop icons for their designs. We configure the colors and the sizes. We see the generated source code and the html source code.
The cool device previews enable us to see how our designs look in macs, itab and iphone.

NB: Watch in HD

 
You must log in or register to reply here.

Similar Threads

  • Article
Share My Creation [BANanoAngularJS] - How far my AngularJS with BANano curiosity has taken me...
2
Replies
22
Views
3K
Mashiane
  • Article
B4J Tutorial [BANanoVueMaterial] How to ask questions, request help, report bugs and request enhancements + Telegram Channel
Replies
0
Views
2K
Mashiane
  • Article
B4J Tutorial [BANanoVueMaterial] Exploring Components & Routers Basics
Replies
4
Views
2K
Mashiane
  • Article
B4J Tutorial [BANanoVueMaterial] BVMDesigner - Mock.Compile.Publish
2
Replies
29
Views
9K
Mashiane
  • Article
B4J Tutorial [BANanoVue] - Building WebApps/Websites with VueJS
Replies
5
Views
4K
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…