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. UI Design From Scratch - Part V

2. public class Dish implements PropertyBusinessObject {
public final Property<String, Dish> id = new Property<>("id");
public final DoubleProperty<Dish> price = new DoubleProperty<>("price");
public final Property<String, Dish> name = new Property<>("name");
public final Property<String, Dish> description = new Property<>("description");
public final Property<String, Dish> imageName = new Property<>("imageName");
public final Property<Image, Dish> thumbnail = new Property<Image, Dish>("thumbnail") {
public Image get() {
// snipped common code
}
};
public final Property<Image, Dish> fullSize = new Property<Image, Dish>("fullSize") {
public Image get() {
Image i = super.get();
if(i == null) {
i = fetchImage();
super.set(i);
}
return i;
}
};
private final PropertyIndex idx = new PropertyIndex(this, "Dish",
id, price, name, description, imageName, thumbnail, fullSize);
public PropertyIndex getPropertyIndex() {
return idx;
}
}
Dish

3. public class AboutForm extends BaseForm {
public AboutForm() {
super("About");
}
@Override
protected Container createContent() {
BrowserComponent cmp = new BrowserComponent();
try {
cmp.setURLHierarchy("/index.html");
} catch(IOException err) {
Log.e(err);
Log.sendLog();
}
return cmp;
}
@Override
protected void onSearch(String searchString) {
}
}
About

4. Container topArea = FlowLayout.encloseRight(createCartButton());
topArea.setUIID("TopBar");
tb.addComponentToSideMenu(topArea);
tb.addMaterialCommandToSideMenu("Menu",
FontImage.MATERIAL_RESTAURANT_MENU,
e -> new MainMenuForm().show());
tb.addMaterialCommandToSideMenu("About",
FontImage.MATERIAL_INFO,
e -> new AboutForm().show());
tb.addMaterialCommandToSideMenu("Contact Us",
FontImage.MATERIAL_MAP,
e -> new ContactUsForm().show());
//….
Component.setSameHeight(topArea, topBar);
Base Form

5. final static String[] PICKER_STRINGS = new String[100];
static {
PICKER_STRINGS[0] = "Delete";
for(int iter = 1 ; iter < 100 ; iter++) {
PICKER_STRINGS[iter] = iter + "x";
}
}
Picker quantityButton = new Picker();
quantityButton.setUIID("QuantityPicker");
quantityButton.setType(Display.PICKER_TYPE_STRINGS);
quantityButton.setStrings(PICKER_STRINGS);
quantityButton.setSelectedString(quantity + "x");
Container dishContainer = BoxLayout.encloseX(
FlowLayout.encloseMiddle(quantityButton),
new Label(dishMasked, "UnmarginedLabel"),
FlowLayout.encloseMiddle(
BoxLayout.encloseY(
new Label(title, "DishCheckoutTitle"),
new Label(L10NManager.getInstance().formatCurrency(price), "CheckoutPrice")
)
)
);
Checkout Form

6. final static String[] PICKER_STRINGS = new String[100];
static {
PICKER_STRINGS[0] = "Delete";
for(int iter = 1 ; iter < 100 ; iter++) {
PICKER_STRINGS[iter] = iter + "x";
}
}
Picker quantityButton = new Picker();
quantityButton.setUIID("QuantityPicker");
quantityButton.setType(Display.PICKER_TYPE_STRINGS);
quantityButton.setStrings(PICKER_STRINGS);
quantityButton.setSelectedString(quantity + "x");
Container dishContainer = BoxLayout.encloseX(
FlowLayout.encloseMiddle(quantityButton),
new Label(dishMasked, "UnmarginedLabel"),
FlowLayout.encloseMiddle(
BoxLayout.encloseY(
new Label(title, "DishCheckoutTitle"),
new Label(L10NManager.getInstance().formatCurrency(price), "CheckoutPrice")
)
)
);
Checkout Form

7. final static String[] PICKER_STRINGS = new String[100];
static {
PICKER_STRINGS[0] = "Delete";
for(int iter = 1 ; iter < 100 ; iter++) {
PICKER_STRINGS[iter] = iter + "x";
}
}
Picker quantityButton = new Picker();
quantityButton.setUIID("QuantityPicker");
quantityButton.setType(Display.PICKER_TYPE_STRINGS);
quantityButton.setStrings(PICKER_STRINGS);
quantityButton.setSelectedString(quantity + "x");
Container dishContainer = BoxLayout.encloseX(
FlowLayout.encloseMiddle(quantityButton),
new Label(dishMasked, "UnmarginedLabel"),
FlowLayout.encloseMiddle(
BoxLayout.encloseY(
new Label(title, "DishCheckoutTitle"),
new Label(L10NManager.getInstance().formatCurrency(price), "CheckoutPrice")
)
)
);
Checkout Form

8. final static String[] PICKER_STRINGS = new String[100];
static {
PICKER_STRINGS[0] = "Delete";
for(int iter = 1 ; iter < 100 ; iter++) {
PICKER_STRINGS[iter] = iter + "x";
}
}
Picker quantityButton = new Picker();
quantityButton.setUIID("QuantityPicker");
quantityButton.setType(Display.PICKER_TYPE_STRINGS);
quantityButton.setStrings(PICKER_STRINGS);
quantityButton.setSelectedString(quantity + "x");
Container dishContainer = BoxLayout.encloseX(
FlowLayout.encloseMiddle(quantityButton),
new Label(dishMasked, "UnmarginedLabel"),
FlowLayout.encloseMiddle(
BoxLayout.encloseY(
new Label(title, "DishCheckoutTitle"),
new Label(L10NManager.getInstance().formatCurrency(price), "CheckoutPrice")
)
)
);
Checkout Form

9. final static String[] PICKER_STRINGS = new String[100];
static {
PICKER_STRINGS[0] = "Delete";
for(int iter = 1 ; iter < 100 ; iter++) {
PICKER_STRINGS[iter] = iter + "x";
}
}
Picker quantityButton = new Picker();
quantityButton.setUIID("QuantityPicker");
quantityButton.setType(Display.PICKER_TYPE_STRINGS);
quantityButton.setStrings(PICKER_STRINGS);
quantityButton.setSelectedString(quantity + "x");
Container dishContainer = BoxLayout.encloseX(
FlowLayout.encloseMiddle(quantityButton),
new Label(dishMasked, "UnmarginedLabel"),
FlowLayout.encloseMiddle(
BoxLayout.encloseY(
new Label(title, "DishCheckoutTitle"),
new Label(L10NManager.getInstance().formatCurrency(price), "CheckoutPrice")
)
)
);
Checkout Form

10. quantityButton.addActionListener(e -> {
if(quantityButton.getSelectedString().equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(Display.getInstance().getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayout(200);
});
}
});
Checkout Form

11. Coord crd = new Coord(40.732030, -73.999872);
MapContainer map = new MapContainer(“key-from-google“);
map.addMarker(null, crd, "Blue Hill", "Description", null);
map.setCameraPosition(crd);
TextArea address = new TextArea("Blue Hill,n"
+ "Farm-to-table American fine diningn"
+ "75 Washington Pln"
+ "New York, NY 10011n"
+ "+1 212-539-1776");
address.setEditable(false);
address.setUIID("MapAddressText");
Button phone = new Button("", "ShoppingCart");
FontImage.setMaterialIcon(phone, FontImage.MATERIAL_CALL);
phone.addActionListener(e -> Display.getInstance().dial("+12125391776"));
Button navigate = new Button("", "ShoppingCart");
FontImage.setMaterialIcon(navigate, FontImage.MATERIAL_NAVIGATION);
navigate.addActionListener(e ->
Display.getInstance().openNativeNavigationApp(address));
Container addressContainer = BorderLayout.center(address);
addressContainer.add(BorderLayout.EAST,
GridLayout.encloseIn(1, phone, navigate));
addressContainer.setUIID("MapAddress");
Container lp = LayeredLayout.encloseIn(map,
BorderLayout.south(addressContainer));
return lp;
Contact Us

12. Coord crd = new Coord(40.732030, -73.999872);
MapContainer map = new MapContainer(“key-from-google“);
map.addMarker(null, crd, "Blue Hill", "Description", null);
map.setCameraPosition(crd);
TextArea address = new TextArea("Blue Hill,n"
+ "Farm-to-table American fine diningn"
+ "75 Washington Pln"
+ "New York, NY 10011n"
+ "+1 212-539-1776");
address.setEditable(false);
address.setUIID("MapAddressText");
Button phone = new Button("", "ShoppingCart");
FontImage.setMaterialIcon(phone, FontImage.MATERIAL_CALL);
phone.addActionListener(e -> Display.getInstance().dial("+12125391776"));
Button navigate = new Button("", "ShoppingCart");
FontImage.setMaterialIcon(navigate, FontImage.MATERIAL_NAVIGATION);
navigate.addActionListener(e ->
Display.getInstance().openNativeNavigationApp(address));
Container addressContainer = BorderLayout.center(address);
addressContainer.add(BorderLayout.EAST,
GridLayout.encloseIn(1, phone, navigate));
addressContainer.setUIID("MapAddress");
Container lp = LayeredLayout.encloseIn(map,
BorderLayout.south(addressContainer));
return lp;
Contact Us

13. Coord crd = new Coord(40.732030, -73.999872);
MapContainer map = new MapContainer(“key-from-google“);
map.addMarker(null, crd, "Blue Hill", "Description", null);
map.setCameraPosition(crd);
TextArea address = new TextArea("Blue Hill,n"
+ "Farm-to-table American fine diningn"
+ "75 Washington Pln"
+ "New York, NY 10011n"
+ "+1 212-539-1776");
address.setEditable(false);
address.setUIID("MapAddressText");
Button phone = new Button("", "ShoppingCart");
FontImage.setMaterialIcon(phone, FontImage.MATERIAL_CALL);
phone.addActionListener(e -> Display.getInstance().dial("+12125391776"));
Button navigate = new Button("", "ShoppingCart");
FontImage.setMaterialIcon(navigate, FontImage.MATERIAL_NAVIGATION);
navigate.addActionListener(e ->
Display.getInstance().openNativeNavigationApp(address));
Container addressContainer = BorderLayout.center(address);
addressContainer.add(BorderLayout.EAST,
GridLayout.encloseIn(1, phone, navigate));
addressContainer.setUIID("MapAddress");
Container lp = LayeredLayout.encloseIn(map,
BorderLayout.south(addressContainer));
return lp;
Contact Us

14. Coord crd = new Coord(40.732030, -73.999872);
MapContainer map = new MapContainer(“key-from-google“);
map.addMarker(null, crd, "Blue Hill", "Description", null);
map.setCameraPosition(crd);
TextArea address = new TextArea("Blue Hill,n"
+ "Farm-to-table American fine diningn"
+ "75 Washington Pln"
+ "New York, NY 10011n"
+ "+1 212-539-1776");
address.setEditable(false);
address.setUIID("MapAddressText");
Button phone = new Button("", "ShoppingCart");
FontImage.setMaterialIcon(phone, FontImage.MATERIAL_CALL);
phone.addActionListener(e -> Display.getInstance().dial("+12125391776"));
Button navigate = new Button("", "ShoppingCart");
FontImage.setMaterialIcon(navigate, FontImage.MATERIAL_NAVIGATION);
navigate.addActionListener(e ->
Display.getInstance().openNativeNavigationApp(address));
Container addressContainer = BorderLayout.center(address);
addressContainer.add(BorderLayout.EAST,
GridLayout.encloseIn(1, phone, navigate));
addressContainer.setUIID("MapAddress");
Container lp = LayeredLayout.encloseIn(map,
BorderLayout.south(addressContainer));
return lp;
Contact Us

15. super(actualDish.name.get(), new LayeredLayout());
ImageViewer iv = new ImageViewer();
iv.setImage(actualDish.fullSize.get());
add(iv);
iv.setImageInitialPosition(ImageViewer.IMAGE_FILL);
Toolbar tb = getToolbar();
tb.setUIID("TintToolbar");
Form previous = Display.getInstance().getCurrent();
tb.addMaterialCommandToLeftBar("",
FontImage.MATERIAL_CLOSE, ev -> previous.showBack());
tb.addMaterialCommandToRightBar("",
FontImage.MATERIAL_ADD_SHOPPING_CART, ev -> {});
TextArea description = new TextArea(actualDish.description.get());
description.setEditable(false);
description.setUIID("DishViewDescription");
add(BorderLayout.south(description));
Dish View

16. Label priceLabel = new Label(L10NManager.getInstance().
formatCurrency(actualDish.price.get()), "YourOrder");
priceLabel.getUnselectedStyle().setPaddingRight(6);
Image priceImage = Image.createImage(priceLabel.getPreferredW() -
Display.getInstance().convertToPixels(4),
priceLabel.getPreferredH(), 0);
priceLabel.setWidth(priceLabel.getPreferredW());
priceLabel.setHeight(priceLabel.getPreferredH());
priceLabel.paintComponent(priceImage.getGraphics(), false);
setGlassPane((g, rect) -> {
g.drawImage(priceImage,
getWidth() - priceImage.getWidth(), getHeight() / 5);
});
Dish View

17. What did we learn?
✦Design has common concepts with programming
but a different set of rules
✦We can’t replace a designer but we can fill in
gaps
✦Let existing design do the talking: Images, Maps
etc. should dominate the UI

18. Thank You!