This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

1. Initial UI Mockup - Part III

2. private static GridLayout createLayout() {
if(Display.getInstance().isTablet()) {
return new GridLayout(6, 6);
} else {
return new GridLayout(3, 2);
}
}
public DishListForm(AppSettings app) {
super(app, createLayout());
for(Dish d : Restaurant.getInstance().menu.get().dishes) {
addDish(d);
}
FloatingActionButton fab = FloatingActionButton.createFAB(FontImage.MATERIAL_ADD);
fab.bindFabToContainer(getContentPane());
fab.addActionListener(e -> {
Dish d = new Dish().description.set("Description of the dish...").
name.set("Dish Name").
price.set(3.0);
d.setFullSize(Resources.getGlobalResources().getImage("food1.jpg"));
Restaurant.getInstance().menu.get().dishes.add(d);
addDish(d);
revalidate();
new DishEditForm(d).show();
});
}
DishListForm

3. private static GridLayout createLayout() {
if(Display.getInstance().isTablet()) {
return new GridLayout(6, 6);
} else {
return new GridLayout(3, 2);
}
}
public DishListForm(AppSettings app) {
super(app, createLayout());
for(Dish d : Restaurant.getInstance().menu.get().dishes) {
addDish(d);
}
FloatingActionButton fab = FloatingActionButton.createFAB(FontImage.MATERIAL_ADD);
fab.bindFabToContainer(getContentPane());
fab.addActionListener(e -> {
Dish d = new Dish().description.set("Description of the dish...").
name.set("Dish Name").
price.set(3.0);
d.setFullSize(Resources.getGlobalResources().getImage("food1.jpg"));
Restaurant.getInstance().menu.get().dishes.add(d);
addDish(d);
revalidate();
new DishEditForm(d).show();
});
}
DishListForm

4. private static GridLayout createLayout() {
if(Display.getInstance().isTablet()) {
return new GridLayout(6, 6);
} else {
return new GridLayout(3, 2);
}
}
public DishListForm(AppSettings app) {
super(app, createLayout());
for(Dish d : Restaurant.getInstance().menu.get().dishes) {
addDish(d);
}
FloatingActionButton fab = FloatingActionButton.createFAB(FontImage.MATERIAL_ADD);
fab.bindFabToContainer(getContentPane());
fab.addActionListener(e -> {
Dish d = new Dish().description.set("Description of the dish...").
name.set("Dish Name").
price.set(3.0);
d.setFullSize(Resources.getGlobalResources().getImage("food1.jpg"));
Restaurant.getInstance().menu.get().dishes.add(d);
addDish(d);
revalidate();
new DishEditForm(d).show();
});
}
DishListForm

5. final void addDish(Dish d) {
ScaleImageButton sb = new ScaleImageButton(d.getFullSize());
sb.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
Label title = new Label(d.name.get(), "DishName");
Label description = new Label(d.description.get(), "DishDescription");
Container titleAndDescription = BoxLayout.encloseY(title, description);
titleAndDescription.setUIID("BlackGradient");
Container cnt = LayeredLayout.encloseIn(sb,
BorderLayout.south(titleAndDescription));
add(cnt);
cnt.setLeadComponent(sb);
setLayout(createLayout());
sb.addActionListener(e -> new DishEditForm(d).show());
}
DishListForm

6. final void addDish(Dish d) {
ScaleImageButton sb = new ScaleImageButton(d.getFullSize());
sb.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
Label title = new Label(d.name.get(), "DishName");
Label description = new Label(d.description.get(), "DishDescription");
Container titleAndDescription = BoxLayout.encloseY(title, description);
titleAndDescription.setUIID("BlackGradient");
Container cnt = LayeredLayout.encloseIn(sb,
BorderLayout.south(titleAndDescription));
add(cnt);
cnt.setLeadComponent(sb);
setLayout(createLayout());
sb.addActionListener(e -> new DishEditForm(d).show());
}
DishListForm

7. super(d.name.get(), new BorderLayout());
Toolbar tb = getToolbar();
Button back = new Button("", "Title");
Button ok = new Button("", "Title");
FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK, 5);
FontImage.setMaterialIcon(ok, FontImage.MATERIAL_CHECK, 5);
TextField title = new TextField(d.name.get());
title.setUIID("Title");
tb.setTitleComponent(
BorderLayout.centerEastWest(
BoxLayout.encloseY(title),
FlowLayout.encloseRight(ok),
FlowLayout.encloseIn(back)));
tb.setUIID("BlueGradient");
ScaleImageLabel backgroundImage = new ScaleImageLabel(d.getFullSize()) {
@Override
protected Dimension calcPreferredSize() {
Dimension d = super.calcPreferredSize();
d.setHeight(Math.min(d.getHeight(), Display.getInstance().convertToPixels(38)));
return d;
}
};
DishEditForm

8. super(d.name.get(), new BorderLayout());
Toolbar tb = getToolbar();
Button back = new Button("", "Title");
Button ok = new Button("", "Title");
FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK, 5);
FontImage.setMaterialIcon(ok, FontImage.MATERIAL_CHECK, 5);
TextField title = new TextField(d.name.get());
title.setUIID("Title");
tb.setTitleComponent(
BorderLayout.centerEastWest(
BoxLayout.encloseY(title),
FlowLayout.encloseRight(ok),
FlowLayout.encloseIn(back)));
tb.setUIID("BlueGradient");
ScaleImageLabel backgroundImage = new ScaleImageLabel(d.getFullSize()) {
@Override
protected Dimension calcPreferredSize() {
Dimension d = super.calcPreferredSize();
d.setHeight(Math.min(d.getHeight(), Display.getInstance().convertToPixels(38)));
return d;
}
};
DishEditForm

9. super(d.name.get(), new BorderLayout());
Toolbar tb = getToolbar();
Button back = new Button("", "Title");
Button ok = new Button("", "Title");
FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK, 5);
FontImage.setMaterialIcon(ok, FontImage.MATERIAL_CHECK, 5);
TextField title = new TextField(d.name.get());
title.setUIID("Title");
tb.setTitleComponent(
BorderLayout.centerEastWest(
BoxLayout.encloseY(title),
FlowLayout.encloseRight(ok),
FlowLayout.encloseIn(back)));
tb.setUIID("BlueGradient");
ScaleImageLabel backgroundImage = new ScaleImageLabel(d.getFullSize()) {
@Override
protected Dimension calcPreferredSize() {
Dimension d = super.calcPreferredSize();
d.setHeight(Math.min(d.getHeight(), Display.getInstance().convertToPixels(38)));
return d;
}
};
DishEditForm

10. backgroundImage.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
add(BorderLayout.NORTH, backgroundImage);
FloatingActionButton fab = FloatingActionButton.createFAB(FontImage.MATERIAL_COLLECTIONS);
Style fabStyle = fab.getAllStyles();
fab.bindFabToContainer(getContentPane(), RIGHT, TOP);
final Form previous = Display.getInstance().getCurrent();
Component.setSameHeight(tb, backgroundImage);
fabStyle.setMarginUnit(Style.UNIT_TYPE_PIXELS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS,
Style.UNIT_TYPE_DIPS);
fabStyle.setMarginTop(tb.getPreferredH() - fab.getPreferredH() / 2);
Button delete = new Button("Delete Dish", "DeleteButton");
FontImage.setMaterialIcon(delete, FontImage.MATERIAL_DELETE);
delete.addActionListener(e -> previous.showBack());
ok.addActionListener(e -> previous.showBack());
back.addActionListener(e -> previous.showBack());
add(BorderLayout.SOUTH, delete);
TextField price = new TextField("" + d.price.get(), "Price", 5, TextField.DECIMAL);
TextField description = new TextField(d.description.get(), "Description", 5, TextField.ANY);
description.setSingleLineTextArea(false);
description.setRows(4);
add(BorderLayout.CENTER, BoxLayout.encloseY(
new Label("Price", "TextFieldLabel"),
price,
new Label("Description", "TextFieldLabel"),
description
));
DishEditForm

11. backgroundImage.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
add(BorderLayout.NORTH, backgroundImage);
FloatingActionButton fab = FloatingActionButton.createFAB(FontImage.MATERIAL_COLLECTIONS);
Style fabStyle = fab.getAllStyles();
fab.bindFabToContainer(getContentPane(), RIGHT, TOP);
final Form previous = Display.getInstance().getCurrent();
Component.setSameHeight(tb, backgroundImage);
fabStyle.setMarginUnit(Style.UNIT_TYPE_PIXELS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS,
Style.UNIT_TYPE_DIPS);
fabStyle.setMarginTop(tb.getPreferredH() - fab.getPreferredH() / 2);
Button delete = new Button("Delete Dish", "DeleteButton");
FontImage.setMaterialIcon(delete, FontImage.MATERIAL_DELETE);
delete.addActionListener(e -> previous.showBack());
ok.addActionListener(e -> previous.showBack());
back.addActionListener(e -> previous.showBack());
add(BorderLayout.SOUTH, delete);
TextField price = new TextField("" + d.price.get(), "Price", 5, TextField.DECIMAL);
TextField description = new TextField(d.description.get(), "Description", 5, TextField.ANY);
description.setSingleLineTextArea(false);
description.setRows(4);
add(BorderLayout.CENTER, BoxLayout.encloseY(
new Label("Price", "TextFieldLabel"),
price,
new Label("Description", "TextFieldLabel"),
description
));
DishEditForm

12. Thank You