Master/detail (activity/fragment) layout, porting from Android to Codename One

Question

I am porting my Android app to Codename One project, my immediate goal is to create an iOS version.

My app has a master/detail structure and has different layout when used on phones or tablets.

Indeed when the app runs on a tablet in landscape mode, it is possible to edit an element of the list with a fragment on the right, that is, the activity list is on the left while the editing happens on the right in the fragment.

When the app is in portrait mode, both on tablets and phones, the list is displayed.

On phones the editing happens in a separate activity, but the fragment is the same, just its layout is large as the activity's one.

I was suggested to have a look at the KitchenSink example. I see that its structure is master/detail but the layout is the same in both landscape and portrait mode, that is the list on the left and the "fragment" are both visible in both orientations.

I think it is not difficult to reproduce my app layout by customizing the KitchenSink layout and setting the size of the list and of the editing pane programmatically, according to the orientation and the control flow.

Is it the right path to follow or there is something similar to Android activity/fragment code that has to be followed?

Answer 1

Codename One doesn't have an explicit master-detail abstraction since it doesn't really need it as much.

Kitchen sink is a bit simplistic and makes only the menu a part of the master detail. In your case you would just use a couple of Containers to represent the master and the detail. You can think of those as fragments but really they're just view groups in android terminology.

Here you can rely on code in the kitchen sink to implement this behavior for the form. When the form loads just write the logic you described similarly to the kitchen sink e.g.:

// I assume form has a BorderLayout and we have a static import of CN.*
if(isTablet() && !isPortrait()) {
   form.add(WEST, master);
   form.add(CENTER, detail);
} else {
   form.add(CENTER, master);
}

form.addOrientationListener(e -> {
   detail.remove();
   master.remove();
   findCommandComponent(
   if(isPortrait()) {
       form.add(CENTER, master);         
   } else {
       form.add(CENTER, detail);
       form.add(WEST, master);
   }
   form.getContentPane().animateLayout(150);
});

There's some logic here I removed e.g. for event handling/navigation but the gist of it is similar.

Also see related discussions here: How to structure the CN1 code for a tablet form layout?