Okay, I get most of the Vaadin concepts, but there is one that so far has eluded me - page flow…
So say I need to have two ‘pages’, a listing page which shows all of the books that I own and a few important attributes, and a detail page that would show all of the details for a selected book, probably a form to allow for editing the attributes or adding a new book.
In a jsp, jsf, or any other sort of web framework I’d implement that as two separate pages. The list page would have the titles as links (for the detail page), as well as a button to add a new book. The second page would be a form, with the fields populated for the selected book or empty in the case of a new book. It would have save and cancel buttons, each of which would take the user back to the list page.
So my question is how do you implement a similar sort of flow mechanism in Vaadin? I’m thinking that one way would be to use a tab sheet; the sheet would have the tabs hidden, and the ‘page flow’ consists of making one or the other tab pages active.
Are there better ways to do this sort of thing? Should the main window be adding/removing components to simulate some sort of page flow like this?
Doesn’t the tutorial apps include something very similar, with a list (Table) and details (Form) view?
We have a lot of this sort in our configuration, and we generally use a SplitPanel so users can resize, with a Table in one and a Form in the other, tied together so that whenever a row is clicked in the table, that object’s data is presented in the form.
Well, split panel would work, but the requirements for the table have many columns. Users would be forced to resize left and right to see all of the info. I was hoping for more info on the ‘classical’ sort of presentation where a click in the table would result in a change of view to just the detail form…
If you use a horizontal split, you’ll have a top and bottom area so left/right scrolling would not be necessary.
Obviously, you only have the real estate of the size screen you are targeting and you have to make due. Otherwise you can just popup a form editor window that overlays the table when modifying, but that should only be “necessary” if your table needs to be wide and tall! Good luck, but the tutorial shows a nice way to tie a table to a form, and that’s the real key, whether you put them side by side, one on top of the other, or one overlaying the other.
We do something similar. You can just work with tabs. The list view is the first tab in a tabset.
If the user say double clicks on a row, you open a new tab with the detail view. The user can then easily flick back and forth between the list and detail view.
A split screen should work nicely also, unless you have a large form in the detail view.
Also, I think you need to think a little differently to the usual web view of seeing everything in screens. This is a RIA framework and apps are end up more like fell fledged swing deskop apps.
I agree re: the RIA framework view, but it does live between the classic page-oriented view of the web world and the window/dialog view of the application world.
As web users, the page oriented view is definitely familiar and somewhat expected interface. Not that I’m tied to it, but sometimes the requirements are… And I don’t know about everyone else, but I still feel that the simulated window/dialog view inside a browser is a little clunky.
Being able to support a kind of page oriented view will allow me to leverage vaadin in some projects that expect a page-oriented presentation…
I’m currently building one using the tab component w/ hidden tabs using clicks on the elements to switch the currently visible tab. Should end up w/ the kind of page-oriented view that I need to deliver while still staying within the vaadin playground!