I'll be doing an Eclipse workspace-like menu. Basically,
the page will be split into 3 sections (columns)-- say LHS, MDDL & RHS sections.
all of these 3 sections will be resizable,
can be minimized/maximized.
Each of these 3 sections will have their own components,
depending on which menu item the user is on.
One other thing they'll have is that events will be triggered/passed to/from
between components in 2 different of these 3 sections.
Eg.: when the user clicks an entry in the accordion (or in the tree or tabs) on the LHS section,
en event will occur in the MDDL section.
Vaadin is managing the UI components hierarchically-- a component at the root, and each non-root component is contained in one other component by itself or with several other "sibling" components. From this view,
From what i've got so far, here are the ways i can design LHS, MDDL & RHS:
1.) a Layout (VerticalLayout or HorizontalLayout, or maybe a FormLayout(?))
or a Panel at the root, with 3 components in it for 3 sections (whatever those 3 components might be)
2.) A HorizontalSplitPanel at the root. On the right panel of this HorizontalSplitPanel, another
HorizontalSplitPanel to make up the 3 sections i'm looking for.
3.) A GridLayout of 3 columns, with a panels in each to make up the 3 sections
4.) 3 different Window-s.
Which of these options would be the best for my use?
Also - considering the go-between the sections (event-listeners and corresponding actions across sections), which design i should go for?
I'm looking to make the code decoupled. The 3 sections will have their own styles each (LHS: options, MDDL: data entries, RHS: control).
In another line - what exactly are the differences between a Panel and a Layout? Figure 6.1 of Vaadin book implies that the descendants of Layout are more sophisticated-- in what way?
I'm a backend developer - new to FE things. Excuse if this is a naive Q.
TIA.
A Panel is a single component container, layouts usually have more than one child component. The difference is what you can see: The panel provides a caption and border for the inner component, layouts like HorizontalLayout lay out components in a defined way, e.g. horizontally next to each other.
Your option 2 seems reasonable to me. Only the split panels provide a separator that is draggable out of the box.
Regarding the event handling: I recommend creating one class for each section, derived from CustomComponent. Then implement new events/listeners analogous to Vaadin's in these classes. After the 3 sections are created, each section needs to add listeners to other sections as required.
Related
The Grid widget in Vaadin 8 & 10 offers a method to get a Set of the currently selected items: Grid::getSelectedItems.
In a similar vein, I would like to get a collection of the items that are currently visible to the user in the Grid. Say my Grid widget holds 10 items, but only 5 are viewable because the Grid widget is too short to display them all. I want to know which of the five can be seen by the user.
This is not trivial task, I have something similar, but not exactly this case before. First of all, I would I would create custom Layout component, e.g. by extending CssLayout in similar fashion as has been discussed here ( How to make UI receive scroll events ) in addition to reporting scroll events I would report the position of the layout on the viewport (see http://www.gwtproject.org/javadoc/latest/com/google/gwt/dom/client/Element.html ). Yes GWT and client side development is required.
I would use this layout as wrapper for the Grid, i.e. Grid would be in the layout. You could extend the Grid component as well. But I think doing the layout wrapper gives you nice tool that you can use with other components as well for which you need to determine, whether they are actually visible or not.
This way I can then calculate which portion of the layout is in the viewport. As you see, there are number of cases here, e.g. only bottom of the Grid or top of the Grid is visible. Then I need to know row-height, header height, etc. That enables me to calculate how many rows there are visible. I hope you get the idea. The outcome for the generic case will be rather lengthy piece of code when all possibilities are enumerated. This calculation you can do on server side.
I need to know how to add a row to a grid. I declared ui-grid-b with 3 columns. I need 8 buttons in this grid in my footer. How to do this?
You should read about it in jQueryMobile docs. Basically "grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each." You should also read about toolbars. It may be usefull for a good start.
There is a full explaination:
http://jquerymobile.com/demos/1.1.1/docs/content/content-grids.html
I would like to add an icon to the header of my data grid as it is done in Thunderbird.
There is an icon that is above the vertical scrollbar, no matter the position of the horizontal scrollbar. This icon allows the setup of the columns.
In Delphi there a lot of different grid components, that allow customizations and adding icons to there cells / header cells. But I could not find any component that has an area above the vertical scrollbar that is fixed, which when clicked allows some action. I could even use the VirtualTreeView component to emulate the grid, if it turns out to be easier to customize that component.
I am looking for some guidance on what need to be done to get that functionality.
Thanks,
Thomas
VirtualTreeView in Listbox mode would be nice, because of it's speed, great documentation and ease use in MVC-like patterns. Delphi tempts to store data in the visual components themselves, which letter causes troubles. While VTW allwos the same, it also allows to acutally separate data from GUI, and i like it.
But i am surprised by your claim "which when clicked allows some action.".
Even most basic components allow it:
http://docwiki.embarcadero.com/Libraries/XE2/en/Vcl.Grids.TCustomGrid.OnFixedCellClick
So could you make more detaiils, why you cannot use standard components ? with screenshot and editors, how u want it rendered, where you want to click and what kind of action should happen ?
How does DNN decide what items from the menu to put in the footer? On one of my portals, I see just "Home". On another one I see "Home" and the last menu item. On still another one, there is none. I understand that whether to put a footer or not might be dependent on the skin, but what decides which items to put there? Of the 3 portals I quoted, the first and the second one have the exact same skin.
The question comes from client requirement that we provide one of the menu items only in the footer and not the main menu. To boot, I don't know how the footer items are controlled. Your thoughts, please?
I understand that the layout in Orbeon Forms is grid-based, but even inside a grid of let's say 10 rows and 5 columns, If I happen to want to shift the 8th row to the 3rd row using the Visual Form Builder, how would I do that?
In general, is it possible to reorder the fields or sections within the Orbeon Designer using the MOUSE?
Currently you cannot reorder grid rows or columns, with or without a mouse (if by that you mean using drag-and-drop. But it's a great suggestion for the Orbeon Forms authors.
At this point, what you can do is this:
insert a new empty row
using the toolbox, "cut" the first control you want to move
using the toolbox, "paste" into the first cell of the new row
repeat the last 2 steps
It's painful but it will work.
Or, you can move the row directly within the source of the form, by moving the in the grid to the new place.
Note that while drag-and-drop would be great, it's not actually strictly needed: buttons and keyboard shortcuts can get you there too.