The document discusses code for creating the main user interface (UI) form in an app called MainMenuForm. It describes creating a list of menu categories using Codename One's built-in List component. It also describes creating individual dish containers that display each dish's title, description, price and image, including adding buttons and applying image masking to give images rounded corners. The dish containers are then added to the main form.

1. Extracting ui Design - part V
Right now we have only one subclass of the base form

2. MainMenuForm
© Codename One 2017 all rights reserved
The main menu form which represents the main UI

3. @Override
protected List<String> createCategoryList() {
List<String> l = new List<String>("Breakfast",
"Lunch", "Specials", "Drinks", "Deserts") {
@Override
protected boolean shouldRenderSelection() {
return true;
}
};
((DefaultListCellRenderer<String>)l.getRenderer()).
setAlwaysRenderSelection(true);
l.setIgnoreFocusComponentWhenUnfocused(false);
l.setOrientation(List.HORIZONTAL);
l.setFixedSelection(List.FIXED_CENTER);
return l;
}
MainMenuForm
The list of elements on top is a standard Codename One list. Normally selection won’t appear in the list once our finger is lifted so we had to explicitly invoke some
methods to force that behavior. We also set the list to horizontal mode and fixed center mode.

4. private Container createDishContainer(String title, String body, float price, Image dish) {
TextArea ta = new TextArea(body, 3, 80);
ta.setEditable(false);
ta.setFocusable(false);
ta.setGrowByContent(false);
ta.setUIID("DishListBody");
Button order = new Button("Order " + L10NManager.getInstance().
formatCurrency(price), "AddToOrderButton");
Button moreInfo = new Button("More Info", "MoreInfoButton");
Image dishMasked = MaskManager.maskWithRoundRect(dish);
Container dishContainer = BorderLayout.center(
BoxLayout.encloseY(
new Label(title, "DishListTitle"),
ta
));
dishContainer.add(BorderLayout.EAST, new Label(dishMasked));
dishContainer.add(BorderLayout.SOUTH, GridLayout.encloseIn(2, order, moreInfo));
dishContainer.setUIID("DishListEntry");
return dishContainer;
}
MainMenuForm
The dish container uses a text area for the content, since text areas can grow we need to disable that behavior as we’d prefer cropping of the text in this case.

5. private Container createDishContainer(String title, String body, float price, Image dish) {
TextArea ta = new TextArea(body, 3, 80);
ta.setEditable(false);
ta.setFocusable(false);
ta.setGrowByContent(false);
ta.setUIID("DishListBody");
Button order = new Button("Order " + L10NManager.getInstance().
formatCurrency(price), "AddToOrderButton");
Button moreInfo = new Button("More Info", "MoreInfoButton");
Image dishMasked = MaskManager.maskWithRoundRect(dish);
Container dishContainer = BorderLayout.center(
BoxLayout.encloseY(
new Label(title, "DishListTitle"),
ta
));
dishContainer.add(BorderLayout.EAST, new Label(dishMasked));
dishContainer.add(BorderLayout.SOUTH, GridLayout.encloseIn(2, order, moreInfo));
dishContainer.setUIID("DishListEntry");
return dishContainer;
}
MainMenuForm
We’re adding the two buttons using this code which includes the pricing in the label. Notice these are enclosed in a grid layout to the south portion of the container

6. private Container createDishContainer(String title, String body, float price, Image dish) {
TextArea ta = new TextArea(body, 3, 80);
ta.setEditable(false);
ta.setFocusable(false);
ta.setGrowByContent(false);
ta.setUIID("DishListBody");
Button order = new Button("Order " + L10NManager.getInstance().
formatCurrency(price), "AddToOrderButton");
Button moreInfo = new Button("More Info", "MoreInfoButton");
Image dishMasked = MaskManager.maskWithRoundRect(dish);
Container dishContainer = BorderLayout.center(
BoxLayout.encloseY(
new Label(title, "DishListTitle"),
ta
));
dishContainer.add(BorderLayout.EAST, new Label(dishMasked));
dishContainer.add(BorderLayout.SOUTH, GridLayout.encloseIn(2, order, moreInfo));
dishContainer.setUIID("DishListEntry");
return dishContainer;
}
MainMenuForm
We discussed masking before and here is where we apply it to the image object so it has the rounded corner appearance

7. private static Object mask;
private static Image maskImage;
public static Image maskWithRoundRect(Image img) {
if(maskImage == null) {
maskImage = Resources.getGlobalResources().
getImage("round-rect-mask.png");
mask = maskImage.createMask();
}
Image imgMasked = img.fill(maskImage.getWidth(),
maskImage.getHeight());
imgMasked = imgMasked.applyMask(mask);
return imgMasked;
}
Masking
The mask with round rect method uses this image as a mask and applies it to the given image