How to show listgrid data in SectionStack in SmartGwt

Question

I have a two sectionstacksection in code, onw is showing dynamic form for input data and second sectionstacksection is showing listgrid which will show a input data when i hit save button in my dynamic form section.

I have created three classes, one is EmployeeApplicationForm which is extending Dynamic Form, second is EquiryList which is extending listgrid and third one is EnquiryFormRecord which is extending ListGridRecord for getter and setter.

I have done feteching the textboxes data and call a EnquiryFormRecord constructor to get and set datas in "data" Variable. but i am not able to access this "data" variable to my EnquiryList class to "setData(data)" in listGird Field.

My code is this. Please share your idea to resolve this problem EmployeeApplicationClass And EnquiryList:

class EmployeeApplicationForm extends DynamicForm {
ButtonItem saveButton;
ButtonItem resetButton;
EnquiryFormRecord[] data;
public EmployeeApplicationForm() {
    setNumCols(6);
    setWidth100();
    setHeight(135);
    setErrorOrientation(FormErrorOrientation.RIGHT);

    final TextItem fname = new TextItem("FirstName");

    final TextItem lname = new TextItem("LastName");

    saveButton = new ButtonItem("Save");
    saveButton.setStartRow(true);
    saveButton.setEndRow(false);
    resetButton = new ButtonItem("Reset");
    resetButton.setStartRow(false);
    resetButton.setEndRow(false);

    saveButton.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            // TODO Auto-generated method stub
            // if validation passes then show user an alert message box
            if (valid()) {
                SC.say("Form passed validation");
            }
            String fn = fname.getValueAsString();
            String ln = lname.getValueAsString();

            data = new EnquiryFormRecord[] { new EnquiryFormRecord(fn, ln) };
        }
    });

    resetButton.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            // TODO Auto-generated method stub
            resetForm();
        }
    });
    setFields(fname, lname, saveButton, resetButton);
}

private boolean valid() {
    return this.validate();
}

private void resetForm() {
    this.reset();
}
}


class EnquiryList extends ListGrid {
public EnquiryList(EnquiryFormRecord[] data) {
    ListGridField fname = new ListGridField("fname","First Name");
    ListGridField lname = new ListGridField("lname","Last Name");

    setFields(fname, lname);
    setData(data);------/*Hera I am getting error. I cannot access the EmployeeAppliocationForm class "data" variable here*/
    setCanEdit(true);
    setShowAllRecords(true);
    // setSortField(0);
    setAlternateRecordStyles(true);
    setCanDragRecordsOut(true);
    setHoverWidth(200);
    setHoverHeight(20);
    setSelectionType(SelectionStyle.SINGLE);
}
}

Answer 1

I think the short answer would be to use the syntax for accessing enclosing class variables. So instead of setData(data) it would be setData(EmployeeApplicationForm.this.data);

The above should work, but I have to say the way it's setup is confusing and should be re-worked.

Answer 2

In this case, its preferable to use object composition than inheritance as you are not extending state/behavior in any of the Objects (DynamicForm, ListGrid, ListGridRecord).
Prefer composition over inheritance?
Why use inheritance at all?

You can use object composition as explained below.

One thing to understand is, records need to be added to the grid on button clicks/events.
You are trying to use setData during screen initialization.
Instead, setData (rather addData) must be called from button event handler.

Method to initialize grid

private ListGrid getListGrid() {
    // preparing grid fields
    ListGridField fname = new ListGridField("fname", "First Name");
    ListGridField lname = new ListGridField("lname", "Last Name");

    // creating and configuring grid
    ListGrid grid = new ListGrid();
    grid.setWidth100();
    grid.setHeight100();
    grid.setFields(fname, lname);

    return grid;
}

Method to initialize form. Have to pass grid in order to add/update records on button events.

private DynamicForm getDynamicForm(final ListGrid grid) {
    // preparing form items
    final TextItem fname = new TextItem("firstName", "First Name"); // its better to explicitly specify both name and title
    final TextItem lname = new TextItem("lastName", "Last Name");

    ButtonItem saveButton = new ButtonItem("Save");
    saveButton.setStartRow(true);
    saveButton.setEndRow(false);
    saveButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent clickEvent) {
            String fn = fname.getValueAsString();
            String ln = lname.getValueAsString();

            Record record = new Record();
            record.setAttribute("fname", fn); // record attribute names must match grid field name
            record.setAttribute("lname", ln);

            grid.addData(record); // addData should be used to add new records per save operation

            // setData should be used to set all records in grid per save operation
            // in this case, its probably not what is required, as this will overwrite previous records in grid
            // resulting, only one record left in grid after every save operation
            // grid.setData(new Record[]{record});
        }
    });

    // creating and configuring form
    DynamicForm form = new DynamicForm();
    form.setWidth100();
    form.setHeight(135);
    form.setNumCols(6);
    form.setErrorOrientation(FormErrorOrientation.RIGHT);
    form.setFields(fname, lname, saveButton);

    return form;
}

Putting it together

ListGrid grid = getListGrid();
DynamicForm form = getDynamicForm(grid);
...
formSection.setItems(form);
...
gridSection.setItems(grid);
...
sections.setSections(formSection, gridSection);