Prototype library component for the select box options - select

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.

Related

Sort project browser tree view programmatically

I need to know how to set the order of elements shown in EA's project browser programmatically (in order to mimic the green arrows).
The tree view can not be sorted freely. EA puts a couple of constraints on the sorting. So diagrams, packages and a couple of other elements appear always on top and in groups. This is hard coded.
Use Element.TreePos to change the order where appropriate to simulate a manual order.
FWIW: Features have another queer behavior sometimes. You might need to uncheck the following in Tools/Options:

Scroll a panel using drag and drop 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.

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.

Dynamics AX Form Item Ordering

For the most part, AX forms seem to follow the AOT layout and appear in order. However, in some cases, the form items appear in seemingly arbitrary order, and in others, the items in the AOT won't even reorder. No matter how you drag and drop items in the AOT, they are always in the same order. This problem happened on occasion in AX 2009, but seems to be worse in AX 2012. The only way I've found to get around it is to drop the non-reordering items and recreate them.
Has anyone else had similar experiences? Anyone have a fix?
Ok, I've found that dragging and dropping only works part of the time. However, if you use ALT+the arrow keys to move items up and down in the hierarchy, that seems to work just fine.
The way I read your question it seems you are referring to control layout within a form. If your question is about something else please clarify.
To change form control layout you need to use AOT \Forms[FormName]\Designs\Design node. You can drag and drop controls and control groups.
If you drag a control (let's call it "dragControl") and drop it on top of another control (say "dropControl"), then dragControl will be placed after dropControl. This means that if you want to change the first control of a control group, you need to drag the first control, as dropping any control on top of the first one will place them after the first control.
Also make sure your form does not have changes is some higher layer that would override the changes you are making in a lower layer.
Does this answer your question?

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.