Scroll a panel using drag and drop gwt - gwt

I am trying to scroll a panel by mouse. I looked over drag and drop and I can`t figure out if it is possible using drag events to scroll a panel or is it better using mouse move event, mouse over and mouse out etc.
Any ideas would be appreciated.

Although modern GWT supports DnD, its implementation is not so good, so it is better that you select one 3party library for that. You have gwt-dnd or gwtquery-dnd-plugin. IMO the second one is easier to use and much more powerful.
But I dont think DnD can help you to move the scroll, since it is designed to move all the draggable element and drop over another one.
Maybe what you need is something similar to the scrollwidget in mgwt, it is designed for mobile devices, but it has an implementation for desktop, so hopefully you could either use the library or copy the approach to your implementation.

Just in case you will use gwtquery, keep in mind that it's out of date. So, you will need to put the newest jquery and jquery-ui libraries into the corresponding jar and edit the gwt.xml files accordingly. It's not a big deal, but otherwise you would put your code under the risk of misfunction in newer browsers. By the way, it depends on the usage you would make of jquery-like functionality.

Related

How to implement a image list control with SWT?

Does anybody have any idea on how to easily implement a image list(like the windows explorer with medium icons) control with swt? it seems like that it could be done easily with CListCtrl in c++ on windows, but does not seem to be easy with swt? any hints are appreciated!
Up to me, you need to create your own widget (check e.g. http://www.snip2code.com/Snippet/11489/Custom-SWT-List-Box) and add composite items to your custom list.
If vertical-only scrolling is enough, I suggest you rely on a single column TableViewer. This is what I did in a project where I needed a gallery-like window allowing the user to pick a graphical component based on displayed thumbnails.
You just need to implement the proper TableLabelProvider.getColumnImage and return the desired thumbnail corresponding to your list entry.
That gives a pretty decent list-like rendering.
In addition, TableViewer API is very well documented.

SWT Tree with columns - resizing columns by dragging line

I have a multi-column tree that I really don't want to show column headers (they provide no valuable information in my case and make the layout unnecessarily busy). Unfortunately, I really need to have resizable columns.
How can I make the columns resizable by dragging lines between them?
SWT uses native widgets and this isn't native behavior (at least on platforms that I am familiar with), so there is no built-in mechanism in SWT for doing what you are after. You should be able to simulate this yourself by tracking mouse events, managing the mouse cursor and calling TreeColumn.setWidth() when appropriate.

Prototype library component for the select box options

An UI question...
There are two select boxes between which there are two buttons "<<" and ">>". When you hit the "<<" button the selected items from the select item on the right moves to the left and similarly from left to right ">>". I am not sure what this kind of set up is called in terms of or jargon or terminology ;)
I wanted to know if there is a prototype component like this existing already? or an optimized way of doing this with Prototype library?
Thanks, J
There is no fixed terminology of your required UI problem, so far to my knowledge. Still you may call it as "Moving selected Items from one Listbox to another".
For reference, you can see this example, which is built using plain JavaScript.
Also I am pretty sure that there is some way to build this type of functionality using Prototype & Scriptaculous libraries, along with the effects. You will require the "Sortables" object, most probably.
Hope it helps.

Left-aligned tabs in GWT

I have a project in which I need a way to display essentially a list of tabs, each with their own content pages, down the left side of the page. I'm using TabLayoutPanels elsewhere to good effect, but after looking at how they are constructed it seems like it would be quite a bit of work to undo Google's carefully constructed layout and get it to work in any other orientation than top-aligned.
This doesn't seem like it would be an uncommon layout, so does anyone know of a successful implementation of this kind of container?
Best you can do is use DeckPanel, and make your custom tab controls to switch visible widget in that DeckPanel.

Arrange GUI elements in WPF in a similar way to the applications on the iPhone

I would like to arrange UIControls in WPF in a similar way to the applications on the iPhone. They should be positioned on a grid, but a user should be able to drag them somewhere else, after releasing the mouse button (or the finger in case of an iPhone) the selected UIControl should snap back to the next position in the grid. The other UIElements should be rearranged automatically.
Further the user should also be connect two elements with a line or something.
I'm not experienced with WPF. The first question is if there is a container which is suitable for something (System.Windows.Controls.Grid ?) or if I have to extend canvas or somethig else for this.
I would like to know which elements from the WPF framework can be used and which elements I have to write myself.
For people who do not own an iPhone: http://www.youtube.com/watch?v=3omhu2AUWC8
Update
I've looked at AnimatedTilePanel in the BangOTricks examples (see below), this one explains how to create your own Panel and how to let it arrange things there.. However I still need an idea how to implement drag and drop correctly in this example..
Unfortunately, you'll have to write a lot of things yourself, as WPF doesn't automatically do what you're looking for.
For positioning the controls, you can use either UniformGrid or Grid. Assuming it's much like the iPhone video you showed, you can just use the UniformGrid with 4 columns and however many rows you need.
For the dragging animation, layout-wise, you could start by manipulating the RenderTransform property on whatever is being dragged, but you'll have to set a handler to check once you've met whatever threshold necessary to move into the another "cell" -- and at that point, you'll have to changed the order of the items in the tree.
Take a look at AnimatedTilePanel from Kevin's Bag-o-Tricks at:
http://j832.com/bagotricks/
It doesn't do everything you want but it will show you how to write a panel that animates its children when changing size or order.
New input to this old post in 09. Earlier this year (2012) someone has wrote a FluidWrapPanel and open sourced it. I tried it and it works like a charm - just like that on the iPhone menu.
You can also apply to other UI Elements or UserControl.