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());
Related
I want to know the object that was selected in the ListBox in Gwt.
The "bookNames" is a Map.
I want to know which cell in the ListBox was chosen by user and use it.
ListBox books = new ListBox();
final ListBox chapters = new ListBox();
for(i=0;i<bookNamesString.length;i++) // put books map into listbox (Map Starts from 1)
books.addItem(bookNames.get(i+1));
books.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
int i;
for(i=0;i<bookChapters.length;i++)
{
chapters.addItem("Chapter" + (i+1));
}
}
});
You can do:
String selectedChapter = bookNames.get(chapters.getSelectedIndex() - 1);
I want to know urgently how to get widget from gwt VerticalPanel that was occured clickEvent.
I have a verticalPanel with on or more sub-Widgets (FlexTables). I want to use FlexTable.getCellForEvent(event).getRowIndex(); method. So , firstly I should get FlexTable widget from VerticalPanel firstly. I want to add addClickHandler or DomHandler on this VerticalPanel and when user click on it , I want to retrieve FlexTable widget that userclicked. But I don't want to iterate on verticalPanel and add ClickHandler on each FlexTable widgets. How to develop them ? Any Suggestions would be appreciated. Thanks in advance for careful of my question..
You can get it by ClickEvent event
public void onClick(final ClickEvent event) {
VerticalPanel vp = (VerticalPanel) event.getSource();
Iterator<Widget> vp = verP.iterator();
while (vPanelWidgets.hasNext()){
Widget childWidget = vPanelWidgets.next();
if (childWidget instanceof FlexTable) {
...do stuff with childWidget
}
}
}
Really my page show list of FlexTables embedded in VerticalPanel. These flexTables were inserted dynamically and there has checkbox in first columns. My trouble is , when users click on any tables and I want to set checkbox in that row to select. When the users click again in it , the checkbox in that row will unchecked. Here my codes.....
view.getResultPanel().addDomHandler(new ClickHandler() {
public void onClick(final ClickEvent event) {
VerticalPanel vpanel = (VerticalPanel) event.getSource();
for (int i = 0; i < vpanel.getWidgetCount(); i++) {
Widget childWidget = vpanel.getWidget(i);
if (childWidget instanceof FlexTable) {
FlexTable table = (FlexTable) childWidget;
if (table.getCellForEvent(event) != null) { // that will avoid invalid table (that not clicked )
int currentRowIndex = table.getCellForEvent(event).getRowIndex();
Element elem = table.getCellFormatter().getElement(currentRowIndex, 0);
if ("td".equalsIgnoreCase(elem.getTagName())) {
elem = elem.getFirstChildElement();
}
if ("center".equalsIgnoreCase(elem.getTagName())) {
elem = elem.getFirstChildElement();
}
boolean isChecked = false;
if ("".equalsIgnoreCase(elem.getAttribute("checked"))) {
elem.setAttribute("checked", "on");
isChecked = true;
}
else if ("on".equalsIgnoreCase(elem.getAttribute("checked"))) {
elem.removeAttribute("checked");
}
if (isChecked) {
// Do Something
}
}
}
}
}
}, ClickEvent.getType());
At UI view... I create this checkbox like that ..
flxResultTable.setHTML(0, 0, "<center><input type = 'checkbox'/></center>");
Ok, let say, you got a label, you got a VerticalPanel that has many labels on it. See this code:
// Make the widget draggable.
Label w = new Label("OutSide Label");
w.getElement().setDraggable(Element.DRAGGABLE_TRUE);
// Add a DragStartHandler.
w.addDragStartHandler(new DragStartHandler() {
#Override
public void onDragStart(DragStartEvent event) {
// Required: set data for the event.
event.setData("text", "Hello World");
// Optional: show a copy of the widget under cursor.
event.getDataTransfer().setDragImage(w.getElement(), 10, 10);
}
});
VerticalPanel vp=nw VerticalPanel();
vp.add(new Label("l1");
vp.add(new Label("l2");
vp.add(new Label("l3");
vp.addDomHandler(new DragOverHandler() {
public void onDragOver(DragOverEvent event) {
vp.getElement().getStyle().setBackgroundColor("#ffa");
}
}, com.google.gwt.event.dom.client.DragOverEvent.getType());
vp.addDomHandler(new DropHandler() {
#Override
public void onDrop(com.google.gwt.event.dom.client.DropEvent event) {
// TODO Auto-generated method stub
event.preventDefault();
// Get the data out of the event.
String data = event.getData("text");
//Window.alert(data);
/// WE NEED TO FILL IN THE MISSING CODE HERE
/// WE NEED TO FILL IN THE MISSING CODE HERE
}
}, DropEvent.getType());
how to code so that when user drag the outside label into the area of VerticalPanel, if the outside label was dragged between the existing widgets, it will be inserted into the between of existing labels on VerticalPanel, Ex if the outside label was drag between "l1" & "l2", the vp will show:
l1
OutSide Label
l2
l3
Something like the following should theoretically work, although not tested:
p.addDomHandler(new DropHandler() {
#Override
public void onDrop(DropEvent event) {
// Get the target event.
EventTarget eventTarget = event.getNativeEvent().getEventTarget();
// Safe check for casting to Element.
if (Element.is(eventTarget)) {
Element elementTarget = Element.as(eventTarget);
// Loop through VerticalPanel's children to find our target.
for (int i = 0; i < p.getWidgetCount(); ++i) {
if (p.getWidget(i).getElement().isOrHasChild(elementTarget)) {
// Insert a new Label with the DataTransfer's data,
// and remove the old one.
p.insert(new Label(event.getData("text")), i);
oldLabelContainer.remove(oldLabel);
break;
}
}
}
}
}, DropEvent.getType());
Of course, if you have a lot of labels that loop should be avoided.
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 building an application in GWT. I have a decorated tabpanel in
my application.Where in am adding panels to it dynamically.Now i want
to achieve the closing of these tabs. I want to add a close image to
the tab bar and event to that image for closing. I am using UIbinder.
the working code is like that;
private Widget getTabTitle(final Widget widget, final String title) {
final HorizontalPanel hPanel = new HorizontalPanel();
final Label label = new Label(title);
DOM.setStyleAttribute(label.getElement(), "whiteSpace", "nowrap");
ImageAnchor closeBtn = new ImageAnchor();
closeBtn.setResource(images.cross());
closeBtn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int widgetIndex = tabs.getWidgetIndex(widget);
if (widgetIndex == tabs.getSelectedIndex()) {
tabs.selectTab(widgetIndex - 1);
}
tabs.remove(widgetIndex);
}
});
hPanel.add(label);
hPanel.add(new HTML("   "));
hPanel.add(closeBtn);
hPanel.setStyleName("gwt-TabLayoutPanelTab");
return hPanel;
}
In order to add tab,
public void addTab() {
TabWriting tw = new TabWriting(); /* TabWriting in my case, this can be any widget */
tabs.add(tw, getTabTitle(tw, "Writing"));
tabs.selectTab(tw);
}
You'll going to need, ImageAnchorClass
public class ImageAnchor extends Anchor {
public ImageAnchor() {
}
public void setResource(ImageResource imageResource) {
Image img = new Image(imageResource);
img.setStyleName("navbarimg");
DOM.insertBefore(getElement(), img.getElement(), DOM
.getFirstChild(getElement()));
}}
It isn't supported natively in GWT.
You can manually try to add it.
Read this - http://groups.google.com/group/google-web-toolkit/browse_thread/thread/006bc886c1ccf5e1?pli=1
I haven't tried it personally, but look at the solution by gregor (last one).
You kinda need to do something along the lines of this
GWT Close button in title bar of DialogBox
First you need to pass in the tab header when you create the new tab. The header you pass in should have your tab text and also an X image or text label to click on. Then add a event handler on the close object that gets the widget you are adding to the tabPanel and removes it. Here is some inline code that works
public void loadTab(final Widget widget, String headingText, String tooltip) {
HorizontalPanel panel = new HorizontalPanel();
panel.setStyleName("tabHeader");
panel.setTitle(tooltip);
Label text = new Label();
text.setText(headingText);
text.setStyleDependentName("text", true);
Label close = new Label();
close.setText("X");
close.setTitle(closeText_ + headingText);
text.setStyleDependentName("close", true);
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("close this tab");
ClientGlobal.LOG.info("widget : " + tabPanel_.getWidgetIndex(widget));
tabPanel_.remove(tabPanel_.getWidgetIndex(widget));
}
});
panel.add(text);
panel.add(close);
panel.setCellHorizontalAlignment(text, HasHorizontalAlignment.ALIGN_LEFT);
panel.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_RIGHT);
tabPanel_.add(widget, panel);
tabPanel_.getTabWidget(widget).setTitle(tooltip);
tabPanel_.selectTab(widget);
}