Changing scroll bar color programmatically - codenameone

I have a requirement to change the color of the scroll bar based on some user selection.
In a typical form, I have switch case where is I am setting the scroll bar color using:
#Override
protected void beforeTopic(final Form f) {
int scrollColor=0x000000;
switch(userSelectedTopic)
{
case 1:
scrollColor=0x59be8a;
break;
case 2:
scrollColor = 0xff3333;
break;
.
.
.
}
// setting color to scroll thumb
Style s = UIManager.getInstance().getComponentStyle("ScrollThumb");
System.out.println(scrollColor);
s.setFgColor(scrollColor);
s.setBgColor(scrollColor);
s.setBgTransparency(255);
UIManager.getInstance().setComponentStyle("ScrollThumb", s);
s = UIManager.getInstance().getComponentStyle("ScrollThumb");
System.out.println("-->>"+s.getFgColor());
}
What happens is that the color code is picked properly for the first time.
When this form is invoked again, with a different user selection, the color code value changes as per the switch statement. The style attributes also change.
However, the initial color applied to the thumb prevails!
What could be the issue?
I tried f.refreshTheme(); but this does not seem to work. It just sustains the first applied color

That won't work. getComponentStyle will always return a copy which is the way it should be. Otherwise when you do something like getUnselectedStyle().setFgColor() you will change the color of all the components.
One way to do that is to update the theme, you can define another theme that just sets the color of the scroll then apply it using addThemeProps of the UIManager and then invoke refreshTheme() on the form.
The alternative is to derive the scrollable component and paint the scroll yourself or hide the scroll entirely and paint it yourself using the glasspane or something like that.

Related

How do I change the colours of the Switch component?

I want to change the colour of the thumb of the Switch component to green instead of the standard black.
According to the documentation "You can customize the look and feel of a switch using styles, either directly in the theme.res file or in CSS." and "The thumb will be rendered using Switch's Style.getFgColor(). It will use the selected style, when in the "on" position, the unselected style when in the "off" position,"
https://www.codenameone.com/javadoc/com/codename1/components/Switch.html
I have tried adding a "Switch" style to the theme.res file. In the theme preview I see my changes. When I run the app in the simulator, there is no change.
I also tried changing the style in code:
swPrdp.setUIID("Switch");
I still get the standard black thumb.
I also tried:
swPrdp.getAllStyles().setBgColor(0xcccccc, true);
swPrdp.getSelectedStyle().setFgColor( 0x59925A, true);
with and without the second argument (true). Still no change.
I am trying to keep the app size to a minimum, so I don't want to go the route of specifying images.
Where am I going wrong?
This should work in the theme too and works for me in the style object (which is easier to write here:
Form hi = new Form("Switch", BoxLayout.y());
Switch s = new Switch();
s.getAllStyles().setFgColor(0xff0000);
s.getAllStyles().setBgColor(0xff);
hi.add(s);
hi.show();

how to make Toolbar overlaying in CN1?

Since the Form ,where a content pane and the toolbar is part of, has a LayeredLayout I tried to set insets of each container appropriately to manage this but it doesn't seem to work. Is it possible in a form at all?
val l = layout as LayeredLayout
l.setInsets(toolbar, "0 0 auto 0")
.setInsets(contentPane, "0")
.setReferenceComponentTop(contentPane, null)
To get the Toolbar floating on top effect you need to construct it differently. This places it in the forms layered pane which floats above everything. You can't set the layout above the content pane to something else as this is a hidden implementation detail.
If global toolbar is enabled you can just override this method in Form:
protected void initGlobalToolbar() {
setToolbar(new Toolbar(true));
}
Otherwise you can just use the setToolbar(new Toolbar(true)); to create a floating toolbar.

How do I set the color of the radio button's control?

How do I set the color of the radio button's control? No matter what color I specify in the style, it draws the outer circle and inner bullet in black. I want it to draw in in white on a black background to match my theme, but it always draws in black. (I'm actually doing this in a Multi-Button, setting the color of the Emblem UIID.)
I tried the first suggestion, to define the constants. That didn't work. Here's what happened.
I tried it two ways. First I defined just the radioSelectedImage and radioUnselectedImage. When that didn't work, I added both the radio*DisImage values, but it did the same thing. The selected and unselected images worked fine, but as soon as I touched a radio button, it got the focus, and the button was drawn in black, which made it invisible against my black background.
I did find an approach that worked, but it required the use of two deprecated classes. Here's what I added to the init() method of my main class:
LookAndFeel lookAndFeel = UIManager.getInstance().getLookAndFeel();
if (lookAndFeel instanceof DefaultLookAndFeel) {
DefaultLookAndFeel defaultLookAndFeel = (DefaultLookAndFeel) lookAndFeel;
Image sel = theme.getImage("RadioButtonSelected.png");
Image unSel = theme.getImage("RadioButtonUnselected.png");
defaultLookAndFeel.setRadioButtonImages(sel, unSel, sel, unSel);
defaultLookAndFeel.setRadioButtonFocusImages(sel, unSel, sel, unSel);
}
The difference here is that I have a way to set the focus images. I can't do that using the constants, which is probably why it doesn't work. I'd really rather not use deprecated classes.
There are theme constants to allow you to add images to the radio button for unselected, selected, etc. Look here...
https://www.codenameone.com/manual/advanced-theming.html

Change size carousel when change orientation in sencha touch 2

I put my carousel in container item.
In portrail mode, I set height 150, the images display fullscreen in carousel.
But when I change to landscape orientation, there are two white blank in two side of images.
I want change size carousel by setting another value of height. Can you help me solve this problem?
You need to catch the orientationchange event
(http://docs.sencha.com/touch/2.0.2/#!/api/Ext.viewport.Default-event-orientationchange) and upon catching it call a function which will resize your container.
You can try something like this:
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this);
Then in the handle function set your desired size of component:
handleOrientationChange: function(){
Ext.getCmp('idOfMyContainer').setWidth('480px'); //or setHeight() depending on the real problem
}
You could also set the width and height according to the real size of screen, which you can get by calling these methods. Note that orientation change doesn't affect the return values of these so you would need to switch it manually:
Ext.Viewport.getWindowWidth();
Ext.Viewport.getWindowHeight()

How to change the BarButtonItem back color?

I am currently working in the C# windows application with DevExpress controls.
Now I want to change back color of bar button item while loading the form.
I've tried following code:
barButton.Appearance.BackColor = Color.Red;
but the bar button back color not changed to red.
By default, bars use the skins to draw their content. In this case, all background colors are provided by specific skin elements, which cannot be changed. The only way to change a specific item's background color is to disable skins:
put the BarAndDockingController component onto a form, and assign it to the BarManager.Controller property. Set BarAndDockingController.PaintStyleName or LookAndFeel to any non-skin style(for example "Flat"). Then use the Bar.Appearance.BackColor property to set the desired color.
Alternatively, you can create your own custom barItem in a way similar to the one described in the How to change the background color of highlighted links KB article.

Resources