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. Styles - Part I
In this section we’ll discuss the style form which allows us to determine the style of elements within the application

2. The Style Form
© Codename One 2017 all rights reserved
The style form allows us to view the main UI of the application and touch various elements so we can customize their foreground color, background color & font. There
are a lot of limitations I imposed on this UI to keep things relatively simple… Font can’t be customized on something that doesn’t actually have a font such as an icon. We
only allow a very small selection of font options, the reason for that is the difficulty of getting this right across platform where there are so many options available.
The color picker is also a relatively simple widget that just allows us to drag the RGB channels or set the hex value of the color. I wanted to keep this UI as trivial as
possible. You can reset the changes in two ways, use the back button on the top left without saving or use the “restore style” option within the popup dialog.

3. The style form allows us to define that UI, notice that it derives from Form but is otherwise a pretty standard class. We derive from Form instead of the base form class as
we don’t want the side navigation menu and other frills that come with the custom base class.
There is another reason, we want to apply styling aggressively and if we derive from the main form we might run into some issues.

4. The style settings class contains information about changes to a specific style, we use this to store the changes defined by the user and send this data to the user. I’ll
cover that class soon enough.

5. The toolbar styling is something we need to do in code, otherwise when we start shifting styles around things can get messy.

6. This is the back command and right below we can see the OK command with the check next to it. Both do exactly the same thing, they reload the builder theme so we
can restore it just like we did in the preview code. Then show the previous form.
One thing I do want to highlight here is the insertOrUpdate call which loops over the styles and saves them when we make a change

7. As you can see the theme for the restaurant app is set when we first launch this form so it controls most of the UI here.

8. Moving ahead we can see the code that deals with applying the styles saved in storage. We load the styles from the storage and then loop over them. For each type font,
foreground or background we create a theme entry.
A theme in Codename One is a Hashtable that has keys and values with the format you see in the code. For instance Button dot fgColor represents the foreground color
for the theme and so forth.
We can then use addThemeProps to layer this theme on top of the existing theme and thus load the style settings from the database.

9. Moving on we place the main menu form from the restaurant app in the center of the UI so we can click on the actual restaurant app. Notice we make the toolbar
focusable, we need that so that tapping on the toolbar will allow us to customize it otherwise some special case logic of the form class might kick in.

10. We override the pointer events in the form such as pointer dragged, pressed etc. If the event is in the content pane we discard it if not we send it on. This allows events in
the toolbar but blocks events everywhere.
This works because events in Codename One propagate thru the parent form and so if we override the pointer events and don’t call super it’s as if the event never
happened. That can be useful if we want to provide completely custom functionality.

11. We override the pointer events in the form such as pointer dragged, pressed etc. If the event is in the content pane we discard it if not we send it on. This allows events in
the toolbar but blocks events everywhere.
This works because events in Codename One propagate thru the parent form and so if we override the pointer events and don’t call super it’s as if the event never
happened. That can be useful if we want to provide completely custom functionality.

12. The pointer released override is below the get style setting and we’ll discuss that more in-depth soon enough but first I want to talk a bit about the get style settings
method. This method caches styles from SQL and loads them lazily. You might think “why would we need that?”.
The reason is cancel. We need the ability to cancel the changes so we can’t persist every style change we make. We need to save them in the list and only update the
database when the OK button is pressed.