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 II

2. public class BaseNavigationForm extends Form {
public BaseNavigationForm(AppSettings app, Layout l) {
super(app.name.get(), l);
init(app);
}
private void init(AppSettings app) {
Toolbar tb = getToolbar();
tb.addMaterialCommandToSideMenu("Dishes", FontImage.MATERIAL_RESTAURANT_MENU,
e -> new DishListForm(app).show());
tb.addMaterialCommandToSideMenu("Details", FontImage.MATERIAL_DESCRIPTION,
e -> new DetailsForm(app).show());
tb.addMaterialCommandToSideMenu("Billing", FontImage.MATERIAL_CREDIT_CARD, e -> {});
tb.addMaterialCommandToSideMenu("App", FontImage.MATERIAL_PHONE_IPHONE,
e -> new AppForm(app).show());
TextField title = new TextField(app.name.get());
title.setUIID("NavigationTitle");
TextField tagline = new TextField(app.tagline.get());
tagline.setUIID("Tagline");
BaseNavigationForm
Commands
Side menu navigation
commands common to the
top level form

3. public class BaseNavigationForm extends Form {
public BaseNavigationForm(AppSettings app, Layout l) {
super(app.name.get(), l);
init(app);
}
private void init(AppSettings app) {
Toolbar tb = getToolbar();
tb.addMaterialCommandToSideMenu("Dishes", FontImage.MATERIAL_RESTAURANT_MENU,
e -> new DishListForm(app).show());
tb.addMaterialCommandToSideMenu("Details", FontImage.MATERIAL_DESCRIPTION,
e -> new DetailsForm(app).show());
tb.addMaterialCommandToSideMenu("Billing", FontImage.MATERIAL_CREDIT_CARD, e -> {});
tb.addMaterialCommandToSideMenu("App", FontImage.MATERIAL_PHONE_IPHONE,
e -> new AppForm(app).show());
TextField title = new TextField(app.name.get());
title.setUIID("NavigationTitle");
TextField tagline = new TextField(app.tagline.get());
tagline.setUIID("Tagline");
BaseNavigationForm
UIID
0 Margin
1mm Padding
White 5mm thin font
Left alignment

4. public class BaseNavigationForm extends Form {
public BaseNavigationForm(AppSettings app, Layout l) {
super(app.name.get(), l);
init(app);
}
private void init(AppSettings app) {
Toolbar tb = getToolbar();
tb.addMaterialCommandToSideMenu("Dishes", FontImage.MATERIAL_RESTAURANT_MENU,
e -> new DishListForm(app).show());
tb.addMaterialCommandToSideMenu("Details", FontImage.MATERIAL_DESCRIPTION,
e -> new DetailsForm(app).show());
tb.addMaterialCommandToSideMenu("Billing", FontImage.MATERIAL_CREDIT_CARD, e -> {});
tb.addMaterialCommandToSideMenu("App", FontImage.MATERIAL_PHONE_IPHONE,
e -> new AppForm(app).show());
TextField title = new TextField(app.name.get());
title.setUIID("NavigationTitle");
TextField tagline = new TextField(app.tagline.get());
tagline.setUIID("Tagline");
BaseNavigationForm
UIID
Derive NavigationTitle
3mm font

5. public class BaseNavigationForm extends Form {
public BaseNavigationForm(AppSettings app, Layout l) {
super(app.name.get(), l);
init(app);
}
private void init(AppSettings app) {
Toolbar tb = getToolbar();
tb.addMaterialCommandToSideMenu("Dishes", FontImage.MATERIAL_RESTAURANT_MENU,
e -> new DishListForm(app).show());
tb.addMaterialCommandToSideMenu("Details", FontImage.MATERIAL_DESCRIPTION,
e -> new DetailsForm(app).show());
tb.addMaterialCommandToSideMenu("Billing", FontImage.MATERIAL_CREDIT_CARD, e -> {});
tb.addMaterialCommandToSideMenu("App", FontImage.MATERIAL_PHONE_IPHONE,
e -> new AppForm(app).show());
TextField title = new TextField(app.name.get());
title.setUIID("NavigationTitle");
TextField tagline = new TextField(app.tagline.get());
tagline.setUIID("Tagline");
BaseNavigationForm

6. Button editBackground = new Button("Edit Background", "EditBackground");
int size = Display.getInstance().convertToPixels(10);
Button logoImage = new Button("", app.getRoundedScaledLogo(), "Container");
Container titleContainer = BoxLayout.encloseY(
title,
tagline,
FlowLayout.encloseCenterMiddle(logoImage));
Button menu = new Button("", "NavigationTitle");
Button preview = new Button("", "NavigationTitle");
FontImage.setMaterialIcon(menu, FontImage.MATERIAL_MENU);
FontImage.setMaterialIcon(preview, FontImage.MATERIAL_PLAY_ARROW);
Container titleWithCommands = BorderLayout.centerEastWest(
titleContainer,
FlowLayout.encloseCenter(preview),
FlowLayout.encloseCenter(menu));
menu.addActionListener(e -> tb.openSideMenu());
ScaleImageLabel sl = new ScaleImageLabel(app.titleBackground.get());
sl.setUIID("TitleBottomSpace");
sl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
if(super.shouldPaintStatusBar()) {
titleWithCommands.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_DIPS);
titleWithCommands.getUnselectedStyle().setPaddingTop(3);
}
tb.setTitleComponent(LayeredLayout.encloseIn(sl,
BorderLayout.south(editBackground), titleWithCommands));
}
BaseNavigationForm
UIID
0 Margin top/right/left
4mm bottom margin
0 Padding
Derive NavigationTitle
Right alignment
thin 2.5mm font

7. Button editBackground = new Button("Edit Background", "EditBackground");
int size = Display.getInstance().convertToPixels(10);
Button logoImage = new Button("", app.getRoundedScaledLogo(), "Container");
Container titleContainer = BoxLayout.encloseY(
title,
tagline,
FlowLayout.encloseCenterMiddle(logoImage));
Button menu = new Button("", "NavigationTitle");
Button preview = new Button("", "NavigationTitle");
FontImage.setMaterialIcon(menu, FontImage.MATERIAL_MENU);
FontImage.setMaterialIcon(preview, FontImage.MATERIAL_PLAY_ARROW);
Container titleWithCommands = BorderLayout.centerEastWest(
titleContainer,
FlowLayout.encloseCenter(preview),
FlowLayout.encloseCenter(menu));
menu.addActionListener(e -> tb.openSideMenu());
ScaleImageLabel sl = new ScaleImageLabel(app.titleBackground.get());
sl.setUIID("TitleBottomSpace");
sl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
if(super.shouldPaintStatusBar()) {
titleWithCommands.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_DIPS);
titleWithCommands.getUnselectedStyle().setPaddingTop(3);
}
tb.setTitleComponent(LayeredLayout.encloseIn(sl,
BorderLayout.south(editBackground), titleWithCommands));
}
BaseNavigationForm
UIID
0 padding sides
1mm padding top/bottom
4mm bottom

8. Button editBackground = new Button("Edit Background", "EditBackground");
int size = Display.getInstance().convertToPixels(10);
Button logoImage = new Button("", app.getRoundedScaledLogo(), "Container");
Container titleContainer = BoxLayout.encloseY(
title,
tagline,
FlowLayout.encloseCenterMiddle(logoImage));
Button menu = new Button("", "NavigationTitle");
Button preview = new Button("", "NavigationTitle");
FontImage.setMaterialIcon(menu, FontImage.MATERIAL_MENU);
FontImage.setMaterialIcon(preview, FontImage.MATERIAL_PLAY_ARROW);
Container titleWithCommands = BorderLayout.centerEastWest(
titleContainer,
FlowLayout.encloseCenter(preview),
FlowLayout.encloseCenter(menu));
menu.addActionListener(e -> tb.openSideMenu());
ScaleImageLabel sl = new ScaleImageLabel(app.titleBackground.get());
sl.setUIID("TitleBottomSpace");
sl.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
if(super.shouldPaintStatusBar()) {
titleWithCommands.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_DIPS);
titleWithCommands.getUnselectedStyle().setPaddingTop(3);
}
tb.setTitleComponent(LayeredLayout.encloseIn(sl,
BorderLayout.south(editBackground), titleWithCommands));
}
BaseNavigationForm

9. public class AppSettings implements PropertyBusinessObject {
public final Property<String, AppSettings> name = new Property<>("name", "My Restaurant");
public final Property<String, AppSettings> tagline = new Property<>("tagline", "The place to eat");
public final Property<Image, AppSettings> titleBackground = new Property<>("titleBackground", null);
private Image roundedScaledLogo;
private final PropertyIndex idx = new PropertyIndex(this, "AppSettings", name, tagline, logo,
titleBackground);
@Override
public PropertyIndex getPropertyIndex() {
return idx;
}
public Image getRoundedScaledLogo() {
return roundedScaledLogo;
}
AppSettings

10. public final Property<Image, AppSettings> logo = new Property<Image, AppSettings>("logo", null) {
public AppSettings set(Image value) {
if(value != null) {
int mm = Display.getInstance().convertToPixels(2f);
int size = Display.getInstance().convertToPixels(11);
GeneralPath gp = new GeneralPath();
float widthF = size; float heightF = size;
gp.moveTo(x + mm, 0);
gp.lineTo(x + widthF - mm, 0);
gp.quadTo(x + widthF, 0, widthF, mm);
gp.lineTo(x + widthF, heightF - mm);
gp.quadTo(x + widthF, heightF, x + widthF - mm, heightF);
gp.lineTo(x + mm, heightF);
gp.quadTo(x, heightF, 0, heightF - radius);
gp.lineTo(x, mm);
gp.quadTo(x, 0, mm, 0);
gp.closePath();
Image mask = Image.createImage(size, size, 0xff000000);
Graphics g = mask.getGraphics();
g.setColor(0xffffff);
g.setAntiAliased(true);
g.fillShape(gp);
Object m = mask.createMask();
roundedScaledLogo = value.fill(size, size).applyMask(m);
}
return super.set(value);
}
};
AppSettings

11. public final Property<Image, AppSettings> logo = new Property<Image, AppSettings>("logo", null) {
public AppSettings set(Image value) {
if(value != null) {
int mm = Display.getInstance().convertToPixels(2f);
int size = Display.getInstance().convertToPixels(11);
GeneralPath gp = new GeneralPath();
float widthF = size; float heightF = size;
gp.moveTo(x + mm, 0);
gp.lineTo(x + widthF - mm, 0);
gp.quadTo(x + widthF, 0, widthF, mm);
gp.lineTo(x + widthF, heightF - mm);
gp.quadTo(x + widthF, heightF, x + widthF - mm, heightF);
gp.lineTo(x + mm, heightF);
gp.quadTo(x, heightF, 0, heightF - radius);
gp.lineTo(x, mm);
gp.quadTo(x, 0, mm, 0);
gp.closePath();
Image mask = Image.createImage(size, size, 0xff000000);
Graphics g = mask.getGraphics();
g.setColor(0xffffff);
g.setAntiAliased(true);
g.fillShape(gp);
Object m = mask.createMask();
roundedScaledLogo = value.fill(size, size).applyMask(m);
}
return super.set(value);
}
};
AppSettings

12. public final Property<Image, AppSettings> logo = new Property<Image, AppSettings>("logo", null) {
public AppSettings set(Image value) {
if(value != null) {
int mm = Display.getInstance().convertToPixels(2f);
int size = Display.getInstance().convertToPixels(11);
GeneralPath gp = new GeneralPath();
float widthF = size; float heightF = size;
gp.moveTo(x + mm, 0);
gp.lineTo(x + widthF - mm, 0);
gp.quadTo(x + widthF, 0, widthF, mm);
gp.lineTo(x + widthF, heightF - mm);
gp.quadTo(x + widthF, heightF, x + widthF - mm, heightF);
gp.lineTo(x + mm, heightF);
gp.quadTo(x, heightF, 0, heightF - radius);
gp.lineTo(x, mm);
gp.quadTo(x, 0, mm, 0);
gp.closePath();
Image mask = Image.createImage(size, size, 0xff000000);
Graphics g = mask.getGraphics();
g.setColor(0xffffff);
g.setAntiAliased(true);
g.fillShape(gp);
Object m = mask.createMask();
roundedScaledLogo = value.fill(size, size).applyMask(m);
}
return super.set(value);
}
};
AppSettings

13. public final Property<Image, AppSettings> logo = new Property<Image, AppSettings>("logo", null) {
public AppSettings set(Image value) {
if(value != null) {
int mm = Display.getInstance().convertToPixels(2f);
int size = Display.getInstance().convertToPixels(11);
GeneralPath gp = new GeneralPath();
float widthF = size; float heightF = size;
gp.moveTo(x + mm, 0);
gp.lineTo(x + widthF - mm, 0);
gp.quadTo(x + widthF, 0, widthF, mm);
gp.lineTo(x + widthF, heightF - mm);
gp.quadTo(x + widthF, heightF, x + widthF - mm, heightF);
gp.lineTo(x + mm, heightF);
gp.quadTo(x, heightF, 0, heightF - radius);
gp.lineTo(x, mm);
gp.quadTo(x, 0, mm, 0);
gp.closePath();
Image mask = Image.createImage(size, size, 0xff000000);
Graphics g = mask.getGraphics();
g.setColor(0xffffff);
g.setAntiAliased(true);
g.fillShape(gp);
Object m = mask.createMask();
roundedScaledLogo = value.fill(size, size).applyMask(m);
}
return super.set(value);
}
};
AppSettings

14. public final Property<Image, AppSettings> logo = new Property<Image, AppSettings>("logo", null) {
public AppSettings set(Image value) {
if(value != null) {
int mm = Display.getInstance().convertToPixels(2f);
int size = Display.getInstance().convertToPixels(11);
GeneralPath gp = new GeneralPath();
float widthF = size; float heightF = size;
gp.moveTo(x + mm, 0);
gp.lineTo(x + widthF - mm, 0);
gp.quadTo(x + widthF, 0, widthF, mm);
gp.lineTo(x + widthF, heightF - mm);
gp.quadTo(x + widthF, heightF, x + widthF - mm, heightF);
gp.lineTo(x + mm, heightF);
gp.quadTo(x, heightF, 0, heightF - radius);
gp.lineTo(x, mm);
gp.quadTo(x, 0, mm, 0);
gp.closePath();
Image mask = Image.createImage(size, size, 0xff000000);
Graphics g = mask.getGraphics();
g.setColor(0xffffff);
g.setAntiAliased(true);
g.fillShape(gp);
Object m = mask.createMask();
roundedScaledLogo = value.fill(size, size).applyMask(m);
}
return super.set(value);
}
};
AppSettings

15. public final Property<Image, AppSettings> logo = new Property<Image, AppSettings>("logo", null) {
public AppSettings set(Image value) {
if(value != null) {
int mm = Display.getInstance().convertToPixels(2f);
int size = Display.getInstance().convertToPixels(11);
GeneralPath gp = new GeneralPath();
float widthF = size; float heightF = size;
gp.moveTo(x + mm, 0);
gp.lineTo(x + widthF - mm, 0);
gp.quadTo(x + widthF, 0, widthF, mm);
gp.lineTo(x + widthF, heightF - mm);
gp.quadTo(x + widthF, heightF, x + widthF - mm, heightF);
gp.lineTo(x + mm, heightF);
gp.quadTo(x, heightF, 0, heightF - radius);
gp.lineTo(x, mm);
gp.quadTo(x, 0, mm, 0);
gp.closePath();
Image mask = Image.createImage(size, size, 0xff000000);
Graphics g = mask.getGraphics();
g.setColor(0xffffff);
g.setAntiAliased(true);
g.fillShape(gp);
Object m = mask.createMask();
roundedScaledLogo = value.fill(size, size).applyMask(m);
}
return super.set(value);
}
};
AppSettings