Hi
I want to create a screen where some set of fields will be displayed like a standard textField and TextArea but will have option to add/modify/delete those set of data as appears in the attached image. Any thought is appreciated.
Hi,
in your case you need to generate panels with components dynamically using ComponentsFactory. Also I recommend to extract your List item panel as Frame to be able to build it using XML markup.
First, you can create main screen:
<layout expand="scroll">
<button caption="Add" invoke="addNewUser"/>
<scrollBox id="scroll">
<vbox id="editPane" width="300px" spacing="true">
</vbox>
</scrollBox>
</layout>
Here new item Frame will be created and added it to editPane:
public class Screen extends AbstractWindow {
@Inject
protected Metadata metadata;
@Inject
protected CollectionDatasource<User, UUID> usersDs;
@Inject
protected VBoxLayout editPane;
public void addNewUser() {
User user = metadata.create(User.class);
user.setName("<New User name>");
usersDs.addItem(user);
Frame editFrame = openFrame(null, "itemFrame", ParamsMap.of("item", user));
editPane.add(editFrame);
}
}
Edit frame will have following layout:
<layout>
<groupBox>
<hbox margin="false,false,true,false"
spacing="true"
width="100%">
<label stylename="h2"
value="Customer"/>
<button align="MIDDLE_RIGHT"
icon="icons/edit.png"
invoke="switchMode"/>
</hbox>
<label id="valueLabel"/>
<textField id="valueField"
visible="false"/>
</groupBox>
</layout>
There passed parameter is used to bind UI Components to dynamically generated datasource:
public class ItemFrame extends AbstractFrame {
@Inject
protected TextField valueField;
@Inject
protected Label valueLabel;
@WindowParam
private User item;
@Override
public void init(Map<String, Object> params) {
super.init(params);
Datasource userDs = new DsBuilder()
.setJavaClass(User.class)
.setAllowCommit(false)
.buildDatasource();
userDs.invalidate();
valueField.setDatasource(userDs, "name");
valueLabel.setDatasource(userDs, "name");
userDs.refresh();
userDs.setItem(item);
}
And finally it will contain simple method to switch edit/view mode:
public void switchMode() {
valueField.setVisible(!valueField.isVisible());
valueLabel.setVisible(!valueLabel.isVisible());
if (valueField.isVisible()) {
valueField.requestFocus();
}
}
Also see my sample project to try it in action: GitHub - cuba-labs/custom-list-view: How to create sample list view screen in CUBA