Hiding element while preserving its space in page layout - codenameone

I'm making a list of containers programmatically. These containers have a table layout with two cells. In first cell I'm showing a checkbox and in second cell is a multibutton:
In some rows I would like disable user to click on a checkbox. I've tried using .setHidden(true), setVisible(true), etc.. on a checkbox but in that case checkbox is not visible(which is also acceptable) but in that case it is not preserving it's space and data in rows are not vertically aligned(as you see in the image). Does anyone know how to achieve this??? Graying and disabling the checkbox would be great, but not showing it and preserving it's space would be acceptable.
Here's the code:
Container list = findContainerOrders(f);
list.setScrollableY(true);
LinkedHashMap htJSONObject;
//al is a ArrayList
for(int i=0; i < al.size(); i++){
htJSONObject = (LinkedHashMap)al.get(i);
Container cr = new Container();
TableLayout gr = new TableLayout(1, 2);
gr.setGrowHorizontally(true);
cr.setLayout(gr);
final MultiButton b = new MultiButton();
b.setName((String)htJSONObject.get("text1"));
b.setTextLine1((String)htJSONObject.get("text2"));
b.setTextLine2((String)htJSONObject.get("text3"));
b.setTextLine3((String)htJSONObject.get("text4"));
b.setUIIDLine1("MultiLine1");
b.setUIIDLine2("MultiLine2");
b.setUIIDLine3("MultiLine1Right");
b.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ev) {
//some action here
}
});
CheckBox cb = new CheckBox();
cb.setName((String)htJSONObject.get("text1"));
String sSomeCondition = (String)htJSONObject.get("Condition");
//If this condition equals "NO" than I want to disable the checkbox
if (sSomeCondition.equals("NO")) {
// I've tried this but it doesn't work good
//cb.setHidden(true);
//cb.setHidden(true, true);
//cb.setVisible(true);
//cb.setEnabled(false);
//TODO - disable checkbox code....???
}
else {
cr.addComponent(cb);
}
cr.addComponent(b);
list.addComponent(cr);
}
When I use "setEnabled(false)" like Chen said in his answer, the checkbox is disabled but it's apperence is the same. I have a disabled style for my checkbox in my theme and I was able to change checkbox background but I want to change the color of the checkbox rectangle.
I tried to do that by adding constant "checkBoxUncheckDisImage" in a theme "Constants" tab and adding another image which would replace checkbox rectangle image but it didn't work.
How do I change the default checkbox image for a disabled checkbox?

setEnabled(false) should do the trick, make sure you have a disabled style for the CheckBox in your theme

Related

Windows Forms Button: Disable text shifting when pressed

I would like to self-draw the checkmark of a Checkbox, as explained here.
This requires setting the CheckBox to checkBox.Appearance = Appearance.Button and then disabling the borders. Meaning, the CheckBox is now rendered as if it was a button. When it is checked, it is rendered as a depressed button.
Unfortunately, a depressed button has its text shifted slightly to the right and downwards. This behaviour is not commonly seen in a CheckBox.
var cb = new Checkbox();
cb.Paint += delegate (object sender, PaintEventArgs e)
{
// Here you can custom-draw the Checkmark.
// (but I'd like to fix the text-shifting first)
};
cb.Appearance = Appearance.Button;
cb.TextAlign = ContentAlignment.MiddleRight;
cb.FlatStyle = FlatStyle.Flat;
cb.FlatAppearance.BorderSize = 0;
Is it possible to configure a Button (or a CheckBox configured as Button) so that the text is not shifted when it is being depressed?

FloatingActionButton on TextArea not working as expected

I tried to use a com.codename1.components.FloatingActionButton in combination with a com.codename1.ui.TextArea.
Now I have two questions:
Apparently the valign is not honored - is it a bug?
The actionListener of the FloatingActionButton is not called. Is anything wrong with my usage or is it a bug?
Here is the code to demonstrate it:
public class FormFabOnText extends Form {
public FormFabOnText() {
setTitle("FormFabOnText");
setLayout(new BorderLayout());
Container contentPane = getContentPane();
contentPane.add(BorderLayout.NORTH, new SpanLabel(
"This form contains a TextArea and a FloatingActionButton combined by bindFabToContainer. "
+ "It demonstrates that the FloatingActionButton is not working in this constellation."));
TextArea textArea = new TextArea();
float iconDefaultSize = FloatingActionButton.getIconDefaultSize();
try {
FloatingActionButton.setIconDefaultSize(2.0f);
FloatingActionButton floatingActionButton = FloatingActionButton.createFAB(FontImage.MATERIAL_CLEAR);
Container containerFab = floatingActionButton.bindFabToContainer(textArea, Component.RIGHT, Component.CENTER);
floatingActionButton.addActionListener((e) -> textArea.setText(""));
contentPane.add(BorderLayout.CENTER, containerFab);
} finally {
FloatingActionButton.setIconDefaultSize(iconDefaultSize);
}
}
}
The text area has 0 height so when you valign to the center the button correctly places itself on top. Then you add it to a border layout which stretches it across but the preferred size of the text area determines the valign so it stays.
I'm not sure if there is a good workaround for that other than a bit of margin like we did in the msuikit demo.
The issue with tapping during editing is probably related to the native editing peer. Tapping inside the text area gets sent to the native layer for editing otherwise elements below might cause an issue. Text input is a peer but also a very special case.

Changing scroll bar color programmatically

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.

Cannot handle action events on Labels?

I've dynamically created a horizontal scrolling list of labels (with icon and bottom text) within a container in a tab.
However, I cannot seem to bind any action to this Label - I want touch, long press, options(commands), drag, etc
If I use Button instead of Label, I cannot seem to use URLImage to grab the icon from a url and save it to storage and use that as the button icon. It always uses only the placeholder from:
Image img = URLImage.createToStorage(placeholder, counter+"_thumbnail", thumbnailURL, URLImage.RESIZE_SCALE);
How do I grab events on the Labels? Here is a snippet of how I'm adding the labels to the container:
Container c = StateMachine.instance.findFirstListContainer();
for(...){
Label l = new Label();
l.setText(title);
l.setIcon(img);
l.setUIID("listItem");
l.setTextPosition(2);
c.addComponent(l);
}
You should use a Button rather than a Label and invoke the setUIID("Label") method.
The reason why you didn't do this is a separate question/issue: https://groups.google.com/d/msg/codenameone-discussions/5HoDEFjB5II/5dc4iKuYNSYJ

DataGridView is not painted properly

I have a DataGridView in a wizard which is created using TabControl. When this DataGridView is shown, a mixture of cell contents and previous wizard page is displayed. When I click next to show next wizard page and then go to previous page, DataGridView display correctly. I take a picture of this:
First cell from right in first row corrupted.
How can I fix this?
EDIT:
You can reproduce this bug this way: place a small DGV in a form. My DGV width is 268 and its height is 247. Add six columns to it. Put these lines of code in form load event method:
string[] row = new string[6];
for (int i = 0; i < 10; i++)
{
row[0] = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
row[1] = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
row[2] = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
row[3] = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
row[4] = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
row[5] = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
dataGridView1.Rows.Add(row);
}
Finally go to DGV properties then DefaultCellStyle and change BackColor to Transparent. Run and the only thing you need to do is to scroll to right. A picture of this problem:
I think the problem is Transparent color. Changing Transparent to some color other than Transparent will solve the problem but I do not know why.
Thank you .. yes this is related to Transparent colour , i have changed Transparent to White and my DGV works well.

Resources