Problems with conversion from theme.res to thema.css - css

Question

I have an app for the 2018 World Cup calendar and I want to update it to 2022. I ran into a couple of problems:
The form in the title used to show a background image and now I can't get it to appear. I have tried with tbMenu.getTitleComponent().setUIID("TitleArea"); and it does not work.
TitleArea {
background-image: url(images/rojo.png);
background-color: red;
color: white;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
I also put buttons that change when pressing a forward or back command and now it only shows the first time and when I press the command the area appears blank.
Try "tbMenu.setTitleComponent(cnP);" which works for the first time but it doesn't update when i press the command.
I appreciate the support
Hi,
I have placed an image in drive because stackoverflow sends me an error when trying to place it. https://drive.google.com/drive/folders/1LVBZPMCTTTEZxEYfwrh3S2_fPzyktTiN
As you can see, I tried several combinations and not from what I deduced the problem is about the title area because in certain parts it works. I copy the changes I made to the CSS and the image shows the result in the hope that it will tell me which is the correct way.
Title {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: red;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
TitleArea {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: black;
text-align: center;
font-family: "native:MainBold";
font-size: 10mm;
}
TitleCommand {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: black;
text-align: center;
font-family: "native:MainBold";
font-size: 10mm;
}
TitleCustom {
background-color: transparent;
color: white;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
I also include the method where I load the titles for the first time.
final Toolbar tbMenu = new Toolbar();
this.setToolBar(tbMenu);
Vector vGP = grupoResultadosActivos("A");
Container cnP = new Container(new BoxLayout(BoxLayout.Y_AXIS));
Label lbTitulo = new Label("GRUPO A");
lbTitulo.setUIID("Title");
cnP.addComponent(lbTitulo);
if (vGP.size() > 0) {
int cnt = contadorBarraPaises(vGP);
if (cnt > 0) {
cnP.addComponent(cargaBarraPaises(vGP, cnt));
}
}
cnTitleArea.add(cnP);
cnTitleArea.setUIID("TitleCustom");
tbMenu.setTitleComponent(cnTitleArea);
tbMenu.repaint();

Answer 1

It's hard to tell with things like this. I suggest using the component inspector and reviewing the components in the hierarchy to see what went through then editing the CSS dynamically to see the changes.
Important: sometimes changes don't apply in this way!
You will need to stop the simulator and delete the res file. Then do a clean build. It's rare but it happens in some configurations and might be misleading.
About the specific issues. For the first try adding:
cn1-background-type: cn1-image-scaled-fill;
setTitleComponent is problematic since it overrides the entire title area. Many generic behaviors will stop working if you do that. It's an all or nothing situation and might be the reason other things don't work.