CODAPPS: Advanced styling of Components

So far, we have learned how to create a Form, how to place Components (text, pictures, buttons) on it and how to get these Components organized on screen.

Using a Span Label, a Scaled Label for the picture and a Button, all in a Box Y Layout, we get this result:

(note: the arrow next to "Go for a tour!" was added thanks to the "Icon" property of the Button, where I selected the pic "arrow" "from Material Icon")

The color of the text of the Button can be changed by accessing the property "Fg Color" available here:

But there are two limitations:

When these situations arise, the solution is to work from a different location to apply your styles. Let’s see how:

In the files of your project in NetBeans, spot the file named "theme.res". We have already used it to import pictures, in a previous lesson.

Double click on it:

→ It launches a new window. Be patient, it takes a bit of time to open!

Then, click on "Themes":

Now double click on "Theme" (not on "Add a Theme") to access the list of all the styles applied by default to your Components:

What you see now is the default style of your theme. Select it, and click on "Add" because we want to add a new style for our Buttons

The window which opens now deserves a bit of explanation. In the drop down menu on top, you can see the list of all possible Components:

Once you have selected "Button" in the list, you will be able to modify the style of all the Buttons in your app.

But what you want is slightly different: you want to keep all your Buttons with the default style, but you also want to have just one Button (the one that says "Go for a tour!" - see above) in italic and in a blue color.

How to style this one Button without changing the style of all other Buttons in the rest of your app?

What you need is to:

To achieve this, rename "Button" as "ButtonItalicBlue" (careful! no spaces! Don’t forget the capitalized letters!) on top of the window, and start defining this specific style you want:

The logic is simple:

So we have defined a blue color for the text, now let’s make this text italicized:

We closed the window for styling, and we see our new style appearing in the list of available styles:

You can leave the window theme.res opened, but make sure you save the changes you just made (File → Save).

(if you don’t save, the GUI Builder will not be able to find and use the new style you created).

We are now ready to come back in the GUI Builder of our Form, and use this style to change the appearance of our button.

Let’s open our Form in the GUI Builder.

To change the style of our Button to "ButtonItalicBlue" that we just created, we simply need to modify the property "UIID":

You noticed that a problem occurred: yes, the Button is styled as we want except that the text is now aligned to the left, not centered!

How to fix this?

The basic principle is the same: what you can’t fix in the GUI Builder, you fix it in theme.res

It can be annoying to open theme.res, change styles, close theme.res, open the GUI Builder, then open theme.res again to fix things…​

Luckily there is an easy way to work between the GUI Builder and theme.res.

The workflow is simple:

A new window opens: the place we have already seen, where you can change many aspects of style.

Again, make sure theme.res is saved. You can keep the window open.

Questions? Want to open a discussion on this lesson? Visit the forum here (need a free Github account).

Find references for this lesson, and other lessons, here.

Licence: Creative Commons, Attribution 4.0 International (CC BY 4.0). You are free to:

⇒ for any purpose, even commercially.

This course is designed by Clement Levallois.

Discover my other courses in data / tech for business: http://www.clementlevallois.net

Or get in touch via Twitter: @seinecle