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 IV
Now that we have a general picture of our final destination lets figure out how to get there…

2. TopBar {
margin: 0px;
padding: 0px;
}
DishViewDescription {
font-family: "native:ItalicLight";
font-size: 2.5mm;
padding: 2mm;
margin: 0px;
text-align: left;
color: white;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
}
TintToolbar {
cn1-derive: Container;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0));
}
MapAddress {
padding: 1mm;
margin: 0px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.1));
}
CSS
The transparent gradient at the bottom of the dish view is almost entirely CSS which is pretty cool. This CSS generates an image which is then overlaid with
transparency.
I also chose an italic font for this case which might be more appropriate for the dish description

3. TopBar {
margin: 0px;
padding: 0px;
}
DishViewDescription {
font-family: "native:ItalicLight";
font-size: 2.5mm;
padding: 2mm;
margin: 0px;
text-align: left;
color: white;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
}
TintToolbar {
cn1-derive: Container;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0));
}
MapAddress {
padding: 1mm;
margin: 0px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.1));
}
CSS
The toolbar also uses the gradient tint, it derives from Container to get the 0 padding & margin

4. TopBar {
margin: 0px;
padding: 0px;
}
DishViewDescription {
font-family: "native:ItalicLight";
font-size: 2.5mm;
padding: 2mm;
margin: 0px;
text-align: left;
color: white;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
}
TintToolbar {
cn1-derive: Container;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0));
}
MapAddress {
padding: 1mm;
margin: 0px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.1));
}
CSS
The map address is similar to the dish overview description with a bit of padding

5. MapAddressText {
font-family: "native:ItalicLight";
font-size: 2.5mm;
padding: 1mm 2mm 1mm 1mm;
margin: 0px;
text-align: left;
color: white;
background-color: transparent;
}
SideNavigationPanel {
background-color: white;
}
SideCommand {
border-bottom: #016cb8 solid thin;
background-color: #31aaff;
text-decoration: none;
color: white;
padding: 3mm;
margin: 0px 0px 1px 0px;
font-family: "native:MainLight";
font-size: 4mm;
}
StatusBarSideMenu {
background-color: transparent;
padding: 0px;
}
CSS
The text of the map address is a separate component unlike the dish overview which means these UIID’s are effectively different.

6. MapAddressText {
font-family: "native:ItalicLight";
font-size: 2.5mm;
padding: 1mm 2mm 1mm 1mm;
margin: 0px;
text-align: left;
color: white;
background-color: transparent;
}
SideNavigationPanel {
background-color: white;
}
SideCommand {
border-bottom: #016cb8 solid thin;
background-color: #31aaff;
text-decoration: none;
color: white;
padding: 3mm;
margin: 0px 0px 1px 0px;
font-family: "native:MainLight";
font-size: 4mm;
}
StatusBarSideMenu {
background-color: transparent;
padding: 0px;
}
CSS
I set the background of the side menu bar to be white, besides fitting with the general design and separating it from the form color this has another important use

7. MapAddressText {
font-family: "native:ItalicLight";
font-size: 2.5mm;
padding: 1mm 2mm 1mm 1mm;
margin: 0px;
text-align: left;
color: white;
background-color: transparent;
}
SideNavigationPanel {
background-color: white;
}
SideCommand {
border-bottom: #016cb8 solid thin;
background-color: #31aaff;
text-decoration: none;
color: white;
padding: 3mm;
margin: 0px 0px 1px 0px;
font-family: "native:MainLight";
font-size: 4mm;
}
StatusBarSideMenu {
background-color: transparent;
padding: 0px;
}
CSS
One of the important things to notice about the side command is that margin is 0 except for the bottom where we have a 1 pixel margin. If you will look at the entries you
will see a 1 pixel white line between the command entries. That’s the white color of the side navigation panel coming thru between the entries, it’s not a separation line it’s
literally the background.
Side commands are styled very differently in the native themes so we need to override a lot of behaviors such as text decoration which is set to 3d text in iOS. 3d text
draws a subtle shadow under every letter

8. MapAddressText {
font-family: "native:ItalicLight";
font-size: 2.5mm;
padding: 1mm 2mm 1mm 1mm;
margin: 0px;
text-align: left;
color: white;
background-color: transparent;
}
SideNavigationPanel {
background-color: white;
}
SideCommand {
border-bottom: #016cb8 solid thin;
background-color: #31aaff;
text-decoration: none;
color: white;
padding: 3mm;
margin: 0px 0px 1px 0px;
font-family: "native:MainLight";
font-size: 4mm;
}
StatusBarSideMenu {
background-color: transparent;
padding: 0px;
}
CSS
Normally there is a status bar component on top of the side menu in iOS so the clock or battery indicators don’t draw on top of the side menu. Since we have an image
here this isn’t a problem and we can set its size to 0.

9. QuantityPicker {
border: cn1-round-border;
background-color: #31aaff;
color: white;
padding: 2mm 2mm 2mm 2mm;
margin: 0px;
}
CSS
I thought about using the exact same UIID as I used for the shopping cart button but that button has a bit of margin to push it away from the side of the form. I probably
should have used inheritance here but I didn’t