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. Extracting ui Design - part IV
Now that we reviewed the basic design elements lets apply this to the code

2. BaseForm
© Codename One 2017 all rights reserved
We will start with the base form which is a base class from which the top level forms will derive in the future

3. Toolbar tb = getToolbar();
tb.setUIID("Container");
tb.addSearchCommand(e -> onSearch((String)e.getSource()));
tb.addMaterialCommandToSideMenu("Shopping Cart",
FontImage.MATERIAL_SHOPPING_CART, e -> {});
Label filler = new Label(" ");
filler.setPreferredSize(getTitleArea().getPreferredSize());
currentOrderValue = new Label("Your Order: " +
L10NManager.getInstance().formatCurrency(0),
"YourOrder");
Button cart = new Button("", "ShoppingCart");
cart.addActionListener(e -> CheckoutForm.showCheckOut());
FontImage.setMaterialIcon(cart, FontImage.MATERIAL_SHOPPING_CART);
BaseForm
The init method of the base form initializes the common pieces including the search entry which is currently just a search command. It doesn’t do anything right now and
is there mostly for the icon

4. Toolbar tb = getToolbar();
tb.setUIID("Container");
tb.addSearchCommand(e -> onSearch((String)e.getSource()));
tb.addMaterialCommandToSideMenu("Shopping Cart",
FontImage.MATERIAL_SHOPPING_CART, e -> {});
Label filler = new Label(" ");
filler.setPreferredSize(getTitleArea().getPreferredSize());
currentOrderValue = new Label("Your Order: " +
L10NManager.getInstance().formatCurrency(0),
"YourOrder");
Button cart = new Button("", "ShoppingCart");
cart.addActionListener(e -> CheckoutForm.showCheckOut());
FontImage.setMaterialIcon(cart, FontImage.MATERIAL_SHOPPING_CART);
BaseForm
The PSD didn’t include a design for the side menu. It included only the icon indicating the side menu is there. I added a side menu entry to make the icon appear but it
doesn’t have any functionality or design.

5. Toolbar tb = getToolbar();
tb.setUIID("Container");
tb.addSearchCommand(e -> onSearch((String)e.getSource()));
tb.addMaterialCommandToSideMenu("Shopping Cart",
FontImage.MATERIAL_SHOPPING_CART, e -> {});
Label filler = new Label(" ");
filler.setPreferredSize(getTitleArea().getPreferredSize());
currentOrderValue = new Label("Your Order: " +
L10NManager.getInstance().formatCurrency(0),
"YourOrder");
Button cart = new Button("", "ShoppingCart");
cart.addActionListener(e -> CheckoutForm.showCheckOut());
FontImage.setMaterialIcon(cart, FontImage.MATERIAL_SHOPPING_CART);
BaseForm
I’ve mentioned the usage of a layered toolbar before. A layered toolbar “floats” on top which would mean the list of filters etc. would appear underneath it in normal
circumstances…
To avoid this I added a filler label that is as tall as the toolbar area and placed it in the top portion of the form, it pushes all the other elements downwards so they don’t
overlap with the title. The background image is a part of the style and will stay in place behind everything.

6. Toolbar tb = getToolbar();
tb.setUIID("Container");
tb.addSearchCommand(e -> onSearch((String)e.getSource()));
tb.addMaterialCommandToSideMenu("Shopping Cart",
FontImage.MATERIAL_SHOPPING_CART, e -> {});
Label filler = new Label(" ");
filler.setPreferredSize(getTitleArea().getPreferredSize());
currentOrderValue = new Label("Your Order: " +
L10NManager.getInstance().formatCurrency(0),
"YourOrder");
Button cart = new Button("", "ShoppingCart");
cart.addActionListener(e -> CheckoutForm.showCheckOut());
FontImage.setMaterialIcon(cart, FontImage.MATERIAL_SHOPPING_CART);
BaseForm
We discussed the YourOrder entry in the CSS but I would like to call out the fact that I used the localization manager to format the currency price here. That’s why price is
listed as ILS instead of USD. In this particular case this is probably wrong as prices should be delivered from the server with the currency type

7. Toolbar tb = getToolbar();
tb.setUIID("Container");
tb.addSearchCommand(e -> onSearch((String)e.getSource()));
tb.addMaterialCommandToSideMenu("Shopping Cart",
FontImage.MATERIAL_SHOPPING_CART, e -> {});
Label filler = new Label(" ");
filler.setPreferredSize(getTitleArea().getPreferredSize());
currentOrderValue = new Label("Your Order: " +
L10NManager.getInstance().formatCurrency(0),
"YourOrder");
Button cart = new Button("", "ShoppingCart");
cart.addActionListener(e -> CheckoutForm.showCheckOut());
FontImage.setMaterialIcon(cart, FontImage.MATERIAL_SHOPPING_CART);
BaseForm
We discussed the shopping cart style in the CSS too, notice we apply the shopping cart style before calling the material icon which effectively used the styles from the
CSS for the icon

8. Container orderBar = new Container(
new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER_ABSOLUTE)) {
@Override
protected Dimension calcPreferredSize() {
Dimension d= super.calcPreferredSize();
if(d.getHeight() % 2 != 0) {
d.setHeight(d.getHeight() + 1);
}
return d;
}
};
orderBar.add(BorderLayout.CENTER, currentOrderValue).
add(BorderLayout.EAST, cart);
Label opaque = new Label("", "OrderBarBackgroundOpaque");
opaque.setShowEvenIfBlank(true);
Container orderBackgroundGrid = GridLayout.encloseIn(1,
new Container(), opaque);
Container orderLayers = LayeredLayout.encloseIn(orderBackgroundGrid,
orderBar);
BaseForm
This label is placed into a grid layout with a transparent container. So the top portion shows the background image and this label abstracts it creating the effect of a line
crossing. That way it looks like the shopping cart is peeking from the bottom of the UI…
This almost works!

9. Container orderBar = new Container(
new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER_ABSOLUTE)) {
@Override
protected Dimension calcPreferredSize() {
Dimension d= super.calcPreferredSize();
if(d.getHeight() % 2 != 0) {
d.setHeight(d.getHeight() + 1);
}
return d;
}
};
orderBar.add(BorderLayout.CENTER, currentOrderValue).
add(BorderLayout.EAST, cart);
Label opaque = new Label("", "OrderBarBackgroundOpaque");
opaque.setShowEvenIfBlank(true);
Container orderBackgroundGrid = GridLayout.encloseIn(1,
new Container(), opaque);
Container orderLayers = LayeredLayout.encloseIn(orderBackgroundGrid,
orderBar);
BaseForm
Remember when I mentioned “going overboard” I meant this part.
The label in the grid layout trick almost worked and this is the workaround to get it to “work”. A grid layout takes two components and gives them the exact same size to
fill up available space. This works great except for cases where the size isn’t divisible by 2 in which case one pixel at the bottom remains “empty”. The workaround was
simple, make sure the size of the order bar is always even and that way the two components get exactly the same size, otherwise in some weird cases we’d have a line
of the image “peeking” in the bottom part.

10. List<String> categoryList = createCategoryList();
Container topBar;
if(categoryList != null) {
Label separator = new Label("", "WhiteSeparatorLine");
separator.setShowEvenIfBlank(true);
topBar = BoxLayout.encloseY(filler, categoryList,
FlowLayout.encloseCenter(separator),
orderLayers);
} else {
topBar = BoxLayout.encloseY(filler, orderLayers);
}
topBar.setUIID("TopBar");
add(BorderLayout.NORTH, topBar);
add(BorderLayout.CENTER, createContent());
BaseForm
The category list is just a list, it’s implemented in the actual form and not within the base form which is common to all the forms. So this method might return null as not
all forms will need that list

11. List<String> categoryList = createCategoryList();
Container topBar;
if(categoryList != null) {
Label separator = new Label("", "WhiteSeparatorLine");
separator.setShowEvenIfBlank(true);
topBar = BoxLayout.encloseY(filler, categoryList,
FlowLayout.encloseCenter(separator),
orderLayers);
} else {
topBar = BoxLayout.encloseY(filler, orderLayers);
}
topBar.setUIID("TopBar");
add(BorderLayout.NORTH, topBar);
add(BorderLayout.CENTER, createContent());
BaseForm
I mentioned the separator line in the CSS section but here I’d like to draw your attention to set show even if blank on the label. By default an empty label is completely
removed in Codename One. This helps achieve several design aesthetics. In this case we don’t want that behavior and we can disable that by using this method

12. List<String> categoryList = createCategoryList();
Container topBar;
if(categoryList != null) {
Label separator = new Label("", "WhiteSeparatorLine");
separator.setShowEvenIfBlank(true);
topBar = BoxLayout.encloseY(filler, categoryList,
FlowLayout.encloseCenter(separator),
orderLayers);
} else {
topBar = BoxLayout.encloseY(filler, orderLayers);
}
topBar.setUIID("TopBar");
add(BorderLayout.NORTH, topBar);
add(BorderLayout.CENTER, createContent());
BaseForm
You might recall the top bar from the CSS, it includes the title image fill style. Again notice that the portion that supposedly doesn’t have the title image showing still has
it… It’s just obscured. The whole title area is just placed in the north section of a border layout

13. List<String> categoryList = createCategoryList();
Container topBar;
if(categoryList != null) {
Label separator = new Label("", "WhiteSeparatorLine");
separator.setShowEvenIfBlank(true);
topBar = BoxLayout.encloseY(filler, categoryList,
FlowLayout.encloseCenter(separator),
orderLayers);
} else {
topBar = BoxLayout.encloseY(filler, orderLayers);
}
topBar.setUIID("TopBar");
add(BorderLayout.NORTH, topBar);
add(BorderLayout.CENTER, createContent());
BaseForm
The content differs from form to form so this is the content of the main form and isn’t implemented here. We are just invoking the method of the sub class