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.
Related
My problem is that I didn't find any way to properly add an icon near a TextComponent, inside a TextModeLayout, to mask/unmask a password.
It's a layout problem only, because the code of the ActionListener to mask/unmask the password works correctly at least in the Simulator (it's taken from Codename One - Mask and Unmask Password Field on iOS).
On iPhone skin, the InputComponents labels and text fields are not aligned correctly:
On Android skin, the text is not aligned correctly if it doesn't valide:
About my code, instead of adding the InputComponent (of the password) directly to the TextModeLayout container, I enclosed the InputComponent and the Button inside a BorderLayout, and then I added the BorderLayout container to the TextModeLayout container.
When you do that the text mode layout stops working for that component as it's unaware of the layout in the hierarchy. The hierarchy in the border layout is the responsibility of that layout.
The solution is to extend the TextComponent and add that functionality to Codename One. As a workaround we might be able to rely on the behavior of the current component since the field is already in a border layout component. So something like this might work:
TextField tf = myTextComponent.getField();
Container b = tf.getParent();
b.add(EAST, unmask);
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
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 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.
Are there some generic techniques for stopping the display flickering? I'm guessing that I have two layout animations that are fighting over the controls or something - this seems to happen in a few places in my app (hence the general question).
I'll try and be more specific too:
I have a Box Layout Y Container which contains a list of MultiButtons. The MultiButtons are my own class which inherits MultiButton. It (all the buttons) flicks when I come back to the Form from another form. In the beforeForm function I do this:
for (my loop)
{
MultiButton mb = new MultiButton();
...init code for mb, like setTextLine1();
container.addComponent(mb);
lastMb = mb;
}
container.revalidate();
container.scrollComponentToVisible(lastMb);
The beforeForm method is invoked before the form is shown so there is no need to revalidate at that stage (show implicitly does that).
What's scrollToComponent? If you remove it does it flicker?
To scroll to a component without an animation do:
container.setSmoothScrolling(false);
container.scrollComponentToVisible(cmp);
container.setSmoothScrolling(true);