multibutton width

17 views
Skip to first unread message

howud...@gmail.com

unread,
Oct 2, 2016, 11:00:22 PM10/2/16
to CodenameOne Discussions
I have a list of multibuttons that I add to a container and then I put that container into a form with BorderLayout.EAST.  The container's width is getting sized to the longest label in the list of MultiButtons.  I'd rather the list be 25% of the display width (which I set with setPreferredSize()) and the textLine1 use ellipses.  How can I go about doing this?

Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
cnt.setScrollableY(true);
cnt.setPreferredSize(new Dimension((int)(Display.getInstance().getDisplayWidth()*.25), 1));
if (mapCurrentHomes.size() == 0)
cnt.add(new Label("No homes in range"));
for (dbHome h : mapCurrentHomes.values()) {
       MultiButton mb = new MultiButton(h.getName());
       mb.setHorizontalLayout(false);
       mb.setTextLine2(h.getContact(1));
       mb.setTextLine3(h.getPhone());
                                    mb.addActionListener(ev -> onClickList(h.getId()));
       cnt.add(mb);
}
this.add(BorderLayout.EAST, cnt);



Shai Almog

unread,
Oct 2, 2016, 11:27:10 PM10/2/16
to CodenameOne Discussions, howud...@gmail.com
I would avoid setPreferredSize in general especially since 25% might vary based on device orientation etc.

I would also avoid the border layout as it doesn't work well in such use cases.

A 2 column table layout with 25 width and 75 width and 100 height for both should work for this case.

howud...@gmail.com

unread,
Oct 3, 2016, 10:54:09 AM10/3/16
to CodenameOne Discussions, howud...@gmail.com
The table approach is what I use in other parts of the app and works well, however there is another aspect of this particular form.  Let me describe the form completely
TitleBar has 3 buttons, on of which is "Show List"
BorderLayout.CENTER is MapContainer
BorderLayout.WEST is properties panel
BorderLayout.EAST is container with list of multi buttons
(BTW, it is slightly different in portrait...i use BorderLayout.SOUTH for the list of multi buttons) 

The map will have N number of markers based upon a user query.  Normally the map is 100% of the screen.  If the user so desires, they tap on the "show list" command which will make the list visible so they can quickly see brief information.  Tapping on a marker brings up the properties for that particular item.  If the properties panel is already visible it just fills the fields, otherwise it creates one.  Tapping on the X in the properties panel hides it.  The map and list  and properties panel must all remain functional while one or all of the panels are visible.

So with that information, is it possible to add / remove panels from a tablelayout based upon user interaction?  If so how?  Do I need to save the component, or can I retrieve it like with BorderLayout?  

Peter

howud...@gmail.com

unread,
Oct 3, 2016, 11:59:06 AM10/3/16
to CodenameOne Discussions, howud...@gmail.com
ok, I was able to get it really close but creating my own Multibutton and then overriding calcPreferredSize() for the container.  (it worked using setPreferredSize() on the container, but of course there's that deprecated warning).  I dont get the ellipses though

        Container cnt = new Container(layout) {
            @Override
        protected Dimension calcPreferredSize() {
            return new Dimension( (int)(Display.getInstance().getDisplayWidth()*.2), 75);
            }
        };

Shai Almog

unread,
Oct 3, 2016, 10:57:44 PM10/3/16
to CodenameOne Discussions, howud...@gmail.com
TableLayout is flaky when you try to modify it since it manages a bit of internal state. A simpler solution is to rebuild it based on your needs by removing all components and re-adding them, users will be unaware of this as it's not user visible.
Reply all
Reply to author
Forward
0 new messages