CODAPPSAdvanced styling of Components

Clément Levallois

2018-01-12

Table of Contents1. Limitations to styling Components in the GUI Builder.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  1

2. Using theme.res to create a custom style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  2

3. Using our custom style in the GUI Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  8

4. Editing styles easily between the GUI Builder and theme.res . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  9

5. The case of designing Span Labels and Span Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  12

a. The case of Span Labels 12

b. The case of Span Buttons 15

The end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  15

last modified: 2018-03-16

 

this is a pretty intense lesson. You need to be execute the steps precisely for thingsto work correctly.

1. Limitations to styling Components in theGUI Builder.So far, we have learned how to create a Form, how to place Components (text, pictures, buttons) onit 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 thisresult:

 

(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" availablehere:

1

Figure 1. Styling the Components from the GUI Builder

 

But there are two limitations:

• some parameters, even when you choose them in the properties, don’t apply. For the Button, tryto select a bold and italic "font name" in the properties: it will not work (the Button will remainas it is).

• some parameters are simply not available in the GUI Builder. I’d like to put the phrase "Discoverthe beautiful landscapes… " at the center of the screen but the properties of the Label in the GUIBuilder don’t offer this possibility.

The GUI Builder is constantly improving. When you will download an updatedversion of the plugin, things might be fixed!

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

2. Using theme.res to create a custom styleIn the files of your project in NetBeans, spot the file named "theme.res". We have already used it toimport pictures, in a previous lesson.

Double click on it:

2

Figure 2. Clicking on the file theme.res

 

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

Then, click on "Themes":

Figure 3. Opening the Themes in theme res

3

 

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

Figure 4. Opening the Theme in theme res

 

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

4

Figure 5. Selecting the default style to modify it

 

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

Figure 6. Scrolling through the list of Components

 

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

5

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 italicand 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:

• keep regular Buttons styled without italic or blue color - just the default settings.

• add a style named "ButtonItalicBlue" which, when selected in the GUI Builder, willitalicize the text of your Buttons and color its text in blue. (random example)

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

Figure 7. Defining the color of the text as blue

 

The logic is simple:

• the style of "ButtonItalicBlue" will be the one of a Button, since we selected "Button" in the dropdown menu. It is our "starting point".

• but "ButtonItalicBlue" will differ at every place where we unselect "Derive" and replace thedefault value by the one we choose.

• when we will click on "OK" at the bottom of the window, we’ll have created a new style"ButtonItalicBlue", derived from "Button".

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

6

Figure 8. Adding italics to the ButtonItalicBlue style

 

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

Figure 9. The new style 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).

7

(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 theappearance of our button.

3. Using our custom style in the GUI BuilderLet’s open our Form in the GUI Builder.

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

Figure 10. Opening the GUI Builder and changing the property UIID

 

8

Figure 11. The text of the Button is now in italics and blue

 

You noticed that a problem occurred: yes, the Button is styled as we want except that the text isnow 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, thenopen theme.res again to fix things…

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

4. Editing styles easily between the GUIBuilder and theme.resThe workflow is simple:

• Open theme.res and keep it open

• Open the GUI Builder and keep it open

• modify the style in theme.res. Of course this time we don’t add a new style, we editButtonItalic Blue:

9

Figure 12. Editing the style ButtonItalicBlue we created

 

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

10

Figure 13. Changing the align property to center text

 

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

• Go back to the GUI Builder and click on an icon near the top right: it will "reload" and apply themodifications you made to theme.res:

11

Figure 14. Refreshing the theme to see the changes in the GUI Builder

 

5. The case of designing Span Labels andSpan Buttonsa. The case of Span Labels

Span Labels or Span buttons are convenient alternatives to Labels and Buttons, because when thetext is too long on them it overflows on several lines instead of being cut:

12

Figure 15. Difference between Label and SpanLabel

 

When you want to apply a style that you have created to a Span Label or a Span Button, you shouldbe careful to shift to advanced properties to find the correct UIID property to change:

13

Figure 16. Switching to the advanced properties of the Span Label

 

Figure 17. The text of the Span Label but also its icon can be styled

 

14

b. The case of Span Buttons

The same logic as Span Labels apply (see just above): access the "Advanced Properties" of the SpanButton to change its "text UIID" property.

The endQuestions? Want to open a discussion on this lesson? Visit the forum here (need a free Githubaccount).

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

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

• copy and redistribute the material in any medium or format

• Adapt — remix, transform, and build upon the material

⇒ 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

15