I need to accomplish very simple drag and drop of panels in vertical layout.
each panel is set as DragSourceExtension
vertical layout is set as DropTargetExtension
Now when I have a several panels in vertical layout and I drag panel above another one and drop it my dropListener runs and here I'm not sure how to manage what I require. I simply need panel to move on proper place based on mouse pointer. Can anyone share some code how to accomplish this using Vaadin 8.2 ? Should I switch panels manualy? If so how can I detect the place mouse points to in the vertical layout?
dropTarget.addDropListener(event -> {
Optional<AbstractComponent> dragSource = event.getDragSourceComponent();
if (dragSource.isPresent() ) {
# I can remove dragged panel from layout using this code
fieldsLayout.removeComponent(dragSource.get());
## how to place dragged panel into proper place ??
}
});
Not sure if it's overkill, but in Vaadin 7 we always used the DragDropLayouts addon to simplify code.
We also used it in Vaadin 8 projects recently and it just works ;)
https://vaadin.com/directory/component/dragdroplayouts
Related
Is there a way to add more than 2 components in HorizontalSplit panel without nesting it?
Splitter position should be based on the space allocated for the component. There is nesting of horizontal split panel but the splitter position is not set based on the component visible space
If you want a separate resizable split area for each of those components, then no, you cannot do that with just one split panel and nesting is indeed the solution. If you are fine with just one split, then you can add a layout instead of a component and just keep inserting more components to the layout.
You can use splitPanel.setSplitPosition for adjusting the split position. If your desired split position isn't static and your contents don't have fixed sizes, you could possibly use a tool like SizeReporter add-on for querying the content sizes. Note that this will undeniably cause some flickering, because you need to add the component to the layout before you can measure its size.
A horizontal splitpanel allows one component on the left and one on the right side.
Nothing more
What do you want to achieve?
If you add two layouts to HorizontalSplit there is nothing stopping you in adding more than one component to those layouts. You can also add new SplitLayouts to existing splitlayouts if you want that.
I am trying to use the latest Vaadin Designer (v8) to layout a bunch of controls in an absolute layout. I also have a horizontal layout that is on the same layout.
My problem is I just want to move a label to an absolute x,y position within absolute layout. I know I can achieve this by hand or by nudging the label to the x,y I want with the arrow keys. When I try to drag it onto the layout however this happens.
Perhaps there is no way to do this. I was thinking there should be a feature like holding down alt-key while dragging keeps the control within its current layout?
You are completely right. You can achieve it by using arrow key or Position property (if you are in an AbsoluteLayout) but currently, there is no way to do that by dragging the components.
Whenever you drag some components over a layout, it will be always hooked into that layout.
Your suggestion about using ALT-key to avoid this problem is very nice. The team would very much appreciate if you can fill in an issue (https://github.com/vaadin/designer/issues/new) as a feature request/improvement which we can consider later on.
In Windows I can put several controls into a panel/container such as a Grid, StackPanel, or WrapPanel. In Android I put the controls into a RelativeLayout, LinearLayout, etc. Then I can hide the panel or disable the panel and all the controls within are hidden or disabled. Changing child controls can be laid out relative to the panel and so changes to the panel position actually move the child controls.
I am having a difficult time figuring out what the similary concept would be for iOS.
Since iOS 9 is available UIStackView (documented here: https://developer.apple.com/reference/uikit/uistackview). I really recommend for your purpose. For grid layout you can make UIStackView full of other UIStackViews.
Also UIStackView handle rotations and can easily handle animations: https://medium.com/#nrewik/easy-animation-with-uistackview-8878b2856ae2#.l9g3me214
I have 4 cxgrid into a cxTabSheet, 3 aligned albottom and 1 aligned alClient...
When the mouse is over the edge of any cxgrid, the cursor mouse doesn´t change to the crSize(NS, WE, NESW, NWSE) and cannot select the border of grid for drag the mouse and resize it.
How can I do this?
The easiest way to do this, without writing any code, is to use one or more splitters on your form: see TSplitter and the Devex custom version, TcxSplitter, in the online help.
To use, place one or more splitters on the form orientated to allow resizing of the grid(s) as you wish, then place the grids on the appropriate areas of the splitters, or on panels on the splitters. One splitter can be placed inside another, so that you can have one resizable area inside another.
I am using dhtmlx framework. I want to design an interface such like,
overlapping of one view on the other view when I click on tab. It is some thing like in the Visual Studio we have "sourceControl" and "TeamExplorer" in the rightmost with vertical direction.
When I click on the Source control that is expanded and overlap on the existing page, and that expanded view we can scroll the width. I used dhtmlx tabs and I have to implement the same operation.
How can I do this?
The part of Visual Studio UI that you described is similar to dhtmlxWindows. And you can use Tabbar for vertical tabs, but you should disable content zone for it:
tabbar.enableContentZone(false);