I am trying to have a button on my C# windows form with a name "Click Me"
It looks like the button text accepts only the words before the space and ignores the rest.
Having:
this.button_ClickMe.Text = "Click Me";
Displays my button with text "Click" only.
Any idea why? and is there a work-around??
Ivar
I suspect the button is just too small. Make it bigger, or make set AutoSize = true (and place it within a container which has enough space, obviously).
Here's an example which works fine for me:
using System;
using System.Drawing;
using System.Windows.Forms;
public class Test
{
static void Main()
{
Form form = new Form {
Controls = {
new Button {
Text = "Click Me!",
AutoSize = true,
Location = new Point(10, 30)
},
}
};
Application.Run(form);
}
}
(Admittedly this sample works even with AutoSize = false, so I suspect you've hard-coded the size somewhere... or your font is bigger. With longer text, it only works with AutoSize = true or a manually specified size.)
Button's too small. Make it slightly bigger. You can (but shouldn't) but as much text as you want on a button, including whole sections of HitchHiker's Guide to the Galaxy. (was testing to see if there was a limit)
Check the width of the button.
Related
I have a scrollabillity issue in a Form, layered out by BoxLayout.y().
The form contains many Tabs (with fixed size), each tab of the Tabs can contain an image or a video (the video is inside a BorderLayout to scale it at the tab size).
If an image is shown, the scrolling up and down works correctly.
If a video is shown, the y scrolling is not possibile, I can only swipe to change the tab.
I suppose that the cause of this issue is that videos are native component (I used the Codename One API to show the videos).
How can I solve or workaround this issue? This is crucial for the app design. Thanks for the tips.
The video.setEnabled(false) workaround (Make videos scrollable) doesn't work.
I workaround in a different way, inserting the MediaPlayer container in a LayeredLayout container, and then placing a Button over the MediaPlayer. A generic empty Label doesn't work, but an empty Button works. Of course I have to override calcPreferredSize to make the MediaPlayer and the Button of the same size (or use a different approach to make them of the same size).
This allows scrolling, but prevents the tapping of the play and pause Buttons (that are over the video). I solved also this issue.
In short, this is my solution, tested on Simulator, Android and iOS (in the following code, note that videoBtnsCnt is a Container over the video, in which I inserted play and pause Buttons):
MediaPlayer mediaPlayer = new MediaPlayer(video) {
#Override
public Dimension getPreferredSize() {
return new Dimension(size, size);
}
};
Container mediaPlayerCnt = new Container(new LayeredLayout(), "NoMarginNoPadding") {
#Override
public Dimension getPreferredSize() {
return new Dimension(size, size);
}
};
mediaPlayerCnt.add(mediaPlayer);
Button allowScrollingLabel = new Button() {
#Override
public Dimension getPreferredSize() {
return new Dimension(size, size);
}
};
allowScrollingLabel.setUIID("NoMarginNoPadding");
allowScrollingLabel.addActionListener(l -> {
Component responder = videoBtnsCnt.getResponderAt(l.getX(), l.getY());
if (responder instanceof Button) {
// it can be a play button or a pause button
((Button) responder).pressed();
((Button) responder).released();
}
});
mediaPlayerCnt.add(allowScrollingLabel);
Whenever I enable the autosize mode on my components, the label text dissapears
final CheckBox checkBox = new CheckBox();
checkBox.setText(text);
//checkBox.setAutoSizeMode(true);
m_content.add(m_textModeLayout.createConstraint(), checkBox);
final PickerComponent pickerComponent = PickerComponent.createStrings(opciones);
final Label labelForComponent = pickerComponent.getEditor().getLabelForComponent();
labelForComponent.setText(text);
//labelForComponent.setAutoSizeMode(true);
pickerComponent.onTopMode(true);
final TextComponent textComponent = new TextComponent();
final Label labelForComponent = textComponent.getEditor().getLabelForComponent();
textComponent.labelAndHint(text);
labelForComponent.setText(text);
//labelForComponent.setAutoSizeMode(true);
textComponent.onTopMode(true);
The problem I´m facing is that some of the texts are really big and I need a way for those to be displayed.
Thanks!
Autosize mode won't work here due to the unique layout constraint which prevents us from knowing the available size beforehand. It will only work in a deterministic layout.
I would suggest rethinking your design and using a SpanLabel below the text component to represent the additional details. That way the text won't shrink "too much".
An alternative would be setting the label size of the text to a specific smaller size but that might make the text unreadable to some users and make things worse as a result.
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.
In my app, I can't figure out how to properly style the toolbar with my logo image.
What I want to make it look like is pretty much like the Toolbar from the "Sport1" App.
Example
So I need the back Command on the left side of the toolbar, my logo in the middle from a MultiImage out of the resource and on the right another command.
Also, I'd like to let the Toolbar get smaller with scrolling.
What I have tried so far:
res_theme = r;
Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
logo = res_theme.getImage("Logo_Gema_vertikal.png");
f.getToolbar().getTitleComponent().setUIID("toolbar_image");
Style stitle = f.getToolbar().getStyle();
stitle.setBgTransparency(0);
stitle.setBgImage(logo);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(5);
So, this looks good the way it is. I dont actually need a Title, thats why I do
Form f = (" ", ...);
If I don't add a title to the form, the toolbar gets very small and squeezes the background Image from the toolbar. The centered logo from the toolbar is just for styling reasons there, it does not need to have a command. Is there a way to leave out the Title? I now have set it to completely transparent, but for me this is just a work-around.
Also, I guess rather than setting the logo as background with a centered alignment, I think it would be better to add it to the title section as Image, but I don't know if this is better or how to do it.
Now, I also want to make the Toolbar get smaller when scrolling down. I found kind of a example code in the Codename One Toolbar Documentation, but it does not work out for me, since the background Image gets removed.
This was the code for the scrolling Animation:
ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
f.getAnimationManager().onTitleScrollAnimation(title);
In the example, it worked. With my toolbar it does not, I have no clue why. I also can't see, where the size of the "after scrolling toolbar" is set.
Can I add there an Image as well? Kinda like one toolbar before scrolling with my logo, then while scrolling it transforms into a smaller one with only a textlogo image?
Here is my whole code what I have tried to make it work:
Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
logo = res_theme.getImage("Logo_Gema_vertikal.png");
f.getToolbar().getTitleComponent().setUIID("toolbar_image");
Style stitle = f.getToolbar().getStyle();
stitle.setBgTransparency(0);
stitle.setBgImage(logo);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(5);
f.add(new SpanLabel("asdasdasdasd");
ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
f.getAnimationManager().onTitleScrollAnimation(title);
f.show();
From the example above if looks like you just want to use the image as the title instead of styling the toolbar with a background image.
Just use ((Label)toolbar.getTitleComponent()).setIcon(myImage);.
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