PDA

View Full Version : Form Binding different classes



jlanzac
11 Sep 2009, 9:29 AM
Hi all,

I'm facing a quite strange problem. I'm newbie to this environment.

The problem I have is with FormBindings. Following the examples in the Ext GWT Explorer I manage to get Grid Binding to work.

The problem has arisen when I have changed it. I want the grid to be in its own class and the form in its own (GridLayout and FormLayout). I have enabled the required getters for the grid and the from. In the third one, the main panel, I create a MyGrid and MyForm class. Then by using the getters I get the instances of both the grid and the form, to be used in the binding.

However, in the "class" split based example it doesn't work. The select event is triggered and the actual values are retrieved, but I don't know why the text doesn't display in the form.

Both examples are included in the code below, by running with localVersion (the one working) or classVersion. The onModuleLoad is:



ContentPanel mainPanel = new ContentPanel();
mainPanel.setBodyBorder(false);
mainPanel.setHeading("Locate People");

HorizontalPanel hpanel = new HorizontalPanel();
hpanel.add(new UsersPanel());
mainPanel.add(hpanel, new FlowData(0));

RootPanel.get().add(mainPanel);


Is is because both are grid and form are created in different classes??

TA

Here is the code:
UsersPanel :


public class UsersPanel extends LayoutContainer {

FormPanel form;
Grid<Person> grid;

protected void onRender(Element parent, int index) {
super.onRender(parent, index);
// localVersion();
classVersion();

}


private void classVersion() {
ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Users Information");
cp.setLayout(new RowLayout(Orientation.VERTICAL));

EditableTablePanel editTable = new EditableTablePanel();
UserPropertiesPanel userProperties = new UserPropertiesPanel();

//Generate bindings between panels
FormPanel f = userProperties.getForm();
final FormBinding formBindings = new FormBinding(userProperties.getForm(), true);
Grid<Person> g = editTable.getGrid();
g.getSelectionModel().addListener(Events.SelectionChange,
new Listener<SelectionChangedEvent<Person>>() {

public void handleEvent(SelectionChangedEvent<Person> be) {
if (be.getSelection().size() > 0) {
ModelData a = be.getSelection().get(0);
Person b = (Person) a;
int c = b.getAge();
formBindings.bind((ModelData) be.getSelection().get(0));
} else {
formBindings.unbind();
}
}
});

cp.add(editTable, new RowData(-1, 1, new Margins(0)));
cp.add(userProperties, new RowData(-1, 1, new Margins(0)));
add(cp);
}

private void localVersion() {
ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Users Information");
cp.setLayout(new RowLayout(Orientation.VERTICAL));

LayoutContainer gridPanel = createUsersGridPanel();
LayoutContainer formPanel = createUserPropertiesPanel();

final FormBinding formBindings = new FormBinding(form, true);
grid.getSelectionModel().addListener(Events.SelectionChange,
new Listener<SelectionChangedEvent<Person>>() {

public void handleEvent(SelectionChangedEvent<Person> be) {
if (be.getSelection().size() > 0) {
formBindings.bind((ModelData) be.getSelection().get(0));
} else {
formBindings.unbind();
}
}
});

cp.add(gridPanel, new RowData(-1, 1, new Margins(0)));
cp.add(formPanel, new RowData(-1, 1, new Margins(0)));
add(cp);

}

private ContentPanel createUsersGridPanel() {

// Create each column
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

final CheckBoxSelectionModel<Person> sm = new CheckBoxSelectionModel<Person>();

configs.add(sm.getColumn());

// Column Name
ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Name");
column.setWidth(220);

TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
//column.setEditor(new CellEditor(text));
configs.add(column);

// Column Position
column = new ColumnConfig();
column.setId("position");
column.setHeader("Position");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(70);
configs.add(column);

// Column Color
GridCellRenderer<Person> buttonRenderer = new GridCellRenderer<Person>() {

private boolean init;

public Object render(final Person model, String property, ColumnData config, final int rowIndex,
final int colIndex, ListStore<Person> store, Grid<Person> grid) {
if (!init) {
init = true;
grid.addListener(Events.ColumnResize, new Listener<GridEvent<Person>>() {

public void handleEvent(GridEvent<Person> be) {
for (int i = 0; i < be.getGrid().getStore().getCount(); i++) {
((Button) be.getGrid().getView().getWidget(i, be.getColIndex())).setWidth(be.getWidth() - 10);
((Button) be.getGrid().getView().getWidget(i, be.getColIndex())).setHeight(be.getHeight() - 30);
}
}
});
}

Button b = new Button((String) model.get(property), new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
Info.display(model.getName(), "<ul><li>" + model.getColor() + "</li></ul>");
}
});
b.setWidth(grid.getColumnModel().getColumnWidth(colIndex) - 10);
b.setToolTip("Click to change user color");

return b;
}
};

column = new ColumnConfig();
column.setId("color");
column.setHeader("Color");
column.setWidth(130);
column.setRenderer(buttonRenderer);
configs.add(column);

CheckColumnConfig checkColumn = new CheckColumnConfig("display", "Display?", 55);
CellEditor checkBoxEditor = new CellEditor(new CheckBox());
checkColumn.setEditor(checkBoxEditor);
configs.add(checkColumn);

final ListStore<Person> store = new ListStore<Person>();

ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setHeading("Users in building");
cp.setFrame(true);
// cp.setIcon(Examples.ICONS.table());
cp.setSize(400, 100);
cp.setLayout(new FitLayout());
cp.setCollapsible(true);


grid = new Grid<Person>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
grid.addPlugin(checkColumn);
grid.setSelectionModel(sm);
// grid.setClicksToEdit(EditorGrid.ClicksToEdit.TWO);

cp.add(grid);

ToolBar toolBar = new ToolBar();
Button add = new Button("Add user", domEntryPoint.ICONS.add());
add.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
Person person = new Person();
person.setName("User 1");
person.setPosition("(0,0)");
person.setDisplay(true);
person.setColor("Black");
person.setAge(Random.nextInt(50));

// grid.stopEditing();
store.insert(person, 0);
// grid.startEditing(0, 0);

}
});
toolBar.add(add);

Button delete = new Button("Remove user", domEntryPoint.ICONS.delete());
delete.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
List<Person> selection = sm.getSelectedItems();
for (Person item : selection) {
store.remove(item);
}

// grid.stopEditing();
// store.insert(person, 0);
// grid.startEditing(0, 0);

}
});
toolBar.add(delete);

cp.setTopComponent(toolBar);
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.addButton(new Button("Reset", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
store.rejectChanges();
}
}));

cp.addButton(new Button("Save", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
store.commitChanges();
}
}));

//add(cp);

return cp;
}

private ContentPanel createUserPropertiesPanel() {
ContentPanel cp = new ContentPanel();

cp.setHeading("User Properties");
cp.setFrame(true);
cp.setWidth(400);
cp.setHeight(50);
cp.setLayout(new RowLayout(Orientation.HORIZONTAL));
cp.setCollapsible(true);

form = createForm();
cp.add(form, new RowData(1, 1));

return cp;
}

private FormPanel createForm() {
FormPanel panel = new FormPanel();
panel.setHeaderVisible(false);

TextField<String> name = new TextField<String>();
name.setName("name");
name.setFieldLabel("Name");
panel.add(name);

TextField<String> age = new TextField<String>();
age.setName("age");
age.setFieldLabel("Age");
panel.add(age);

TextField<String> email = new TextField<String>();
email.setName("email");
email.setFieldLabel("Email");
panel.add(email);

TextField<String> picture = new TextField<String>();
picture.setName("email");
picture.setFieldLabel("Email");
panel.add(picture);

return panel;
}
}




UserProperties



public class UserPropertiesPanel extends LayoutContainer {

private FormPanel form;

public UserPropertiesPanel() {
form = createForm();
}

public FormPanel getForm() {
return form;
}

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);

ContentPanel cp = new ContentPanel();

cp.setHeading("User Properties");
cp.setFrame(true);
cp.setWidth(400);
cp.setHeight(170);
cp.setLayout(new RowLayout(Orientation.HORIZONTAL));
cp.setCollapsible(true);

form = createForm();
cp.add(form, new RowData(1, 1));

add(cp);
}

private FormPanel createForm() {
FormPanel panel = new FormPanel();
panel.setHeaderVisible(false);

TextField<String> name = new TextField<String>();
name.setName("name");
name.setFieldLabel("Name");
panel.add(name);

TextField<String> age = new TextField<String>();
age.setName("age");
age.setFieldLabel("Age");
panel.add(age);

TextField<String> email = new TextField<String>();
email.setName("email");
email.setFieldLabel("Email");
panel.add(email);

TextField<String> picture = new TextField<String>();
picture.setName("picture");
picture.setFieldLabel("Picture");
panel.add(picture);


return panel;
}
}



EditTable


public class EditableTablePanel extends LayoutContainer {
//public class EditableTablePanel extends ContentPanel {

private Grid<Person> grid;
ListStore<Person> store = new ListStore<Person>();

public EditableTablePanel() {
grid = createGrid();
}

public Grid<Person> getGrid() {
return grid;
}

public ListStore<Person> getStore() {
return store;
}

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);

// setLayout(new FlowLayout(10));

ContentPanel cp = new ContentPanel();
cp.setHeading("Users in building");
cp.setFrame(true);
// cp.setIcon(Examples.ICONS.table());
cp.setSize(400, 300);
cp.setLayout(new FitLayout());
cp.setCollapsible(true);

cp.add(grid);

ToolBar toolBar = new ToolBar();
Button add = new Button("Add user", domEntryPoint.ICONS.add());
add.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
Person person = new Person();
person.setName("User 1");
person.setPosition("(0,0)");
person.setDisplay(true);
person.setColor("Black");
person.setAge(Random.nextInt(50));

// grid.stopEditing();
store.insert(person, 0);
// grid.startEditing(0, 0);

}
});
toolBar.add(add);

Button delete = new Button("Remove user", domEntryPoint.ICONS.delete());
delete.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
List<Person> selection = grid.getSelectionModel().getSelectedItems();
for (Person item : selection) {
store.remove(item);
}

// grid.stopEditing();
// store.insert(person, 0);
// grid.startEditing(0, 0);

}
});
toolBar.add(delete);

cp.setTopComponent(toolBar);
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.addButton(new Button("Reset", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
store.rejectChanges();
}
}));

cp.addButton(new Button("Save", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
store.commitChanges();
}
}));

add(cp);
}

private Grid<Person> createGrid() {
// Create each column
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

final CheckBoxSelectionModel<Person> sm = new CheckBoxSelectionModel<Person>();

configs.add(sm.getColumn());

// Column Name
ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Name");
column.setWidth(220);

TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
//column.setEditor(new CellEditor(text));
configs.add(column);

// Column Position
column = new ColumnConfig();
column.setId("position");
column.setHeader("Position");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(70);
configs.add(column);

// Column Color
GridCellRenderer<Person> buttonRenderer = new GridCellRenderer<Person>() {

private boolean init;

public Object render(final Person model, String property, ColumnData config, final int rowIndex,
final int colIndex, ListStore<Person> store, Grid<Person> grid) {
if (!init) {
init = true;
grid.addListener(Events.ColumnResize, new Listener<GridEvent<Person>>() {

public void handleEvent(GridEvent<Person> be) {
for (int i = 0; i < be.getGrid().getStore().getCount(); i++) {
((Button) be.getGrid().getView().getWidget(i, be.getColIndex())).setWidth(be.getWidth() - 10);
((Button) be.getGrid().getView().getWidget(i, be.getColIndex())).setHeight(be.getHeight() - 30);
}
}
});
}

Button b = new Button((String) model.get(property), new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
Info.display(model.getName(), "<ul><li>" + model.getColor() + "</li></ul>");
}
});
b.setWidth(grid.getColumnModel().getColumnWidth(colIndex) - 10);
b.setToolTip("Click to change user color");

return b;
}
};

column = new ColumnConfig();
column.setId("color");
column.setHeader("Color");
column.setWidth(130);
column.setRenderer(buttonRenderer);
configs.add(column);

CheckColumnConfig checkColumn = new CheckColumnConfig("display", "Display?", 55);
CellEditor checkBoxEditor = new CellEditor(new CheckBox());
checkColumn.setEditor(checkBoxEditor);
configs.add(checkColumn);

ColumnModel cm = new ColumnModel(configs);

Grid<Person> g = new Grid<Person>(store, cm);
g.setAutoExpandColumn("name");
g.setBorders(true);
g.addPlugin(checkColumn);
g.setSelectionModel(sm);
// grid.setClicksToEdit(EditorGrid.ClicksToEdit.TWO);

return g;
}
}

jlanzac
11 Sep 2009, 9:46 AM
Please remove the post :(

The issue was that I didn't realize that I was creating the form twice and the getting the different references.

See you and thanks to all