I created the follow grid of label that i want thme to be draggable:
public static Grid setLabels (String [] str){
Label [] lbl = new Label [str.length];
Grid grid = new Grid(5,1);
CellFormatter cellFormatter = grid.getCellFormatter();
for(int i=0; i<str.length; i++){
lbl[i] = new Label();
lbl[i].setText(str[i]);
DraggableWidget<Label> draggableLabel = new DraggableWidget<Label>(lbl[i]);
draggableLabel.setRevert(RevertOption.ON_INVALID_DROP);
draggableLabel.setDraggingZIndex(100);
draggableLabel.setDraggingCursor(Cursor.MOVE);
grid.setWidget(i, 0, draggableLabel);
cellFormatter.setHeight(i, 0, "50px");
}
return grid;
}
Then the grid is added on a Panel. Everything is displayed ok.
Then I create a dropable widget.
public static void createDND(){
final Label moveHere = new Label("Move here!");
DroppableWidget<Label> dnd1 = new DroppableWidget<Label>(moveHere);
dnd1.addDropHandler(new DropEventHandler() {
public void onDrop(DropEvent event) {
Widget droppedLabel= event.getDraggableWidget();
moveHere.setText("");
}
});
dndPanel1.add(dnd1);
}
But the labels cannot be dragged and dropped. I feel sth is missing but I can't figure out what.
I would say go NATIVE and make use of GWT HTML5 Drag and Drop support. You also have a sample project set up in GWT source code samples.
Demo - http://gwt-cloudtasks.appspot.com/
Also Refer - Drag and Drop in GWT 2.4
Related
I have a Filter Grid component similar to the icon below. What I want is to add a Select All functionality in the columns section of the header. I've done my research but I can't find any kind of solution. Not even a direction. I want to be able to attach a handler to that checkbox that will check/uncheck all of the below options.
The module in question
I'm using Sencha GXT 3.1.0 and and GWT 2.6.1
The icon
Here's how to do this , override createContextMenu of the GridView
ColumnModel<HashMap> cm = new ColumnModel<HashMap>(l);
GridView<HashMap> gridView = new GridView<HashMap>()
{
#Override
protected void initHeader()
{
super.initHeader();
}
protected Menu createContextMenu(final int colIndex)
{
Menu createContextMenu = super.createContextMenu(colIndex);
final CheckMenuItem check = new CheckMenuItem();
check.setHideOnClick(false);
check.setHTML("Toggle Selection");
check.setChecked(true);
check.addCheckChangeHandler(new CheckChangeHandler<CheckMenuItem>()
{
#Override
public void onCheckChange(CheckChangeEvent<CheckMenuItem> event)
{
Window.alert("Toggle Selection");
}
});
createContextMenu.add(check);
return createContextMenu;
}
};
Grid grid = new Grid(store, cm, gridView);
I have a for loop that displays a list of text fields and radio buttons.
What is the best way to reference the widgets so that I can read the text fields and aslo find which radio button is checked.
Here is my loop
for(int x = 0; x<getLoopCount(); x++)
{
answerTable.setWidget(x,0, new Label("Answer:"));
answerTable.setWidget(x,1, new TextBox());
answerTable.setWidget(x,2, new RadioButton(""));
}
Is there a way to ID each widget so I can reference it?
I would recommend grouping the three widgets together in a composite widget like this:
class AnswerComposite extends Composite {
private final Label label;
private final TextBox textBox;
private final RadioButton radioButton;
public AnswerComposite() {
label = new Label("Answer:");
textBox = new TextBox();
radioButton = new RadioButton("answerGroup");
HorizontalPanel contentPanel = new HorizontalPanel();
contentPanel.add(label);
contentPanel.add(textBox);
contentPanel.add(radioButton);
initWidget(contentPanel);
}
public String getText() {
return textBox.getValue();
}
public boolean isSelected() {
return radioButton.getValue();
}
}
You can then add them to a panel and/or put them in a list like this:
VerticalPanel answersPanel = new VerticalPanel();
List<AnswerComposite> answerComposites = new ArrayList<AnswerComposite>();
for (int i = 0; i < getLoopCount(); i++) {
AnswerComposite answerComposite = new AnswerComposite();
answersPanel.add(answerComposite);
answerComposites.add(answersComposite);
}
Checking your widgets then becomes very easy:
answerComposites.get(i).getText();
answerComposites.get(i).isSelected();
It will probably also be convenient to add a ValueChangeHandler to your RadioButtons (see enrybo's answer).
You can add a ValueChangeHandler to your RadioButton when you are creating them.
for(int x = 0; x<getLoopCount(); x++){
answerTable.setWidget(x,0, new Label("Answer:"));
answerTable.setWidget(x,1, new TextBox());
RadioButton rb = new RadioButton("");
rb.addValueChangeHandler(new ValueChangeHandler(){
#Override
void onValueChange(ValueChangeEvent<Boolean> event){
// Do something
}
});
answerTable.setWidget(x,2, rb);
}
The ValueChangeEvent will only be fired when the RadioButton is checked. It will not fire if another RadioButton in the same group is checked.
Since you're adding the ValueChangeHandler as you're creating your RadioButton you should know what is to be done with it without having to create an ID for it.
Let me give you an adhoc answer, so don't care about the syntax but the algorithmic idea.
Extend GWT button.
abstract class MyButton
extends Button{
// provide the appropriate constructor in impl class,
// especially if using uibinder
abstract public void helloDolly(... args ...);
}
Instantiate all those buttons using MyButton.
MyButton[] buttons = {
new MyButton(){
public void helloDolly(... args ...){
Window.alert("allo allo #1");
}
},
new MyButton(){
public void helloDolly(... args ...){
Window.alert("allo allo #2");
}
},
// blah blah black sheep ....
}
Use clickEvent.getSource() when defining handler.
buttons[i].addEventHandler(
new ClickHandler(ClickEvent click){
Object src = click.getSource();
if (src !instanceOf MyButton){
throw new MyAngryException("For goodness' sake, pls use MyButton");
// or ignore
return;
}
((MyButton)src).helloDolly(... args ...);
}
)
I am new to GXT 3, and am confused by the API. Perhaps you could clarify.
In Editor Grid, how do I catch and examine keyboard keys pressed inside a cell in focus?
Create your grid and pass it to GridEditing instance:
final GridEditing<MyType> ge = new GridInlineEditing<MyType>(grid);
// note: final Grid grid = new Grid(store, cm);
// note: ColumnModel cm = new ColumnModel(configs);
// note: List> configs = new ArrayList>();
Construct your ColumnConfig
ColumnConfig<MyType, String> kanji = new ColumnConfig<MyType, String>(kfgProps.kanji());
// note: kfgProps here extends PropertyAccess
Add your editor
ge.addEditor(kanji, text);
// note: text = new TextField();
Add your DomHandler
text.addDomHandler(new KeyDownHandler() {
#Override public void onKeyDown(KeyDownEvent event) {
if (KeyCodes.KEY_ENTER == event.getNativeEvent().getKeyCode()) {
// do whatever
}
}
}, KeyDownEvent.getType());
I would like to understand the options available to scrolling to a specific element in a CellList? Currently I have a 100 elements in the list and need to "jump" through the elements at the click of a button but can't seems to locate any methods on the celllist (or in the code) that provides this feature.
Any Ideas?
Many Thanks in advance,
Ian.
**EDIT
working code example below;
public class CellListTest implements EntryPoint {
private CellList<String> cellList;
private SingleSelectionModel<String> stringSingleSelectionModel;
/**
* This is the entry point method.
*/
public void onModuleLoad() {
cellList = new CellList<String>(new TextCell());
cellList.setRowData(buildStringList(200));
cellList.setKeyboardSelectionPolicy(HasKeyboardSelectionPolicy.KeyboardSelectionPolicy.BOUND_TO_SELECTION);
Button byTen = new Button("Jump Forward 10");
stringSingleSelectionModel = new SingleSelectionModel<String>();
cellList.setSelectionModel(stringSingleSelectionModel);
byTen.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
jumpForward(10);
}
});
byTen.setHeight("30px");
HTMLPanel htmlPanel = new HTMLPanel("");
VerticalPanel verticalPanel = new VerticalPanel();
cellList.setHeight("600px");
ScrollPanel scrollPanel = new ScrollPanel(cellList);
verticalPanel.add(byTen);
verticalPanel.add(scrollPanel);
htmlPanel.add(verticalPanel);
RootLayoutPanel.get().add(htmlPanel);
}
final Random random = new Random();
private List<String> buildStringList(int numberToCreate) {
final ArrayList<String> randomValues = new ArrayList<String>();
for (int i = 0; i < numberToCreate; i++) {
randomValues.add(String.valueOf(random.nextInt()));
}
return randomValues;
}
private int currentPosition = 0;
private void jumpForward(int toJump) {
Element rowElement = cellList.getRowElement(currentPosition += toJump);
rowElement.scrollIntoView();
}
}
I do not think CellList has a direct method for your purpose.
What you can do is use Element's scrollIntoView method. This method adjusts the scrollLeft and scrollTop properties of each scrollable element to ensure that the specified element is completely in view. In order to use that method you need to get the element containing the cell you want to show. One way to achive this is by using CellList public getRowElement(int indexOnPage).
I have not tryed it, but I believe the following code should work:
//Ensures cell 22 on page is shown
Element element = myCellList.getRowElement(22);
element.scrollIntoView();
Scrolling the element into view is one thing; changing the keyboard focus to a particular element is quite another. After much exploration, I have found that the best way to achieve that is to fire native events to simulate the user pressing keys.
private void hitKeyOnList(int keyCode) {
NativeEvent keyDownEvent = Document.get().createKeyDownEvent(
false, false, false, false, keyCode);
list.getElement().dispatchEvent(keyDownEvent);
}
In the above snippet, the list variable is a reference to a CellList.
So, to move the cursor to the end of the list, do this:
hitKeyOnList(KeyCodes.KEY_END);
to move the cursor to the next item down from the one that currently has keyboard focus:
hitKeyOnList(KeyCodes.KEY_DOWN);
This approach should work for all of these keys, which are handled by AbstractHasData:
KeyCodes.KEY_DOWN
KeyCodes.KEY_UP
KeyCodes.KEY_PAGEDOWN
KeyCodes.KEY_PAGEUP
KeyCodes.KEY_HOME
KeyCodes.KEY_END
I am attempting to create a simple application using Eclipse GEF that displays a diagram inside a ScrollingGraphicalViewer. On start-up I want the diagram to be centered inside the viewer (imagine a star layout where the center of the star is in the center of the view).
Here are what I think are the relevant code sections:
My view:
public class View extends ViewPart {
public static final String ID = "GEFProofOfConcept.view";
...
public void createPartControl(Composite parent) {
viewer.createControl(parent);
viewer.setRootEditPart(rootEditPart);
viewer.setEditPartFactory(editPartFactory);
viewer.setContents(DummyModelCreator.generateModel());
}
The edit part code:
#Override
protected void refreshVisuals() {
Project project = (Project) getModel();
// This is where the actual drawing is done,
// Simply a rectangle with text
Rectangle bounds = new Rectangle(50, 50, 75, 50);
getFigure().setBounds(bounds);
Label label = new Label(project.getName());
projectFont = new Font(null, "Arial", 6, SWT.NORMAL);
label.setFont(projectFont);
label.setTextAlignment(PositionConstants.CENTER);
label.setBounds(bounds.crop(IFigure.NO_INSETS));
getFigure().add(label);
setLocation();
}
private void setLocation() {
Project project = (Project) getModel();
if (project.isRoot()) {
// Place in centre of the layout
Point centrePoint = new Point(0, 0); // This is where I need the center of the view
getFigure().setLocation(centrePoint);
} else {
...
}
}
And the parent of the above edit part:
public class ProjectDependencyModelEditPart extends AbstractGraphicalEditPart {
#Override
protected IFigure createFigure() {
Figure f = new FreeformLayer();
f.setLayoutManager(new XYLayout());
return f;
}
...
Alternative solutions to the problem also welcome, I am most certainly a GEF (and Eclipse in general) newbie.
Worked it out, for anyone who's interested:
Dimension viewSize = (((FigureCanvas) getViewer().getControl()).getViewport().getSize());