Yes it is a separate class that extends Form.
Now I see that your code works, but only when a TL is added to the form.
Indeed I cannot have a text area at the top, and then the TL. This is
somewhat acceptable for my app, or I can use the 70/30 layout with BL. I
have to present the instructions elsewhere.
So I think TL does not work with Containers, it just works with Forms. I do
not know if it is by design.
I tried also to add a Form to the Form, so the TL is in a Form that is in a
Form, but the result is the same of BC not spread vertically.
I do not know if this trick could work with different constraints that you
can devise and provide a workaround.
Thanks
Il giorno mercoledì 26 agosto 2020 alle 08:54:39 UTC+2 Shai Almog ha
scritto:
> Is this a subclass of form?
> Actually my code was wrong. You should do:
>
>
> add(tl.cc().hp(100).wp(50), textAreaLeft);
> add(tl.cc().hp(100).wp(50), textAreaRight);
>
>
> On Tuesday, August 25, 2020 at 11:51:55 AM UTC+3 P5music wrote:
>
>> 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/75e90878-54e1-4914-a351-3ca42bdb8846n%40googlegroups.com.
