If I do that :
Label lbl = new Label("My Label");
Form f = new Form("Test");
BorderLayout bl = new BorderLayout();
f.setLayout(bl);
f.add(BorderLayout.CENTER, lbl);
f.show();
Label lbl is well centered in my form (horizontally and vertically).
If you replace lbl instance with SpanLabel, it's not centered at all.
Is it normal ? If so, how to centered it ?
Thanks!
Multiline text needs to behave differently from single line text as it's non-deterministic. It calculates its size based on columns and not the real content.
I wrote about the challenges of this a while back here: https://www.codenameone.com/blog/the-challenge-of-multiline-strings.html
Related
When I use horizontalSpan image does not show, however when I use widthPercentage the image perfect shows up.
How can I span the ScaleImageLabel?
My code:
TableLayout tm=new TableLayout(4,6);
tm.setGrowHorizontally(true);
Container con=new Container(tm);
con.setScrollableY(true);
hi.add(BorderLayout.CENTER,con);
TableLayout.Constraint cs;
Image icon=profilbillede.scaled(800, -1);
ScaleImageLabel lb=new ScaleImageLabel(icon);
lb.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT);
con.add(tm.createConstraint().horizontalSpan(2),lb);
The code below works because I removed the span. A table needs to calculate column widths automatically unless you explicitly tell it the with of the column.
When you use span we don't know if the width applies to the 1st or 2nd column so it's ignored with the assumption that you have a reason for spanning and not using one column. In that case you would define the width in a different cell either via preferred size or via the width element.
As a side note there is no need to scale the image before adding it to the ScaledLabel you would be doing double the scaling which degrades the appearance of the image.
Form hi = new Form("Table", new BorderLayout());
TableLayout tm=new TableLayout(4,6);
tm.setGrowHorizontally(true);
Container con=new Container(tm);
con.setScrollableY(true);
hi.add(BorderLayout.CENTER,con);
TableLayout.Constraint cs;
Image icon=duke.scaled(800, -1);
ScaleImageLabel lb=new ScaleImageLabel(icon);
lb.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT);
con.add(tm.createConstraint(),lb);
hi.show();
Still on my sidemenu from there, I've resolve the non broking text with a custom function that modify the text.
Now I'm stuck with the width of the component. I've change it from a SpanLabel to a TextArea in order to have more control on it's behaviour, but here is my problem: the TextArea width is too large as shown on the screenshot (put a ContentContainer UIID on to see the space occupied by the TextArea).
As you can see, the first component has a too large TextArea. I've set the column count of the TextArea to the length of the firstRow + 1, but it doesn't seem to take it in account.
The component is BorderLayout with a non grow center ScaleImageLabel and the TextArea on south. Is it a way to have a better width for the TextArea ? I would have it aligned with the image and with the area wrapped close to the text, but I really don't know how to achieve this...
Thanks in advance !
My suggestion is to use GridLayout for equal sizes or TableLayout with constraints for varying sizes for left and right components. It will prevent the TextArea from growing beyond a limit.
An example will be:
//GridLayout
Container cont = GridLayout.encloseIn(4, cmpL1, cmpR1, cmpL2, cmpR2)
//OR
//TableLayout with Constraint
TableLayout tl = new TableLayout(2, 2);
Container cont = new Container(tl);
cont.add(tl.createConstraint().widthPercentage(50), cmpL1);
cont.add(tl.createConstraint().widthPercentage(50), cmpR1);
cont.add(cmpL2);
cont.add(cmpR2);
I have a label with some text and I want to have a few words in that text be a clickable HTML link. Is there any way to do this?
If not in a Label, is there a way to use the void paint(Graphics g) function to do this with raw drawing?
While I'm not certain, I don't think that can be done. However, I think this solution should do what you need:
See answer here: Clickable link in a label for codename one?
Use flow layout e.g.:
Form hi = new Form("Richtext", BoxLayout.y());
Button clickable = new Button("link", "Label");
clickable.getAllStyles().setTextDecoration(Style.TEXT_DECORATION_UNDERLINE);
hi.add(FlowLayout.encloseMiddle(new Label("This"), new Label("is"), new Label("a"), clickable, new Label("to"), new Label("click")));
clickable.addActionListener(e -> ToastBar.showMessage("Click", FontImage.MATERIAL_INFO));
hi.show();
I have a written a custom toolbar. And I am having tough time to make it work (design wise). I have a couple of questions regarding it.
1)The main issue I am facing is to place the menu icons in their exact positions. When I tested it in different devices the gaps betn them is different.I have used table layout and grid layout for the menu icons as well & the logo in layered layout but the result is not good.
Code:
void addTitle(Form form, Resources theme) {
Toolbar toolbar = new Toolbar();
form.setToolbar(toolbar);
Container containerTitle = new Container(new BorderLayout());
Image titleImage = theme.getImage("toolbar_bg.jpg");
containerTitle.getAllStyles().setBgImage(titleImage);
containerTitle.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_TILE_HORIZONTAL);
containerTitle.setPreferredH(titleImage.getHeight());
ScaleImageButton ruslanLogo = new ScaleImageButton();
toolbar.setTitleComponent(LayeredLayout.encloseIn(containerTitle,
FlowLayout.encloseCenter(ruslanLogo)));
Image ruslanLogoImage = theme.getImage("ruslanLogo.png").scaledWidth(toolbar.getPreferredH() - 180);
ruslanLogo.setIcon(ruslanLogoImage);
Image emergencyImage = theme.getImage("emergency.png");
Image receipeImage = theme.getImage("receipe.png");
Image fmImage = theme.getImage("fm.png");
Image gameImage = theme.getImage("game.png");
TableLayout tableLayout = new TableLayout(1, 5);
//GridLayout gridLayout = new GridLayout(5);
Container tableContainer = new Container(tableLayout);
Button emergencyButton = getButton(emergencyImage);
emergencyButton.getAllStyles().setAlignment(Label.CENTER);
Button fmButton = getButton(fmImage);
fmButton.getAllStyles().setAlignment(Label.CENTER);
Button gameButton = getButton(gameImage);
gameButton.getAllStyles().setAlignment(Label.CENTER);
Button receipeButton = getButton(receipeImage);
receipeButton.getAllStyles().setAlignment(Label.CENTER);
Button transparentButton = getButton(receipeImage);
transparentButton.getAllStyles().setAlignment(Label.CENTER);
transparentButton.setVisible(false);
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(emergencyButton));
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(fmButton));
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(transparentButton));
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(gameButton));
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(receipeButton));
containerTitle.addComponent(BorderLayout.SOUTH, tableContainer);
toolbar.revalidate();
}
2)I have checked the width and preferred width, they differs. Does it affects the design?
int width = emergencyButton.getWidth(); //60
int preferredwidth = emergencyButton.getPreferredW(); //74
3)In above code, I used the bg image height to set the height of the toolbar. "containerTitle.setPreferredH(titleImage.getHeight());" Is it the good way to set height? Because the height changes slightly in android mobiles I have tested, however it looks horribly big in tabs, and I tested it in different simulator, the height differs greatly. How have you set the toolbar height in normal toolbar?
Image titleImage = theme.getImage("toolbar_bg.jpg");
containerTitle.getAllStyles().setBgImage(titleImage);
containerTitle.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_TILE_HORIZONTAL);
containerTitle.setPreferredH(titleImage.getHeight());
ScaleImageButton ruslanLogo = new ScaleImageButton();
toolbar.setTitleComponent(LayeredLayout.encloseIn(containerTitle,
FlowLayout.encloseCenter(ruslanLogo)));
4)How can I set the width of icon?
Image emergencyImage = theme.getImage("emergency.png");
Button emergencyButton = getButton(emergencyImage);
if I just do this, some devices the icon is too big.If I scale it eg: emergencyImage.scaledWidth(screenwidth/8) , the image quality is bad.If I set preferredW like emergencyButton.setPreferredW(100), the img width varies vastly in different devices. PS the images in the theme are saved as multiImage
Setting the preferred width/height is problematic as it implies the inverse dimension and might have quite a few implications. I noticed you used:
Image ruslanLogoImage = theme.getImage("ruslanLogo.png").scaledWidth(toolbar.getPreferredH() - 180);
Which sets the width based on the preferred height instead of the width/5 or something like that. It also sets the value based on preferred height before the toolbar construction is done so things will behave differently.
Preferred width includes padding which might affect your design. I would suggest creating a center aligned 0 padding/margin UIID in the designer and setting it to all of your components to eliminate padding/margin differences and shorten your code.
I am new for Codenameone Is there any option to align a label depends on another label like align bottom, top, right and left option?
How to align many labels at the centre of the parent layout?
Here I have attached the code I tried for:
Container center = new Container(new BorderLayout());
Label des = new Label((String) data.get("title"));
des.setUIID("MultiLine2");
center.addComponent(BorderLayout.NORTH,des);
Label author = new Label((String) data.get("author"));
author.setUIID("MultiLine2");
center.addComponent(BorderLayout.SOUTH,author);
cnt.addComponent(BorderLayout.CENTER, center);
I am getting outpul like the below image
Here I have attached what I need for my project
Can anyone please help me How should I do to get my requirement?
This will place the Labels in the absolute center of the container:
Form hi = new Form("Hi World");
hi.setLayout(new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER_ABSOLUTE));
Container center = new Container(new BoxLayout(BoxLayout.Y_AXIS));
Label line1 = new Label("What are you doing");
Label line2 = new Label("Hello");
center.add(line1);
center.add(line2);
hi.addComponent(BorderLayout.CENTER, center);
hi.show();
To adjust the center to move slightly to the left you can add right padding to the center Container:
center.getAllStyles().setPadding(Component.RIGHT, 100);
These two approaches also serve to center labels inside a CN1 container:
Container container01 = FlowLayout.encloseCenterMiddle();
and
Container container02 = new Container(new GridLayout(2,1));
where the number 2 in GridLayout(2,1) refers to the number of labels you have for one column.