As I said, my layout needs a TableLayout with 1 row and 2 columns (not 2
rows and 1 column), so I changed your code:
BrowserComponent textAreaLeft=new BrowserComponent();
textAreaLeft.setPage("<HTML><BODY><DIV
style='overflow:scroll;white-space:nowrap;'>MULTILINE TEXT</BR>MULTILINE
TEXT</BR>MULTILINE TEXT</BR>MULTILINE TEXT</BR>MULTILINE TEXT</BR>MULTILINE
TEXT</BR>MULTILINE TEXT</BR>MULTILINE TEXT</BR></DIV><BODY></HTML>","");
BrowserComponent textAreaRight=new BrowserComponent();
textAreaRight.setPage("<HTML><BODY><DIV
style='overflow:scroll;white-space:nowrap;'>MULTILINE TEXT</BR>MULTILINE
TEXT</BR>MULTILINE TEXT</BR>MULTILINE TEXT</BR>MULTILINE TEXT</BR>MULTILINE
TEXT</BR>MULTILINE TEXT</BR>MULTILINE TEXT</BR></DIV><BODY></HTML>","");
TableLayout tl = new TableLayout(1, 2);
setLayout(tl);
setScrollable(false);
add(tl.cc().hp(50), textAreaLeft);
add(tl.cc().hp(50), textAreaRight);
and you can see the result in the attached image, where two vertical BCs
are one beside the other horizontally, but they are both in the left area
of the screen, while I want that they occupy half screen each horizontally.
Note that they are vertically spread as I need.
Clearly hp(50) has to be changed to wp(50), so I try it:
TableLayout tl = new TableLayout(1, 2);
setLayout(tl);
setScrollable(false);
add(tl.cc().wp(50), textAreaLeft);
add(tl.cc().wp(50), textAreaRight);
and the result is what you can see in the other image, where two BCs share
50/50 the screen horizontally but they are not spread vertically.
So the problem is that the BC do not spread vertically when in a TL with 1
row and 2 columns and wp=50
Thanks
Il giorno martedì 25 agosto 2020 alle 05:46:53 UTC+2 Shai Almog ha scritto:
> TableLayout tl = TableLayout(2, 1);
> myForm.setLayout(tl);
> myForm.setScrollable(false);
> myForm.add(tl.cc().hp(50), bc1);
> myForm.add(tl.cc().hp(50), bc2);
> On Monday, August 24, 2020 at 12:54:50 PM UTC+3 P5music wrote:
>
>> I will have a look at the Component Inspector.
>> But you seem very confident about the TL-BC behaviour, so I think it's me
>> that cannot guess the right constraint to the TL.
>> Please give me two lines of code where you create a working 50/50 TL
>> layour with two BCs that expand vertically.
>> 1 row and 2 columns, each BC has to take all the available vertical space.
>> Thanks in advance
>>
>>
>> Il giorno lunedì 24 agosto 2020 alle 03:53:38 UTC+2 Shai Almog ha scritto:
>>
>>> You need to use Component inspector to look at hierarchies, it shows the
>>> layout and would have made this easier to spot.
>>> You shouldn't use non-center border layout for browser component.
>>>
>>> If you place TableLayout on the form itself. Disable scrolling and add
>>> both rows with height set to 50 (and no other constraints) you'd get a
>>> perfectly split 50/50 layout.
>>>
>>> On Sunday, August 23, 2020 at 1:27:04 PM UTC+3 P5music wrote:
>>>
>>>> I realized that the default form layout is FlowLayout and not
>>>> BorderLayout (I do not where I read that) so it is not a bug, although I
>>>> would expect an error or warning when using BorderLayout constraints in
>>>> the
>>>> add() call.
>>>> Said that it is not possible to use a TableLayout to split the screen
>>>> 50/50 with two BrowserComponents, whatever I try. I do not know if that's
>>>> a
>>>> bug.
>>>> I only succeded in creating a similar layout just adding the BC CENTER
>>>> and WEST, but they are not 50/50, one is smaller.
>>>> Take into account that in the two BCs there is multiline text with
>>>> overflow:scroll and white-spaces:nowrap so you just imagine that
>>>> scrollbars
>>>> allow to see what's not visible horizontally for example, so,the BCs have
>>>> taken all available space and share it with some ratio like 70/30.
>>>> Is there any constraint to correct this?
>>>>
>>>> Il giorno domenica 23 agosto 2020 alle 04:54:01 UTC+2 Shai Almog ha
>>>> scritto:
>>>>
>>>>> You can't rely on that. The layout code is very cross platform since
>>>>> it's 100% Java. The things that behave differently are native e.g. the
>>>>> browser.
>>>>> In this case I'm pretty sure the layout will misbehave. You need to
>>>>> create 100% deterministic layout with no scrolling for the browser
>>>>> component. That means the layout manager will know the size and won't
>>>>> need
>>>>> the value of getPreferredSize().
>>>>>
>>>>> On Saturday, August 22, 2020 at 11:10:27 AM UTC+3 P5music wrote:
>>>>>
>>>>>> If the BrowserComponent itself (rendering, updating, Javascript)
>>>>>> would not have issues on the real iOS app (native build) like they exist
>>>>>> on
>>>>>> the simulator, I wonder whether also these layout issues are
>>>>>> automatically
>>>>>> happening on the real iOS app.
>>>>>> Unfortunately iOS builds are "costly" in terms of credits, I cannot
>>>>>> use them to test the layout and the BrowserComponent. Furthermore Chrome
>>>>>> mirroring for debugging does not work, I see a blank screen.
>>>>>>
>>>>>> Il giorno sabato 22 agosto 2020 alle 07:16:42 UTC+2 Shai Almog ha
>>>>>> scritto:
>>>>>>
>>>>>>> You don't need the border layout. This is only a tip for the simple
>>>>>>> usage in a form.
>>>>>>> Using the same strings make it hard for me to read the code and
>>>>>>> screenshot without trying it.
>>>>>>>
>>>>>>> If you think there's a bug you can file an issue. Unfortunately you
>>>>>>> probably understand we have a deep issue pipeline and it takes us a
>>>>>>> long
>>>>>>> while to evaluate everything.
>>>>>>>
>>>>>>> On Friday, August 21, 2020 at 11:23:10 AM UTC+3 P5music wrote:
>>>>>>>
>>>>>>>> I use BL surrounding a BC because I think I have understood that it
>>>>>>>> "encourages" the BC to spread. And other BLs are surrounding.
>>>>>>>> It is a trial/error method but now I am stuck.
>>>>>>>> I wanted to show you a possible issue: indeed the layout is
>>>>>>>> inverted, what is CENTER is at the top and what is NORTH is at the
>>>>>>>> bottom.
>>>>>>>> This could be of interest in general if a bug is discovered.
>>>>>>>> Back to my layout, text is not important, the BC do not spread,
>>>>>>>> this is the problem. If you will test the code, you can also remove
>>>>>>>> something redundant, or tweak it, so I have the solution, otherwise it
>>>>>>>> is a
>>>>>>>> bug, this is of interest for you anyway, I think, solving this would
>>>>>>>> shed
>>>>>>>> light on the subject..
>>>>>>>> Thanks in advance
>>>>>>>>
>>>>>>>> Il giorno venerdì 21 agosto 2020 alle 06:44:38 UTC+2 Shai Almog ha
>>>>>>>> scritto:
>>>>>>>>
>>>>>>>>> You can nest a border layout in a table cell although I'm not sure
>>>>>>>>> what the benefit would be but this is OK.
>>>>>>>>>
>>>>>>>>> You lost me a bit with all the level of nesting all over the
>>>>>>>>> place, reading the code I have no idea how it should look by now and
>>>>>>>>> since
>>>>>>>>> everything is conveniently named "Multiline text" my brain is stack
>>>>>>>>> overflowing..
>>>>>>>>>
>>>>>>>>> I suggest opening this in Component Inspector and looking at the
>>>>>>>>> sizes of each component in the hierarchy. Where they were placed and
>>>>>>>>> why.
>>>>>>>>> On Thursday, August 20, 2020 at 12:07:48 PM UTC+3 P5music wrote:
>>>>>>>>>
>>>>>>>>>> You have to see the attached image, that corresponds to the code
>>>>>>>>>> below: you can see an inverted layout, indeed the instructions text
>>>>>>>>>> is at
>>>>>>>>>> the bottom, while it is added NORTH to the form. And what you see at
>>>>>>>>>> the
>>>>>>>>>> top is added CENTER. I was trying some changes and stumbled into
>>>>>>>>>> this. Am I
>>>>>>>>>> wrong? Is this an issue?
>>>>>>>>>>
>>>>>>>>>> As to my real code, I am not using CENTER constraint in the TL.
>>>>>>>>>> Just each cell is a BL container with the BC inside, I used this
>>>>>>>>>> scheme for
>>>>>>>>>> another layout and it worked.
>>>>>>>>>> If you mean that the TL should not be CENTER in a BL, also if I
>>>>>>>>>> put it in a BoxLayout.y the layout does not work.
>>>>>>>>>> 100% height is not harmful I think because there is just one row,
>>>>>>>>>> however I removed it.
>>>>>>>>>> the form was set not scrollable.
>>>>>>>>>> But still the BC do not take the space.
>>>>>>>>>>
>>>>>>>>>> Here's the code that I talked about. If I am not wrong this could
>>>>>>>>>> be an issue.
>>>>>>>>>> Anyway can you suggest some tweaks using it as a starting point,
>>>>>>>>>> said that the intended layout is that the two BCs are at the bottom
>>>>>>>>>> and
>>>>>>>>>> they are expanded to show full text?
>>>>>>>>>> Thanks in advance
>>>>>>>>>>
>>>>>>>>>> private void createForm()
>>>>>>>>>> {
>>>>>>>>>> Command backCommand=new Command("Back") {
>>>>>>>>>> @Override
>>>>>>>>>> public void actionPerformed(ActionEvent evt) {
>>>>>>>>>> parentForm.showBack();
>>>>>>>>>> }
>>>>>>>>>> };
>>>>>>>>>>
>>>>>>>>>> this.setScrollable(false);
>>>>>>>>>> getToolbar().setBackCommand(backCommand);
>>>>>>>>>>
>>>>>>>>>> setTitle(formTitle);
>>>>>>>>>> Container mainContainer=new Container();
>>>>>>>>>>
>>>>>>>>>> mainContainer.setLayout(BoxLayout.y());
>>>>>>>>>>
>>>>>>>>>> TableLayout tl=new TableLayout(1,2);
>>>>>>>>>> Container tableContainer=new Container();
>>>>>>>>>> tableContainer.setLayout(tl);
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Container centerContainerLeft=new Container(new
>>>>>>>>>> BorderLayout());
>>>>>>>>>> Container centerContainerRight=new Container(new
>>>>>>>>>> BorderLayout());
>>>>>>>>>>
>>>>>>>>>> SpanLabel textArea=new SpanLabel();
>>>>>>>>>>
>>>>>>>>>> textArea.setText("Multiline text\nMultiline
>>>>>>>>>> text\nMultiline text\nMultiline text\n");
>>>>>>>>>> add(BorderLayout.NORTH,textArea);
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> BrowserComponent textAreaLeft=new BrowserComponent();
>>>>>>>>>>
>>>>>>>>>> textAreaLeft.setPage("<HTML><BODY><DIV
>>>>>>>>>> style='overflow-x:scroll;'>"+"Multiline Text</BR>Multiline
>>>>>>>>>> Text</BR>Multiline Text</BR>Multiline
>>>>>>>>>> Text</BR></DIV><BODY></HTML>","");
>>>>>>>>>> centerContainerLeft.add(BorderLayout.CENTER,textAreaLeft);
>>>>>>>>>>
>>>>>>>>>> BrowserComponent textAreaRight=new BrowserComponent();
>>>>>>>>>>
>>>>>>>>>> textAreaRight.setPage("<HTML><BODY><DIV
>>>>>>>>>> style='overflow-x:scroll;'>"+"Multiline Text</BR>Multiline
>>>>>>>>>> Text</BR>Multiline Text</BR>Multiline
>>>>>>>>>> Text</BR></DIV><BODY></HTML>","");
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> centerContainerRight.add(BorderLayout.CENTER,textAreaRight);
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> tableContainer.add(tl.createConstraint().widthPercentage(50),centerContainerLeft).
>>>>>>>>>>
>>>>>>>>>> add(tl.createConstraint().widthPercentage(50),centerContainerRight);
>>>>>>>>>> mainContainer.add(tableContainer);
>>>>>>>>>> add(BorderLayout.CENTER,mainContainer); //same if I add tl
>>>>>>>>>> directly
>>>>>>>>>> }
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Il giorno giovedì 20 agosto 2020 alle 03:44:47 UTC+2 Shai Almog
>>>>>>>>>> ha scritto:
>>>>>>>>>>
>>>>>>>>>>> Don't use center constraint in the table layout. It will break
>>>>>>>>>>> everything. Leave it as the default.
>>>>>>>>>>> Height should never be 100 as all the heights together should
>>>>>>>>>>> come up to 100 (it's in percent).
>>>>>>>>>>> Don't use span, it makes column calculation hard and spanning
>>>>>>>>>>> 2000 columns is probably not what you're trying to do.
>>>>>>>>>>>
>>>>>>>>>>> Also make sure you invoked form.setScrollable(false).
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
--
You received this message because you are subscribed to the Google Groups
"CodenameOne Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/codenameone-discussions/6f08ec88-122d-45e2-a42a-387042b69f01n%40googlegroups.com.
