Adding list sub-editors to tab panel - gwt

I use ListEditor to allow editing list of chilren and I do everything just like I saw in some examples.The only difference from examples is that I want widgets editing children to be added as a tabs to some TabLayoutPanel.
The problem is that I want to give a header to this new tab and this header is not constant but depends on object being edited by newly created sub-editor (so let the header be child.getName()) which I don't know inside EditorSource#create() method.
ListEditor<ChildProxy, ChildPanel> children = ListEditor
.of(new EditorSource<ChildPanel>() {
#Override
public ChildPanel create(int index) {
ChildPanel tab = new ChildPanel();
//here's a problem, how I can get tabHeader here?
tabPanel.add(tab,tabHeader);
}
});
How can I set value-dependent headers to tabs created by create()? Any help/workaround would be greatly appreciated.

Does this approach work for you :
public class ChildrenEditor extends Composite implements
IsEditor<ListEditor<Child, ChildInTabEditor>> {
ListEditor<Child, ChildInTabEditor> editor;
public ChildrenEditor() {
initWidget(uiBinder.createAndBindUi(this));
editor = ListEditor.of(new ChildInTabEditorSource());
}
private class ChildInTabEditorSource extends EditorSource<ChildInTabEditor> {
public ChildInTabEditor create(int index) {
ChildInTabEditor tab = new ChildInTabEditor();
// here's the trick :
Child child = editor.getList().get(index);
tabPanel.add(tab,child.getTabTitle());
return tab;
}
}
#Override
public ListEditor<Child, ChildInTabEditor> asEditor() {
return editor;
}
}
ChildInTabEditor must be a Tab that implements Editor<Child> then too!

What worked for me was passing tabPanel and index to newly created ChildPanel() and make it ValueAwareEditor. Then on setValue() I was setting header on tabPanel reference at given index.

Related

How can I observe the changed state of model items in an ObservableList?

I have an ObservableList of model items. The model item is enabled for property binding (the setter fires a property changed event). The list is the content provider to a TableViewer which allows cell editing. I also intend to add a way of adding new rows (model items) via the TableViewer so the number of items in the list may vary with time.
So far, so good.
As this is all within an eclipse editor, I would like to know when the model gets changed. I just need one changed event from any changed model item in order to set the editor 'dirty'. I guess I could attach some kind of listener to each individual list item object but I wonder if there is a clever way to do it.
I think that I might have a solution. The following class is an inline Text editor. Changes to the model bean (all instances) are picked up using the listener added in doCreateElementObservable. My eclipse editor just needs to add its' own change listener to be kept informed.
public class InlineEditingSupport extends ObservableValueEditingSupport
{
private CellEditor cellEditor;
private String property;
private DataBindingContext dbc;
IChangeListener changeListener = new IChangeListener()
{
#Override
public void handleChange(ChangeEvent event)
{
for (ITableEditorChangeListener listener : listenersChange)
{
listener.changed();
}
}
};
public InlineEditingSupport(ColumnViewer viewer, DataBindingContext dbc, String property)
{
super(viewer, dbc);
cellEditor = new TextCellEditor((Composite) viewer.getControl());
this.property = property;
this.dbc = dbc;
}
protected CellEditor getCellEditor(Object element)
{
return cellEditor;
}
#Override
protected IObservableValue doCreateCellEditorObservable(CellEditor cellEditor)
{
return SWTObservables.observeText(cellEditor.getControl(), SWT.Modify);
}
#Override
protected IObservableValue doCreateElementObservable(Object element, ViewerCell cell)
{
IObservableValue value = BeansObservables.observeValue(element, property);
value.addChangeListener(changeListener); // ADD THIS LINE TO GET CHANGE EVENTS
return value;
}
private List<ITableEditorChangeListener> listenersChange = new ArrayList<ITableEditorChangeListener>();
public void addChangeListener(ITableEditorChangeListener listener)
{
listenersChange.remove(listener);
listenersChange.add(listener);
}
public void removeChangeListener(ITableEditorChangeListener listener)
{
listenersChange.remove(listener);
}
}

Eclipse plugin - is there any editable TreeSelection class

I am looking for a solution to make this tree selection editable in the package explorer view itself.
the idea
for example- if we click rename on any class in package explorer, it will prompt a new window to rename. This functionality is same for any class that implement TreeSelection Class.
But the Solution i am looking for is - when rename is invoked, the rename option is shown at the tree itself (like we have in Windows Explorer view)
any suggestion on how to attain this behavior on eclipse.
You don't need to have some special editable selection, you just want to make the tree editable. For this you use EditingSupport, like this (adapted from http://www.vogella.com/articles/EclipseJFaceTableAdvanced/article.html#jfacetable_editor):
public class NameEditingSupport extends EditingSupport {
private final TreeViewer viewer;
public FirstNameEditingSupport(TreeViewer viewer) {
super(viewer);
this.viewer = viewer;
}
#Override
protected CellEditor getCellEditor(Object element) {
return new TextCellEditor(viewer.getTree());
}
#Override
protected boolean canEdit(Object element) {
return true;
}
#Override
protected Object getValue(Object element) {
// return the name
}
#Override
protected void setValue(Object element, Object value) {
// update the name of your object
viewer.update(element, null);
}
}
// in the code creating the tree
treeViewer.setEditingSupport(new NameEditingSupport(treeViewer));

Wicket - changing panels through a dropdown

I have a dropdown component added on a page. the purpose of this dropdown is to change the type of input form that is rendered. for example, different forms have different required fields, editable fields, etc.
public final class Test extends WebPage
{
CustomPanel currentPanel = new MeRequest("repeater",FormType.MIN);
public Test(PageParameters parameters)
{
add(currentPanel);
DropDownChoice ddc = new DropDownChoice("panel", new PropertyModel(this, "selected"), panels, choiceRenderer);
ddc.add(new AjaxFormComponentUpdatingBehavior("onchange") {
protected void onUpdate(AjaxRequestTarget target) {
System.out.println("changed");
currentPanel = new MeRequest("repeater",FormType.PRO);
target.add(currentPanel);
}
});
add(ddc);
}
i've tried various options with limited results. the only real success has been updating the model, but what i really want to do is change how the components behave.
any thoughts on what i'm missing?
1) If you want to replace one panel with another you may just do the following.
First of all, you should output the markup id of the original panel:
currentPanel.setOutputMarkupId(true);
And then in the ajax event handler write something like that:
protected void onUpdate(AjaxRequestTarget target) {
CustomPanel newPanel = new MeRequest("repeater", FormType.PRO);
currentPanel.replaceWith(newPanel);
currentPanel = newPanel;
currentPanel.setOutputMarkupId(true);
target.addComponent(currentPanel);
}
In this case with every change of dropdown choice you add new panel to the page and you remove old panel from the page.
2) But I would proposed a slightly different approach to your problem. You should move the construction logic of your panel to the onBeforeRender() method:
public class MeRequest extends Panel {
private FormType formType;
public MeRequest(String id, FormType formType) {
super(id);
this.formType = formType;
// don't forget to output the markup id of the panel
setOutputMarkupId(true);
// constructor without construction logic
}
protected void onBeforeRender() {
// create form and form components based on value of form type
switch (formType) {
case MIN:
// ...
break;
case PRO:
// ...
break;
}
// add form and form components to panel
addOrReplace(form);
form.add(field1);
form.add(field2);
// ...
super.onBeforeRender();
}
public void setFormType(FormType formType) {
this.formType = formType;
}
}
Then you'll be able to only change type of the panel in the ajax event:
protected void onUpdate(AjaxRequestTarget target) {
currentPanel.setFormType(FormType.PRO);
target.addComponent(currentPanel);
}
Thus we rebuilt the original panel without recreating it.

GWT Header checkbox to check / uncheck all checkboxes in my table

I´ve created an CellTable with the Google Web Toolkit.
I just started using it and my knowledge about it is very small...
However I was searching for a tutorial or just a code example of how to create a checkbox in the CellTable header but everythin I´ve found I didn´t understand or it didn´t worked.
So far I´ve got this code to create a Column for checkboxes and a normal table mostly the same as the Google tutorial for a CellTable:
Column<Contact, Boolean> checkColumn = new Column<Contact, Boolean>(
new CheckboxCell(true, false)) {
#Override
public Boolean getValue(Contact contact) {
return null;
}
};
table.addColumn(checkColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));
table.setColumnWidth(checkColumn, 40, Unit.PX);
Now I´m searching for the code to add a checkbox to the header and how to make it check or uncheck all checkboxes.
Thanks for your time.
From my blog post:
Here is a simple column header that selects/ de-selects all rows in a table. When all rows are checked, the header becomes checked automatically. Clicking the checkbox in the header causes either to select or de-select all rows.
I am using the selection model and the data list provider to do the selection magic. It may not work for everyone.
And here is my custom header:
public final class CheckboxHeader extends Header {
private final MultiSelectionModel selectionModel;
private final ListDataProvider provider;
public CheckboxHeader(MultiSelectionModel selectionModel,
ListDataProvider provider) {
super(new CheckboxCell());
this.selectionModel = selectionModel;
this.provider = provider;
}
#Override
public Boolean getValue() {
boolean allItemsSelected = selectionModel.getSelectedSet().size() == provider
.getList().size();
return allItemsSelected;
}
#Override
public void onBrowserEvent(Context context, Element elem, NativeEvent event) {
InputElement input = elem.getFirstChild().cast();
Boolean isChecked = input.isChecked();
for (TYPE element : provider.getList()) {
selectionModel.setSelected(element, isChecked);
}
}
}
See http://code.google.com/p/google-web-toolkit/issues/detail?id=7014

How to auto scroll GWT SuggestBox with max-height and overflow-y: scroll?

How can I auto scroll the GWT SuggestBox with max-height set on the PopupPanel holding the SuggestBox? Currently when the user presses keyboard up keys and down keys styles changes on the suggested items and pressing enter will select the currently selected item on the list.
When the item is located in lower than the max-height scroll bars doesn't scroll.
I tried extending the SuggestBox and inner class DefaultSuggestionDisplay to override moveSelectionDown() and moveSelectionUp() to explicitly call popup.setScrollTop().
In order to do this I need access to the absolute top of the currently selected MenuItem therefore need access to SuggestionMenu which is also an inner class of SuggestBox which is private and declared as a private member within DefaultSuggestionDisplay without getter. Since GWT is a JavaScript we can't use reflection to access it.... Does anyone have a workaround for this issue?
Thanks.
I've been searching around and couldn't find a proper solution (apart from reimplementing SuggestBox). The following avoids reimplementing SuggestBox:
private static class ScrollableDefaultSuggestionDisplay extends SuggestBox.DefaultSuggestionDisplay {
private Widget suggestionMenu;
#Override
protected Widget decorateSuggestionList(Widget suggestionList) {
suggestionMenu = suggestionList;
return suggestionList;
}
#Override
protected void moveSelectionDown() {
super.moveSelectionDown();
scrollSelectedItemIntoView();
}
#Override
protected void moveSelectionUp() {
super.moveSelectionUp();
scrollSelectedItemIntoView();
}
private void scrollSelectedItemIntoView() {
// DIV TABLE TBODY TR's
NodeList<Node> trList = suggestionMenu.getElement().getChild(1).getChild(0).getChildNodes();
for (int trIndex = 0; trIndex < trList.getLength(); ++trIndex) {
Element trElement = (Element)trList.getItem(trIndex);
if (((Element)trElement.getChild(0)).getClassName().contains("selected")) {
trElement.scrollIntoView();
break;
}
}
}
}
Following this discussion on Google groups, I implemented a similar solution which is a bit more concise due to the use of JSNI:
private class ScrollableDefaultSuggestionDisplay extends DefaultSuggestionDisplay {
#Override
protected void moveSelectionDown() {
super.moveSelectionDown();
scrollSelectedItemIntoView();
}
#Override
protected void moveSelectionUp() {
super.moveSelectionUp();
scrollSelectedItemIntoView();
}
private void scrollSelectedItemIntoView() {
getSelectedMenuItem().getElement().scrollIntoView();
}
private native MenuItem getSelectedMenuItem() /*-{
var menu = this.#com.google.gwt.user.client.ui.SuggestBox.DefaultSuggestionDisplay::suggestionMenu;
return menu.#com.google.gwt.user.client.ui.MenuBar::selectedItem;
}-*/;
}
Ok, I finally found the solution. I had to create my own suggest box based on GWT SuggestBox implementations. But follow below in custom implementaion:
-Place ScrollPanel to PopupPanel then place MenuBar to ScrollPanel
-In moveSelectionUp() and moveSelectionDown() of your new internal SuggestionDisplat implementation add the code below:
panel.ensureVisible( menu.getSelectedItem( ) );
This is not achievable by extending the SuggestBox since we won't have access to selected
MenuItem unless overriding protected getSelectionItem() method as public method.
Finally add CSS:
max-height: 250px;
To the popupPanel in your display implementations.