How can I create a theme for a dialog box?
I was trying to change the border style of the dialog box but the border style applies 2 times for an inner element and for an outer element. I was expected that the border style applies only to the inner element.
To be clearer, as I cannot add image to my post, it seems that the dialog does not consist only from the center box which is showed while dialog is active. The dialog UI consists from a “background form” which usually is transparent and from a container which overlay over the background form. The last mentioned container contains de graphic representation of the “dialog box”.
My issue is that I can not apply my style only to the container which contains the dialog box but the style applies also to the background form.
How can I apply the border style only to the dialog box container element?
Any additional tips will be highly appreciated.
Thanks.
How are you applying the style? Are you using the theme to apply a style to the Dialog UIID as explained here.
Using setStyle or getStyle on a dialog component would be problematic and would not result in proper styling (you might get away with doing it on getDialogComponent but you should work with the theme).
Notice that to style a dialog you should use Dialog, DialogTitle & DialogBody UIID's and quite a few theme constants.
Thanks Shai,
is clear now.
I’m doing a custom dialog starting from the BlankDialog element provided in designer.
Because I started from BlankDialog I thought that overriding only UIID theme is enough.
I understood the BlankDialog structure wrongly thinking that is a simple empty form because is named "Blank…"
Is clear now that for every new UI object added, I should check if it has any other UI child to be customized together with the parent.
Thanks again.
Related
I have tried everything possible to style my Tab component but its not getting reflected. I want my selected Tab to have a white background and red foreground. Even though I have edited Style using Theme designer. Its still doesnt work. I read the docs and I am aware Tab component is now like a toggle. I did the suggestion to setTabUIID(null) but still cant get it to work. How can this be done.
You don't need the setTabUIID(null); just make sure to style both selected and unselected styles. Also override the Border to Empty if you don't define a border.
I just started building my first App with Codename One and I'm having quite some trouble. :-)
I cant change the background color of a TextField, I changed everything in the Theme and named it "TextField". At the Color tab I changed the background color and set Transparency to 255. Since the Component is named TextField, shouldnt the style be applied automatically when I make a new TextField?
I also tried to set the UIID manually to "TextField", which didn't help either.
Am I missing something?
Kind regards,
Max
The way backgrounds work in Codename One is this:
Border is applied first
Then image
Then gradient
Then color
TextField and other components such as Button etc. often have a default border derived from the theme.
Switch to the Border tab, click derive then click the ... button and select empty.
I'm trying to create Custom Form configuration with scrollable TitleArea. The Form (black) has a BoxLayout.Y_AXIS Layout in BorderLayout.CENTER (blue). StatusBar (green) stays in BorderLayout.NORTH (green), when rest of the TitleArea (cyan) is in the first position in BoxLayout.
removeComponentFromForm function is unavailable for using in extended class. How can I remove components from Form to removing titleArea from BorderLayout.NORTH?
Why use the title area at all? Why not just add a component to the top of the box layout Y and style it as a Title that way you can scroll it out?
You can also use the new Toolbar API that includes many abilities to fade out the title as you scroll etc. See:
http://www.codenameone.com/blog/toolbar.html
http://www.codenameone.com/blog/cats-in-toolbars.html
I have created a custom theme for my application. The base color of the theme is white. I have a tabpanel on one of my view. There are almost 15 tabs on that view. Not all the tabs can be visible at the same time therefore scrollers are added by default for navigation between tabs at left and right. The issue is the color of the scrollers. With neptune or any other default theme these scrollers are clearly visible but with the custom theme they are plain white. User can't even know that there are srollers there. The scroller image is also not visible. Can someone specify the SAAS variables that configures the scroller appearance? $panel-tool-background-image: 'tools/tool-sprites' or $panel-tool-background-image: 'tools/tool-sprites-dark' do not work either.
The documentation should provide what you need ("CSS Variables" section). There are a few relating to the scroller.
http://ext5-docs.site/#!/api/Ext.tab.Panel
You could also look at using the extjs-tab-panel-ui mixin to create a custom ui for your tab panel:
http://docs.sencha.com/extjs/5.0/core_concepts/theming.html#Creating_Custom_Component_UIs
How to use an image as a button in GTK in c language in code blocks? I have tried making the button of same color as that of the background and then adding image on it. But there is a outline or shadow still there. So, how can i remove those shadows or is there a way to directly use an image as a button?
One way is outlined by #Shabhaz, by putting the image in an EventBox, and handling the button-press event.
The other way is by placing the image in the button and customizing the style of the button to remove the outline and the shadow. You would call gtk_rc_parse_string() to define an outline-less button class, and gtk_widget_set_name() on your button to apply the style.