B4J Question [BANanoVuetifyAD3] VStepper Loadlayout problem

S

sdleidel

Active Member
Licensed User
Longtime User
I would like to load and display a layout with the Vstepper at Step1.
Sample: 2 text fields for first name and name.
however, the fields should be next to each other. (Left "First Name" and on the right side "Name")
I've already tried everything and the examples don't help either.
Is rows and colums from the Tutorialvideos in Vstepper not possible ?
 
Last edited:
Sort by date Sort by votes

Mashiane

Expert
Licensed User
Longtime User
In one of my posts, I indicated that the Kitchen Sink should be your best.

If you visit the Kitchen sink > Layouts > V-Grid, you can see and refer to how grids are created via layouts.

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System
mashiane.github.io

You also know that one can put an element inside a vcol and other components. Give yourself time and skim through.

 
Upvote 0
S

sdleidel

Active Member
Licensed User
Longtime User
what is the Mistake ?
I have only a yellow Field and the rest ist around the Stepper...
I have attach my File...


 
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
The post #2 was for you to understand how grid creation works.

Please spend some time going through this lesson to understand how grids work and how to insert contents into them.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

21: CRUD - Creating a Dialog Form to capture our Invoices - Part 2
www.b4x.com

There is a video on this lesson in terms of how to create split forms.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Understand, thank you
www.b4x.com

What I will also do, is to include an example of how to use forms inside steppers but its the same principle you use as the only example in the kitchen sink just has labels.
 
Upvote 0
S

sdleidel

Active Member
Licensed User
Longtime User
Please Check my sample…
I can Not load the file correctly…
But why ?

I have delete the login.jpg to reduce the Zip Size...
 

Attachments

  • BVAD3_Sample.zip
    234.5 KB · Views: 69
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
I have reviewed your code, and I understanding that its perhaps being coded by someone who is new to the library. You need to understand the basics.

To do that you need to spend time learning about how the library works. The kitchen sink source code will help in that regard.

First, you are using deprecated code. This is code that existed even before the Mashy Teaches Series existed. This is in relation to BindVueElement and using VElement directly.

I will create an example in the Kitchen Sink about how to have a stepper with a form and input elements, perhaps that will shed some light.
 
Upvote 0
S

sdleidel

Active Member
Licensed User
Longtime User

The tutorial is too cumbersome for beginners. Problem what I have, that it is not really up-to-date.
Example: Where can I find this? (Photo)
The current Kitchesink does not have it and the link can not be found...

 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
sdleidel said:
The tutorial is too cumbersome for beginners. Problem what I have, that it is not really up-to-date.
Click to expand...
I have noted your comments

sdleidel said:
Example: Where can I find this? (Photo)
Click to expand...
You wont. This is a very old version of the kitchen sink that ran in 2021 and some stuff in it was DEPRECATED, especially the direct use of the VueElement and BindVueElement! Thus you will not find any reference to that in the updated kitchen sink.

The latest version, which is the single source of truth for everything BVAD3 is provided with source code from the Github. This is running on both Netlify and Github.

This is how it looks.,..



What I would advise you is to skim through the kitchen sink and explore the components being featured and then you can decide what you want to use on your app.

On May 11, I also pinned this thread post so that anyone who wants to can make it their first reference point.

[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...
www.b4x.com

All the best!
 
Last edited:
Upvote 0
S

sdleidel

Active Member
Licensed User
Longtime User
Yes i think i understand...

But see step 4.

i have this:
1: 
Sub created

    dynaForm.Clear
    dynaForm.AddTextField("firstname", "First Name", "", 10)
    dynaForm.AddClass("firstname", "mx-4")
    dynaForm.AddStyle("firstname", "background-color", "pink")
    dynaForm.SetHint("firstname", "This is a hint")
    dynaForm.SetCols("firstname", "6")
    dynaForm.SetReadOnly("firstname", True)
    
....
end sub

And the Form...

But nothing go in the right direction...


A little help, Code Sample where ok.

How to load a layout in a Stepper item ?





 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
Ok, i have checked your code. Lets please go back to post #2 of this thread. The grid.



The first blue item in this grid spans 12 spaces. You will note that in its "Cols" property, in the kitchen sink the value is 12.
The items on the 2nd row, both span 6 spaces. For each of them you will note a value of 6 in the VCol definitions. When creating the columns you need to look at how the output will work across all devices.

On the dynamic form, based on the kitchen example, you used.

B4X: 
dynaForm.SetCols("firstname", "6")

This means only the firstname will be sized to 6, all others will retain 12, if that wont fit on the 12 sized row, they are wrapped to the following row.

The reason that the other items in the dynamic form don't have a 12, is because its default.

For the items in the 3rd row, to make 12, each item is "4" i.e 4+4+4
For the items in the 4th row, to make 12, each item is "3" i.e 3+3+3+3

I hope this makes sense.
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
Other comments on your code.

In terms of the kitchen sink code, the dynamic form is not coded on "Initialize" but on the "created" call, you need to remove the code that relates to the dynamic form on initialize. I understand you are learning and finding your way, if however you are diverting from how things are done as per source code examples in the kitchen sink, you are setting yourself up for failure.

created = page components DO NOT exist. This is useful to fetch data etc. The dynamic form works on created because its being created in memory.

If you plan to use a dynamic form inside a vstepper component, rather use the "mounted" sub as by then the stepper EXISTS on the form.
 
Upvote 0
S

sdleidel

Active Member
Licensed User
Longtime User
Thanks for the tips.
However, that doesn't really help me.
I've tried your tips, but it doesn't work.
Can you change this in my source code so that I know what it should look like?
 
Upvote 0
S

sdleidel

Active Member
Licensed User
Longtime User
Thanks for your help, now it works.
However, I would have a small question.
I would like to generate different panels at runtime e.g.:
3 pieces with the names a1 a2 and a3, that works if I do that in the "initalize".
Is that also possible in mounted or something?
Background: different users, who log in, should be shown different panels.
 
Upvote 0
You must log in or register to reply here.

Similar Threads

H
  • Question
B4J Question top most and fullscreen games
Replies
3
Views
700
hatzisn
A
  • Question
B4J Question How to get the Index of Child members in TreeView
Replies
2
Views
888
AndroidMadhu
A
J
  • Question
B4J Question [BANano] Custom View question
Replies
0
Views
425
John Naylor
J
  • Question
Android Question [B4X] xCustomListView StackFromBottom
Replies
3
Views
811
Erel
  • Question
B4J Question Start & End Times
Replies
2
Views
1K
aaronk
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…