Fork us on GitHub

MSUIKit Template Inspired Changes

The recent work we did on this template showed us some places that need improvement
Post Image

MSUIKit Template Inspired Changes

There was much left unsaid about the template UI that I did earlier in the week. It was doable & reasonably easy but I still had some pitfalls. I was able to circumvent them easily but I’m not so sure these would have been easy for other developers out there. As a result we decided to simplify some use cases in Codename One as a result.

I chose to separate these to a different post as most of the subjects here will be resolved in the next update, but the template post would probably still be useful when this post becomes history…​

Side Menu Opening

The designs to the template UI placed the menu button at the top, we have a special case to allow that but that special case doesn’t deal with the settings placement at the top too. The solution I took was to define the theme constant hideLeftSideMenuBool=true which hides the sidemenu button. I then added my own button with the menu button icon as such:

Button menuButton = new Button("");
menuButton.setUIID("Title");
FontImage.setMaterialIcon(menuButton, FontImage.MATERIAL_MENU);
menuButton.addActionListener(e -> ((SideMenuBar)getToolbar().getMenuBar()).openMenu(null));

Most of that is pretty standard and easy except of the downcast to the SideMenuBar class. So we’ve added a method to Toolbar named openSideMenu which would make this far more reasonable:

menuButton.addActionListener(e -> getToolbar().openSideMenu());

Status Bar Control

Another difficulty is in the level of control over the status bar in iOS. iOS apps space their top portion to leave room for the status bar. You can customize that UIID but that means customizing it for all the forms which might not be what I want…​

So we’ve decided to add two methods to Form:

protected boolean shouldPaintStatusBar();
protected Component createStatusBar();

These should allow you to override whether the status bar is even shown on a per form basis and also manipulate it as needed during the creation phase.

The StatusBarSideMenu UIID lets you disable the status bar in the side menu only. You can just define its padding to 0 to remove the status bar from the sidemenu UI

Same Size

It’s very common to want two components to occupy the same size. We often want that to align components so we have the methods:

Component.setSameHeight(Component... cmps);
Component.setSameWidth(Component... cmps);

These create a special case where the components in cmps return the same preferred width/height as the largest component in the group. Thus they all appear to have the same width or height.

The use case of layout is great but I found myself using these methods like this:

Component.setSameHeight(notesLabel, notesPlaceholder);
Component.setSameWidth(notesLabel, notesPlaceholder);

To allow a component and its placeholder to have the same size before I use Container.replace to fade in the component. So I added:

Component.setSameSize(Component... cmps);

Which saves writing the same line twice…​

Now you might be thinking, why not use notesPlaceholder.setPreferredSize(notesLabel.getPreferredSize()).

This is how we used to do things and it does work well for simple cases like this. But what if I want to replace an entry not with a placeholder but rather with an entry that might be bigger on an axis?

In that case I’ll need to check which component is bigger in each axis and apply the right dimension which isn’t a problem with the original code.

I ignored the fact that setPreferredSize is deprecated because I don’t think that should be the reason
Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.